Re: jQuery problem passing variables (I think)

maverickhyd — Sat, 04 Jul 2009 08:32:41 GMT

Hi,

jakelauer:
$(document).ready(function() {
            $('#home').show();
               var homeContentHeight = $('#home').height();
               var servContentHeight = $('#services').height();
               var guarContentHeight = $('#ourGuarantee').height();
               var contContentHeight = $('#contact').height();
               var cleaContentHeight = $('#cleaningTips').height();
               var abouContentHeight = $('#aboutUs').height();
            $('#cleaningTips').hide();
            $('#contact').hide();
            $('#ourGuarantee').hide();
            $('#services').hide();
            $('#aboutUs').hide();
            $('#contBottom').text("The height is " + contContentHeight + "px.");
            if (jQuery.browser.msie)
               $('#content').animate({ height: homeContentHeight + 50 }, 500)
            else
               $('#content').animate({ height: homeContentHeight }, 500)
         });

homeContentHeight,servContentHeight.. these variables are private to this function

declare ithese variable globally

var homeContentHeight;

$(document).ready(function() {
homeContentHeight = $('#home').height();
});

jQuery problem passing variables (I think)

jakelauer — Fri, 03 Jul 2009 19:43:12 GMT

Hey guys, I'm pretty new to jQuery, and I'm trying to figure out why this isn't working. I'm gonna attach the code below, but it's pretty long, so I'll detail the problem here.

I'm trying to pass the variables declared in the document.ready function to the other click functions below, but for some reason, it won't animate the divs. It's getting the height correctly (I checked with the $('#homeBottom').text("The height is " + homeContentHeight + "px."); line. If you want to see it in action (or inaction), it's at www.isthatclear.com/svcm (and click on the Services link). Thanks!

Here's the code I'm working with:

Code:

         $(document).ready(function() {
            $('#home').show();
               var homeContentHeight = $('#home').height();
               var servContentHeight = $('#services').height();
               var guarContentHeight = $('#ourGuarantee').height();
               var contContentHeight = $('#contact').height();
               var cleaContentHeight = $('#cleaningTips').height();
               var abouContentHeight = $('#aboutUs').height();
            $('#cleaningTips').hide();
            $('#contact').hide();
            $('#ourGuarantee').hide();
            $('#services').hide();
            $('#aboutUs').hide();
            $('#contBottom').text("The height is " + contContentHeight + "px.");
            if (jQuery.browser.msie)
               $('#content').animate({ height: homeContentHeight + 50 }, 500)
            else
               $('#content').animate({ height: homeContentHeight }, 500)
         });
      $(function(){
         $('#menuHome').click(function(){
            $('#home').fadeIn()
            $('#services').fadeOut()
            $('#ourGuarantee').fadeOut()
            $('#contact').fadeOut()
            $('#cleaningTips').fadeOut()
            $('#aboutUs').fadeOut()
            if (jQuery.browser.msie)
               $('#content').animate({ height: homeContentHeight + 50 }, 500)
            else
               $('#content').animate({ height: homeContentHeight }, 500)

         });
      });
      $(function(){
         $('#menuServices').click(function(){
            $('#home').fadeOut()
            $('#services').fadeIn()
            $('#ourGuarantee').fadeOut()
            $('#contact').fadeOut()
            $('#cleaningTips').fadeOut()
            $('#aboutUs').fadeOut()
            if (jQuery.browser.msie)
               $('#content').animate({ height: servContentHeight + 50 }, 500)
            else
               $('#content').animate({ height: servContentHeight }, 500)
         });
      });
      $(function(){
         $('#menuOurGuarantee').click(function(){
            $('#home').fadeOut()
            $('#services').fadeOut()
            $('#ourGuarantee').fadeIn()
            $('#contact').fadeOut()
            $('#cleaningTips').fadeOut()
            $('#aboutUs').fadeOut()
            if (jQuery.browser.msie)
               $('#content').animate({ height: guarContentHeight + 50 }, 500)
            else
               $('#content').animate({ height: guarContentHeight }, 500)
         });
      });
      $(function(){
         $('#menuContact').click(function(){
            $('#home').fadeOut()
            $('#services').fadeOut()
            $('#ourGuarantee').fadeOut()
            $('#contact').fadeIn()
            $('#cleaningTips').fadeOut()
            $('#aboutUs').fadeOut()
            if (jQuery.browser.msie)
               $('#content').animate({ height: contContentHeight + 50 }, 500)
            else
               $('#content').animate({ height: contContentHeight }, 500)
         });
      });
      $(function(){
         $('#menuCleaningTips').click(function(){
            $('#home').fadeOut()
            $('#services').fadeOut()
            $('#ourGuarantee').fadeOut()
            $('#contact').fadeOut()
            $('#cleaningTips').fadeIn()
            $('#aboutUs').fadeOut()
            if (jQuery.browser.msie)
               $('#content').animate({ height: cleaContentHeight + 50 }, 500)
            else
               $('#content').animate({ height: cleaContentHeight }, 500)
         });
      });
      $(function(){
         $('#menuAboutUs').click(function(){
            $('#home').fadeOut()
            $('#services').fadeOut()
            $('#ourGuarantee').fadeOut()
            $('#contact').fadeOut()
            $('#cleaningTips').fadeOut()
            $('#aboutUs').fadeIn()
            if (jQuery.browser.msie)
               $('#content').animate({ height: abouContentHeight + 50 }, 500)
            else
               $('#content').animate({ height: abouContentHeight }, 500)
         });
      });

Client Side Web Development

Re: jQuery problem passing variables (I think)

jQuery problem passing variables (I think)