•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 373,929 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,266 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1191 | Replies: 1
 |
•
•
Join Date: Nov 2007
Posts: 40
Reputation: 
Rep Power: 1
Solved Threads: 0
Light Poster
Hi, I 'think' this is a JavaScript problem, but I am not sure. I am trying to make a modified layout using one of Dreamweaver's preformed layouts. The original layout has a navigation bar across the top of the page, that has drop down menu items. In the original form, the layout works. When you mouse over one of the main menu items, a horizontal list of sub menu items drops down below the navigation bar. The original code had a side navigation bar on the left side of the content. I modified it to have a mirrored navigation bar on the right side of the content too. Now, when I mouse over one of the main menu items on the top navigation bar, the horizontal list of sub menus flashes open for a split second and immediately dissappears. Anyone have a problem like this before? Know of any possible solutions? As far as I know, I didn't change any code that was in relation to the top navigation bar.
Here is the modified code: (I shortened up the subglobal link lists to only one when I posted here to save space.)
Here is the modified code: (I shortened up the subglobal link lists to only one when I posted here to save space.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="jpc_nav_both.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global
link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global
link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global
link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global
link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global
link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global
link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global
link</a>
</div>
<!--end globalLinks-->
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="#">subglobal1 link</a> |
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> |
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> |
</div>
<div id="subglobal4" class="subglobalNav">
<a href="#">subglobal4 link</a> |
</div>
<div id="subglobal5" class="subglobalNav">
<a href="#">subglobal5 link</a> |
</div>
<div id="subglobal6" class="subglobalNav">
<a href="#">subglobal6 link</a> |
</div>
<div id="subglobal7" class="subglobalNav">
<a href="#">subglobal7 link</a> |
</div>
<div id="subglobal8" class="subglobalNav">
<a href="#">subglobal8 link</a> |
</div>
</div>
<!-- end masthead -->
<div id="pagecell1">
<!--pagecell1-->
<img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr">
<div id="navBar">
<div id="sectionLinks">
<h3>Section Links</h3>
<ul>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
</div>
<!--end navBar div -->
<div id="headlines">
<div id="sectionLinks">
<h3>Section Links</h3>
<ul>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
</ul>
</div>
<div id="advert">
<img src="" alt="" width="107" height="66"> Ad copy ad copy ad copy. Ad
copy ad copy.</div>
</div>
<div id="content">
<div class="feature">
<p>Matsushim Suzuki Racing Team </p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.</p>
<p>
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. </p>
</div>
</div>
<!--end content -->
<div id="siteInfo">
<img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | ©2003
Company Name
</div>
</div>
<!--end pagecell1-->
<br>
<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
</body>
</html>
•
•
Join Date: Nov 2007
Posts: 40
Reputation:
Rep Power: 1
Solved Threads: 0
Light Poster
Ok, after further investigation, I found that if I hit one specific line on the nav bar will the sub menu stay in place until mouse move. Pretty much, right across the bottom of the nave bar, maybe 1-3 pixels up from bottom border.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
•
•
•
•
ajax asp cross-browser javascript menu with few lines of code developer development firefox home html internet javascript javascript smooth scrolling scroll smoothly window document position javascript tab menu with rounded corners generator microsoft msdn office prevent javascript menu from getting hidden under flash movies site software sql vista web
- drop down menu over flash (HTML and CSS)
- for validation - text box and drop down menu (JavaScript / DHTML / AJAX)
- Filtering My sql through Php using drop down menu and text field (PHP)
- Drop Down Menu - Problem Opening in IE (JavaScript / DHTML / AJAX)
- Drop Down Menu Height (JavaScript / DHTML / AJAX)
- CSS Horizontal Drop-down Menu ??? (HTML and CSS)
- Problem with foreach when using linking (PHP)
- Drop Down Menu Help! (Web Browsers)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: iframe Height adjustment to loaded content, help please?
- Next Thread: Check Iframe compatability
