...

View Full Version : dropdown under select



esthera
12-19-2005, 07:47 AM
I am using dropdown menus found at www.dynamicdrive.com

My problem is that if there is a select box on top of the page then the menu dropdown shows under the select box instead of over.

Anything to do about this?

glenngv
12-19-2005, 08:15 AM
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx

esthera
12-19-2005, 08:22 AM
so the only working solution is to put the menu in an iframe?
Is that correct?

_Aerospace_Eng_
12-19-2005, 08:24 AM
Or use JS to make the select menu display:none; when the menu is hovered over.

esthera
12-19-2005, 08:29 AM
how would i do that?
it sounds easier then the iframe

_Aerospace_Eng_
12-19-2005, 08:37 AM
Which drop down menu are you using?

glenngv
12-19-2005, 08:40 AM
There is a sample code (http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx) for the iframe shim techique.

esthera
12-19-2005, 08:43 AM
from dynamic drive



<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/



var menu1=new Array()
menu1[0]='<a href="admin.asp?cmd=city">Cities</a>'
menu1[1]='<a href="admin.asp?cmd=neighborhood">Neighborhood</a>'
menu1[2]='<a href="admin.asp?cmd=state">State</a>'
menu1[3]='<a href="admin.asp?cmd=country">Country</a>'
menu1[4]='<a href="admin.asp?cmd=nameofprogram">Name of Program</a>'
menu1[5]='<a href="admin.asp?cmd=changeinterviewers">Interviewers</a>'
menu1[6]='<a href="admin.asp?cmd=changecontactperson">Contact Person</a>'
menu1[7]='<a href="admin.asp?cmd=changenationality">Nationality</a>'
menu1[8]='<a href="admin.asp?cmd=changelanguage">Language</a>'
var menu2=new Array()
menu2[0]='<a href="admin.asp?cmd=tentativeregrep">Tentative Placement registrants</a>'
var menu3=new Array()

menu3[0]='<a href="admin.asp?cmd=searchme">Search </a>'
menu3[1]='<a href="admin.asp?cmd=addparticipant">Add </a>'
menu3[2]='<a href="admin.asp?cmd=viewparticipant">View </a>'


var menuwidth='250px' //default menu width
var menubgcolor='#99CCFF' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

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

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

vwphillips
12-19-2005, 08:54 AM
http://www.codingforums.com/showthread.php?t=73796&highlight=iframe

_Aerospace_Eng_
12-19-2005, 09:03 AM
function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay);
document.getElementById('menu').style.visibility='visible';
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
document.getElementById('menu').style.visibility='hidden';
}
Make the changes in bold to the corresponding functions in your script, then add this to your select menu open tag.

id="menu"

brothercake
12-19-2005, 09:26 AM
The iframe solution is much better though, because it's graceful - it only affects the any select element that's actually relevant, whereas the hiding technique hides all of them every time, even if they're only partially covered, or indeed, nowhere near the menu. It's much more brutal and more disconcerting; the iframe technique is subtle, so I would definitely recommend it as the best way.

And the iframe doesn't imply any difference in the way your content is managed - you don't have to put anything in the iframe, just use it like a layer - like a sheet of plastic between two bits of glass.

esthera
12-19-2005, 09:54 AM
aerospace:
I actaully liked your code - it is easier and cleaner then the iframe but I have a problem that if a specific page does not have a select box then I get an error. (i have the menu on all pages)

Is there anyway to do on error resume next in javascript?

_Aerospace_Eng_
12-19-2005, 09:55 AM
The other members in this thread make a valid point. The iframe is the better solution. You don't want to do it because its more work. Don't be the lazy one.

esthera
12-19-2005, 11:04 AM
okay so please clarify --
what exactly goes in the iframe?

I'm not clear.

_Aerospace_Eng_
12-19-2005, 11:12 AM
Nothing. Its just there, look at the examples that have been given to you. vwphillips answered a recent post with the same menu you are using implented into the code using the iframe method.

esthera
12-19-2005, 11:16 AM
i'm having trouble seeing what goes where.

where does this code go:

<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
testtest
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>

glenngv
12-19-2005, 11:30 AM
The PopupDiv in the sample code is equivalent to your menu (which is dropmenudiv) and the DivShim is the iframe you would insert under the menu. So you only need to put that iframe in your page and not the PopupDiv. You just change the id PopupDiv to dropmenudiv in the sample code provided.

function DivSetVisible(state)
{
var DivRef = document.getElementById('dropmenudiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
And then you would call that function whenever you show or hide your menu. And I think it's in the showhide function.

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") {
obj.visibility=visible
DivSetVisible(true);
}
else if (e.type=="click") {
obj.visibility=hidden
DivSetVisible(false);
}
}

esthera
12-19-2005, 12:13 PM
thanks for all your help.
for some reason it is still not working.

should my menu be in a div with the id=dropmenudiv?

glenngv
12-20-2005, 04:19 AM
Your menu is already in a div with id dropmenudiv, unless you changed it. And you need to add z-index CSS property to the menu div.

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="z-index:100;visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
But since the reference to dropmenudiv is already in a global variable named dropmenuobj, you can just use that variable.

function DivSetVisible(state)
{
var IfrRef = document.getElementById('DivShim');
if(state)
{
dropmenuobj.style.display = "block";
IfrRef.style.width = dropmenuobj.offsetWidth;
IfrRef.style.height = dropmenuobj.offsetHeight;
IfrRef.style.top = dropmenuobj.style.top;
IfrRef.style.left = dropmenuobj.style.left;

IfrRef.style.zIndex = dropmenuobj.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
dropmenuobj.style.display = "none";
IfrRef.style.display = "none";
}
}

esthera
12-20-2005, 06:10 PM
I replaced the function with your function above but the select still goes over it.

What am I missing?
Did I have to copy the code you gave on the top?

vwphillips
12-20-2005, 06:26 PM
This fully functional example was posted some time ago


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>ToolTip</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<style type="text/css">
<!--
.Mess {
position:absolute;visibility:hidden;width:100px;top:0px;border:solid black 1px;
}
.zxcBG {
position:absolute;width:100%;top:0px;left:0px;background-color:#FFFFCC;
}
.zxcContent {
position:absolute;width:100%;top:0px;left:0px;text-align:center;font-size:12px;
}
-->
</style>


</head>

<body bgColor="#f8cd76" >


<center>
<br>
<br>
<br>
<table id="ToolTip" border="0" cellspacing="0" cellpadding="5" >
<tr>
<td id="T1" onmouseover="zxcInitToolTip('T1','Mess2',20,30);" width="100" align="center" bgcolor="#999966" >Topic 1</td>
<td id="T2" onmouseover="zxcInitToolTip('T2','Mess1',20,30);" width="100" align="center" bgcolor="#FFFF99" >Topic 2</td>
<td id="T3" onmouseover="zxcInitToolTip('T3','Mess4',20,30);" width="100" align="center" bgcolor="#FFFFCC" >Topic 3</td>
<td id="T4" onmouseover="zxcInitToolTip('T4','Mess4',20,30);" width="100" align="center" bgcolor="#CC9966" >Topic 4</td>
</tr>
</table>
<select ><option>rrrrrrrrrxxxxxxxxxxxxxxxxxxxxxxxxxrrrrrrrrrrrrrrrrrrr</option></select><br>
<br>
<br>
MouseOver this <a id="T5" style="color:blue;text-decoration:underline;" onmouseover="zxcInitToolTip('T5','Mess4',20,-50);" > Text </a> to see the effect.
<br>



<div id="Mess1" class="Mess" style="overflow:hidden;width:150px;height:30px;" >
<div class="zxcBG" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="150" height="30" ></div>
<div class="zxcContent" >
Message 1
</div>
</div>

<div id="Mess2" class="Mess" style="overflow:hidden;width:150px;height:50px;background-color:red;padding:5px;" >
<a href="http://www.vicsjavascripts.org.uk" >
Message 2
</a>
</div>

<div id="Mess3" class="Mess" style="overflow:hidden;width:150px;height:30px;" >
Message 3
</div>

<div id="Mess4" class="Mess" style="overflow:hidden;width:160px;height:65px;">
<div class="zxcBG" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="65" ></div>
<div class="zxcContent" >
<a href="http://www.vicsjavascripts.org.uk" >VicsJavaSripts</a><br>
<a href="http://www.js-examples.com" >JS-Examples</a><br>
<div style="position:relative;width:100px;background-color:red;" >Message 3</div>
Message 4<br>
</div>
</div>

<br>
<br>
<script language="JavaScript" type="text/javascript">
<!--
// ToolTip zxcPart1 (05-12-2005)
// by Vic Phillips zxcPart1 http://www.vicsjavascripts.org.uk


// MouseOver a topic and the ToolTip will appear
// MouseOut or MouseOver another topic and the first ToolTip will disappear
// while the ToolTip for the current topic appears.

// MouseOver a ToolTip to prevent the ToolTip retracting.


// Each ToolTip may be specifically positioned relative to the topic.



// There may be as many topics or ToolTips as required on a page.
// Each topic may have a specific ToolTip or share a ToolTip.


// Application Notes.

// Elements requiring a ToolTip must be allocated a unique id

// The ToolTips are defined in the HTML code and may contain common HTML Code including links
// Each ToolTip must have a unique id.
// The ToolTip style must be set in a class or inline style to
// position must be absolute,
// visibility must be hidden.
// e.g.
// <div id="Mess2" class="Mess" ><a href="http://www.vicsjavascripts.org.uk" >Message 2</a></div>

// The Script would normally be initialised from a mouseover event
// eg
//<table id="ToolTip" border="0" cellspacing="0" cellpadding="5" >
// <tr>
// <td id="T1" onmouseover="zxcInitToolTip('T1','Mess2',20,30);" width="100" align="center" bgcolor="#999966" >Topic 1</td>
// <td id="T2" onmouseover="zxcInitToolTip('T2','Mess1',20,30);" width="100" align="center" bgcolor="#FFFF99" >Topic 2</td>
// <td id="T3" onmouseover="zxcInitToolTip('T3','Mess4',20,30);" width="100" align="center" bgcolor="#FFFFCC" >Topic 3</td>
// <td id="T4" onmouseover="zxcInitToolTip('T4','Mess4',20,30);" width="100" align="center" bgcolor="#CC9966" >Topic 4</td>
// </tr>
// </table>
// Each parameter of the call 'zxcInitToolTip(' containes an array defining each ToolTip specification
// field 0 = the unique id of the element to attach the ToolTip to (string)
// field 1 = the unique id if the ToolTip <DIV> (string)
// field 2 = the horizontal(X) offset of the ToolTip (digits)
// field 3 = the vertical(Y) offset of the ToolTip (digits)




// All variables, function names etc are prfixed with 'zxc' to minimise conflicts with other JavaScripts

// Tested with IE6 and Mozilla FireFox


// Global Customising Variables

var zxcZIndex=4; // the base Z-Index of the ToolTips
var zxcSpeed=20; // The speed of extension/retraction (minimum = 2 = fastest)
var zxcIncrement=2; // the height increment during the extension/retraction (minimum 1 )
var zxcMouseOutDelay=500; // the delay before retracting the ToolTip (minimum 1 )


//-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// YoYo ToolTip zxcPart2 (02-12-2005)
// by Vic Phillips zxcPart1 http://www.vicsjavascripts.org.uk

// Functional Code - NO NEED to change

var zxcLast,zxcTO,zxcIF;
var zxcCnt=0;

if (zxcSpeed<2){ zxcSpeed=2; }
if (zxcIncrement<1){ zxcIncrement=1; }
if (zxcMouseOutDelay<1){ zxcMouseOutDelay=1; }

function zxcInitToolTip(){
zxc=zxcInitToolTip.arguments;
zxcmt=document.getElementById(zxc[0]);
if (zxcmt.m){return }
zxcbdy=document.getElementsByTagName('BODY')[0];
if (!zxcIF){
zxcIF=document.createElement('IFRAME')
zxcIF.style.position='absolute';
zxcIF.style.visibility='hidden';
zxcbdy.appendChild(zxcIF);
}
zxcmt.m=document.getElementById(zxc[1]).cloneNode(true);
zxcbdy.appendChild(zxcmt.m);
zxcmt.m.ifr=zxcIF.cloneNode(true);
zxcbdy.appendChild(zxcmt.m.ifr);
zxcmt.m.id='zxcid'+(zxcCnt++);
if (!zxc[2]){ zxc[2]=0; }
if (!zxc[3]){ zxc[3]=0; }
zxcmt.m.style.zIndex=zxcZIndex;
zxcmt.m.ifr.style.width=zxcmt.m.offsetWidth+'px';
zxcmt.m.ifr.style.height=zxcmt.m.offsetHeight+'px';
zxcmt.pos=[zxcmt,zxc[2],zxc[3]];
zxcmt.m.down=false;
zxcAddOver(zxcmt);
zxcAddOut(zxcmt);
zxcAddOut(zxcmt.m);
zxcAddClear(zxcmt.m);
}

function zxcOver(){
clearTimeout(zxcTO);
zxcLastObj();
if (!this.m.down){
this.m.down=true;
this.m.style.left=(zxcPos(this.pos[0])[0]+this.pos[1])+'px';
this.m.style.top=(zxcPos(this.pos[0])[1]+this.pos[2])+'px';
this.m.style.visibility='visible';
this.m.style.zIndex=zxcZIndex+2;
if (document.all){ this.m.ifr.style.visibility='visible'; }
this.m.ifr.style.zIndex=zxcZIndex+1;
this.m.ifr.style.left=this.m.style.left;
this.m.ifr.style.top=this.m.style.top;
}
else {
this.mobj.down=false;
}
zxcLast=this;
}

function zxcLastObj(){
if (zxcLast){
zxcLast.m.style.zIndex=zxcZIndex;
zxcLast.m.down=false;
zxcLast.m.style.visibility='hidden';
zxcLast.m.ifr.style.visibility='hidden';
}
}

function zxcOut(){
zxcTO=setTimeout('zxcLastObj()',zxcMouseOutDelay);
}

function zxcClear(){
clearTimeout(zxcTO);
}

function zxcPos(zxc){
zxcl=zxc.offsetLeft;
zxct=zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcp=zxc.offsetParent;
zxcl+=zxcp.offsetLeft;
zxct+=zxcp.offsetTop;
zxc=zxcp;
}
return [zxcl,zxct];
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddOver(zxc){
if (zxc.addOver){ return; }
zxc.addOver=zxcOver;
zxcEventAdd(zxc,'mouseover','addOver');
}

function zxcAddOut(zxc){
if (zxc.addOut){ return; }
zxc.addOut=zxcOut;
zxcEventAdd(zxc,'mouseout','addOut');
}

function zxcAddClear(zxc){
if (zxc.addClear){ return; }
zxc.addClear=zxcClear;
zxcEventAdd(zxc,'mouseover','addClear');
}


//-->
</script>


</BODY>
</html>

esthera
12-20-2005, 06:32 PM
yes i see but i don't understand how to implement with my dropdowns

can you help me... i'm not sure what i'm missing.

vwphillips
12-20-2005, 07:44 PM
post a link to your current menu (not just the DDScript) or specify the menu requirements - I need to know what features you require

esthera
12-20-2005, 07:53 PM
thanks for your help -i think i got it working now.

esthera
12-20-2005, 08:16 PM
no that was over text boxes not select

see http://www. aw eb foryou.c om/ menutest.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum