Animating to a li

Heya folks!

I have a <ul> set up that is fill of <li>'s, each containing a single image. Each Image is 200px x 200px. The list is placed inside of a containing div ALSO with a width of 200px x 200px and overflow set to hidden.

So basically, it’s a big list of images with only one of them showing at a time (because the overflow of the container is hidden).

What I would LOVE LOVE to do, is scroll through them…basically, adjusting which one is seen when a link is clicked. I’ve tried using scollto() on the li, but am having no luck. Been at this for HOURS trying to get some results and so far I’m just pulling my hair out.

Can anyone point me in the right direction?

I just realized that I could set the first <li> to an “active” class when the page loads…then use jquery to add an “inactive” class, setting the visibility to none for all other <li>'s.

Then, when a previous or next arrow is clicked, I can find the <li> that is currently active, disable it, and make the next (or previous, depending on which arrow was clicked) active.

Am I on the right track?

So if I have a UL defined like this:


<ul id="albumlist">
<li>here is an album title</li>
<li class="active">here is another one...it's currently active</li>
<li>and yet another.</li>
</ul>

…and I can find which li is active with this:


$('#albumlist').find('li.active')

…how can I determine if it is the first or the last element in the UL?

There are lots of scripts already written for things like this. For example:

http://css-tricks.com/examples/FeaturedContentSlider/

If you are interested in these, perhaps just describe how you want this to work. Image buttons? Text buttons? etc …

this example might help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #ul1 {
                list-style-type: none;
                height: 300px;
                width: 250px;
                overflow: hidden;
            }
            #ul1 li {
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
            }
        </style>
        <script type="text/javascript">
            var curPic = 0;
            function swapImage(dirn){
                curPic += dirn;
                if(curPic < 0){
                    curPic = 0;
                } else if(curPic == LiO.length){
                    curPic = LiO.length-1;
                }
                LiO[curPic].scrollIntoView(true);
            }
            window.onload=function(){
                LiO = document.getElementById('ul1').getElementsByTagName('li');
                document.getElementById('btnPrev').onclick=function(){swapImage(-1);}
                document.getElementById('btnNext').onclick=function(){swapImage(1);}
            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li><img src="num1.jpg" alt="" /></li>
            <li><img src="num2.jpg" alt="" /></li>
            <li><img src="num3.jpg" alt="" /></li>
            <li><img src="num4.jpg" alt="" /></li>
            <li><img src="num5.jpg" alt="" /></li>
        </ul>
        <div>
            <button id="btnPrev">Prev</button><button id="btnNext">Next</button>
        </div>
    </body>
</html>



Thank you very much guys.

I’m really just trying to learn as much as possible…that’s why I was trying to avoid using a premade plugin.

I was not aware of the scrollIntoView function. Thanks!

Actually, one more question? hehe

Is this proper? It works, just not sure if I am breaking any rules as far as best-practices, etc:


$('#worklist').find('li.active').removeClass('active').prev().addClass('active');

Also…how could I “animate” the effect? Like make it fade in or something…

You can use setInterval or setTimeout to alter the content container’s opacity to create the fade in/out effect.

But since you say you are trying to learn, I’d steer away from jquery and do it with just plain javascript (I assume you are aware that jquery is just a bunch of prewritten plain javascript functions).

jquery will run a helluva lot more code in the background to do the fade in/out than if you coded it with just plain javascript.