Monthly Archives: May 2010

code

Rotating content with JQuery, JTemplates & AJAX

Leave a comment

The following JavaScript is used here to rotate the featured product every 30 seconds. I will leave the implementation of the JSON-emitting REST api for another post.

<!--mce:0-->
<!--mce:1-->    
 
<!--mce:2-->
<div class="outerbox"></div>
<textarea> 
&lt;div class="outerbox"&gt;
&lt;div class="box featured"&gt;
&lt;h2 &gt;
                        Featured&lt;/h2&gt;
&lt;div class="item"&gt;
&lt;div class="bord-se"&gt;
&lt;div class="bord-ne"&gt;
&lt;div class="bord-s"&gt;
                                                &lt;a href="/store/Product.aspx?ProductId={$T.ProductId}&amp;utm_source=Homepage&amp;utm_medium=FeaturedProd&amp;utm_term=Widget&amp;utm_campaign=Featured_Widget" mce_href="/store/Product.aspx?ProductId={$T.ProductId}&amp;utm_source=Homepage&amp;utm_medium=FeaturedProd&amp;utm_term=Widget&amp;utm_campaign=Featured_Widget" id="A1"&gt;
                                                        &lt;img class="FeaturedProduct" src="{$T.ThumbnailUrl}" mce_src="{$T.ThumbnailUrl}" alt="featured" style="border-width:0px;" mce_style="border-width: 0px;" /&gt;
                                                &lt;/a&gt;
                                        &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h4&gt;
                        &lt;a href="/store/Product.aspx?ProductId={$T.ProductId}&amp;utm_source=Homepage&amp;utm_medium=FeaturedProd&amp;utm_term=Widget&amp;utm_campaign=Featured_Widget" mce_href="/store/Product.aspx?ProductId={$T.ProductId}&amp;utm_source=Homepage&amp;utm_medium=FeaturedProd&amp;utm_term=Widget&amp;utm_campaign=Featured_Widget"&gt;{$T.Name}&lt;/a&gt;&lt;/h4&gt;
 
                        &lt;span&gt;Author: &lt;/span&gt;
                        &lt;a href="/store/search.aspx?m={$T.AuthorId}" mce_href="/store/search.aspx?m={$T.AuthorId}"&gt;{$T.Author}&lt;/a&gt; 
                        &lt;span class="Price"&gt;
                                ${$T.Price}&lt;/span&gt; 
 
            {$T.Summary}                                
 
                        &lt;a class="more" href="/store/New-Products-C52.aspx" mce_href="/store/New-Products-C52.aspx"&gt;view all…&lt;/a&gt;
 
&lt;/div&gt;
&lt;/div&gt;
 
</textarea>