finding the position of a <li>
Hey guys,
Is there anyway to get the position of an <li>?
I'm trying to create a horizontal scrolling effect on a list of links. I can kind want the scrolling effect to stop when the last <li> item is displayed on the page.
Here is my code so far
$(".leftScroll").click(function(){
var leftWidth = $("#subCategoryNav ul").css("left");
if( leftWidth < '0px' ) {
$("#subCategoryNav ul").stop().animate({"left": "+=50px"}, "fast");
}
});
$(".rightScroll").click(function(){
$("#subCategoryNav ul").animate({'left': "-=50px"}, 'fast');
});
<div id="subCategoryNav">
<img alt="left" src="/media/images/scroll-left2.gif" class="leftScroll"/>
<div id="subCatItems">
<div id="subCatContainer">
<ul>
<li><a href="">Museum Exhibitions</a></li>
<li><a href="">Art Books</a></li>
<li><a href="">Artist Catalogues</a></li>
<li><a href="">Catalogue Resumes</a></li>
<li><a href="">Auction Catalogues</a></li>
<li><a href="">Magazines</a></li>
<li><a href="">Other</a></li>
<li><a href="">View All</a></li>
</ul>
</div>
</div>
<img alt="right" src="/media/images/scroll-right2.gif" class="rightScroll"/>
</div>
Thanks in advance