Hi guys I'm hoping someone can help me out here. I am using the JCarousel plugin on a site im building.
I have it installed and I am using 2 buttons to hide some of the carousels items. I am using the following code to do so:
<script type="text/javascript">
function toggleview_specials(){
var b = document.getElementsByTagName('li')
for(var i = 1; i < b.length; i++)
if(b[i].getAttribute('tag') == "carousel_list_best"){
b[i].style.display = "none"
}
for(var i = 1; i < b.length; i++)
if(b[i].getAttribute('tag') == "carousel_list_specials"){
b[i].style.display = "block"
}
}
function toggleview_offers(){
var b = document.getElementsByTagName('li')
for(var i = 1; i < b.length; i++)
if(b[i].getAttribute('tag') == "carousel_list_specials"){
b[i].style.display = "none"
}
for(var i = 1; i < b.length; i++)
if(b[i].getAttribute('tag') == "carousel_list_best"){
b[i].style.display = "block"
}
}
</script>
<div class="carousel">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li id="carousel_best_selling1" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_best_selling2" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_best_selling3" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_best_selling4" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_best_selling5" tag="carousel_list_specials"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_special_offers1" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">Darragh Tester</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_special_offers2" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">1Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_special_offers3" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">2Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_special_offers4" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">3Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
<li id="carousel_special_offers5" tag="carousel_list_best"><a href="#" class="product_list"><div class="item_container"><div class="item_desc">4Anabolic Halo</div><img src="images/product_images/test.gif" class="carousel" /><div class="item_old_price">Was €12.99</div><div class="item_new_price">Now €9.99</div></div></a></li>
</ul>
</div>It works as I had hoped and it hides the items. However now the buttons to scroll the navigation scroll too far. I was wondering if anyone could help me figure out a solution to this?
Thanks guys