Finding the next hidden div and showing it with a jQuery selector.

Question

Hello,

I'm building a slideshow in jQuery that allows the user to see four images, and page through them, forwards and backwards by appending a new div with the image to the bottom via .load, and then hiding the top div. I'm very new to programming.

I'm having trouble working out a selector to allows the user to go "back" showing the next hidden div, after the first shown div, and hiding the last showing div - faux code example below.

<div class="slideShow" >image one (display = none)</div>
<div class="slideShow" >image two (display = none)</div>
<div class="slideShow" >image three </div>
<div class="slideShow" >image four </div>
<div class="slideShow" >image five </div>
<div class="slideShow">image six </div>

<a href="#" class="scrollUp" >Scrollup</a>
<a href="#" class="scrollDown" >ScrollDown</a>

Jquery to load a new image and attach to the bottom, and hide the first div currently displaying.

$('.scrollDown').click(function() {
$('.slideShow:last').after('<div class="slideShow"></div>'); // add a new div to the bottom.
$('.appendMe:last').load('myimagescript.py'); // load in the image to the new div.

// here I need to find a way of selecting in this example the first shown image (image three) and applying a .slideUp(); to it

});

Jquery to allows the user to go back to an image that they have previously seen and hide the last shown div at the bottom

$('.scrollUp').click(function() {

// here I need to find a way of selecting in this example the first hidden div (image two) after the first shown div (image three) and applying a slideDown(); to it.

$('.slideShow:last').slideUp(); // hide the last image on the page - trouble is what happens  if they user now clicks scrollDown - how do I reshow this div rather than just loading a new one?


});

Answer 1

a shot in the dark but...

selecting the first shown div and sliding it up

$('.slideShow:visible:first').slideUp();

selecting the first hidden div after the first shown div and sliding it down...

$('.slideShow:visible:first').next('.slideShow:hidden').slideDown()

psuedo selectors FTW!

Answer 2

I dont quite understand correctly, however this info may help...you need to match the first visible div then use .prevAll() and filter to get the hidden sibling

$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown();

Answer 3

Something like the following should do the trick

$(function() {
   $(".scrollUp").click(function() {
     //Check if any previous click animations are still running
     if ($("div.slideShow:animated").length > 0) return;
     //Get the first visible div
     var firstVisibleDiv = $("div.slideShow:visible:first");

     //Get the first hidden element before the first available div
     var hiddenDiv = firstVisibleDiv.prev("div.slideShow"); 
     if (hiddenDiv.length === 0) return; //Hit the top so early escape
     $("div.slideShow:visible:last").slideUp();
     hiddenDiv.slideDown();
   });
   $(".scrollDown").click(function() {
     if ($("div.slideShow:animated").length > 0) return;
     var lastVisibleDiv = $("div.slideShow:visible:last");
     if (lastVisibleDiv.next("div.slideShow").length === 0) {
         //No next element load in content (or AJAX it in)
         $("<div>").addClass("slideShow")
                   .css("display", "none")
                   .text("Dummy")
                   .insertAfter(lastVisibleDiv);
     }
     $("div.slideShow:visible:first").slideUp();
     lastVisibleDiv.next().slideDown();
   });
});

Only thing that this solution does is check if an element that was previously invisible is now being animated. This solves some of the problems regarding multiple clicks of the links that occur before the animations have completed. If using AJAX you'd have to do something similar (e.g. turn a global variable on / off - or just disable the scroll down link) to avoid multiple requests being made to the server at once...

Answer 4

Hi, I've spent hours today on this site trying to do something very similar to what was posted in this question.

What I have is Previous | Next links navigation doing through a series of divs, hiding and showing.

Though what I ended up with was different than the answer here....this was the one that most got me where I needed to be.

So, thanks.

And in case anyone is interested, here's what I did:

<script language="javascript">

$(function() {
 $("#firstPanel").show();
});

$(function(){
    $(".nextButton").click(function () {
     $(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide();
    });
});
$(function(){
    $(".backButton").click(function () {
     $(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide();
    });
});
</script>

<style type="text/css">
    .defaultHidden { display: none; }
    .navigation { display: block; width: 700px; text-align: center; }
    #contentWrapper { margin-top: 20px !important; width: 700px; }
    .nextButton { cursor: pointer; }
    .backButton { cursor: pointer; }
</style>

<div class="navigation">
    <span class="backButton"><< Previous</span>&nbsp; | &nbsp;<span class="nextButton">Next >></span></button>
</div>
<div id="contentWrapper">
    <div id="firstPanel" class="panel defaultHidden">
     <img src="images/quiz/Slide1.jpg" width="640" />
    </div>

    <div class="panel defaultHidden">
 <h1>Information Here</h1>  
 <p>Text for the paragraph</p>
    </div>

    <div class="panel defaultHidden">
 <h1>Information Here</h1>  
 <p>Text for the paragraph</p>
    </div>

    <div class="panel" style="display: none;">
  <img src="images/quiz/Slide4.jpg" width="640" />
        </div>

    <div class="panel defaultHidden">
 <h1>Information Here</h1>  
 <p>Text for the paragraph</p>
    </div>

    <div class="panel defaultHidden">
 <img src="images/quiz/Slide6.jpg" width="640" />
    </div>
    Repeat ad naseum...
</div>