PDA

View Full Version : Tab Menu issue



deathbycheese
05-24-2011, 01:03 AM
I am attempting to use the code here (http://www.dynamicdrive.com/dynamicindex1/tabmenu.htm) and it works just great EXCEPT I want the submenu to hide onMouseOut.

Does anyone know where/how to modify the code so this will be true? Or is there a better method?

Thanks in advance,
dbc

vwphillips
05-24-2011, 08:31 AM
<script type="text/javascript">

/***********************************************
* Tab Menu- By Alf Magne Kalleland www.dhtmlgoodies.com
* Script featured and available at Dynamic Drive: http://www.dynamicdrive.com/
* This notice must stay intact for use
***********************************************/

var topMenuSpacer = 15; // Horizontal space(pixels) between the main menu items
var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
var leftAlignSubItems = false; // left align sub items t
var activeMenuItem = false; // Don't change this option. It should initially be false
var activeTabIndex = 0; // Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one.
var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie

/*
These cookie functions are downloaded from
http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
*/
function Get_Cookie(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// This function has been slightly modified
function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}

function showHide(){
if(activeMenuItem){
activeMenuItem.className = 'inactiveMenuItem';
var theId = activeMenuItem.id.replace(/[^\d]/g,'');
document.getElementById('submenu_'+theId).style.display='none';
}


activeMenuItem = this;
this.className = 'activeMenuItem';
var theId = this.id.replace(/[^\d]/g,'');
document.getElementById('submenu_'+theId).style.display='block';

if(rememberActiveTabByCookie){
Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
}
}

function initMenu()
{
var mainMenuObj = document.getElementById('mainMenu');
var subMenuObj = document.getElementById('submenu'); //DD added line
mainMenuObj.style.visibility=subMenuObj.style.visibility="visible" //DD added line
var menuItems = mainMenuObj.getElementsByTagName('A');
if(document.all){
mainMenuObj.style.visibility = 'hidden';
document.getElementById('submenu').style.visibility='hidden';
}
if(rememberActiveTabByCookie){
var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
cookieValue = cookieValue.replace(/[^\d]/g,'');
if(cookieValue.length>0 && cookieValue<menuItems.length){
activeTabIndex = cookieValue/1;
}
}

var currentLeftPos = 15;
for(var no=0;no<menuItems.length;no++){
if (activateSubOnClick){
menuItems[no].onclick = showHide;
}
else {
menuItems[no].onmouseover = showHide;
}
menuItems[no].id = 'mainMenuItem' + (no+1);
MouseOut(menuItems[no],(no+1));
menuItems[no].style.left = currentLeftPos + 'px';
currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;
if(no==activeTabIndex){
menuItems[no].className='activeMenuItem';
activeMenuItem = menuItems[no];
}else menuItems[no].className='inactiveMenuItem';
if(!document.all)menuItems[no].style.bottom = '-1px';

}

var mainMenuLinks = mainMenuObj.getElementsByTagName('A');

var subCounter = 1;
var parentWidth = mainMenuObj.offsetWidth;
while(document.getElementById('submenu_' + subCounter)){
var subItem = document.getElementById('submenu_' + subCounter);

if(leftAlignSubItems){
// No action
}else{
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';
subItem.style.position ='absolute';
if(subItem.offsetWidth > parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + 'px';
subItem.style.position ='static';


}
if(subCounter==(activeTabIndex+1)){
subItem.style.display='block';
}else{
subItem.style.display='none';
}

subCounter++;
}
if(document.all){
mainMenuObj.style.visibility = 'visible';
document.getElementById('submenu').style.visibility='visible';
}
document.getElementById('submenu').style.display='block';
}

function MouseOut(obj,nu){
var id = obj.id.replace(/[^\d]/g,''),sub=document.getElementById('submenu_'+id);
addevt(obj,'mouseout',MseOut,nu);
addevt(sub,'mouseout',MseOut,nu);
}

function MseOut(e,nu){
var eobj=(e.relatedTarget)?e.relatedTarget:e.toElement,id;
while (eobj.parentNode){
id=eobj.id;
if (id&&(id=='mainMenuItem'+nu||id=='submenu_'+nu)){
return;
}
eobj=eobj.parentNode;
}
document.getElementById('submenu_'+nu).style.display='none';
document.getElementById('mainMenuItem'+nu).className = 'inactiveMenuItem';
}

function addevt(o,t,f,p){
if (o.addEventListener) o.addEventListener(t,function(e){ return f(e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return f(e,p); });
}

window.onload = initMenu;
</script>

deathbycheese
05-24-2011, 07:09 PM
Hi Vic,

So you added the MouseOut function? I'll give it a shot and let you know how it works.

Thanks!

dbc

deathbycheese
05-24-2011, 07:42 PM
Hi again,

Well it still doesn't work for some reason. Here's what I have - including your new functions:



/***********************************************
* Tab Menu- By Alf Magne Kalleland www.dhtmlgoodies.com
* Script featured and available at Dynamic Drive: http://www.dynamicdrive.com/
* This notice must stay intact for use
***********************************************/

//submenu actions

var topMenuSpacer = 15; // Horizontal space(pixels) between the main menu items
var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
var leftAlignSubItems = false; // left align sub items t
var activeMenuItem = false; // Don't change this option. It should initially be false
var activeTabIndex = 0; // Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one.
var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie


function Get_Cookie(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}

function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}

function showHide()
{
if(activeMenuItem){
activeMenuItem.className = 'inactiveMenuItem';
var theId = activeMenuItem.id.replace(/[^\d]/g,'');
document.getElementById('mainSubNav_'+theId).style.display='none';
}

activeMenuItem = this;
this.className = 'activeMenuItem';
var theId = this.id.replace(/[^\d]/g,'');
document.getElementById('mainSubNav_'+theId).style.display='block';

if(rememberActiveTabByCookie){
Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
}
}

function initMenu()
{
var mainNavObj = document.getElementById('mainNav');
var mainSubNavObj = document.getElementById('mainSubNav');
mainNavObj.style.visibility=mainSubNavObj.style.visibility="visible";
var menuItems = mainNavObj.getElementsByTagName('A');
if(document.all){
mainNavObj.style.visibility = 'hidden';
document.getElementById('mainSubNav').style.visibility='hidden';
}
if(rememberActiveTabByCookie){
var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
cookieValue = cookieValue.replace(/[^\d]/g,'');
if(cookieValue.length>0 && cookieValue<menuItems.length){
activeTabIndex = cookieValue/1;
}
}

var currentLeftPos = 15;
for(var no=0;no<menuItems.length;no++){
if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
menuItems[no].id = 'mainNavItem' + (no+1);
menuItems[no].style.left = currentLeftPos + 'px';
currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;
if(no==activeTabIndex){
menuItems[no].className='activeMenuItem';
activeMenuItem = menuItems[no];
}else menuItems[no].className='inactiveMenuItem';
if(!document.all)menuItems[no].style.bottom = '-1px';

}

var mainNavLinks = mainNavObj.getElementsByTagName('A');

var subCounter = 1;
var parentWidth = mainNavObj.offsetWidth;
while(document.getElementById('mainSubNav_' + subCounter)){
var subItem = document.getElementById('mainSubNav_' + subCounter);

if(leftAlignSubItems){
// No action
}else{
var leftPos = mainNavLinks[subCounter-1].offsetLeft;
document.getElementById('mainSubNav_'+subCounter).style.paddingLeft = leftPos + 'px';
subItem.style.position ='absolute';
if(subItem.offsetWidth > parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + 'px';
subItem.style.position ='static';

}
if(subCounter==(activeTabIndex+1)){
subItem.style.display='block';
}else{
subItem.style.display='none';
}

subCounter++;
}
if(document.all){
mainNavObj.style.visibility = 'visible';
document.getElementById('mainSubNav').style.visibility='visible';
}
document.getElementById('mainSubNav').style.display='block';
}


function MouseOut(obj,nu){
var id = obj.id.replace(/[^\d]/g,''),sub=document.getElementById('mainSubNav_'+id);
addevt(obj,'mouseout',MseOut,nu);
addevt(sub,'mouseout',MseOut,nu);
}


function MseOut(e,nu){
var eobj=(e.relatedTarget)?e.relatedTarget:e.toElement,id;
while (eobj.parentNode){
id=eobj.id;
if (id&&(id=='mainNavItem'+nu||id=='mainSubNav_'+nu)){
return;
}
eobj=eobj.parentNode;
}
document.getElementById('mainSubNav_'+nu).style.display='none';
document.getElementById('mainNavItem'+nu).className = 'inactiveMenuItem';
}

function addevt(o,t,f,p){
if (o.addEventListener) o.addEventListener(t,function(e){ return f(e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return f(e,p); });
}


window.onload = initMenu;


Thanks again,
dbc

vwphillips
05-25-2011, 07:37 AM
you missed a line I added in the main code

use the complete code I posted

deathbycheese
05-25-2011, 05:19 PM
Well, the names were modified to match my site, so it becomes quite a difficult task if I were to directly copy/paste the whole thing then try to change the names again. I was hoping you'd just id the areas that needed changing.

So, I went ahead and re-named the IDs in the whole rest of the site to match this script and now it doesn't work at ALL! arrgghh. :confused:

I'm really panicking and can't figure out what's going on. Here's everything I've got:

The HTML


<div id="mainMenu">

<ul>
<li id="mainMenu_1" class="home"><a href="./index.php">HOME</a></li>
<li id="mainMenu_2" class="about"><a href="#">ABOUT</a></li>
<li id="mainMenu_3" class="events"><a href="./calendar.php">EVENTS</a></li>
<li id="mainMenu_4" class="ministries"><a href="#">MINISTRIES</a></li>
<li id="mainMenu_5" class="communication longNav"><a href="#">COMMUNICATION</a></li>
</ul>

</div> <!--End mainMenu-->


<div id="submenu">

<div id="submenu_1"><br /> <!--Home-->
</div> <!-- End submenu_1-->

<div id="submenu_2"> <!--About-->
<ul>
<li><a href="./index.php">Our Story</a> &nbsp;&nbsp;&nbsp;</li>
<li><a href="./index.php">We Believe</a> &nbsp;&nbsp;&nbsp; </li>
<li><a href="./index.php">Leadership &amp; Directors</a> &nbsp;&nbsp;&nbsp; </li>
<li><a href="./index.php">Our Mission</a> &nbsp;&nbsp;&nbsp; </li>
<li><a href="./index.php">Vision</a> &nbsp;&nbsp;&nbsp; </li>
</ul>
</div> <!--End submenu_2-->

<div id="submenu_3"> <!--Events-->
</div> <!-- End submenu_3-->

<div id="submenu_4"> <!--Ministries-->
<ul>
<li><a href="./ministry_Worship.php">Worship</a> &nbsp;&nbsp;&nbsp;</li>
<li><a href="./ministry_Prayer.php">Prayer</a> &nbsp;&nbsp;&nbsp; </li>
<li><a href="./ministry_Men.php">Men</a> &nbsp;&nbsp;&nbsp; </li>
<li><a href="./ministry_Women.php">Women</a> &nbsp;&nbsp;&nbsp; </li>
<li><a href="./ministry_Youth.php">Youth</a> &nbsp;&nbsp;&nbsp; </li>
<li><a href="./index.php">Children</a> &nbsp;&nbsp;&nbsp; </li>
<li><a href="./index.php">Care &amp; Hospitality</a> </li>
</ul>
</div> <!--End submenu_4-->

<div id="submenu_5"> <!--Communication-->
<ul>
<li><a href="./index.php">Podcasts</a> &nbsp;&nbsp;&nbsp;</li>
<li><a href="./index.php">Weekly Bulletin</a> &nbsp;&nbsp;&nbsp; </li>
</ul>
</div> <!--End submenu_5-->

</div> <!--End submenu-->


The CSS


#mainMenu ul {
width: 600px;
height: 37px;
margin: 0px;
padding: 0px;
list-style: none;
float: right;
}

#mainMenu ul li {
font-family: verdana;
font-size: 11px;
font-weight: bold;
color: #ffffff;
float: left;
}

#mainMenu ul li a {
width: 120px;
height: 37px;
font-family: verdana;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 55px;
color: #ffffff;
background: url(../images/mainNavTab.png) no-repeat left center;
display: block;
}

#mainMenu ul li a:hover{
background: url(../images/mainNavTab.png) no-repeat right center;
}

#mainMenu ul li a:active{
background: url(../images/mainNavTab.png) no-repeat right center;
}

#home #mainMenu .home a, #about #mainMenu .about a, #events #mainMenu .events a, #ministries #mainMenu .ministries a, #communication #mainMenu .communication a {
background-position: right center;
cursor: pointer;
}

.longNav {letter-spacing:-.04em;}

#submenu {
visibility: hidden;
}

#submenu ul {
width: 600px ;
height: 20px;
margin: 0px;
margin-top: 2px;
padding: 0px;
list-style: none;
float: right;
}

#submenu ul li {
font-family: verdana;
font-size: 11px;
font-weight: bold;
color: #ffffff;
float: left;
}

#submenu ul li a {
height: 20px;
margin: 0px 15px 0px 15px ;
font-family: verdana;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 30px;
color: #ffffff;
display: block;
}

#submenu ul li a:hover{
color: #8fcf38; /*---green---*/
}

/*------------End Navigation----------------------*/


The JS is exactly as it is in your script, so I didn't include it here.

I really do appreciate you taking the time to help.

I just hope someone can spot the error!

Thanks.
dbc

vwphillips
05-25-2011, 07:06 PM
I tested your HTML and CSS with the script I post and apart from CSS problems with the select lists the mouseout function works

post a link to your page

deathbycheese
05-25-2011, 07:14 PM
Yeah, the CSS has more to it (other linked style sheets).

However, I have done a direct copy/paste of your entire code into my JS and it stops the onhover altogether. It doesn't even work on click.

Not sure what's going on here...

dbc

deathbycheese
05-25-2011, 07:18 PM
Oh, the site is on my localhost at this time because I'm still developing it. I'll push it up in a bit and post a link.

dbc

deathbycheese
05-25-2011, 09:57 PM
Here you go!

http://www.heritagechurch.us/Sandbox/index.php

I had to revert to the JS without your onmouseout function because it wouldn't work at all - none of the submenus would show up.

Thanks,
dbc

vwphillips
05-26-2011, 08:32 AM
see attachment

deathbycheese
05-28-2011, 01:34 AM
Hi Vic,

Thanks for the .zip!

Your js works just fine while in the head of the page, but when I copy it directly into the linked js file it stops working. I'm flummoxed!

Any further ideas?

Thanks so very much for all your patience,
dbc

vwphillips
05-28-2011, 02:33 PM
see attachment