SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?
    "Do or do not. There is no try." -- Yoda

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    "Do or do not. There is no try." -- Yoda

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I have a UL defined like this:
    Code:
    <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:

    Code:
    $('#albumlist').find('li.active')
    ...how can I determine if it is the first or the last element in the UL?
    "Do or do not. There is no try." -- Yoda

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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 ...

  5. #5
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ylang View Post

    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.
    this example might help.

    Code:
    <!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>

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    "Do or do not. There is no try." -- Yoda

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    $('#worklist').find('li.active').removeClass('active').prev().addClass('active');
    Also....how could I "animate" the effect? Like make it fade in or something...
    "Do or do not. There is no try." -- Yoda

  8. #8
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ylang View Post
    Actually, one more question? hehe

    ...
    ...

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •