Strange IE/OPERA behaviour

[kobo1d]

hi there!

i have a problem with a part of my JS code, which is working great in Safari / FF & Chrome ... this is the part of the script:

		var timerLeft;
		config.$leftnavbutton.hover(function(){ //assign nav button event handlers
			slideLeft();
			timerLeft = setInterval(slideLeft, 3572);
		}, function() {
  			clearInterval(timerLeft);
		});

		function slideLeft() {
  			stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);
		}

		
		config.$leftnavbutton.bind('mouseover', function(){ //assign nav button event handlers
			config.$leftnavbutton.css({width:'45px'}).appendTo('body');
		});
		config.$leftnavbutton.bind('mouseout', function(){ //assign nav button event handlers
			config.$leftnavbutton.css({width:'40px'}).appendTo('body');
		});

		config.$rightnavbutton.bind('mouseover', function(){ //assign nav button event handlers
			config.$rightnavbutton.css({width:'45px'}).appendTo('body');
		});
		config.$rightnavbutton.bind('mouseout', function(){ //assign nav button event handlers
			config.$rightnavbutton.css({width:'40px'}).appendTo('body');
		});


		var timerRight;
		config.$rightnavbutton.hover(function(){ //assign nav button event handlers
			slideRight();
			timerRight = setInterval(slideRight, 3572);    
		}, function() {
  			clearInterval(timerRight);
		});

		function slideRight() {
  			stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);
		}

the problem is on IE7+8 and OPERA... (both the same problems)

first of all the hover function is not reacting on UNhover, so the clearInterval thing is ignored
and second the mouseout function is ignored too, the picture is resized to 45px but not back to 40px...


can anybody help me out plz and tell me why this is bogus for IE&OPERA..

thanks

[jscheuer1]

Clearing the interval may be a timing issue which simply differs in the various browsers. I know that when we discussed this before it depended upon the ms set in two places, one in your config and the other in your code segment above. And it sounded like a bit of a balancing act.

That said, it's usually safest to set an interval with an anonymous function, so that (among other things) the reference to it cannot be overwritten by any event or return value of the function. Also, you cannot append the same element to the body more than once, and making extra events just to change the width of something is unwise.

Give this a shot:

		var timerLeft;
		config.$leftnavbutton.hover(function(){ //assign nav button event handlers
			this.style.width = '45px';
			slideLeft();
			timerLeft = setInterval(function(){slideLeft();}, 3572);
		}, function() {
			this.style.width = '40px'
  			clearInterval(timerLeft);
		});

		function slideLeft() {
  			stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);
		}

		var timerRight;
		config.$rightnavbutton.hover(function(){ //assign nav button event handlers
			this.style.width = '45px';
			slideRight();
			timerRight = setInterval(function(){slideRight();}, 3572);    
		}, function() {
			this.style.width = '40px';
  			clearInterval(timerRight);
		});

		function slideRight() {
  			stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);
		}

But that's just my best guess and assumes that this was working in those other browsers for the reasons which seem obvious, and that the timing issue I mentioned is not the problem.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[kobo1d]

ah! i see, cheers for the heads up.

first of all your corrected code works perfect in all browsers, but the best thing on it,
i also understood what you saied (why it works like this) :-)

thank you so much for all your help!