...

View Full Version : drop down menu leaving a trace when it goes up



mapleleaf
05-20-2009, 10:32 PM
My drop down menu seem to leave a few pixels of trace when it closes.
Any ideas?
html:

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)"><img src="images/gif/company.gif" alt="company"></dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">mission</a></li>
<li><a href="#" class="underline">vision</a></li>
<li><a href="#" class="underline"><span style="color: #000;">SOURCE</span> story</a></li>
<li><a href="#" class="underline">Exec.team</a></li>
<li><a href="#">people<br>helping<br>people</a></li>
<li><a href="#" class="underline">news center</a></li>
<li><a href="#" class="underline">meet<br>the boss</a></li>
</ul>
</dd>
</dl>

Javascript file contents:

var DDSPEED = 15;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}

css:


.dropdown {float:left; margin:0; padding:0; border:0;white-space:nowrap;}
.dropdown dl {margin:0; padding:0; border:0;white-space:nowrap;font-size:0; line-height:0}
.dropdown dt {width:94px; height:23px; padding:0px; border:0px; margin:0px; font-weight:bold; cursor:pointer; white-space:nowrap;}

.dropdown dd {position:absolute; overflow:hidden; width:94px; display:none; background:#fff; z-index:200; padding:0px; border:0px; margin:0px;}
.dropdown ul {width:94px;list-style:none; padding:0px; border:0px; margin:0px; white-space:nowrap;}
.dropdown li {display:inline;padding:0px; border:0px; margin:0px;white-space:nowrap;}
.dropdown a {display:block; padding:3px; color: #ffffff; text-decoration:none; text-align:center;background:#8d8b8c; width:93px; z-index:300; font-family: sans-serif;}
.dropdown a:active{display:block; padding:3px; color: #ffffff; text-decoration:none; text-align:center;background:#8d8b8c; width:93px; z-index:300;}
.dropdown a:visited {display:block; padding:3px; color: #ffffff; text-decoration:none; text-align:center;background:#8d8b8c; width:93px; z-index:300;}
.dropdown a:hover {background:#494748; color:#000}
Very odd.
I have tried a few things css wise but maybe it is in the script.
Thanks for any help

mic2100
05-21-2009, 11:23 AM
i have tried this in IE8, FF3 and Safari...

I cannot get it to leave any pixels on the screen once the menu fades. What browser are u using when you test?

mapleleaf
05-21-2009, 04:46 PM
That is good to hear as I am getting that in all browsers.
Maybe there is something in another part of my code.

mapleleaf
05-21-2009, 04:55 PM
any idea how to hide the the drop down after it has gone up or set the height to 0.
I changed this :

function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);

}

to this:

function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
c.style.height = '0px';
}

But I would like the height setting to happen after the collapse.
With that code it just goes to 0 immediately



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum