PDA

View Full Version : Delay for showing Drop Down Tabs



dabri
01-16-2008, 03:49 PM
1) Script Title: Drop Down Tabs (5 styles)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem:

I will use this excellent script for the navigation of my homepage.
I have modified the drop down menus, these menus will now appear in full width of the page (width: 970 px).

My problem is, if I move my cursor from the header over the horizontal CSS tabs menu to the body of the page, the second level drop down menu will appear immediately. If I want just watch the actual page, the drop down menu often cover the body of my page.

Iīm looking for a way to delay the fade in the drop down menu.
The drop down menu only should display, if you stay e.g. 300 miliseconds over the according link in the horizontal CSS tabs menu.

Unfortunately my knowledge in JavaScript is very bad.

Thanks in advanced for your help!

Regards Daniel

ddadmin
01-17-2008, 09:38 AM
See solution below instead

dabri
01-17-2008, 07:32 PM
Thanks for your answer, but unfortunately it didnīt work.

I receive a message from the IE
"'menuitem' is undefined"

In trial-and-error method Iīve tried somethings with function "setTimeout", but I have no luck.

Hope you can give an other advice.

Thanks Daniel

ddadmin
01-18-2008, 12:25 PM
Ah yes forgot to test this in IE, which has its quirks. Do this instead. Replace the below lines:


var event=typeof e!="undefined"? e : window.event
tabdropdown.dropit(this, event, this.getAttribute("rel"))

with:


var event=typeof e!="undefined"? e : {type: "mouseover"}
var menuitem=this
setTimeout(function(){tabdropdown.dropit(menuitem, event, menuitem.getAttribute("rel"))}, 500)

That should do it. And since you're already adding a delay to the mouseover, you might want to remove the default mouseout delay:


disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout

Change 200 to 0.

dabri
01-18-2008, 01:47 PM
Thanks for your help, your Code works.

But not in the accurate way ;-)

Iīve uploaded my menu:
http://www.web-center.info/test/menu/

If I move the cursor quick from the header over the menu to the body, the drop down menu should not displayed.

But at the moment, the menu will displayed if I moved from header to the body (with the added delay).

Iīm looking for a way, that the menu only will displayed if I stay e.g. 300 ms over the according link in the horizontal CSS tabs menu.

If I hover quick over the horizontal CSS tabs menu, the drop down menu should not be shown.

Hope the method is possible.

Thank you so far! Daniel

ddadmin
01-18-2008, 02:38 PM
Sure. After implementing the above changes, edit the line:


setTimeout(function(){tabdropdown.dropit(menuitem, event, menuitem.getAttribute("rel"))}, 500)

to:

tabdropdown.delayshow=setTimeout(function(){tabdropdown.dropit(menuitem, event, menuitem.getAttribute("rel"))}, 500)

Then find the below new line inside the script, and add to it the line in red:


delayhidemenu:function(obj2){
clearTimeout(this.delayshow)

This should do it, provided you've set the below line to 0:


disappeardelay: 0, //set delay in miliseconds before menu disappears onmouseout

dabri
01-18-2008, 04:32 PM
Basically it looks good and thanks, thanks a lot,
but the display of the drop down menu is not stable.

1)
If I refresh the page and will move the cursor quickly from header to the body, the drop down menu will appear.

2)
If stay 500 ms over a link in the horizontal CSS tabs menu, then the drop down menu will appear. This is so correct.
But if I try to click on a link in the drop down menu, it isnīt possible, because very often the drop down menu collapsed immediately.

ddadmin
01-26-2008, 03:13 PM
I'm not sure I understand 1). For 2) I see what you're saying. Try the attached .js file, which incorporates all of the above issues, hopefully.

dabri
01-27-2008, 11:24 AM
Im sorry to say, but didnīt see a difference ;-)

http://www.web-center.info/test/menu/
(Set the setTimeout to 1500)


1)
If I refresh the page and will move the cursor quickly from header to the body, the drop down menu will appear.

I try to explane this in other words.
In my sample, after I enter the url and the page is loaded, my cursor is in the head section. Now I move the cursor quickly to the bottom of the page. In the way to the bottom, the cursor will move quickly over the menuline.

In this case, the dropdown menus shouldnīt displayed, but the dropdown menu will show in my sample.


2)
If stay 500 ms over a link in the horizontal CSS tabs menu, then the drop down menu will appear. This is so correct.
But if I try to click on a link in the drop down menu, it isnīt possible, because very often the drop down menu collapsed immediately.

The immediate collapse is still so.

ddadmin
01-28-2008, 07:00 PM
For #2, you're right, after testing it some more, the problem is still there. The file I had attached was actually an incorrect version, but it doesn't matter, the correct version still has other quirks. Starring at this code is driving me absolutely crazy, so unfortunately I'm going to have to take a break from it. :(

dabri
01-28-2008, 11:21 PM
OK - no problem.
Thank you so far!

I am carry on testing, if I find a solution, I will answer.