From: Chris Porter Date: Mon, 2 Feb 2009 01:55:54 +0000 (+0000) Subject: Fix menu height bug in IE. X-Git-Url: https://jfr.im/git/irc/quakenet/qwebirc.git/commitdiff_plain/e9837dce18dc4e0ccb68e14441b8444690e6b9d3?hp=385143a630ed640b889d6f24d5a1daedf74f5970 Fix menu height bug in IE. --- diff --git a/css/qui.css b/css/qui.css index bc8ff45..f557616 100644 --- a/css/qui.css +++ b/css/qui.css @@ -216,17 +216,16 @@ div#noscript { padding: 4px; } -.qwebirc-qui div.dropdownmenu { +.qwebirc-qui .dropdownmenu { z-index: 100; border: 1px solid #c8d2dc; position: relative; - width: auto; top: 10px; left: 10px; background: #f2f0ff; } -.qwebirc-qui div.dropdownmenu a { +.qwebirc-qui .dropdownmenu a { display: block; font-size: 0.7em; color: black; @@ -238,15 +237,14 @@ div#noscript { padding-right: 3px; } -.qwebirc-qui div.dropdownmenu a:hover { +.qwebirc-qui .dropdownmenu a:hover { background: #FFFFFE; /* IE is rubbish and doesn't like #FFFFFF or white */ } -.qwebirc-qui div.dropdownhint { - position: absolute; - left: 5px; +.qwebirc-qui .dropdownhint { + position: relative; + left: -500px; z-index: 10; white-space: nowrap; - top: 30px; font-size: 0.7em; } diff --git a/js/ui/frontends/qui.js b/js/ui/frontends/qui.js index 4b8d697..2f33b68 100644 --- a/js/ui/frontends/qui.js +++ b/js/ui/frontends/qui.js @@ -51,14 +51,15 @@ qwebirc.ui.QUI = new Class({ this.reflow(); }, __createDropdownMenu: function() { - var dropdownMenu = new Element("div"); + var dropdownMenu = new Element("span"); dropdownMenu.addClass("dropdownmenu"); dropdownMenu.hide = function() { dropdownMenu.setStyle("display", "none"); dropdownMenu.visible = false; + document.removeEvent("mousedown", hideEvent); }.bind(this); - document.addEvent("mousedown", function() { dropdownMenu.hide() }); + var hideEvent = function() { dropdownMenu.hide(); }; dropdownMenu.hide(); this.parentElement.appendChild(dropdownMenu); @@ -90,30 +91,31 @@ qwebirc.ui.QUI = new Class({ this.outerTabs.appendChild(dropdown); dropdownMenu.show = function(x){ new Event(x).stop(); + this.hideHint(); if(dropdownMenu.visible) { dropdownMenu.hide(); return; } -/* - var left = x.client.x; - var top = x.client.y; - */ - /* -1 == border */ - var top = this.lines.getCoordinates().top; - + var top = this.outerTabs.getSize().y; + dropdownMenu.setStyle("left", 0); dropdownMenu.setStyle("top", top-1); /* -1 == top border */ dropdownMenu.setStyle("display", "inline-block"); dropdownMenu.visible = true; + + document.addEvent("mousedown", hideEvent); }.bind(this); + dropdown.addEvent("mousedown", function(e) { new Event(e).stop(); }); dropdown.addEvent("click", dropdownMenu.show); }, __createDropdownHint: function() { var dropdownhint = new Element("div"); dropdownhint.addClass("dropdownhint"); dropdownhint.set("text", "Click the icon for the main menu."); - + dropdownhint.setStyle("top", this.outerTabs.getSize().y + 5); + + this.parentElement.appendChild(dropdownhint); new Fx.Morph(dropdownhint, {duration: "normal", transition: Fx.Transitions.Sine.easeOut}).start({left: [900, 5]}); var hider = function() { @@ -123,15 +125,15 @@ qwebirc.ui.QUI = new Class({ var hider2 = function() { if(dropdownhint.hidden) return; - this.parentElement.removeChild(dropdownhint); + this.parentElement.removeChild(dropdownhint); dropdownhint.hidden = 1; }.bind(this); hider2.delay(4000); + this.hideHint = hider2; document.addEvent("mousedown", hider2); document.addEvent("keypress", hider2); - this.parentElement.appendChild(dropdownhint); }, createInput: function() { var form = new Element("form");