Question

I have a strange issue, which is bugging me for the last couple of days now, i will try to explain it as good as possible and will try to provide as much details as possible to resolve this matter, thanks in advance.

Problem:

Please visit: http://tinyurl.com/8td2n3n, and browse around, you will see half way down the page on the left hand side a block with a waving flag/label.

The waving flag/label is a Jquery .animate canvas is not showing up correctly in Internet Explorer when browsing through the site, but correct in Firefox, chrome and safari, however when refreshing the same page it will be displayed correctly….?!? confused.

Found so far:

• When reloading the same page in Internet Explorer, it does work
• When running IE script debugging (F12) it gives a error:

Line: 87
Error: Unable to set value of the property ‘width’: object is null or undefined

Line 87 = flag.width = h.width;

Below i posted the javascript block:

<script type="text/javascript">
var h = new Image;
h.onload = function(){
    var flag = document.getElementById('flag');
    var amp = 10;
    flag.width  = h.width;
    flag.height = h.height + amp*2;
    flag.getContext('2d').drawImage(h,0,amp,h.width,h.height);
    flag.style.marginLeft = -(flag.width/2)+'px';
    flag.style.marginTop  = -(flag.height/2)+'px';
    var timer = waveFlag( flag, h.width/10, amp );
};
h.src = 'img/wijnwijs-logo.png';

function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){
    if (!squeeze)    squeeze    = 0;
    if (!shading)    shading    = 150;
    if (!period)     period     = 300;
    if (!amplitude)  amplitude  = 10;
    if (!wavelength) wavelength = canvas.width/10;

    var fps = 60;
    var ctx = canvas.getContext('2d');
    var   w = canvas.width, h = canvas.height;
    var  od = ctx.getImageData(0,0,w,h).data;
    // var ct = 0, st=new Date;
    return setInterval(function(){
        var id = ctx.getImageData(0,0,w,h);
        var  d = id.data;
        var now = (new Date)/period;
        for (var y=0;y<h;++y){
            var lastO=0,shade=0;
            var sq = (y-h/2)*squeeze;
            for (var x=0;x<w;++x){
                var px  = (y*w + x)*4;
                var pct = x/w;
                var o   = Math.sin(x/wavelength-now)*amplitude*pct;
                var y2  = y + (o+sq*pct)<<0;
                var opx = (y2*w + x)*4;
                shade = (o-lastO)*shading;
                d[px  ] = od[opx  ]+shade;
                d[px+1] = od[opx+1]+shade;
                d[px+2] = od[opx+2]+shade;
                d[px+3] = od[opx+3];
                lastO = o;
            }
        }
        ctx.putImageData(id,0,0);       
        // if ((++ct)%100 == 0) console.log( 1000 * ct / (new Date - st));
    },1000/fps);
}
</script>

The css is:

<style>
    #flag { position:relative; z-index:0;top:-25px;left:100px;}
</style>

The actual html element is:

<canvas id="flag"></canvas>

I have no idea what to do to get this working, anyone any ideas please shoot, willing to try a lot.

NEW!! AMENDED FOR CSS DEBUGGING: NEW!!

CSS:
-----------------------------------
#wijnwijs_block_left {}
#wijnwijs_block_left h4 {background:#4a1a32;}
#wijnwijs_block_left .block_content {line-height:145%;min-height:200px;padding:0 0 0 0;background:url(../img/categories_dark.png) 0 0 repeat-y;}
#wijnwijs_block_left .block_content a {font:normal 12px "Trebuchet MS";color:#c7d0d0;text-decoration:none;}
#wijnwijs_block_left .block_content a:hover {text-decoration:underline;}
#wijnwijs_block_left select {width:143px;height:26px;margin:7px 0 0 0;padding:3px;background:#fff;border:1px solid #fff;font:normal 12px "Trebuchet MS";color:#3b570e;}
-----------------------------------
div.column div.block {}
div.column div.block h4 {height:33px;padding:16px 0 0 28px;background:#4a1a32;font:normal 16px "Trebuchet MS";color:#fff;text-transform:uppercase;}
div.column div.block h4 a {font:normal 16px "Trebuchet MS";color:#fff;text-decoration:none;}
div.column div.block h4 a:hover {text-decoration:underline;}
div.column div.block .block_content {padding:0 28px 28px 28px;background:#4a1a32;}
div.column div.block ul.bullet {padding-top:21px;}
-----------------------------------
#wijnwijs_block_left {}
#wijnwijs_block_left h4 {background:#4a1a32;}
#wijnwijs_block_left .block_content {line-height:145%;min-height:200px;padding:0 0 0 0;background:url(../img/categories_dark.png) 0 0 repeat-y;}
#wijnwijs_block_left .block_content a {font:normal 12px "Trebuchet MS";color:#c7d0d0;text-decoration:none;}
#wijnwijs_block_left .block_content a:hover {text-decoration:underline;}
#wijnwijs_block_left select {width:143px;height:26px;margin:7px 0 0 0;padding:3px;background:#fff;border:1px solid #fff;font:normal 12px "Trebuchet MS";color:#3b570e;}
-----------------------------------
$(document).ready(function() {
    $('.wijnwijs1').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
-----------------------------------
#flag { position:relative; top:25px;left:100px;}
.wijnwijs1 {
    width: 200px;
    height: 200px;
}
-----------------------------------
<div id="wijnwijs_block_left" class="block">
    <h4>&nbsp;</h4>
    <div class="block_content">
        <div style="position:relative;z-index:9999999;top:-30px;"><a href="wijnwijs.asp"><canvas id="flag"></canvas></a></div>
        <div class="wijnwijs1" style="position:relative;z-index:1;top:-67px;height:100px;">
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155034_cigale classique.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/247715607_jose_galo_rueda.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155202_rocca_ernesto.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155137_corterosso.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155137_salvaterra_amarone.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155137_patriarche.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155137_st_salvaterra.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155202_xr_winemakers_premium.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309156171_grigio_pg.jpg" width="200px" height="200px"/></a>
            <a href="wijnwijs.asp"><img src="modules/wijnwijs/images/309155459_rocca_grande_passolo.jpg" width="200px" height="200px"/></a>
        </div>
    </div>
</div>

Answer 1

You are getting this error because your image is loaded before the canvas with id flag is. Upon refresh it is not throwing this error because the canvas element is loaded from cache before the image is loaded, because your image is always set to load dynamically by your javascript. Wrap the code that you have inside the third script tag with $(document).ready() and you should not be getting this exception anymore.

Update:
Here is the thing with the image moving up. When initially the page is loaded your div carrying the canvas has different dimensions until the canvas is modified in your animation function. This is the reason why the image jumps up

<div style="position:relative;z-index:9999999;top:-30px;"><a href="wijnwijs.asp"><canvas id="flag"></canvas></a></div>

Once it’s loaded the container below it sits in place. More specifically the issue is because of the margin-top: -63px for the canvas, because this is not the same positioning that the div container has.