CODEWITHSUNDEEP
javascriptinternet-explorerprototypejsobserver-pattern
Jonathan Day
Jonathan Day

Reputation: 18702

prototype observers not firing in IE8

I can't work out what's causing IE8 to ignore these observers. It works in FF, Chrome (10) and Safari. It never hits the breakpoints set in IE8 Developer Tools.

<script type="text/javascript">
//<![CDATA[
    var timeoutHolder = null;
    function displayZoom(id){
        window.clearTimeout(timeoutHolder);  //if we are coming from another hover target, prevent the opacity reset
        if($('mini-main').getOpacity()!=0.4)
            new Effect.Opacity('mini-main',{from:1.0,to:0.4,duration:0.5});
        new Effect.Appear(id,{duration:0.3});
    }
    function resetZoom(id){
        timeoutHolder = window.setTimeout(function(){
            new Effect.Opacity('mini-main',{from:0.4,to:1.0,duration:0.5});
        }, 100);    //gives us 100 ms for user to move onto another target before we reset the opacity
        new Effect.Fade(id,{duration:0.5});
    }
    $$('.mini-target').each(function(target_div){
        target_div.observe('mouseover',function(){
            displayZoom(target_div.id+'-hover');
        });
        target_div.observe('mouseout',function(){
            resetZoom(target_div.id+'-hover');
        });
    });
//]]>
</script>

the associated phtml is:

        <img src="<?php echo Mage::getBaseUrl('media').'Main.jpg'?>" id="mini-main"/>
            <div id="mini-target-1" class="mini-target"></div>
            <div id="mini-target-2" class="mini-target"></div>
            <div id="mini-target-3" class="mini-target"></div>
            <div id="mini-target-4" class="mini-target"></div>

            <div id="mini-target-1-hover" class="mini-hover" style="display:none">
                <img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-1.png'?>"/>
            </div>
            <div id="mini-target-2-hover" class="mini-hover" style="display:none">
                <img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-2.png'?>"/>
            </div>
            <div id="mini-target-3-hover" class="mini-hover" style="display:none">
                <img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-3.png'?>"/>
            </div>
            <div id="mini-target-4-hover" class="mini-hover" style="display:none">
                <img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-4.png'?>"/>
            </div>

I've also tried attaching the observers individually (without the each) but that doesn't make any difference:

    $('mini-target-2').observe('mouseover',function(){
            displayZoom('mini-target-2-hover');
    });
    $('mini-target-2').observe('mouseout',function(){
            resetZoom('mini-target-2-hover');
    });

Thanks,
JD

Upvotes: 1

Views: 1440

Answers (4)

bogatyrjov
bogatyrjov

Reputation: 5378

I had this issue, when observe wasn't firing on a hidden element. All I had to do to make it work was to make that element display:block; before using observe.

If your element is initially set to display:none;, then when you change the background image, IE8 (and below) might be changing the css display property to block automatically.

Upvotes: 1

Allan Chang
Allan Chang

Reputation: 21

I've had a case before where set of ID names caused Javascript issues in IE.

The scheme consisted of numbers immediately after a hyphen -.

Try removing the hyphen before the number. Change mini-target-1 to mini-target1?

Upvotes: 2

Jonathan Day
Jonathan Day

Reputation: 18702

Hackiest of hacks. It works if you set a background on the mini-target divs. I ended up using a conditional setStyle for IE to display a spacer gif. 1998 browser hacks FTW!!!

if(Prototype.Browser.IE){
     target_div.setStyle({background: 'url("<?php echo Mage::getBaseUrl('media').'spacer.gif'?>")'});
}

If anyone can explain why IE needs a background to fire an Observer, I'd be happy to accept their answer... Probably something to do with hasLayout?

Upvotes: 2

Al Harding
Al Harding

Reputation: 31

What if you change the way you're doing it so it's like:

$(document).ready(function () {
    $('.mini-target').mouseover(function () {
        displayZoom($(this).attr("id") + '-hover');
    }).mouseout(function () {
        resetZoom($(this).attr("id") + '-hover');
    });
});

You're still referencing each "mini-target" as you mouseover it and we chain the mouseout to the end of it.

That will run in IE8.

Cheers, Al

Upvotes: 1

Related Questions