Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

I need help with this JavaScript, please.

Status
Not open for further replies.

kkruseramcoi

Programmer
Dec 17, 2010
1
US
I need help with this JavaScript, please. I have posted this several times, I am desperate to get this fixed. Below is code for a menu on my website. I would like to eliminate the double click on the main link. As it currently is, one click expands the sub-menu and a second click takes you to the page. I need it to expand AND take the user to the page at the same time. Please help!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Optex FA | Laser Measurement Sensors</title>
<link rel="stylesheet" href="product.css" type="text/css" />
<link rel="stylesheet" href="optexcss.css" type="text/css" />







<style type="text/css">
#product-nav {
width:230px;
height:507px;
top:334px;
background-image:url(images/product-nav.jpg);
background-repeat:no-repeat;
position:absolute;
left: 10px;
}

#product-nav li {
list-style:none;
list-style-image:none;
list-style-type:none;
color:#4c4c4c;

}


.product-nav-text {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#4c4c4c;
position:absolute;
list-style-type:none;
display:block;
margin-top:55px;
line-height:25px;
}


/*
General rules
*/

/* Active menu item */
#dhtmlgoodies_slidedown_menu .dhtmlgoodies_activeItem {
font-weight:bold;
color:#3b7aab;
}

#dhtmlgoodies_slidedown_menu li{
list-style-type:none;
position:relative;
color:#4c4c4c;
}
#dhtmlgoodies_slidedown_menu ul{
margin:7px;
padding:0px;
position:relative;
color:#4c4c4c;

}

#dhtmlgoodies_slidedown_menu div{
margin:0px;
padding:0px;
}
/* Layout CSS */
#dhtmlgoodies_slidedown_menu{
width:257px;
}

/* All A tags - i.e menu items. */
#dhtmlgoodies_slidedown_menu a{
color:#4c4c4c;
text-decoration:none;
width:257px;
padding-left:2px;
}

/* Active menu item */
#dhtmlgoodies_slidedown_menu .dhtmlgoodies_activeItem {
font-weight:bold;
color:#3b7aab;
}

/*
A tags
*/
#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{ /* Main menu items */
font-weight:bold;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{ /* Sub menu items */
margin-top:0px;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth3{ /* Sub menu items */
margin-top:0px;
font-style:italic;

}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth4{ /* Sub menu items */
margin-top:0px;

}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth5{ /* Sub menu items */
margin-top:0px;
}

/* UL tags, i.e group of menu utems.
It's important to add style to the UL if you're specifying margins. If not, assign the style directly
to the parent DIV, i.e.

#dhtmlgoodies_slidedown_menu .slideMenuDiv1

instead of

#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul
*/

#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{
padding:0px;
}
#dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{
margin-left:20px;
}
#dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{
margin-left:10px;
padding:0px;
}
#dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{
margin-left:15px;
padding:0px;
}
</style>
<script type="text/javascript">
/****************************************************************************** ******************************
Slide down menu
Copyright (C) October 2005 DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2010
Owner of DHTMLgoodies.com

****************************************************************************** ******************************/
var expandFirstItemAutomatically = false; // Expand first menu item automatically ?
var initMenuIdToExpand = false; // Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = false; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand


var initialMenuItemAlwaysExpanded = true; // NOT IMPLEMENTED YET

var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();

var dg_activeItem = null;

function popMenusToShow()
{
var obj = divToScroll;
var endArray = new Array();
while(obj && obj.tagName!='BODY'){
if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
var objFound = -1;
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==obj){
objFound = no;
}
}
if(objFound>=0){
otherDivsToScroll.splice(objFound,1);
}
}
obj = obj.parentNode;
}
}

function showSubMenu(e,inputObj)
{

if(this && this.tagName)inputObj = this.parentNode;
if(inputObj && inputObj.tagName=='LI'){
divToScroll = inputObj.getElementsByTagName('DIV')[0];
for(var no=0;no<otherDivsToScroll.length;no++){
if(otherDivsToScroll[no]==divToScroll)return;
}
}
hidingInProcess = false;
if(otherDivsToScroll.length>0){
if(divToScroll){
if(otherDivsToScroll.length>0){
popMenusToShow();
}
if(otherDivsToScroll.length>0){
autoHideMenus();
hidingInProcess = true;
}
}
}
if(divToScroll && !hidingInProcess){
divToScroll.style.display='';
otherDivsToScroll.length = 0;
otherDivToScroll = divToScroll.parentNode;
otherDivsToScroll.push(divToScroll);
while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
otherDivsToScroll.push(otherDivToScroll);

}
otherDivToScroll = otherDivToScroll.parentNode;
}
ulToScroll = divToScroll.getElementsByTagName('UL')[0];
if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
}

if(e || inputObj) {

if(dg_activeItem) {
dg_activeItem.className = dg_activeItem.className.replace('dhtmlgoodies_activeItem','');
}
var aTags = inputObj.getElementsByTagName('A');
if(aTags.length>0) {
aTags[0].className = aTags[0].className + ' dhtmlgoodies_activeItem';
dg_activeItem = aTags[0];

}

}

return true;


}



function autoHideMenus()
{
if(otherDivsToScroll.length>0){
divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
parentDivToHide.length=0;
var obj = divToHide.parentNode.parentNode.parentNode;
while(obj && obj.tagName=='DIV'){
if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
obj = obj.parentNode.parentNode.parentNode;
}
var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
if(tmpHeight<0)tmpHeight=0;
if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px';
ulToHide = divToHide.getElementsByTagName('UL')[0];
slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
scrollUpMenu();
}else{
slideMenuHeightOfCurrentBox = 0;
showSubMenu();
}
}


function scrollUpMenu()
{

var height = divToHide.offsetHeight;
height-=15;
if(height<0)height=0;
divToHide.style.height = height + 'px';

for(var no=0;no<parentDivToHide.length;no++){
parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
}
if(height>0){
setTimeout('scrollUpMenu()',5);
}else{
divToHide.style.display='none';
otherDivsToScroll.length = otherDivsToScroll.length-1;
autoHideMenus();
}
}

function scrollDownSub()
{
if(divToScroll){
var height = divToScroll.offsetHeight/1;
var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
height = height +offsetMove ;
divToScroll.style.height = height + 'px';

for(var no=1;no<otherDivsToScroll.length;no++){
var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
otherDivsToScroll[no].style.height = tmpHeight + 'px';
}
if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
divToScroll = false;
ulToScroll = false;
if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
initExpandIndex++;

showSubMenu(false,objectsToExpand[initExpandIndex]);
}
}
}
}

function initSubItems(inputObj,currentDepth)
{
divCounter++;
var div = document.createElement('DIV'); // Creating new div
div.style.overflow = 'hidden';
div.style.position = 'relative';
div.style.display='none';
div.style.height = '1px';
div.id = 'slideDiv' + divCounter;
div.className = 'slideMenuDiv' + currentDepth;
inputObj.parentNode.appendChild(div); // Appending DIV as child element of <LI> that is parent of input <UL>
div.appendChild(inputObj); // Appending <UL> to the div
var menuItem = inputObj.getElementsByTagName('LI')[0];
while(menuItem){
if(menuItem.tagName=='LI'){
var aTag = menuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth'+currentDepth;
var subUl = menuItem.getElementsByTagName('UL');
if(subUl.length>0){
initSubItems(subUl[0],currentDepth+1);
}
aTag.onclick = showSubMenu;
}
menuItem = menuItem.nextSibling;
}
}

function initSlideDownMenu()
{
dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu');
dhtmlgoodies_slmenuObj.style.visibility='visible';
var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
mainItemCounter = 1;
while(mainMenuItem){
if(mainMenuItem.tagName=='LI'){
var aTag = mainMenuItem.getElementsByTagName('A')[0];
aTag.className='slMenuItem_depth1';
var subUl = mainMenuItem.getElementsByTagName('UL');
if(subUl.length>0){
mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
initSubItems(subUl[0],2);
aTag.onclick = showSubMenu;
mainItemCounter++;
}
}
mainMenuItem = mainMenuItem.nextSibling;
}

if(location.search.indexOf('mainMenuItemToSlide')>=0){
var items = location.search.split('&');
for(var no=0;no<items.length;no++){
if(items[no].indexOf('mainMenuItemToSlide')>=0){
values = items[no].split('=');
showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
initMenuIdToExpand = false;
}
}
}else if(expandFirstItemAutomatically>0){
if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
initMenuIdToExpand = false;
}
}

if(expandMenuItemByUrl)
{
var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
for(var no=0;no<aTags.length;no++){
var hrefToCheckOn = aTags[no].href;
if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
initMenuIdToExpand = false;
var obj = aTags[no].parentNode;
while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}
showSubMenu(false,objectsToExpand[0]);
break;
}
}
}

if(initMenuIdToExpand)
{
objectsToExpand = new Array();
var obj = document.getElementById(initMenuIdToExpand)
while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
if(obj.tagName=='LI'){
var subUl = obj.getElementsByTagName('UL');
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
if(subUl.length>0){
objectsToExpand.unshift(obj);
}
}
obj = obj.parentNode;
}

showSubMenu(false,objectsToExpand[0]);

}

}
window.onload = initSlideDownMenu;
</script>
</head>

<body>

<div class="title-header-text">
ZR-Q Series Reviews

<hr color="#3b7aab" size="1" width="730" align="left"/>
</div>

<div class="contactus">
<b>If you would like to leave a review about this product, please fill out the form below.</b><br/>
<b>Please note that reviews must be approved and may take up to 5 days to post.</b>
</div>

<div id="product-nav">
<div class="product-nav-text">
<!-- START OF MENU -->
<div id="dhtmlgoodies_slidedown_menu">
<ul>

<li><a href="laser-measurement.html">Laser Measurement</a>
<ul>
<li><a href=" target="_self">Legacy</a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="bg-fgsuppression.html">Background/Foreground Suppression</a>
<ul>
<li><a href=" target="_self">Legacy</a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="transparent.html">Transparent Object Detection</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="laser.html">Laser Sensors</a>
<ul>
<li><a href=" target="_self">Obsolete</a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Fiber Optics</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="photo-electric-dc.html">Photo-Electric Sensors DC</a>
<ul>
<li><a href=" target="_self">Legacy</a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="photo-electric-acdc.html">Photo-Electric Sensors AC/DC</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="color-vision.html">Color Sensors/Vision</a>
<ul>
<li><a href=" target="_self">Legacy</a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="special.html">Special Use</a>
<ul>
<li><a href=" target="_self">Legacy</a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="controllers.html">Sensor Controllers</a></li>
</ul>
</div>
<!-- END OF MENU -->
</div>
</div>

</body>
</html>
 
I copied and pasted your code, and ran it, and the menus work the way you expect them to for me. When you click on an option it expands the menu, and immediately moves to the selected page.

Perhaps you can tell us what browser is giving you these issues as both IE8 and FF move to the selected page with a single click.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top