Results 1 to 3 of 3

Thread: Strange IE/OPERA behaviour

  1. #1
    Join Date
    Jun 2007
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Post Strange IE/OPERA behaviour

    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:

    Code:
    		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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    		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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kobo1d (05-16-2010)

  4. #3
    Join Date
    Jun 2007
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •