I want that when i click on a other main item that the other will close. Now it still keep open and then ill get a long menu list. How do i do it , i dont have js experience.
[Code]...
I am trying to turn a single level flyout menu into a multi level one.
It uses a dt for the title, and a ul within the dd for the menu items. The dd opens to the right of the dt.
The problem is that the second level menu (a dl within an li within another dl) [URL] - flyout4 & subflyout5.
The z-index is increased each time. I just can't figure why the area is limited.
javascript, css & html follow -
Code JavaScript:
/** FLYOUT = vertical dropdown **/
var Flyout = {
DDSPEED:10,
[Code].....
The problem is that the height of the second level menu results in their being gaps in between each menu item so that as you move your mouse down the second menu items it quickly closes again. scripting novice fix this by telling me which variable I need to change either in the Java script or the CSS files.
View 2 Replies View Related I've been asked to create a site for my younger sister and she's requested a horizontal pull-down menu using graphics for the links instead of simply text. This is my first time trying to code such a menu (topic not covered in class) and I'm having some difficulty getting it to work completely.
Right now it's partially working. The various sub menus do show up when clicking or rolling over the previous menu item. However all menu items past the one clicked jump down one line when expanding instead of simply showing the sub menu under the main line up. The rollover also has issues but mostly because I haven't finished coding the onmouseout part, so it doesn't go away. I'm trying to get the main pull down working before tackling that part. Below is the JavaScript function I'm trying to use as well as a part of the menu. I've already spent months trying to get this working and am not making much headway.
[Code]...
I run an educational website with a CSS/JavaScript based menu that is right now only single level. I am trying to convert it over to multi level. I have tried a few other multi level menus but I have done a lot of customization in terms of appearance for this current menu, so none of the new ones looked right.
Here is the site: [url]
Here is the CSS: [url]
Here is the JavaScript: [url]
I am really pressing on to finish this home page menu, and I'm trying to find out why this odd behavior is occurring. There is obviously some conflicting code in my CSS. You can see this odd behaving menu for yourself at productreview. The other thing I'm trying to learn how to do is how to get the 3rd and 4th level lists to appear on the parent item's hover.This is my JavaScript:
Code:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
[code]....
Anyone know whether it's possible to allow users to double click items of a multi-line text field? Of course, I want the double click to take them to another URL
View 10 Replies View RelatedI'm designing a web page, Having a banner on top, then a search option following it.
There is a menu item list below it on to the left.And the content of the links of those menu item should get loaded in the center of the page.And a footer having some copyright info.All these are in div tags.
The problem is when i click on any menu item it should be loaded in the center div tag.Ive tried using Iframes but there is a scrollbar coming only in that area of center div tag.I don't wan't this to happen.Based on the size of the html page to be loaded the div tag size should increase, and so the whole page.Have tried using Ajax but not working.
Unfortunately I don't know a great deal about javascript. I have used some to construct a collapsible menu on this site : [URL] Unfortunately what it doesn't do is close the previously opened menu item on opening the next. I hope that makes sense. Is there a onclick behaviour I can add to the li's to close any open list items. I downloaded the files and tutorial from here: [URL]
View 2 Replies View RelatedI'm designing a web page, Having a banner on top, then a search option following it.There is a menu item list below it on to the left.And the content of the links of those menu item should get loaded in the center of the page.And a footer having some copyright info.All these are in div tags. The problem is when i click on any menu item it should be loaded in the center div tag.Ive tried using Iframes but there is a scrollbar coming only in that area of center div tag.I don't wan't this to happen.Based on the size of the html page to be loaded the div tag size should increase, and so the whole page.Have tried using Ajax but not working.
View 1 Replies View RelatedCan someone direct me to a 3 level menu with the top level being images....
View 4 Replies View RelatedI am trying to create a multi level query,My only problem is that i do not know how i can visually develop it.i would like to have a visual aspect like this one.
<a href="http://yfrog.com/bfpicture6up">http://yfrog.com/bfpicture6up</a>
I have a website script written in php, now the menu it has is in php and uses a tpl file. This is very crude compared to what i need, now i post here in DHTML because the DHTML drop down menus are more what i need.
Here's the problem. I want to install this for the top navigation bar. It should appear on the whole site. But how do you get a DHTML menu into php script. The current menu is php script, and it is linked in each of the php pages at the bottom. And it needs to have the ability to recognize whether the user is logged in.
I am trying to build this page where there are 3 levels of icons/contents. When user hovers on 1st level, they see the 2nd level. They now hovers on the second level and suppossed to get the 3rd levels of contents.My 1st/2nd levels worked fine.But when I added the 3rd level, could not make them to work.Problems: 1. the 2nd levels show up with multiple 3rd level items - suppossed to be all hidden.2. When I hover over the 2nd level - they are like frozen if the 3rd level is displayed. After hiding all the 3rd levels by doing mouseout - when I hover over a 2nd level, 3rd level shows up but when I move over to the next (2nd level), the corresponding 3rd level shows up without hiding the previous one. So again - displays multiple 3rd level items
var cr_event = $('#imgCE');
var info_center = $('#imgIC');
var tab_events = $('#tabCreateEvent');
[code]....
Is there some event like onclickoff or something?
I have a div being set to style.display="block" when you click on a link.
But how do I set it back to none, when the user clicks off of the div?
In other words, when the user clicks elsewhere, the div should return to style.display="none"
I notice vBulletin has this feature... just click on "Thread Tools" above, and then click elsewhere and it will go away.
I'm using ajax to grab a response from a PHP page, on success, the ajax sets a variable. After the line that calls the ajax function is the line the returns the variable (a global variable). Problem is, because the variable is returned right after the ajax function is fired, it doesn't give the ajax enough time to set the variable. The work around I've thought about would be using the ajax function as a variable, and returning that variable in the initial return line.
Here's some code for reference:
The function that will return the response I'm trying to collect:
The ajax code:
I have a multiselet box in which i identify the selected items. Once the user has finished selecting the items it causes the form to be submitted. For this example it just shows the selected indexes. To see the problem. Copy paste the code and save as html file. Then click on an item in the select box.
I am having problem with indentifying the selected items. When only one element is selected, the selected option index does not come up fine. I have no clue as to why this is the case. Code:
What I'd like to add is add a line of code that will close the calling
parent window (right now I make it visible by resizing it and clicking on a
close link). I'll even settle for having to confirm the closure but, the
ultimate would be that it would close by itself. Code:
I've got a situation where I'm updating a MySQL DB with PHP but because of
how the language works I need to do the following.
The "main page" will open a remote page where the user will add/edit/modify
data then on the confirmation page, there needs to be a close button.
However, before the window is closed, I want it to reload the "main window"
so that they can see the changes they made. I've been digging through the
google groups and JS sources on the net but I'm just not finding answers for
a JS newb like myself.....
I have a mega menu that when the main menu items is hovered over the mega menu the div is displayed. I want to keep the div from being shown off the right of the browser screen. I have the following that determines the amount a div is off the right of the browser:
Code:
function keepMenuLeft(){
var div_width = $("li.hovering div").width();
[code]....
I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? [URL]
View 2 Replies View RelatedAt certain times I need to prevent the user from clicking on elements in a div. I've tried giving the div an onclick that simply returns false, but the clicks still get through. In the simplified code below, the onclick is hardwired, but in real life it would be assigned dynamically. In this example, when I click the link to Google, I get the "yo" alert, but the Google page still loads. If it were just one link, I could disable it directly. But I'll be dealing with pages with lots of links on them. How do I do this??
[Code]...
Tested in IE6 and Firefox. Hover on main menu items, sub-items are displayed. Main menu items are not required to have sub items.
MenuTree.xml
<?xml version="1.0" ?>
<menu>
<main>
<text>First</text>
<sub>
<text>Anything</text>
<link>links/anything.html</link>
</sub>
<sub>
<text>Everything</text>
<link>links/everything.html</link>
</sub>
<sub>
<text>Nothing</text>
<link>links/nothing.html</link>
</sub>
</main>
<main>
<text>Second</text>
<link>links/apples.html</link>
</main>
<main>
<text>Third</text>
<sub>
<text>Something</text>
<link>links/something.html</link>
</sub>
</main>
<main>
<text>Fourth</text>
<link>links/oranges.html</link>
</main>
</menu>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var response = "";
var nContainer = "";
var mainItemsText = [];
var mainItemsLink = [];
var subItemsText = [];
var subItemsLink = [];
var mainItemsWithSubs = [];
var IE = true;
if (navigator.appName != "Microsoft Internet Explorer"){IE = false}
function hideSubs(nMain){
var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = 'none'
}
}
function showSubs(nMain){
var nSubs = nMain.getElementsByTagName('dd');
for (i=0; i<nSubs.length; i++)
{
nSubs[i].style.display = ''
}
}
function setHoverDisplay(){
if (IE)
{
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]].onmouseout = function(){hideSubs(this)}
}
}
}
else {
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (n=0; n<subItemsText[i].length; n++)
{
nContainer.childNodes[mainItemsWithSubs[i]+1].childNodes[n+1].style.display = 'none'
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseover = function(){showSubs(this)}
nContainer.childNodes[mainItemsWithSubs[i]+1].onmouseout = function(){hideSubs(this)}
}
}
}
}
function buildMenu(){
nContainer = document.getElementById('menuContainer');
mainItemsWithSubs = [];
var n = 0;
for (i=0; i<mainItemsText.length; i++)
{
var nItem = document.createElement('dt');
var nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(mainItemsText[i]));
if (mainItemsLink[i] != undefined)
{
nLink.setAttribute('href',mainItemsLink[i]);
}
else{
nLink.setAttribute('href',"#");
nLink.onclick = function(){return false;}
mainItemsWithSubs[n++] = i;
}
nContainer.appendChild(nItem);
}
for (i=0; i<mainItemsWithSubs.length; i++)
{
for (s=0; s<subItemsText[i].length; s++)
{
nItem = document.createElement('dd');
nLink = document.createElement('a');
nItem.appendChild(nLink);
nLink.appendChild(document.createTextNode(subItemsText[i][s]));
nLink.setAttribute('href',subItemsLink[i][s]);
if (IE){nContainer.childNodes[mainItemsWithSubs[i]].appendChild(nItem)}
else {nContainer.childNodes[mainItemsWithSubs[i]+1].appendChild(nItem)}
}
}
setHoverDisplay();
}
function parseResponse(){
var n = 0;
var s = 0;
var mainItems = response.getElementsByTagName('main');
if (IE)
{
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].firstChild.text;
if (mainItems[i].childNodes[1].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[1].text;
}
n++;
}
}
else {
for (i=0; i<mainItems.length; i++)
{
mainItemsText[n] = mainItems[i].childNodes[1].firstChild.data;
if (mainItems[i].childNodes[3].nodeName == "link")
{
mainItemsLink[n] = mainItems[i].childNodes[3].firstChild.data;
}
n++;
}
}
for (i=0; i<mainItems.length; i++)
{
if (IE && mainItems[i].childNodes[1].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
for (n=0; n<mainItems[i].getElementsByTagName('sub').length; n++)
{
subItemsText[s][n] = mainItems[i].childNodes[n+1].childNodes[0].text;
subItemsLink[s][n] = mainItems[i].childNodes[n+1].childNodes[1].text;
}
s++;
}
if (!IE && mainItems[i].childNodes[3].nodeName == "sub")
{
subItemsText[s] = [];
subItemsLink[s] = [];
var subs = mainItems[i].getElementsByTagName('sub');
for (n=0; n<subs.length; n++)
{
subItemsText[s][n] = subs[n].childNodes[1].firstChild.data;
subItemsLink[s][n] = subs[n].childNodes[3].firstChild.data;
}
s++;
}
}
buildMenu();
}
function getMenuTree(){
var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
response = request.responseXML;
parseResponse();
}
else {alert('Error MenuTree.xml '+ request.statusText)}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
request.open("GET", "MenuTree.xml"+forceGET, true);
request.send(null);
}
onload=getMenuTree;
</script>
<style type="text/css">
dt {background-color:#b0c4de;text-indent:5px}
dd {background-color:#87ceeb}
a {color:#00008b}
</style>
</head>
<body>
<div id='menuContainer' style='border:1px solid black;background-color:#afeeee;height:200px;width:150px;font-size:12pt;padding:5px;overflow:auto;font-family:arial;font-weight:bold;line-height:140%'>
</div>
</body>
</html>
provide me with code to make a collapsible menu? What I'm looking for is a vertical menu, that will open up the sub-categories upon a mouseover. Clicking on the menu item will bring them to the specific page. Oh, and this might not matter, but I'd prefer if I was able to style the menu to fit with my site theme.
View 2 Replies View RelatedI am trying to create a specific menu using jQuery where i want to toggle a clicked menu item. I used toggleClass to accomplish this. All fine and well, but what i want is that once i click a menu item, the previously clicked item should have the active state/class toggled off.. The menu is variable. (I tried and tried and searched all over the internet, but i cannot find it... spent 5 hours trying to combine various selectors and if/else statements, but it did'nt work.)
View 1 Replies View RelatedAm working on a web template similar to this one: [URL] and would like to change the hover color for the menus (in blue with white text). What would be the best color to match if the menu background is left as it is when hovering on a menu item?
View 2 Replies View Related