Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

DHTML Menu overlapping problem; Please Help!


mtpoc22

Recommended Posts

I just installed a DHTML menu in my OScommerce website. One of the problems is when my menu expands, my other mod I have, overlaps my menu. The categories' box is blocking the view of my expanded menu.

 

For example:

 

problem.gif

 

Is there a way I can keep my categories box from being on top, or a way to make the DHTML menu always be on top?

 

Here's the source code for my DHTML MENU

 

catalog/includes/boxes/menu_main.php

 

<tr>

           <td>

           <div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">

</div>

           <?php

  $info_box_contents = array();

 $info_box_contents[] = array('text' => 'Main Menu');



 new infoBoxHeading($info_box_contents, true, false);

$info_box_contents = array();

 $info_box_contents[] = array('text' =>

'<a href="http://www.stylishdecor.com/catalog/default.php">Home</a><br>' .

'<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Members</a><br>' .

'<a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">Shopping</a><br>' .

'<a href="#" onMouseover="showmenu(event,linkset[2])" onMouseout="delayhidemenu()">Products</a><br>' .

'<a href="#" onMouseover="showmenu(event,linkset[3])" onMouseout="delayhidemenu()">Information</a>');

new infoBox($info_box_contents); ?>



 </td>

         </tr>

 

catalog/includes/header.php

 

 <head>



<style>

<!--



.menuskin{

position:absolute;

width:165px;

background-color:menu;

border:1px solid black;

border-color:#b6b7cb;

font:normal 10px Verdana;

line-height:16px;

z-index:100;

visibility:hidden;

}



.menuskin a{

text-decoration:none;

color:black;

padding-left:10px;

padding-right:10px;

}



#mouseoverstyle{

background-color:white;



}



#mouseoverstyle a{

color:#800000;

}

-->

</style>



<script language="JavaScript1.2">



//Pop-it menu- By Dynamic Drive

//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com

//This credit MUST stay intact for use



var linkset=new Array()

//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT



linkset[0]='<div class="menuitems"><a href="http://dynamicdrive.com">Login</a></div>'

linkset[0]+='<div class="menuitems"><a href="http://javascriptkit.com">Create Account</a></div>'

linkset[0]+='<div class="menuitems"><a href="http://freewarejava.com">View Account</a></div>'



linkset[1]='<div class="menuitems"><a href="http://msnbc.com">My Shopping Cart</a></div>'

linkset[1]+='<div class="menuitems"><a href="http://cnn.com">Go To Checkout</a></div>'



linkset[2]='<div class="menuitems"><a href="http://dynamicdrive.com">Current Specials</a></div>'

linkset[2]+='<div class="menuitems"><a href="http://freewarejava.com">New Products</a></div>'

linkset[2]+='<div class="menuitems"><a href="http://javascriptkit.com">View All Products</a></div>'

linkset[2]+='<div class="menuitems"><a href="http://javascriptkit.com">View All Categories</a></div>'

linkset[2]+='<div class="menuitems"><a href="http://freewarejava.com">Advanced Search</a></div>'



linkset[3]='<div class="menuitems"><a href="http://dynamicdrive.com">Shipping & Returns</a></div>'

linkset[3]+='<div class="menuitems"><a href="http://javascriptkit.com">Privacy Notice</a></div>'

linkset[3]+='<div class="menuitems"><a href="http://freewarejava.com">Conditions of Use</a></div>'

linkset[3]+='<div class="menuitems"><a href="http://freewarejava.com">FAQ</a></div>'

linkset[3]+='<div class="menuitems"><a href="http://freewarejava.com">Site Map</a></div>'

linkset[3]+='<div class="menuitems"><a href="http://freewarejava.com">About Us</a></div>'

linkset[3]+='<div class="menuitems"><a href="http://freewarejava.com">Contact Us</a></div>'



////No need to edit beyond here



var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

var ns6=document.getElementById&&!document.all

var ns4=document.layers



function showmenu(e,which){



if (!document.all&&!document.getElementById&&!document.layers)

return



clearhidemenu()



menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""

menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj



if (ie4||ns6)

menuobj.innerHTML=which

else{

menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')

menuobj.document.close()

}



menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width

menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height

eventX=ie4? event.clientX : ns6? e.clientX : e.x

eventY=ie4? event.clientY : ns6? e.clientY : e.y



//Find out how close the mouse is to the corner of the window

var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX

var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY



//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<menuobj.contentwidth)

//move the horizontal position of the menu to the left by it's width

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth

else

//position the horizontal position of the menu where the mouse was clicked

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX



//same concept with the vertical position

if (bottomedge<menuobj.contentheight)

menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight

else

menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY

menuobj.thestyle.visibility="visible"

return false

}



function contains_ns6(a, b) {

//Determines if 1 element in contained in another- by Brainjar.com

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}



function hidemenu(){

if (window.menuobj)

menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"

}



function dynamichide(e){

if (ie4&&!menuobj.contains(e.toElement))

hidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

hidemenu()

}



function delayhidemenu(){

if (ie4||ns6||ns4)

delayhide=setTimeout("hidemenu()",500)

}



function clearhidemenu(){

if (window.delayhide)

clearTimeout(delayhide)

}



function highlightmenu(e,state){

if (document.all)

source_el=event.srcElement

else if (document.getElementById)

source_el=e.target

if (source_el.className=="menuitems"){

source_el.id=(state=="on")? "mouseoverstyle" : ""

}

else{

while(source_el.id!="popmenu"){

source_el=document.getElementById? source_el.parentNode : source_el.parentElement

if (source_el.className=="menuitems"){

source_el.id=(state=="on")? "mouseoverstyle" : ""

}

}

}

}



if (ie4||ns6)

document.onclick=hidemenu



</script>



</head>

 

To see my problem in action please go to http://www.StylishDecor.com/catalog/default.php

 

~Steve

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...