?
Solved

jQuery Problem Passing Variables

Posted on 2009-07-03
2
Medium Priority
?
292 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 1

Accepted Solution

by:
mubaidillah earned 2000 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

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

764 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