CODEWITHSUNDEEP
jqueryvariables
circey
circey

Reputation: 2042

jquery resetting and setting variables

I'm trying to create slidingUp divs with variable 'top' heights, so that one div may slideUp 700px, while another (with less content) slidesUp only 400px. Currently, the divs all slideUp at the same height. There are no div height declarations in the css. My script:

$(document).ready(function(){          
            var oldHeight;  
    $('a.menubtn').click(function(){              
            var newHeight;
            if ($(this.id) == 'work') {
                  newHeight = 700;  
                  }
                  else { if ($(this.id) == 'services') {
                      newHeight = 400;
                  }
                  else { if ($(this.id) == 'about') {
                      newHeight = 400;
                  }
                  else {
                      newHeight = 300;
                  }
                  }
                  }

            if ($('.active').length > 0) {

                $('.active').removeClass('active').animate({'top': '+=' + oldHeight + 'px'}, '200');
                $('div#contents_'+ this.id).addClass('active').animate({'top': '-=' + newHeight + 'px'}, '200');
                oldHeight = newHeight;
                }
                else 
    $('div#contents_'+ this.id).addClass('active').animate({'top': '-=' + newHeight + 'px'}, '200');
                oldHeight = newHeight;
                }
    return(false);
    });               
})

TIA.

Upvotes: 0

Views: 785

Answers (1)

user113716
user113716

Reputation: 322502

Your if statements are wrong.

This:

$(this.id) == 'work'  // here you're comparing a jQuery object to 'work'

should be: 

this.id == 'work'     // here you're comparing the actual ID value to 'work'

It would be cleaner if you changed the structure of the if statements to be like this:

if (this.id == 'work') {
    newHeight = 700;  
} else if (this.id == 'services') {
    newHeight = 400;
} else if (this.id == 'about') {
    newHeight = 400;
} else {
    newHeight = 300;
}

Upvotes: 2

Related Questions