jQuery SlideShow of Reviews if Class Exists -
i have dynamically created reviews inside tables class 'helpfulreviews'. want take these tables , hide 1 of them , automatically slide next table after period of time using jquery
here 3 reviews, want 1 display , slide other after around 10 seconds, slide third review, rotate beginning. have simplified example:
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews"> <tbody> <tr> <td>my first review goes here<br>terrible product</td> </tr> </tbody> </table> <table width="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews"> <tbody> <tr> <td>my second review goes here<br>great product have here</td> </tr> </tbody> </table> <table width="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews"> <tbody> <tr> <td>my third review goes here<br>this awesome product</td> </tr> </tbody> </table> full code of 1 of tables:
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="helpfulreviews"> <tbody><tr> <td width="1%"> </td> <td width="99%"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="colors_descriptionbox"> <tbody><tr> <td width="1px" valign="top"><img src="/v/vspfiles/templates/90/images/rbox_border_left_top.gif"></td> <td width="100%" valign="top" background="/v/vspfiles/templates/90/images/dbox_border_top.gif"><img src="/v/vspfiles/templates/90/images/clear1x1.gif" width="1" height="1"></td> <td width="1px" valign="top"><img src="/v/vspfiles/templates/90/images/dbox_border_right_top.gif"></td> </tr> <tr> <td width="1px" background="/v/vspfiles/templates/90/images/dbox_border_left.gif"><img src="/v/vspfiles/templates/90/images/clear1x1.gif" width="1" height="1"></td> <td width="100%" valign="top"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tbody><tr> <td><b><img src="/v/vspfiles/templates/90/images/star5.gif"><br> great product</b> </td> <td align="right"><i>april 28, 2011</i></td> </tr> <tr> <td><i><span class="pagetext_l510n">reviewer</span>: <span class="pagetext_l512n">anonymous person</span> </i><br><br></td> <td align="right"> </td> </tr> </tbody></table> used product , great<br> <br> <span class="pagetext_l514n"><span id="helpful"></span></span> <a href="/reviewhelpful.asp?productcode=tru%2dgdm49&id=12&yes=yes"><img src="/v/vspfiles/templates/90/images/buttons/btn_reviews_yes.gif" align="absmiddle" border="0"></a> <a href="/reviewhelpful.asp?productcode=tru%2dgdm49&id=12&yes=no"><img src="/v/vspfiles/templates/90/images/buttons/btn_reviews_no.gif" align="absmiddle" border="0"></a> </td> <td width="1px" background="/v/vspfiles/templates/90/images/dbox_border_right.gif"><img src="/v/vspfiles/templates/90/images/clear1x1.gif" width="1" height="1"></td> </tr><tr> <td width="1px" valign="top"><img src="/v/vspfiles/templates/90/images/dbox_border_left_bottom.gif"></td> <td width="100%" valign="top" background="/v/vspfiles/templates/90/images/dbox_border_bottom.gif"><img src="/v/vspfiles/templates/90/images/clear1x1.gif" width="1" height="1"></td> <td width="1px" valign="top"><img src="/v/vspfiles/templates/90/images/dbox_border_right_bottom.gif"></td> </tr> </tbody></table> </td> </tr> </tbody></table>
sorry delay. here's working example. can tweak sizes , stuff fit purpose. idea wrap tables in container div overflow:hidden , offset them needed (i.e, first table positioned fill div, second has margin-left equal width of container, third's margin left twice width, etc.)
<style type="text/css"> .helpfulreviews { width:100%; height:100%; position:absolute; } </style> <div style="width:400px; height:50px; overflow:hidden; position:relative;" id="slidercontain"> <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews"> <tbody> <tr> <td>my first review goes here<br>terrible product</td> </tr> </tbody></table> <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews" > <tbody> <tr> <td>my second review goes here<br>great product have here</td> </tr> </tbody></table> <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews" > <tbody> <tr> <td>my third review goes here<br>this awesome product</td> </tr> </tbody></table> </div> <script type="text/ecmascript"> $(document).ready(function () { var w = 300; //set width here var h = 50; //set height here var d = 3000; //set delay here var n = $(".helpfulreviews").length; if(n>1){ var t = window.settimeout(slidetable, d); $("#slidercontain").css("width", w + "px"); $("#slidercontain").css("height", h + "px"); var = h; $(".helpfulreviews").each(function (index) { = h * index; $(this).css("top", + "px"); }); } function slidetable() { $(".helpfulreviews").each(function (index) { if ($(this).css("top") == (1 - n) * h + "px") { //checks if need cycle them around $(this).css("top", h + "px"); } }); var a2l = "-=" + h + "px"; $(".helpfulreviews").animate({ top: a2l }, 300, function () { slidetable(); }).delay(d); }; }); </script> edit: changed code dynamically change tables , values , stuff based on defining few variables; way don't have go through , change bunch of values everytime change size of reviews.
Comments
Post a Comment