Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to implement div slider + prev/next buttons + ability to select a specific* div

    Hi guys,

    I'm starting to delve into JavaScript and consequently have a lot to learn. I'm trying to implement a JavaScript or.. JQuery.. content rotator to cycle through different projects in a portfolio.

    I want to be able to click Next or Previous to cycle through the different divs (This part is working fine).

    But I also want to be able to click text links to display specific divs I choose.

    You can see what I'm working on here: http://loft14test.com/loft14design.com/portfolio.html

    Next and Previous works, but when I try clicking the "Wisconsin Natural Acres" or "Abstract Electric" text links to show those respective divs it breaks.

    Any ideas about how I could accomplish this?

    Thank you!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    hmm... there seems to be a lot going on there. maybe this simplified version will give you some ideas...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style>
    .content{display:none}
    #first{display:block}
    </style>
    </head>
    
    <body>
    <div id="first" class ="content">
    First div
    </div>
    <div  id="second" class ="content">
    Second div
    </div>
    <div  id="third" class ="content">
    Third div
    </div>
    <div id="fourth" class ="content">
    Fourth div
    </div>
    <input type="button" onclick="changeDiv('down')" value="prev"/>
    <input type="button" onclick="changeDiv('up')" value="next"/>
    <div id="linkwrap">	
    <a href="#">Show first</a><br>
    <a href="#">Show second</a><br>
    <a href="#">Show third</a><br>
    <a href="#">Show fourth</a><br>
    </div>
    <script type="text/javascript">
    var divs=document.getElementsByTagName('div');
    var links=document.getElementById('linkwrap').getElementsByTagName('a')	
    var idarray=[];
    var shownDiv='first';
    for (var i=0; i<divs.length; i++){
    if (divs[i].className=="content"){
    idarray.push(divs[i].id);
    (function (i){
    links[i].onclick=function(){changeDiv(divs[i].id)};
    return false;
    })(i);
    
    	}
    }
    
    function changeDiv(dir){
    document.getElementById(shownDiv).style.display="none";
    if (dir=='down'){
    idarray.unshift(idarray.pop());
    } else if (dir=='up'){
    idarray.push(idarray.shift());
    } else while (idarray[0]!=dir){
    idarray.push(idarray.shift());
    }
    shownDiv=idarray[0];
    document.getElementById(shownDiv).style.display="block";
    }
    </script>
    </body>
    </html>
    Last edited by xelawho; 07-10-2012 at 02:44 PM.

  • Users who have thanked xelawho for this post:

    frickettz (07-16-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    xelawho, thanks a ton for your insight. That was MUCH simpler and more straightforward.

    You can see that I've got your idea working here: http://loft14test.com/loft14design.com/portfolio.html

    Another thing I've been struggling with - I'd like to be able to click the tabs of different categories and load a different rotation altogether.

    For example, if I click E-Marketing, I'd like the Website Design rotations to disappear and for a new box of E-Marketing rotations to pop up that I can rotate through.

    Could you point me in the right direction for what sort of code might work there?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    question (and not that it matters, but it kind of does): does the text in the sidebar change when the category changes, or is it just the image?

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The text changes right along with the image.

    I was trying a toggleDiv type of solution here: http://loft14test.com/loft14design.c...olio_test.html

    But I think this might not be the best route to take. I couldn't figure out how to hide all the child divs inside #portfolio_showcase_box that would not be shown when a specific category is clicked.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    maybe instead of hiding all the divs you can just swap the image and the text?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style>
    </style>
    </head>
    <body>
    <img src="" id="slide" width="400" height="416" />
    <div id="caption"></div>
    <div id="linkwrap">	
    <a href="#">Show horses</a><br>
    <a href="#">Show cats</a><br>
    <a href="#">Show bridges</a><br>
    </div>
    <input type="button" onclick="changeDiv('down')" value="prev"/>
    <input type="button" onclick="changeDiv('up')" value="next"/>
    <script>
    var horses=[{pic:"http://www-tc.pbs.org/wnet/nature/files/2008/10/na_img_horses_intro.jpg",txt:"two horses"},{pic:"http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Nokota_Horses_cropped.jpg/250px-Nokota_Horses_cropped.jpg",txt:"two other horses"},{pic:"http://www.europeword.com/blog/wp-content/uploads/europe-horses-300x225.jpg",txt:"two completely different horses"}]
    var cats=[{pic:"http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg",txt:"cute cat"},{pic:"http://dellone2one.com/wp-content/uploads/2009/11/Cat_pictures2.jpg",txt:"two cats"},{pic:"http://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cat-eating-prey.jpg/220px-Cat-eating-prey.jpg", txt:"hungry cat"}]
    var bridges=[{pic:"http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Akashi-kaikyo_bridge3.jpg/337px-Akashi-kaikyo_bridge3.jpg",txt:"some bridge"},{pic:"http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Sio_se_pol.jpg/337px-Sio_se_pol.jpg",txt:"some other  bridge"},{pic:"http://wirednewyork.com/images/bridges/hell-gate-bridge/hell_gate_bridge_triborough_7apr02_s.jpg",txt:"some completely different bridge"}]
    var arrays=[horses,cats,bridges];
    var thearray=horses;
    var links=document.getElementById('linkwrap').getElementsByTagName('a');
    
    for (var i=0; i<links.length; i++){
    (function (i){
    links[i].onclick=function(){
    thearray=arrays[i];
    setPic();
    return false;
    };
    })(i);
    }
    
    function changeDiv(dir){
    if (dir=='down'){
    thearray.unshift(thearray.pop());
    } else if (dir=='up'){
    thearray.push(thearray.shift());
    } 
    setPic();
    }
    
    function setPic(){
    document.getElementById("slide").src=thearray[0].pic;
    document.getElementById("caption").innerHTML=thearray[0].txt;
    }
    
    setPic();
    </script>
    </body>
    </html>

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That looks like a great solution, but it loses my ability to select a specific set in the array.

    For example, what if I wanted to have another link that specifically showed 'Hungry Cat'?

    Or, looking at my page as an example, the solution you gave me yesterday gave me the ability to select 'Abstract Electric' or.. 'Officials Den' and it would jump to that image and caption directly.

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    http://loft14test.com/loft14design.c...olio_test.html

    Ok, deep breath, it took me all night but I was finally able to get the Website Design and E-Marketing categories to show different boxes from each other when clicked.

    My final problem on this page is that I can't get the Previous and Next buttons to rotate images for the E-Marketing category, it's just stuck on that first one.

    Here's the code that handles the rotation, and the Website Design category works fine with it.
    Code:
    var divs=$("#portfolio_showcase_box div:visible div");	
    var idarray=[];
    var shownDiv='wnacres';
    for (var i=0; i<divs.length; i++){
    if (divs[i].className=="portfolio_showcase_wrapper"){
    idarray.push(divs[i].id);
    	}
    }
    
    function changeDiv(dir){
    document.getElementById(shownDiv).style.display="none";
    if (dir=='down'){
    idarray.unshift(idarray.pop());
    } else if (dir=='up'){
    idarray.push(idarray.shift());
    } else while (idarray[0]!=dir){
    idarray.push(idarray.shift());
    }
    shownDiv=idarray[0];
    document.getElementById(shownDiv).style.display="block";
    }
    Shouldn't this work the same with E-marketing?

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    I don't really know too much about jQuery, but it seems to me that this line:
    var divs=$("#portfolio_showcase_box div:visible div");

    is filtering to only collect divs within that div that have a visible state? ... or what does it do?

  • #10
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah that's what it's doing. When the page loads the first category is visible, but if I click E-Marketing for example, it will make the E-Marketing divs visible instead.

    Do you know if that block of jQuery code only runs once at page load? Maybe it's not running again after the DOM changes when I hide/show those divs.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    it runs once, on page load. if you need it to run every time the toggleDiv function runs, you will have to code it that way - probably putting the code block into a function and calling it on page load and at the end of toggleDiv would make sense.

    btw, I get an error on your document.reload line in the toggleDiv function, but it would seem counterproductive to be reloading the document at that point, anyway.

  • #12
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post

    Jcarousel may be?

    I have implemented a similar approach where you can select a component(a div) that will animate the slider to intended div content have look...

    jcarousel pagination

  • #13
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for your kind advice and pointing me in the right direction! I have FINALLY got this working by modifying some of the code you suggested.


  •  

    Posting Permissions

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