Solved

jQuery error in IE with animate

Posted on 2009-07-08
2
2,056 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

3 Use Cases for Connected Systems

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript_Set_dropdown_value 7 34
Jquery keyup 4 20
Get Pixel color of the x and y axis Html without canvas 8 38
how can i get 4 nd 5 ? 3 15
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

821 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