Mootools Fx tween/morph not correct in IE

[thenajsays]

ok, check out my page here
try it in both Firefox and IE... all the javascript and mootools work perfectly in Firefox... come IE... it looks wrong, like way wrong...

[thenajsays]

not solved! grrrr

[thenajsays]

can i get some help here puh puh puh please??? im pulling my hair out here... id like to go live soon!

[thenajsays]

a little more info on my issue:
the animation in chrome and FF renders correctly and happens like this:
the main div "grows" from the middle and centers itself vertically in the browser window. on resize, it re-centers itself or aligns to the top, depending on the size of the window.

the IE animation for some reason starts at the bottom, then jumps up before finally ending up in the right place. the resize function kinda works, but the animation is WAY slower than intended...

[thenajsays]

ive done a little tinkering (as well as some conversion of the dimension function to use mootools methods) and i found something odd... here is the code im using locally for my JS file:

	var mWidth = 0;
	var mHeight = 0;
	function dimensions()
	{
		var winSize = window.getSize();
	
		if (winSize.x > 900)
		{
			mWidth = Math.floor((winSize.x - 900) / 2);
		}
		if (winSize.y > 600)
		{
			mHeight =  Math.floor(winSize.y/ 2);
		}
		alert("mWidth: "+mWidth+", "+mHeight+"\nwinSize: "+winSize.x+", "+winSize.y);
	}

	var mainBodDisplay = function (display) {
		this.setStyle('display', display);
	}
	var mainBodOpac = function (time) {
		this.set('morph', {
						 duration: time
					 }).morph({'opacity': [0,1], 'color': ['#F0FFF0','#000000']
		});
	}
	
	var positionMe = function() {
		dimensions();
		//mHeight = mHeight / 2;
		if ((mHeight) - 350 < 0){
			$('mainBodyContainer').set('morph', {
						  duration: 2500,
						  transition: Fx.Transitions.Quad.easeInOut
					}).morph({'margin-top': [(mHeight/2), 0], 'height': [0, 600]
				});
		}
		else {
			$('mainBodyContainer').set('morph', {
						  duration: 2500,
						  transition: Fx.Transitions.Quad.easeInOut
					}).morph({'margin-top': [mHeight, (mHeight - 300)], 'height': [0, 600]
				});
		}
		/*$('mainBody').set('morph', {
						  duration: 2500,
					}).morph({'opacity': [0, 1]
				});*/
		mainBodDisplay.delay(2600, $('mainBody'), 'block');
		mainBodOpac.delay(2500, $('mainBody'), 2500);
		//mainBodOpac.delay(2500, $('SlideMe'), 2500);

		$('ourServices').addEvent('mouseenter', function(){
			$('ourServices').set('src', 'images/ourServicesLit.gif');
			});
		if(String(window.location).match('our_services') != 'our_services'){
			$('ourServices').addEvent('mouseleave', function(){
				$('ourServices').set('src', 'images/ourServicesDim.gif');
				});
			}
		$('ourServices').addEvent('domready', function(){
			if (String(window.location).match('our_services') == 'our_services'){
			$('ourServices').set('src', 'images/ourServicesLit.gif');
			}
			});
		
		$('greenBuilding').addEvent('mouseenter', function(){
			$('greenBuilding').set('src', 'images/greenBuildingLit.gif');
			});
		if(String(window.location).match('green_building') != 'green_building'){
			$('greenBuilding').addEvent('mouseleave', function(){
				$('greenBuilding').set('src', 'images/greenBuildingDim.gif');
				});
			}
		$('greenBuilding').addEvent('domready', function(){
			if (String(window.location).match('green_building') == 'green_building'){
			$('greenBuilding').set('src', 'images/greenBuildingLit.gif');
			}
			});

		$('aboutUs').addEvent('mouseenter', function(){
			$('aboutUs').set('src', 'images/aboutUsLit.gif');
			});
		if(String(window.location).match('about_us') != 'about_us'){
			$('aboutUs').addEvent('mouseleave', function(){
				$('aboutUs').set('src', 'images/aboutUsDim.gif');
				});
			}
		$('aboutUs').addEvent('domready', function(){
			if (String(window.location).match('about_us') == 'about_us'){
			$('aboutUs').set('src', 'images/aboutUsLit.gif');
			}
			});
		
		$('contactUs').addEvent('mouseenter', function(){
			$('contactUs').set('src', 'images/contactUsLit.gif');
			});
		if(String(window.location).match('contact_us') != 'contact_us'){
			$('contactUs').addEvent('mouseleave', function(){
				$('contactUs').set('src', 'images/contactUsDim.gif');
				});
			}
		$('contactUs').addEvent('domready', function(){
			if (String(window.location).match('contact_us') == 'contact_us'){
			$('contactUs').set('src', 'images/contactUsLit.gif');
			}
			});

		}
	
	var resizeMe = function() {
		dimensions();
		//mHeight = mHeight / 2;
		if ((mHeight) - 350 < 0){
			$('mainBodyContainer').set('tween', {duration: 750}).tween('margin-top', 0);
		}
		else {
			$('mainBodyContainer').set('tween', {duration: 750}).tween('margin-top', (mHeight - 300));
		}
	}

	window.addEvent('domready', positionMe);
/*	window.addEvent('resize', function(){
		$('mainBody').setStyle('display', 'none');
		$('mainBody').setStyle('opacity', 0);
		});*/
	window.addEvent('resize', resizeMe);

if you notice, i added an alert to the dimension function. on FF and Chrome, it fires once, then runs the animation. in IE, it fires MULTIPLE times, pausing the animation when it does so... any ideas now?

[thenajsays]

ok... doing so more testing, i realized that the issue lies somewhere in that the IE is "false resizing"
if i remove the on resize function, it opens up just fine... what gives? anyone have any insight?

[thenajsays]

man, i wish i could thank myself! lol... ok guys... heres the solution... there is a bug in IE that makes resize events fire when they shouldnt and fire multiple times... i saw a workaround someone did for jquery and got an idea from there... i added a variable at the beginning of my script called "onFire" and set it to "false" (because the positioning functions have yet to fire), then at the beginning of my positioning and repositioning functions, i inserted a line reassigning the value of "onFire" to "true." i then wrote a nice little function called "hasFired" that does just one thing, sets "onFire" back to false. i then inserted a line at the end of my positioning & repositioning functions calling "hasFired" with the mootools delay method, enabling me to hold off on the reassignment until the script has completed and the page has become stable! wow... that was a lot of head banging i tell ya!

	var mWidth = 0;
	var mHeight = 0;
	var onFire = false;
	var dimensions = function()
	{
		var winSize = window.getSize();
	
		if (winSize.x > 900)
		{
			mWidth = Math.floor((winSize.x - 900) / 2);
		}
		if (winSize.y > 600)
		{
			mHeight =  Math.floor(winSize.y/ 2);
		}
	}

	var mainBodDisplay = function (display) {
		this.setStyle('display', display);
	}
	var mainBodOpac = function (time) {
		this.set('morph', {
						 duration: time
					 }).morph({'opacity': [0,1], 'color': ['#F0FFF0','#000000']
		});
	}
	var hasFired = function (){
		onFire = false;
	}
	
	var positionMe = function() {
		onFire = true;
		dimensions();
		if ((mHeight) - 350 < 0){
			$('mainBodyContainer').set('morph', {
						  duration: 2500,
						  transition: Fx.Transitions.Quad.easeInOut
					}).morph({'margin-top': [(mHeight/2), 0], 'height': [0, 600]
				});
		}
		else {
			$('mainBodyContainer').set('morph', {
						  duration: 2500,
						  transition: Fx.Transitions.Quad.easeInOut
					}).morph({'margin-top': [mHeight, (mHeight - 300)], 'height': [0, 600]
				});
		}
		mainBodDisplay.delay(2600, $('mainBody'), 'block');
		mainBodOpac.delay(2500, $('mainBody'), 2500);
		hasFired.delay(2500);

		$('ourServices').addEvent('mouseenter', function(){
			$('ourServices').set('src', 'images/ourServicesLit.gif');
			});
		if(String(window.location).match('our_services') != 'our_services'){
			$('ourServices').addEvent('mouseleave', function(){
				$('ourServices').set('src', 'images/ourServicesDim.gif');
				});
			}
		$('ourServices').addEvent('domready', function(){
			if (String(window.location).match('our_services') == 'our_services'){
			$('ourServices').set('src', 'images/ourServicesLit.gif');
			}
			});
		
		$('greenBuilding').addEvent('mouseenter', function(){
			$('greenBuilding').set('src', 'images/greenBuildingLit.gif');
			});
		if(String(window.location).match('green_building') != 'green_building'){
			$('greenBuilding').addEvent('mouseleave', function(){
				$('greenBuilding').set('src', 'images/greenBuildingDim.gif');
				});
			}
		$('greenBuilding').addEvent('domready', function(){
			if (String(window.location).match('green_building') == 'green_building'){
			$('greenBuilding').set('src', 'images/greenBuildingLit.gif');
			}
			});

		$('aboutUs').addEvent('mouseenter', function(){
			$('aboutUs').set('src', 'images/aboutUsLit.gif');
			});
		if(String(window.location).match('about_us') != 'about_us'){
			$('aboutUs').addEvent('mouseleave', function(){
				$('aboutUs').set('src', 'images/aboutUsDim.gif');
				});
			}
		$('aboutUs').addEvent('domready', function(){
			if (String(window.location).match('about_us') == 'about_us'){
			$('aboutUs').set('src', 'images/aboutUsLit.gif');
			}
			});
		
		$('contactUs').addEvent('mouseenter', function(){
			$('contactUs').set('src', 'images/contactUsLit.gif');
			});
		if(String(window.location).match('contact_us') != 'contact_us'){
			$('contactUs').addEvent('mouseleave', function(){
				$('contactUs').set('src', 'images/contactUsDim.gif');
				});
			}
		$('contactUs').addEvent('domready', function(){
			if (String(window.location).match('contact_us') == 'contact_us'){
			$('contactUs').set('src', 'images/contactUsLit.gif');
			}
			});
		}
	
	var resizeMe = function() {
		if (Browser.Engine.trident && onFire != true){
			onFire = true;
			dimensions();
			if ((mHeight) - 350 < 0){
				$('mainBodyContainer').set('tween', {duration: 750}).tween('margin-top', 0);
			}
			else {
				$('mainBodyContainer').set('tween', {duration: 750}).tween('margin-top', (mHeight - 300));
			}
			hasFired.delay(750);
		}
	}

	window.addEvent('domready', positionMe);
	window.addEvent('resize', resizeMe);