settimeout problem

[andyb99uk]

Hi there,

I'm using the settimeout function to slowly expand an image within a page.
This is triggered when the mouse is moved over the image. When the mouse is moved off the image it is reduced back to its original size. My problem is, when I move off the image before it is fully expanded it returns to its normal size and then continues to expand. I think this is because the settimeouts are still queuing.
Is there a way to flush out any settimeouts that are still in the queue?
I know I can use the settimeoout.clear but as I will have loads in the queue, I don't want to keep an array of all the id's that settimeout creates, I just want to drop the lot.

Any idea would be gratfully received.

Thanks.
Andy.

 

[cLFlaVA]

code?

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[andyb99uk]

Two functions, grow and onpic. these are called but the onmouseover (img code at bottom of the page).
Also, outpic() which puts the image back to normal.
Bit quick and dirty!
Here we go......

function grow()
{
if (bTypeNs) {
var imgid2 = (NN4) ? document

: document.getElementById(imgsrc);
} else {
var imgid2 = document.all

;
}
if (bTypeNs) {
var imgid3 = (NN4) ? document[obj] : document.getElementById(obj).style;
} else {
var imgid3 = document.all[obj].style;
}

lpos=lpos-16;
imgid3.left=lpos;
imgid2.width=imgid2.width+16;
if (imgid2.height < vheight2) {
imgid2.height=imgid2.height+10
}
if (imgid2.width < vwidth2) {
setTimeout("grow()",1);
} else
{
imgid2.width=vwidth2;
imgid2.height=vheight2;
}

}

function onpic2()
{
if (bTypeNs) {
imgsrc2 = document.getElementById("anchor");
} else {
imgsrc2 = document.all.anchor;
}
lpos = getRealLeft(imgsrc2);
tpos = getRealTop(imgsrc2);
if (bTypeNs) {
var imgid = (NN4) ? document

: document.getElementById(imgsrc);
} else {
var imgid = document.all

;
}
if (bTypeNs) {
var imgid2 = (NN4) ? document[obj] : document.getElementById(obj).style;
} else {
var imgid2 = document.all[obj].style;
}
imgid2.left=lpos

grow()
}

//Reduce the image back to original size.
function outpic(vwidth,vheight,obj,imgsrc)
{
if (bTypeNs) {
var imgsrc2 = document.getElementById("anchor");
} else {
var imgsrc2 = document.all.anchor;
}
var lpos = getRealLeft(imgsrc2);
var tpos = getRealTop(imgsrc2);

if (bTypeNs) {
var imgid = (NN4) ? document

: document.getElementById(imgsrc);
} else {
var imgid = document.all

;
}
if (bTypeNs) {
var imgid2 = (NN4) ? document[obj] : document.getElementById(obj).style;
} else {
var imgid2 = document.all[obj].style;
}
imgid2.left=lpos;
imgid2.top=tpos;
imgid.width=vwidth;
imgid.height=vheight;

}
<img id="diag" src="../images/yacYacNumber_Image.gif" onmouseover="javscriptnpic2();" onmouseout="javascript=outpic(200,112,'imgdiv','diag');" width=200 height=113 border=0>
</div>
<script language="javascript">
var lpos;
var lpos2;
var vwidth=600;
var vwidth2=600;
var vheight2=337;
var imgsrc2='diag';
var imgsrc='diag';
var obj2='imgdiv';
var obj='imgdiv';
count=1;

resizereload();
</script>

 

[kaht]

andy, all you need is a boolean flag to tell the image to continue growing. Set it to true when you mouseover the image, and change it to false when you mouseout. Here's what I'd change:

[b]var continueGrowing = false;[/b]
function grow()
{
[b]if (continueGrowing) {[/b]
    if (bTypeNs) {
        var imgid2 = (NN4) ? document[img]rc[/img] : document.getElementById(imgsrc);
    } else {
        var imgid2 = document.all[img]rc[/img];
    }
    if (bTypeNs) {
        var imgid3 = (NN4) ? document[obj] : document.getElementById(obj).style;
    } else {
        var imgid3 = document.all[obj].style;
    }
    
    lpos=lpos-16;
    imgid3.left=lpos;
    imgid2.width=imgid2.width+16;
    if (imgid2.height < vheight2) {
        imgid2.height=imgid2.height+10
    }
    if (imgid2.width < vwidth2) {
        setTimeout("grow()",1);    
    } else
    {
        imgid2.width=vwidth2;
        imgid2.height=vheight2;
    }
[b]}[/b]
}

function onpic2()
{
    if (bTypeNs) {
        imgsrc2 = document.getElementById("anchor");
    } else {
        imgsrc2 = document.all.anchor;
    }
    lpos = getRealLeft(imgsrc2);
    tpos = getRealTop(imgsrc2);
    if (bTypeNs) {
        var imgid = (NN4) ? document[img]rc[/img] : document.getElementById(imgsrc);
    } else {
        var imgid = document.all[img]rc[/img];
    }
    if (bTypeNs) {
        var imgid2 = (NN4) ? document[obj] : document.getElementById(obj).style;
    } else {
        var imgid2 = document.all[obj].style;
    }
    imgid2.left=lpos
    [b]continueGrowing = true;[/b]
    grow()
}

//Reduce the image back to original size.
function outpic(vwidth,vheight,obj,imgsrc)
{
    if (bTypeNs) {
        var imgsrc2 = document.getElementById("anchor");
    } else {
        var imgsrc2 = document.all.anchor;
    }
    var lpos = getRealLeft(imgsrc2);
    var tpos = getRealTop(imgsrc2);

    if (bTypeNs) {
        var imgid = (NN4) ? document[img]rc[/img] : document.getElementById(imgsrc);
    } else {
        var imgid = document.all[img]rc[/img];
    }
    if (bTypeNs) {
        var imgid2 = (NN4) ? document[obj] : document.getElementById(obj).style;
    } else {
        var imgid2 = document.all[obj].style;
    }
    imgid2.left=lpos;
    imgid2.top=tpos;
    imgid.width=vwidth;
    imgid.height=vheight;
    [b]continueGrowing = false;[/b]
}

-kaht

 

[andyb99uk]

Nice one Kaht!

Works a treat, thanks very much.

Andy.