Hi all,

I am in the middle of designing a fold-out menu. At the moment I have two divs, one sat behind the other. I am currently working on the zIndexes to get the positioning right so ignore that part of the script.

Here is my script:


<script language ="Javascript">

function growThis(){
var thenav = document.getElementById("nav")
thenav.style.zIndex+= 2
if (thenav.style.pixelWidth <200){
    thenav.style.pixelWidth+=1;
    var growTimeout = window.setTimeout("growThis()", 1);
}
window.clearTimeout("growTimeout")
}


function shrinkThis(){
var oTheNav = document.getElementById("nav")
oTheNav.style.zIndex = 0
if(oTheNav.style.pixelWidth >20){
    oTheNav.style.pixelWidth-=1;
    var shrinkTimeout = window.setTimeout("shrinkThis()", 0)

}
window.clearTimeout("shrinkTimeout")
}
</script>

Its fairly self explanatory. But the problem I have is strange. If I switch screens from MSIE into another application, then switch back, the script triggers by itself. I haven't moused over or moused out, which is what triggers the script usually, so Im not really sure why its doing this? Any ideas anyone?

TIA
interrupt

__________________
\'sync\' &lt;cr&gt;
The name specified is not recognized as an internal or external command, operable program or batch file.

Is that the case even if the mouse is definitely off screen, on the task bar or such?

--

Joe (Microsoft MVP - XML)

It doesn't seem to matter where the mouse is at all. I have tried it woth the mouse off the screen, on the screen, the taskbar, everywhere. No joy.

interrupt

Odd. Post the whole thing (script / html / css).

I've fixed the general problem. The Timeouts were living a life of their own, not sure why. I now have a finished product. The only thing is, I am having some problems with it. If you run your mouse over the menu links too quickly the timeouts all seem to conflict and you get this horrid flickering effect. I have added the scripts below. The javascript is where I have the problem with the strange flicker effect so I have commented the code where necessary.

HTML:

<div id = "navB" class ="navbar" style ="width:20;" onmouseover ="growThis()" onclick = "shrinkThis()">Navigation (Click to Close)<br><ul id ="nav"><li><a href ="javascript:unhidemenua()" onmouseover = "unhidemenua()">Service Forms</a></li><li><a href ="javascript:unhidemenub()" onmouseover ="unhidemenub()">CSD Forms</a></li><li><a href ="javascript:unhidemenuc()" onmouseover ="unhidemenuc()">URL Here</a></li><li><a href ="javascript:unhidemenud()" onmouseover = "unhidemenud()">URL Here</a></li><li><a href ="javascript:unhidemenue()" onmouseover = "unhidemenue()">URL Here</a></li><li><a href ="javascript:unhidemenuf()" onmouseover = "unhidemenuf()">URL Here</a></li></ul></div>
<div id = "menua" style = "position:absolute; left:367; visibility:hidden" class ="submenus"><a href ="#" onclick = "hidemenua()" title ="Close">X</a> Service Forms<br><ul class ="ulclass"><li><a href ="javascript:alert('Form 1')" title ="Send an Amendments form by Email"><img src ="msg.gif" width ="12" height ="10"> Amendments</a></li><li><a href ="Form 2.htm"><img src ="msg.gif" width ="12" height ="10"> Message Form</a></li></ul></div>
<div id = "menub" style = "position:absolute; left:377; visibility:hidden" class ="submenus"><a href ="#" onclick = "hidemenub()" title ="Close">X</a> CSD Forms<br><ul class ="ulclass"><li><a href ="javascript:alert('Form 1')"><img src ="msg.gif" width ="12" height ="10"> Amendments</a></li><li><a href ="Form 2.htm"><img src ="msg.gif" width ="12" height ="10"> Message Form</a></li></ul></div>
<div id = "menuc" style = "position:absolute; left:387; visibility:hidden" class ="submenus"><a href ="#" onclick = "hidemenuc()" title ="Close">X</a></div>
<div id = "menud" style = "position:absolute; left:397; visibility:hidden" class ="submenus"><a href ="#" onclick = "hidemenud()" title ="Close">X</a></div>
<div id = "menue" style = "position:absolute; left:407; visibility:hidden" class ="submenus"><a href ="#" onclick = "hidemenue()" title ="Close">X</a></div>
<div id = "menuf" style = "position:absolute; left:417; visibility:hidden" class ="submenus"><a href ="#" onclick = "hidemenuf()" title ="Close">X</a></div>

End of HTML

CSS

.menudivclass{
font: bold 11px tahoma;
padding-right:0;
background-color ="#DAF1E6";
border-top: 1px solid black;
border-left:1px solid black;
border-bottom:1px solid black;
border-right:1px solid black;
overflow:auto;
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=0,StartColorStr='#FF003399', EndColorStr='#FF6699CC');
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0


}
.submenus{
width:200;
height:60;
bottom:30;
border-top: 2px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color:#fff;

}


.navbar{

height:50;
border-top:1px solid silver;
border-left:1px solid silver;
border-right:1px solid black;
border-bottom:1px solid black;
background-color:#DAF1E6;
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=0,StartColorStr='#FF003399', EndColorStr='#FF6699CC');
position: absolute;
left:0;
bottom:0;
overflow:auto;}

.ulclass{
list-style:none;
margin:4px;
padding-top:1px
}

.imgclass{
vertical-align:text-bottom}

.fontbackground{
color:#C86F6F;
background-color:#EAD9C8;
width:100%;
border-bottom:1px solid black;
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=2,StartColorStr='#1F8FFF', EndColorStr='#FFFF99');
}

body{
font: 10px tahoma;
background-color:white;
margin:0;
activelink:white
}

a{
color:#6FC8C8;
font: normal 11px tahoma;
text-decoration:none;
}

a:hover{
color:gray;
border-right:1px solid #C8D9EA;
border-top:1px solid #C8D9EA;
background-color:white;
}

a:active{
color: white;
font: bold
}

img{
border-style:none}

#maindiv{
filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=0,StartColorStr='#FF003399', EndColorStr='#FF6699CC');
border-right:1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
height:470;
}

ul#nav{
body{padding-top: 60px;background: #FFF; font: 76%
Arial,sans-serif
}

ul#nav{
list-style: none;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid black;
font-weight: bold;
text-align: center;
white-space: nowrap
}
ul#nav li{display: inline;
margin: 0 2px
}
ul#nav a{text-decoration: none; padding: 0 0 3px;
border-bottom: 1px solid blue;
color:black;

}

ul#nav a#current{border-color: black;color: white;

}
ul#nav a:hover{
border-color: black;
color: lightblue;
border-left:2px solid black;
border-top:2px solid black;
background-color:slateblue
}


End of CSS

Javascript:

//script written by interrupt


function growThis(){

//this function 'grows' the menu from the bottom left corner

    var thenav = document.getElementById("navB")
    //reference navB which is the main body of the navBar

    thenav.style.zIndex = 1
    //put it in front (not sure if there's a need for this)
    if(thenav.style.pixelLeft<250){

    thenav.style.pixelLeft+=10;
    thenav.style.pixelWidth+=20


    var growTimeout = window.setTimeout("growThis()", 1);
    //call the growThis function every millisecond until pixelLeft equals 250
    }

    else{
    window.clearTimeout(growThis)
    //get rid of the Timeout
    }

    }





function shrinkThis(){

    //this function is the same as above but in reverse
    var oTheNav = document.getElementById("navB")

    if(oTheNav.style.pixelLeft>0){
    oTheNav.style.pixelLeft-=10;
    oTheNav.style.pixelWidth-=20
    var shrinkTimeout = window.setTimeout("shrinkThis()", 1)

    }

    else{
    window.clearTimeout(shrinkThis)
    }
    hidemenua()
    hidemenub()
    hidemenuc()
    hidemenud()
    hidemenue()
    hidemenuf()
    }




function unhidemenua(){
                //hide all the other menus
                hidemenub()
                hidemenuc()
                hidemenud()
                hidemenue()
                hidemenuf()
                unhideinstylea()
    }
function unhideinstylea(){
    document.getElementById("menua").style.visibility = "visible"
//set the menu to be visible before applying the slide effect

    var oTheNav = document.getElementById("menua")
//menua is a hidden div at the bottom of the screen
    if(oTheNav.style.pixelBottom<46){
    oTheNav.style.pixelBottom+=5;
//use the pixelBottom property to 'move' the div into sight
    oTheNav.style.pixelWidth+=20;
//increase the width of the div until the pixelBottom value equals 46
    var shrinkTimeout = window.setTimeout("unhideinstylea()", 20)
//call unhideinstylea function until pixelBottom value equals 46
    }

    else{
    window.clearTimeout(shrinkTimeout)
    }
//get rid of shrinkTimeout
    }




function hidemenua(){




    var oTheNav = document.getElementById("menua")
//menua is a hidden div at the bottom of the document

    if(oTheNav.style.pixelBottom>-20){
//if menua's position is greater than -20 from the bottom of the screen

    oTheNav.style.pixelBottom-=5;
//set its value to itself + itself - 5

    oTheNav.style.pixelWidth-=20;
//do the same with its pixelWidth Property, effectively shrinking and moving it at the same time

    menuDropA = window.setTimeout("hidemenua()", 20)
//keep calling this function until oTheNav's pixelBottom value is equal to -20
    }
    else{
    document.getElementById("menua").style.visibility = "hidden"
    window.clearTimeout(menuDropA);}
//tidy up
    }



function unhidemenub(){
    document.getElementById("menub").style.visibility = "visible"
                hidemenua()
                hidemenuc()
                hidemenud()
                hidemenue()
                hidemenuf()
                unhideinstyleb()
    }
function unhideinstyleb(){
    document.getElementById("menub").style.visibility = "visible"
    var oTheNavb = document.getElementById("menub")

    if(oTheNavb.style.pixelBottom<46){
    oTheNavb.style.pixelBottom+=5;
    oTheNavb.style.pixelWidth+=20;

    var shrinkTimeoutb = window.setTimeout("unhideinstyleb()", 20)

    }

    else{
    window.clearTimeout(shrinkTimeoutb)
    }

    }

function hidemenub(){

    var oTheNavb = document.getElementById("menub")

    if(oTheNavb.style.pixelBottom>-20){
    oTheNavb.style.pixelBottom-=5;
    oTheNavb.style.pixelWidth-=20;
    menuDropB = window.setTimeout("hidemenub()", 20)
    }
    else
    {
    document.getElementById("menub").style.visibility = "hidden"
    window.clearTimeout(menuDropB);
    }

    }


function unhidemenuc(){
    document.getElementById("menuc").style.visibility = "visible"
                hidemenua()
                hidemenub()
                hidemenud()
                hidemenue()
                hidemenuf()
                unhideinstylec()
    }
function unhideinstylec(){
    document.getElementById("menuc").style.visibility = "visible"


    var oTheNavc = document.getElementById("menuc")

    if(oTheNavc.style.pixelBottom<46){
    oTheNavc.style.pixelBottom+=5;
    oTheNavc.style.pixelWidth+=20;
    var shrinkTimeoutc = window.setTimeout("unhideinstylec()", 20)

    }

    else{
    window.clearTimeout(shrinkTimeoutc)
    }


    }

function hidemenuc(){
    var oTheNavc = document.getElementById("menuc")

    if(oTheNavc.style.pixelBottom>-20){
    oTheNavc.style.pixelBottom-=5;
    oTheNavc.style.pixelWidth-=20;
    menuDropC = window.setTimeout("hidemenuc()", 20)
    }
    else
    {
    document.getElementById("menuc").style.visibility = "hidden"
    window.clearTimeout(menuDropC);
    }

    }




function unhidemenud(){
    document.getElementById("menud").style.visibility = "visible"
                hidemenua()
                hidemenub()
                hidemenuc()
                hidemenue()
                hidemenuf()
                unhideinstyled()
    }

function unhideinstyled(){
    document.getElementById("menud").style.visibility = "visible"

    var oTheNavd = document.getElementById("menud")

    if(oTheNavd.style.pixelBottom<46){
    oTheNavd.style.pixelBottom+=5;
    oTheNavd.style.pixelWidth+=20;

    var shrinkTimeoutd = window.setTimeout("unhideinstyled()",20)

    }

    else{
    window.clearTimeout(shrinkTimeoutd)
    }


    }


function hidemenud(){
    var oTheNavd = document.getElementById("menud")

    if(oTheNavd.style.pixelBottom>-20){
    oTheNavd.style.pixelBottom-=5;
    oTheNavd.style.pixelWidth-=20;
    menuDropD = window.setTimeout("hidemenud()", 20)
    }
    else
    {
    document.getElementById("menud").style.visibility = "hidden"
    window.clearTimeout(menuDropD);
    }

    }




function unhidemenue(){
    document.getElementById("menue").style.visibility = "visible"
                hidemenua()
                hidemenub()
                hidemenuc()
                hidemenud()
                hidemenuf()
                unhideinstylee()
    }

function unhideinstylee(){
    document.getElementById("menue").style.visibility = "visible"

    var oTheNave = document.getElementById("menue")

    if(oTheNave.style.pixelBottom<46){
    oTheNave.style.pixelBottom+=5;
    oTheNave.style.pixelWidth+=20;

    var shrinkTimeoute = window.setTimeout("unhideinstylee()",20)

    }

    else{
    window.clearTimeout(shrinkTimeoute)
    }


    }


function hidemenue(){
    var oTheNave = document.getElementById("menue")

    if(oTheNave.style.pixelBottom>-20){
    oTheNave.style.pixelBottom-=5;
    oTheNave.style.pixelWidth-=20;
    menuDropE = window.setTimeout("hidemenue()", 20)
    }
    else
    {
    document.getElementById("menue").style.visibility = "hidden"
    window.clearTimeout(menuDropE);
    }

    }




function unhidemenuf(){
    document.getElementById("menuf").style.visibility = "visible"
                hidemenua()
                hidemenub()
                hidemenuc()
                hidemenud()
                hidemenue()
                unhideinstylef()
    }

function unhideinstylef(){
    document.getElementById("menuf").style.visibility = "visible"

    var oTheNavf = document.getElementById("menuf")

    if(oTheNavf.style.pixelBottom<46){
    oTheNavf.style.pixelBottom+=5;
    oTheNavf.style.pixelWidth+=20;

    var shrinkTimeoutf = window.setTimeout("unhideinstylef()",20)

    }

    else{
    window.clearTimeout(shrinkTimeoutf)
    }


    }


function hidemenuf(){
    var oTheNavf = document.getElementById("menuf")

    if(oTheNavf.style.pixelBottom>-20){
    oTheNavf.style.pixelBottom-=5;
    oTheNavf.style.pixelWidth-=20;
    menuDropF = window.setTimeout("hidemenuf()", 20)
    }
    else
    {
    document.getElementById("menuf").style.visibility = "hidden"
    window.clearTimeout(menuDropF);
    }

    }

End of Javascript

Any Help Much appreciated. Just cant get my head round why it flickers if you run the mouse over it too quickly.

TIA
interrupt