Trying to create a submenu with a tables and divs from a db, when the mouse is
rolled onto a item a submenu would expand using onmouseover and closed again using
onmouseout.
I got everything worked out but the only thing I cant get to work
is on the <div> that expands the main menu, the onmouseout is being activated
when the mouse is being moved over the sub menus which are the
<tr> and not the main menu <div>.
This is the basic jist of the code that I have a problem with.
<div is out')">
<table width="117" height="78" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="117" height="19" bgcolor="#006699"> Sub menu 1</td>
</tr>
<tr>
<td height="20" bgcolor="#006699">Sub menu 2</td>
</tr>
</table>
</div>
I've looked on some over submenus that others have created and they use <div>
and <span>, but same problem I have gotten. Would anyone tell me a way of making this work?
I'm using code below to run a function when the user move the mousepointer from within a DIV and outside it:The idea is that that mousepointer motion shall hide the DIV.
Code:
document.getElementById(theID).onmouseout = hideDiv; if (document.getElementById(theID).captureEvents) document.getElementById(theID).captureEvents(Event.MOUSEOUT);
It kind of works, but the problem is that if I move the mousepointer to fast out of the DIV then it will not trigger.The div in question has some elements within it, and originally it was allmost fully covered by those element... and then the onmouseout did not work that good....So I had to create some padding for the div to make it detect the onmouseout better... kind of work... but sometimes failes to trigger on the onmouseout.That padding also make the div not look that good ... so would like to get rid of all the padding as well, and make it work, if possible.I have tested this in the following browsers and get pretty much same behaviour in them all:IE8, Firefox (latest), Chrome (latest), Safari for win (latest beta)...
does someone know how to add a submenu or menu like this sample [URL]...scripts/jquery_simple_drop_down_menu/# but not on a ul but on a button (<button id="rerun">Refresh</button>) Or having a menu with submenu where the first item looks like the button. And the button have the same style than here [URL]..
[URL]As I hover over Item 15, I want it to be like, "Okay, this list I'm about to display is going to be too long, so let's disregard the 'top: 10px' line in the CSS and instead have the submenu sit with its last item right at the bottom aligned with the bottom of the gradient." That way, we know for sure that the submenu will not reach past the height of the body, and the last item will be visible. The bottom of the last item's cell should "hug" the bottom of the page/gradient.
I have a menu with a horizontal submenu. What I want is for the submenu to stay active if the mainmenu link is activated... This I got so far. Now what I cant figure out is how to make the active submenu hide when hovering over the other mainmenu links... And show again when not hovering...
Here is what I have tryid so far:
Code CSS: #navbar { top: 0; left: 0;
[code]...
Now this allmost does the part except hidding the active submenu when hovering...
I have constructed a DHTML web editor, and it is working fine using many of the the components from my own scripting and some of the MSHMTL COMs. Now, everything is working fine,... except within the editing content component, i have a bunch of div's that call javascript functions to do various things including save,... insert tables... whatever! and they all work... but if i onClick a div,hold the button move off of the div and onMouseUp,I get an error message comes up saying:
A Runtime Error has occurred. Line 395 Error: 'className' is null or not an object
now... am i right when i say the error is coming from the appropriate onMouseUp function not being sent anything and it is trying to set it to className??
I mean i don't have a className! SO WHAT IS IT??? Basicly some one is either going to know what i am talking about, or have some low level .js include experience with the DHTML editing component.
If I select one of the menu items the submenu appears just fine, my only problem is that If I point the mouse curser away from the whole menu the submenu is still shown, obviously if I click once with the mouse outside the menu the submenu disappears. So I need some kind of remove-submenu function when the mouse pointer is not pointing on menusubmenu....
I use superfish horizontal nav-bar style. Subcategories appearhorizontally below categories.The problem is that when I take themouse from the category name to reach one of their subcats, thesubmenu disappears! The subcategories disappear too fast! Is there away to fix this?
Does anyone know why the onmouseout isn't working in the following? I've just started the script (tho I'm sure I've spent over 40hrs on this problem alone) and am trying to get just 2 buttons working before I add the other 4. I'm absolutely mystified by the sticky onmouseout.
I've combined a couple of scripts that I've found in the newsgroup to accomodate the mouseovers and "active" button action. Only 1 button can be active at a time. Code:
I have a strange behaviour when applying onmouseout to a layer. it is not trigged when the pointer goes out of the _layer_ but when it goes off the _text within_ the layer.
When you mouse out of the div, it goes back into hidden. But as soon as I touch any of the links, it hides, thinking I've left the DIV.
Now, I'm assuming this is a z-index layer issue, but I've tried every combination of things I could think of to prevent the mouseout action when mouseing over one of the links.
I tried setting div.popup's z-index higher than a.popuplink's, lower than a.popuplinks, and the same as. (I did set each to a position as well.)
I put an onMouseOver and an onMouseOut event on a div. The onMouseOver works well but the onMouseOut looks worked like an onMouseMove; the event is triggered when a move the mouse over the div.
is it normal? What should I do to avoid this problem?
I have the following CSS menu, which uses a js to create the menu on Mouseover... I want to add a delay onMouseOut... I have tried the setTimeout function, but am having some trouble getting it to work... the submenu just stays out...
var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas var submenuoffset= 0 //Offset of submenus from main menu. Default is -2 pixels. function createcssmenu(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ [Code]..
I have an image that when hovered, another image pops up (this popup image has a 'learn more' button on it), but when someone attempts to mouse over the button, the image restores to its original image. I was advised to use 'setTimeout' but do not know how to apply it with the following code...
I understand WHY it's going back to its original state (the mouse is hovering outside of the area coordinates), but how can I apply the setTimeout script to DELAY the image from going back to its original state?
The submenu works fine with FF, IE8 etc. But it fails with IE7.I have to use sprites background images and the second level sub menu have to be positioned at a certian place.When I hover top of sub menu, it is ok. But the below of that submenu, such as Radio, Artikler, Hvem er vi?, I am not able to select in IE7.
I have built an expandable menu that displays some categories and subcategories. The menu is populated from a MySQL DB and I'm using PHP to configure the data for the Javascript menu. All of this works correctly.
There are 2 options when using the menu.
1. Click the arrow icon next to the category option. This opens the subcategories for that category while remaining on the current page.
2. Click the category title (text link). This brings you to the category page.
When a user clicks the category title to go to the category page, I want the subcategories for that category to be open when they get there.
Everything seems to be working correctly, until I get to the line to open the subcategory.
I am working on a site with a left menu that slides out, and I've converted it to the top to drop down. So far, it is working ok, but the submenu items need to be below the parent, preferably left aligned. I have played with it a bit and so far can't seem to achieve what I want. See below where I'm clicking Resources and the menu is way too high and over to the right.
I spent way too long writing a buggy and bloated jQuery script that is supposed to allow the sub-menus of a drop-down menu be a dynamic width (i.e. the submenu assumes the width of the widest list item). I am probably missing some base CSS property, surely it cant be this hard? My script I wrote is:
// drop down menu var setWidth = 2; var nextSetWidth = 0; $jQ('.nav li').hover(function(){ var thisList = $jQ(this).parent('ul'); if (thisList.parent('li').length > 0) { thisList.children('li').each(function(){ var thisSpan = $jQ(this).find('span'); var spanWidth = thisSpan.width(); if (spanWidth > setWidth) { setWidth = spanWidth; }}); setWidth = setWidth + 16; thisList.css('width', setWidth); }
var nextList = $jQ(this).find('.nav:eq(0)'); if (nextList.parent('li').parent('ul').parent('li').length == 0){ nextList.css('left', '2px'); }
nextList.children('li').each(function(){ var nextThisSpan = $jQ(this).find('span'); var nextSpanWidth = nextThisSpan.width(); if (nextSpanWidth > nextSetWidth) { nextSetWidth = nextSpanWidth; }});
nextSetWidth = nextSetWidth + 16; nextList.css('width', nextSetWidth); if (nextList.parent('li').parent('ul').parent('li').length > 0){ nextList.css('left', setWidth); }}, function(){ $jQ(this).find('.nav:eq(0)').css('left','9999em'); setWidth = 2; nextSetWidth = 0; }); //End of Drop down menu
The HTML looks something like: <ul class="nav"> <li><a><span></span></a></li> <li><a><span></span></a></li> <li><a><span></span></a> <ul class="nav"> <li><a><span></span></a></li> </ul> </li> </ul>
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.
So, here is the code I have so far: Code: <div id="topnav"> <ul> <li> <a href="index.html">Home</a> [Code]....
