Solved

jQuery error in IE with animate

Posted on 2009-07-08
2
2,058 Views
Last Modified: 2012-05-07
Hey guys,

The code in question is at www.isthatclear.com/svcm. To get the error, click on "Services."

This animation/fade code works perfectly in Firefox and looks amazing. In IE, it's totally broken and looks horrible. When I click on Services, it gives me this error listed in the code box.
Also listed in the code box is the contents of the .js file I'm using for the animation.

Any ideas?


Webpage error details
 
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Wed, 8 Jul 2009 18:15:44 UTC
 
 
Message: Could not get the position property. Invalid argument.
Line: 19
Char: 35190
Code: 0
URI: file:///C:/Users/Jake7/My%20Dropbox/JHL/Websites/servicemaster/web/js/jquery-1.3.2.min.js
 
 
 
_______________________________________________________________________________
 
 
 
 
				var homeContentHeight = 0; //declare all variables for animating
				var servContentHeight = 0;
				var guarContentHeight = 0;
				var contContentHeight = 0;
				var cleaContentHeight = 0;
				var abouContentHeight = 0;
				
				var currentSlide = 0;
				var returningSlide = 0;
				
				//begin animation of footer
				
				$(document).ready(function() {
					$('#home').show();
						homeContentHeight = $('#home').height() - 20; 
						servContentHeight = $('#services').height() - 20;
						guarContentHeight = $('#ourGuarantee').height() - 20;
						contContentHeight = $('#contact').height() - 20;
						cleaContentHeight = $('#cleaningTips').height() - 20;
						abouContentHeight = $('#aboutUs').height() - 20;
					$('#cleaningTips').hide();
					$('#contact').hide();
					$('#ourGuarantee').hide();
					$('#services').hide();
					$('#aboutUs').hide();
					$('#servicesTable').hide();
					$('#carpetCleaningContent').hide();
					$('#furnitureCleaningContent').hide();
					$('#disasterRestorationContent').hide();
					$('#ductsAndVentsContent').hide();
					$('#hardSurfaceFloorsContent').hide();
					$('#wallsAndCeilingsContent').hide();
					if (jQuery.browser.msie)
						$('#content').animate({ height: homeContentHeight + 50 }, 500)
					else
						$('#content').animate({ height: homeContentHeight }, 500)
				});
			$(function(){
				$('#menuHome').click(function(){
					currentSlide = 0;
					$('#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(){
					$("#imagesWrapper").height(1)
					$('#services').fadeIn()
					if (currentSlide == 0) {
						$('#carpetCleaningLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#furnitureCleaningLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#disasterRestorationLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#ductsAndVentsLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#hardSurfaceFloorsLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#wallsAndCeilingsLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$('#carpetCleaningLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '50px'});
					$('#furnitureCleaningLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '330px'});
					$('#disasterRestorationLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '610px'});
					$('#ductsAndVentsLink').animate({'position' : 'absolute', 'top' : '214px', 'left' : '50px'});
					$('#hardSurfaceFloorsLink').animate({'position' : 'absolute', 'top' : '214px', 'left' : '330px'});
					$('#wallsAndCeilingsLink').animate({'position' : 'absolute', 'top' : '214px', 'left' : '610px'});
						$('#carpetCleaningContent').css({'position' : 'absolute', 'top' : '26px', 'left' : '345px'})
						$('#furnitureCleaningContent').css({'position' : 'absolute', 'top' : '26px', 'left' : '345px'})
						$('#disasterRestorationContent').css({'position' : 'absolute', 'top' : '26px', 'left' : '345px'})
						$('#ductsAndVentsContent').css({'position' : 'absolute', 'top' : '26px', 'left' : '345px'})
						$('#hardSurfaceFloorsContent').css({'position' : 'absolute', 'top' : '26px', 'left' : '345px'})
						$('#wallsAndCeilingsContent').css({'position' : 'absolute', 'top' : '26px', 'left' : '345px'})
						$('#carpetCleaningLink').fadeIn()
						$('#furnitureCleaningLink').fadeIn()
						$('#disasterRestorationLink').fadeIn()
						$('#ductsAndVentsLink').fadeIn()
						$('#hardSurfaceFloorsLink').fadeIn()
						$('#wallsAndCeilingsLink').fadeIn()
					}
					if (returningSlide == 1) {
						$('#carpetCleaningContent').animate({'position' : 'absolute', 'top' : '400px', 'left' : '345px'})
						$('#furnitureCleaningContent').animate({'position' : 'absolute', 'top' : '400px', 'left' : '345px'})
						$('#disasterRestorationContent').animate({'position' : 'absolute', 'top' : '400px', 'left' : '345px'})
						$('#ductsAndVentsContent').animate({'position' : 'absolute', 'top' : '400px', 'left' : '345px'})
						$('#hardSurfaceFloorsContent').animate({'position' : 'absolute', 'top' : '400px', 'left' : '345px'})
						$('#wallsAndCeilingsContent').animate({'position' : 'absolute', 'top' : '400px', 'left' : '345px'})
					}
					$('#carpetCleaningContent').fadeOut()
					$('#furnitureCleaningContent').fadeOut()
					$('#disasterRestorationContent').fadeOut()
					$('#ductsAndVentsContent').fadeOut()
					$('#hardSurfaceFloorsContent').fadeOut()
					$('#wallsAndCeilingsContent').fadeOut()
					$('#home').fadeOut()
					$('#servicesTable').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)
					currentSlide = 1;
				});
			});
			$(function(){
				$('#menuOurGuarantee').click(function(){
					currentSlide = 0;
					$('#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(){
					currentSlide = 0;
					$('#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(){
					currentSlide = 0;
					$('#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(){
					currentSlide = 0;
					$('#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)
				});
			});
			
			//end animation of footer
			
			//begin animation of services
			
			
			$(function(){
				$('#carpetCleaningLink').click(function(){
					currentSlide = 0;
					returningSlide = 1;
					$('#furnitureCleaningLink').fadeOut()
					$('#disasterRestorationLink').fadeOut()
					$('#ductsAndVentsLink').fadeOut()
					$('#hardSurfaceFloorsLink').fadeOut()
					$('#wallsAndCeilingsLink').fadeOut()
					$('#carpetCleaningContent').fadeIn()
					$('#carpetCleaningLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$('#carpetCleaningLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$("#imagesWrapper").height(0)
				});
			});
			$(function(){
				$('#furnitureCleaningLink').click(function(){
					currentSlide = 0;
					returningSlide = 1;
					$('#carpetCleaningLink').fadeOut()
					$('#disasterRestorationLink').fadeOut()
					$('#ductsAndVentsLink').fadeOut()
					$('#hardSurfaceFloorsLink').fadeOut()
					$('#wallsAndCeilingsLink').fadeOut()
					$('#furnitureCleaningContent').fadeIn()
					$('#furnitureCleaningLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '330px'})
					$('#furnitureCleaningLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$("#imagesWrapper").height(0)
				});
			});
			$(function(){
				$('#disasterRestorationLink').click(function(){
					currentSlide = 0;
					returningSlide = 1;
					$('#carpetCleaningLink').fadeOut()
					$('#furnitureCleaningLink').fadeOut()
					$('#ductsAndVentsLink').fadeOut()
					$('#hardSurfaceFloorsLink').fadeOut()
					$('#wallsAndCeilingsLink').fadeOut()
					$('#disasterRestorationContent').fadeIn()
					$('#disasterRestorationLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '610px'})
					$('#disasterRestorationLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$("#imagesWrapper").height(0)
				});
			});
			$(function(){
				$('#ductsAndVentsLink').click(function(){
					currentSlide = 0;
					returningSlide = 1;
					$('#carpetCleaningLink').fadeOut()
					$('#furnitureCleaningLink').fadeOut()
					$('#disasterRestorationLink').fadeOut()
					$('#hardSurfaceFloorsLink').fadeOut()
					$('#wallsAndCeilingsLink').fadeOut()
					$('#ductsAndVentsContent').fadeIn()
					$('#ductsAndVentsLink').css({'position' : 'absolute', 'top' : '214px', 'left' : '50px'})
					$('#ductsAndVentsLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$("#imagesWrapper").height(0)
				});
			});
			$(function(){
				$('#hardSurfaceFloorsLink').click(function(){
					currentSlide = 0;
					returningSlide = 1;
					$('#carpetCleaningLink').fadeOut()
					$('#furnitureCleaningLink').fadeOut()
					$('#disasterRestorationLink').fadeOut()
					$('#ductsAndVentsLink').fadeOut()
					$('#wallsAndCeilingsLink').fadeOut()
					$('#hardSurfaceFloorsContent').fadeIn()
					$('#hardSurfaceFloorsLink').css({'position' : 'absolute', 'top' : '214px', 'left' : '330px'})
					$('#hardSurfaceFloorsLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$("#imagesWrapper").height(0)
				});
			});
			$(function(){
				$('#wallsAndCeilingsLink').click(function(){
					currentSlide = 0;
					returningSlide = 1;
					$('#carpetCleaningLink').fadeOut()
					$('#furnitureCleaningLink').fadeOut()
					$('#disasterRestorationLink').fadeOut()
					$('#ductsAndVentsLink').fadeOut()
					$('#hardSurfaceFloorsLink').fadeOut()
					$('#wallsAndCeilingsContent').fadeIn()
					$('#wallsAndCeilingsLink').css({'position' : 'absolute', 'top' : '214px', 'left' : '610px'})
					$('#wallsAndCeilingsLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$("#imagesWrapper").height(0)
				});
			});
			$(function(){
				$('.returnServices').click(function(){
					$("#imagesWrapper").height(1)
						$('#carpetCleaningLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#furnitureCleaningLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#disasterRestorationLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#ductsAndVentsLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#hardSurfaceFloorsLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
						$('#wallsAndCeilingsLink').css({'position' : 'absolute', 'top' : '26px', 'left' : '50px'})
					$('#carpetCleaningLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '50px'});
					$('#furnitureCleaningLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '330px'});
					$('#disasterRestorationLink').animate({'position' : 'absolute', 'top' : '26px', 'left' : '610px'});
					$('#ductsAndVentsLink').animate({'position' : 'absolute', 'top' : '214px', 'left' : '50px'});
					$('#hardSurfaceFloorsLink').animate({'position' : 'absolute', 'top' : '214px', 'left' : '330px'});
					$('#wallsAndCeilingsLink').animate({'position' : 'absolute', 'top' : '214px', 'left' : '610px'});
						$('#carpetCleaningLink').fadeIn()
						$('#furnitureCleaningLink').fadeIn()
						$('#disasterRestorationLink').fadeIn()
						$('#ductsAndVentsLink').fadeIn()
						$('#hardSurfaceFloorsLink').fadeIn()
						$('#wallsAndCeilingsLink').fadeIn()
					$('#carpetCleaningContent').fadeOut()
					$('#furnitureCleaningContent').fadeOut()
					$('#disasterRestorationContent').fadeOut()
					$('#ductsAndVentsContent').fadeOut()
					$('#hardSurfaceFloorsContent').fadeOut()
					$('#wallsAndCeilingsContent').fadeOut()
					if (jQuery.browser.msie)
						$('#content').animate({ height: servContentHeight + 50 }, 500)
					else
						$('#content').animate({ height: servContentHeight }, 500)
					currentSlide = 1;
					returningSlide = 1;
				});
			});

Open in new window

0
Comment
Question by:cowboygeek
2 Comments
 
LVL 13

Expert Comment

by:Carl Bohman
ID: 24807268
Do you know which line in your code is triggering the error?
0
 

Accepted Solution

by:
cowboygeek earned 0 total points
ID: 24807451
I figured out the problem. IE doesn't like it when you use jQuery to set the "position" css attribute. I just set it in my css file instead.
0

Featured Post

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
website rewamp 5 42
Find closest specified item from present item - Javascript 5 33
How  can  I extract  Id  from a  URL  using  Javascript? 12 29
Html Newline 7 20
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

840 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