28. august 2004 - 16:28Der er
18 kommentarer og 1 løsning
popup menu i javascript forsvinder bag <select>
Hej, jeg bruger dreamweaver en del og har brugt popupmenuen som er i dreamweaver mx på mine hjemmesider. Jeg er lidt træt af at popupmenuerne forsvinder ind bagved mine <select>-ting
Nogen der kender tricket til at få det til at køre?
Jeg bør måske fortælle at jeg bruger iframe til at vise mine sider i... (selvom jeg ik tror det er problemet ;-)
scriptet der styrer popupmenuen hedder mm_menu.js og jeg tror det er deri problemet ligger!
Det fylder mange linier og jeg paster det i mit næste indslag
function FIND(item) { if( window.mmIsOpera ) return(document.getElementById(item)); if (document.all) return(document.all[item]); if (document.getElementById) return(document.getElementById(item)); return(false); }
function writeMenus(container) { if (window.triedToWriteMenus) return; var agt = navigator.userAgent.toLowerCase(); window.mmIsOpera = agt.indexOf("opera") != -1; if (!container && document.layers) { window.delayWriteMenus = this.writeMenus; var timer = setTimeout('delayWriteMenus()', 500); container = new Layer(100); clearTimeout(timer); } else if (document.all || document.hasChildNodes || window.mmIsOpera) { document.writeln('<span id="menuContainer"></span>'); container = FIND("menuContainer"); }
window.mmHideMenuTimer = null; if (!container) return; window.triedToWriteMenus = true; container.isContainer = true; container.menus = new Array(); for (var i=0; i<window.menus.length; i++) container.menus[i] = window.menus[i]; window.menus.length = 0; var countMenus = 0; var countItems = 0; var top = 0; var content = ''; var lrs = false; var theStat = ""; var tsc = 0; if (document.layers) lrs = true; for (var i=0; i<container.menus.length; i++, countMenus++) { var menu = container.menus[i]; if (menu.bgImageUp || !menu.menuBgOpaque) { menu.menuBorder = 0; menu.menuItemBorder = 0; } if (lrs) { var menuLayer = new Layer(100, container); var lite = new Layer(100, menuLayer); lite.top = menu.menuBorder; lite.left = menu.menuBorder; var body = new Layer(100, lite); body.top = menu.menuBorder; body.left = menu.menuBorder; } else { content += ''+ '<div id="menuLayer'+ countMenus +'" style="position:absolute;z-index:1;left:10px;top:'+ (i * 100) +'px;visibility:hidden;color:' + menu.menuBorderBgColor + ';">\n'+ ' <div id="menuLite'+ countMenus +'" style="position:absolute;z-index:1;left:'+ menu.menuBorder +'px;top:'+ menu.menuBorder +'px;visibility:hide;" onmouseout="mouseoutMenu();">\n'+ ' <div id="menuFg'+ countMenus +'" style="position:absolute;left:'+ menu.menuBorder +'px;top:'+ menu.menuBorder +'px;visibility:hide;">\n'+ ''; } var x=i; for (var i=0; i<menu.items.length; i++) { var item = menu.items[i]; var childMenu = false; var defaultHeight = menu.fontSize+2*menu.menuItemPadding; if (item.label) { item = item.label; childMenu = true; } menu.menuItemHeight = menu.menuItemHeight || defaultHeight; var itemProps = ''; if( menu.fontFamily != '' ) itemProps += 'font-family:' + menu.fontFamily +';'; itemProps += 'font-weight:' + menu.fontWeight + ';fontSize:' + menu.fontSize + 'px;'; if (menu.fontStyle) itemProps += 'font-style:' + menu.fontStyle + ';'; if (document.all || window.mmIsOpera) itemProps += 'font-size:' + menu.fontSize + 'px;" onmouseover="onMenuItemOver(null,this);" onclick="onMenuItemAction(null,this);'; else if (!document.layers) { itemProps += 'font-size:' + menu.fontSize + 'px;'; } var l; if (lrs) { var lw = menu.menuWidth; if( menu.menuItemHAlign == 'right' ) lw -= menu.menuItemPadding; l = new Layer(lw,body); } var itemLeft = 0; var itemTop = i*menu.menuItemHeight; if( !menu.vertical ) { itemLeft = i*menu.menuWidth; itemTop = 0; } var dTag = '<div id="menuItem'+ countItems +'" style="position:absolute;left:' + itemLeft + 'px;top:'+ itemTop +'px;'+ itemProps +'">'; var dClose = '</div>' if (menu.bgImageUp) dTag = '<div id="menuItem'+ countItems +'" style="background:url('+menu.bgImageUp+');position:absolute;left:' + itemLeft + 'px;top:'+ itemTop +'px;'+ itemProps +'">';
var left = 0, top = 0, right = 0, bottom = 0; left = 1 + menu.menuItemPadding + menu.menuItemIndent; right = left + menu.menuWidth - 2*menu.menuItemPadding - menu.menuItemIndent; if( menu.menuItemVAlign == 'top' ) top = menu.menuItemPadding; if( menu.menuItemVAlign == 'bottom' ) top = menu.menuItemHeight-menu.fontSize-1-menu.menuItemPadding; if( menu.menuItemVAlign == 'middle' ) top = ((menu.menuItemHeight/2)-(menu.fontSize/2)-1); bottom = menu.menuItemHeight - 2*menu.menuItemPadding; var textProps = 'position:absolute;left:' + left + 'px;top:' + top + 'px;'; if (lrs) { textProps +=itemProps + 'right:' + right + ';bottom:' + bottom + ';'; dTag = ""; dClose = ""; }
function NS4resize() { if (NS4sIW != window.innerWidth || NS4sIH != window.innerHeight) window.location.reload(); }
function onMenuItemOver(e, l) { MM_clearTimeout(); l = l || this; a = window.ActiveMenuItem; if (document.layers) { if (a) { a.document.bgColor = a.saveColor; if (a.hilite) a.hilite.visibility = "hidden"; if (a.Menu.bgImageOver) a.background.src = a.Menu.bgImageUp; a.focusItem.top = -100; a.clicked = false; } if (l.hilite) { l.document.bgColor = l.menuHiliteBgColor; l.zIndex = 1; l.hilite.visibility = "inherit"; l.hilite.zIndex = 2; l.document.layers[1].zIndex = 1; l.focusItem.zIndex = this.zIndex +2; } if (l.Menu.bgImageOver) l.background.src = l.Menu.bgImageOver; l.focusItem.top = this.top; l.focusItem.left = this.left; l.focusItem.clip.width = l.clip.width; l.focusItem.clip.height = l.clip.height; l.Menu.hideChildMenu(l); } else if (l.style && l.Menu) { if (a) { a.style.backgroundColor = a.saveColor; if (a.hilite) a.hilite.style.visibility = "hidden"; if (a.hiliteShim) a.hiliteShim.style.visibility = "inherit"; if (a.Menu.bgImageUp) a.style.background = "url(" + a.Menu.bgImageUp +")";; } l.style.backgroundColor = l.menuHiliteBgColor; l.zIndex = 1; if (l.Menu.bgImageOver) l.style.background = "url(" + l.Menu.bgImageOver +")"; if (l.hilite) { l.hilite.style.visibility = "inherit"; if( l.hiliteShim ) l.hiliteShim.style.visibility = "visible"; } l.focusItem.style.pixelTop = l.style.pixelTop; l.focusItem.style.top = l.focusItem.style.pixelTop + 'px'; l.focusItem.style.pixelLeft = l.style.pixelLeft; l.focusItem.style.left = l.focusItem.style.pixelLeft + 'px'; l.focusItem.style.zIndex = l.zIndex +1; l.Menu.hideChildMenu(l); } else return; window.ActiveMenuItem = l; }
function onMenuItemAction(e, l) { l = window.ActiveMenuItem; if (!l) return; hideActiveMenus(); if (l.mmaction) eval("" + l.mmaction); window.ActiveMenuItem = 0; }
function MM_clearTimeout() { if (mmHideMenuTimer) clearTimeout(mmHideMenuTimer); mmHideMenuTimer = null; mmDHFlag = false; }
function MM_startTimeout() { if( window.ActiveMenu ) { mmStart = new Date(); mmDHFlag = true; mmHideMenuTimer = setTimeout("mmDoHide()", window.ActiveMenu.Menu.hideTimeout); } }
function mmDoHide() { if (!mmDHFlag || !window.ActiveMenu) return; var elapsed = new Date() - mmStart; var timeout = window.ActiveMenu.Menu.hideTimeout; if (elapsed < timeout) { mmHideMenuTimer = setTimeout("mmDoHide()", timeout+100-elapsed); return; } mmDHFlag = false; hideActiveMenus(); window.ActiveMenuItem = 0; }
function MM_showMenu(menu, x, y, child, imgname) { if (!window.mmWroteMenu) return; MM_clearTimeout(); if (menu) { var obj = FIND(imgname) || document.images[imgname] || document.links[imgname] || document.anchors[imgname]; x = moveXbySlicePos (x, obj); y = moveYbySlicePos (y, obj); } if (document.layers) { if (menu) { var l = menu.menuLayer || menu; l.top = l.left = 1; hideActiveMenus(); if (this.visibility) l = this; window.ActiveMenu = l; } else { var l = child; } if (!l) return; for (var i=0; i<l.layers.length; i++) { if (!l.layers[i].isHilite) l.layers[i].visibility = "inherit"; if (l.layers[i].document.layers.length > 0) MM_showMenu(null, "relative", "relative", l.layers[i]); } if (l.parentLayer) { if (x != "relative") l.parentLayer.left = x || window.pageX || 0; if (l.parentLayer.left + l.clip.width > window.innerWidth) l.parentLayer.left -= (l.parentLayer.left + l.clip.width - window.innerWidth); if (y != "relative") l.parentLayer.top = y || window.pageY || 0; if (l.parentLayer.isContainer) { l.Menu.xOffset = window.pageXOffset; l.Menu.yOffset = window.pageYOffset; l.parentLayer.clip.width = window.ActiveMenu.clip.width +2; l.parentLayer.clip.height = window.ActiveMenu.clip.height +2; if (l.parentLayer.menuContainerBgColor && l.Menu.menuBgOpaque ) l.parentLayer.document.bgColor = l.parentLayer.menuContainerBgColor; } } l.visibility = "inherit"; if (l.Menu) l.Menu.container.visibility = "inherit"; } else if (FIND("menuItem0")) { var l = menu.menuLayer || menu; hideActiveMenus(); if (typeof(l) == "string") l = FIND(l); window.ActiveMenu = l; var s = l.style; s.visibility = "inherit"; if (x != "relative") { s.pixelLeft = x || (window.pageX + document.body.scrollLeft) || 0; s.left = s.pixelLeft + 'px'; } if (y != "relative") { s.pixelTop = y || (window.pageY + document.body.scrollTop) || 0; s.top = s.pixelTop + 'px'; } l.Menu.xOffset = document.body.scrollLeft; l.Menu.yOffset = document.body.scrollTop; } if (menu) window.activeMenus[window.activeMenus.length] = l; MM_clearTimeout(); }
function onMenuItemDown(e, l) { var a = window.ActiveMenuItem; if (document.layers && a) { a.eX = e.pageX; a.eY = e.pageY; a.clicked = true; } }
function mouseupMenu(e) { hideMenu(true, e); hideActiveMenus(); return true; }
function getExplorerVersion() { var ieVers = parseFloat(navigator.appVersion); if( navigator.appName != 'Microsoft Internet Explorer' ) return ieVers; var tempVers = navigator.appVersion; var i = tempVers.indexOf( 'MSIE ' ); if( i >= 0 ) { tempVers = tempVers.substring( i+5 ); ieVers = parseFloat( tempVers ); } return ieVers; }
function mouseoutMenu() { if ((navigator.appName == "Microsoft Internet Explorer") && (getExplorerVersion() < 4.5)) return true; hideMenu(false, false); return true; }
function hideMenu(mouseup, e) { var a = window.ActiveMenuItem; if (a && document.layers) { a.document.bgColor = a.saveColor; a.focusItem.top = -30; if (a.hilite) a.hilite.visibility = "hidden"; if (mouseup && a.mmaction && a.clicked && window.ActiveMenu) { if (a.eX <= e.pageX+15 && a.eX >= e.pageX-15 && a.eY <= e.pageY+10 && a.eY >= e.pageY-10) { setTimeout('window.ActiveMenu.Menu.onMenuItemAction();', 500); } } a.clicked = false; if (a.Menu.bgImageOver) a.background.src = a.Menu.bgImageUp; } else if (window.ActiveMenu && FIND("menuItem0")) { if (a) { a.style.backgroundColor = a.saveColor; if (a.hilite) a.hilite.style.visibility = "hidden"; if (a.hiliteShim) a.hiliteShim.style.visibility = "inherit"; if (a.Menu.bgImageUp) a.style.background = "url(" + a.Menu.bgImageUp +")"; } } if (!mouseup && window.ActiveMenu) { if (window.ActiveMenu.Menu) { if (window.ActiveMenu.Menu.hideOnMouseOut) MM_startTimeout(); return(true); } } return(true); }
jeg tænker: Kan man ik lave et script som selv finder ud af hvilke selectboxe der findes, og hvad de hedder osv. og så udfører den derefter 'hidden/visible'-funktionen
Er det muligt, for det ville lette en del arbejde med det.
Så må du jo finde dem i dokumentet i iframen også:
function showHideSels(action){ sels = document.getElementsByTagName('SELECT'); for(i=0;sels.length>i;i++)sels[i].style.visibility = action; sels = window.IFRAMENAVN.document.getElementsByTagName('SELECT'); for(i=0;sels.length>i;i++)sels[i].style.visibility = action; }
Jeg har lige lavet det... Det virker næsten 100% :-)
Der er kun et problem, det er at den kun gemmer dem når musen er over selve menuknappen. Men når jeg kører ned i vinduet(menuen), så kommer de jo frem igen, for så registrerer den jo at onmouseout='vis igen'.
Kan du gennemskue hvor jeg skal sætte den ind i stedet? (altså showHideSels('visible');)
De skal vel sættes ind et sted i javascriptet der styrer menuen ik?
Håber du evt kan se det. Jeg har allerede pasted alt der styrer menuerne længere opppe!
Men derudover er jeg mere end tilfreds, og du har allerede scoret pointene! :-)
Det ville jo selvfølgelig være optimalt hvis man kunne lave det på en pænere måde, men det virker, og det er jeg mere end tilfreds med...
function mmDoHide() { if (!mmDHFlag || !window.ActiveMenu) return; var elapsed = new Date() - mmStart; var timeout = window.ActiveMenu.Menu.hideTimeout; if (elapsed < timeout) { mmHideMenuTimer = setTimeout("mmDoHide()", timeout+100-elapsed); return; } mmDHFlag = false; ------------- her ---------- hideActiveMenus(); ---------------------------- showHideSels('visible'); window.ActiveMenuItem = 0; }
Nu virker det 100% :-) og det er jeg virkelig glad for!
Hvis du har lyst, så har jeg et lille problem mere med den her menu. Det er i Mozilla, der bliver menuen hængende hvis et felt er "hilite'et" og jeg kan ikke lige gennemskue hvad jeg kan stille op med det. Hvis du har en ide om hvad problemet/løsningen er... Kun hvis du gider.
Er lige blevet færdig! Har arbejdet i 4 måneder nonstop på siden! Og det er min første side! Jeg er bare kanonglad :-) og stolt! Men det er ik rigtig til at fatte at det er færdigt.
der er selvfølgelig nogle lillebitte småfejl (blandt andet den menu-fejl i mozilla) osv, men det bliver ordnet henad vejen!
roenving. - Tak for alle de gange du har hjulpet mig :o)
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.