CODEWITHSUNDEEP
javascriptjquery
sr28
sr28

Reputation: 5106

jQuery / Javascript - else if statement not reaching else if

I'm relatively new to jQuery / javascript but I've come across what looks like a simple snag to solve, and I just can't see what's wrong. Sorry if this ends up being simple but I've searched loads but to no end.

I'm trying to get various divs to fade in or out depending on whether they are 'visible' or not. The divs are effectively 'pages' that I want to advance when the 'next' arrow is clicked.

Here's my jQuery:

$(document).ready(function(){    
   $("#page1 > div").hide();
   $("#page2 > div").hide();
   $("#page3 > div").hide();

   $("#page1 > div").fadeIn(800);

   $("#NextArrow").click(function(){
      if($("#page1").is(":visible")){
         $("#page1 > div").fadeOut(800);
         $("#page2 > div").fadeIn(800);
      }
      else if($("#page2").is(":visible")){
         $("#page2 > div").fadeOut(800);
         $("#page3 > div").fadeIn(800);
      }
      else {
         alert("no page");
      }
   })
})

Here is the html:

<table id="MainTable" width="765" border="0" align="center">
    <tr>
        <td align="left" valign="top" style="min-height:400px; padding-left:10px; padding-top:10px">
            <div id="page1" style="position:absolute">
                <div id="p1Title">Introduction</div>
                <p></p>
                <div id="p1Detail">....detail.....</div>
            </div>
            <div id="page2" style="position:absolute">
                <div id="p2Title">Introduction - continued</div>
                <p></p>
                <div id="p2Detail">....detail.....</div>
            </div>
            <div id="page3" style="position:absolute">
                <div id="p3Title">Members</div>
                <p></p>
                <div id="p3Detail">....detail.....</div>
            </div>
        </td>
    </tr>
    <tr>
        <td align="right">
            <div id="NextArrow"></div>
        </td>
    </tr>
</table>

Here is the css for "NextArrow":

#NextArrow
{
  width:120px;
  height:34px;
  background-image:url('NextArrow.gif');
}

#NextArrow:hover
{
  background-image:url('NextArrowHover.gif');
}

So here's the problem. When I click the 'NextArrow' div it fades 'page1' div out as expected and fades in 'page2' div. However, when I click it again nothing happens, not even getting the 'no page' alert.

Upvotes: 0

Views: 163

Answers (2)

Anthony Grist
Anthony Grist

Reputation: 38345

The problem is that you're checking if #page1 is visible, and if it is, you're fading out the <div> elements inside it, which won't make #page1 invisible.

Try this instead:

if($("#page1").is(":visible")){
    $("#page1").fadeOut(800);
    $("#page2").fadeIn(800);
}

Upvotes: 1

S&#233;bastien Renauld
S&#233;bastien Renauld

Reputation: 19662

Your answer is a trivial logical issue. fadeOut fades out the element - not its parent. The :visible check checks for the state of the container you specified - not its parent.

You are fading out #page1 > div and not #page1. As such, while empty, your #page1 is still visible. As such, $('#page1').is(':visible') is always true regardless of the state of your page.

Consider changing the fadeout/fadein calls to fade the page IDs and not their containing divs.

Upvotes: 5

Related Questions