Solved

jQuery Problem Passing Variables

Posted on 2009-07-03
2
283 Views
Last Modified: 2012-06-21
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!

$(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)
            });
         });

Open in new window

0
Comment
Question by:cowboygeek
2 Comments
 
LVL 1

Accepted Solution

by:
mubaidillah earned 500 total points
ID: 24774298
Hi,
try to move the variables declaration outside document.ready()

I have modification version of your fading.js file.
it was tested on FF browser and works well.

fading.js.txt
0
 

Author Closing Comment

by:cowboygeek
ID: 31599657
Thanks! Not only was this correct, but I now understand the language a bit better.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question