[Javascript] Fwd: Javascript menus
Nick Wiltshire
nick at customdesigns.ca
Sun Apr 8 02:18:57 CDT 2007
On Saturday 07 April 2007 05:30, John Warner wrote:
> Got a link?
>
I do now:
http://customdesigns.ca/demo/jsmenu/
I noticed something though -- it actually does work in IE6, except it doesn't
activate lower menu tiers unless you mouse over the text as opposed to the
padding, it seems to not consider padding as part of the div element.
I put lots of padding in for testing though...the example is exceptionally
ugly :)
> John Warner
>
> > -----Original Message-----
> > From: javascript-bounces at LaTech.edu
> > [mailto:javascript-bounces at LaTech.edu] On Behalf Of Nick Wiltshire
> > Sent: Friday, April 06, 2007 11:59 PM
> > To: javascript at latech.edu
> > Subject: [Javascript] Fwd: Javascript menus
> >
> >
> > Hi all,
> >
> > I'm a bit green with JavaScript and am having issues with IE6.
> >
> > I've written some classes to do some basic JS menus. Why? I
> > need the practise working with JS scope, plus all the menus
> > out there didn't meet my needs or were way overpriced....or
> > simply had too restrictive of a license.
> >
> > This works fairly well in FF, Opera, Konqueror and IE7. IE6
> > however, renders the top level, but the mouseovers dont work.
> > Does anyone know how to fix it?
> >
> > Any other tips, comments, criticisms welcome. Feel free to
> > use the code if you like, consider it GPL :)
> >
> > ---------
> > function clsJSFlexMenu(id)
> > {
> > this.id = id;
> > this.child_panel;
> > this.arr_items = new Array();
> > this.div = document.createElement("div");
> >
> > //set defaults...
> > this.div.id = this.id;
> > this.orientation = "Vertical";
> > this.margin = 0;
> > this.border_style = "Solid";
> > this.border_width = 1;
> > this.border_color = "#000000";
> > this.padding = 10;
> > this.background_color = "#3991FF";
> > this.background_image = "";
> > this.background_repeat = "";
> > this.hide_delay = 1000;
> >
> > this.AppendItem = function(flex_menu_item)
> > {
> > this.arr_items[this.arr_items.length] = flex_menu_item;
> > }
> >
> > this.Render = function(target_id)
> > {
> > var obj_target = document.getElementById(target_id);
> >
> > this.div.id = this.id;
> > this.div.style.margin = this.margin + "px";
> > this.div.style.borderStyle = this.border_style;
> > this.div.style.borderWidth = this.border_width + "px";
> > this.div.style.borderColor = this.border_color;
> > this.div.style.padding = this.padding + "px";
> > this.div.style.backgroundColor = this.background_color;
> > this.div.style.backgroundImage = this.background_image;
> > this.div.style.backgroundRepeat =
> > this.background_repeat;
> >
> > this.div.obj_proxy = this;
> > this.div.onmouseover = function()
> > {
> > this.obj_proxy.MouseOver();
> > }
> > this.div.onmouseout = function()
> > {
> > this.obj_proxy.MouseOut();
> > }
> >
> > for(i in this.arr_items)
> > {
> > this.arr_items[i].Render(this.div, this);
> > }
> >
> > obj_target.appendChild(this.div);
> > }
> >
> > this.MouseOver = function()
> > {
> > }
> >
> > this.MouseOut = function()
> > {
> > //this.MenuTimer(1);
> > }
> >
> > this.MenuTimer = function(bit)
> > {
> > if(bit)
> > {
> > //we need to kill existing timer or we
> > lose the reference and it causes issues...
> > clearTimeout(this.timer);
> > var proxy = this;
> > this.timer =
> > setTimeout(function(){proxy.Close()}, this.hide_delay);
> > }
> > else
> > {
> > clearTimeout(this.timer);
> > }
> > }
> >
> > this.PanelTimer = function(bit)
> > {
> > //doesn't do anything other than prevent an error
> > }
> >
> > this.Close = function()
> > {
> > for(var i in this.arr_items)
> > {
> > this.arr_items[i].Hide();
> > }
> > }
> > }
> >
> > function clsJSFlexMenuPanel(id, obj_parent)
> > {
> > this.id = id;
> > this.obj_parent = obj_parent;
> > this.arr_items = new Array();
> > this.div = document.createElement("div");
> > this.state = 0;
> >
> > //set defaults...
> > this.div.id = this.id;
> > this.orientation = "Vertical";
> > this.x_behaviour = "Right";
> > this.y_behavior = "Down";
> > this.x_offset = 0;
> > this.y_offset = -25;
> > this.margin = 0;
> > this.border_style = "Solid";
> > this.border_width = 1;
> > this.border_color = "#000000";
> > this.padding = 10;
> > this.background_color = "#B9E0FF";
> > this.background_image = "";
> > this.background_repeat = "";
> >
> > this.obj_parent.child_panel = this;
> >
> > this.AppendItem = function(flex_menu_item)
> > {
> > this.arr_items[this.arr_items.length] = flex_menu_item;
> > }
> >
> > this.Render = function()
> > {
> > this.div.style.margin = this.margin + "px";
> > this.div.style.borderStyle = this.border_style;
> > this.div.style.borderWidth = this.border_width + "px";
> > this.div.style.borderColor = this.border_color;
> > this.div.style.padding = this.padding + "px";
> > this.div.style.backgroundColor = this.background_color;
> > this.div.style.backgroundImage = this.background_image;
> > this.div.style.backgroundRepeat =
> > this.background_repeat;
> > this.div.style.zIndex=999;
> > this.div.style.position="absolute";
> > this.div.style.display="block";
> >
> > this.div.obj_proxy = this;
> > this.div.onmouseover = function()
> > {
> > this.obj_proxy.MouseOver();
> > }
> > this.div.onmouseout = function()
> > {
> > this.obj_proxy.MouseOut();
> > }
> >
> > var e = this.obj_parent.div;
> > var tmp_x = 0;
> > var tmp_y = 0;
> >
> > if(this.x_behaviour == "Right")
> > tmp_x += e.offsetWidth;
> >
> > if(this.y_behavior == "Down")
> > tmp_y += e.offsetHeight;
> >
> > while(e.offsetParent)
> > {
> > tmp_x += e.offsetLeft;
> > tmp_y += e.offsetTop;
> > e = e.offsetParent;
> > }
> > tmp_x += e.offsetLeft;
> > tmp_y += e.offsetTop;
> >
> > tmp_x += this.x_offset;
> > tmp_y += this.y_offset;
> >
> > this.div.style.top = tmp_y + "px";
> > this.div.style.left = tmp_x + "px";
> >
> > for(i in this.arr_items)
> > {
> > this.arr_items[i].Render(this.div, this);
> > }
> >
> > document.body.appendChild(this.div);
> > }
> >
> > this.MouseOver = function()
> > {
> > this.MenuTimer(0);
> > this.PanelTimer(0);
> > }
> >
> > this.MouseOut = function()
> > {
> > this.MenuTimer(1);
> > this.PanelTimer(1);
> > }
> >
> > this.Hide = function()
> > {
> > for(var i in this.arr_items)
> > {
> > this.arr_items[i].Hide();
> > }
> >
> > this.div.style.display = "none";
> > }
> >
> > this.MenuTimer = function(bit)
> > {
> > this.obj_parent.MenuTimer(bit);
> > }
> >
> > this.PanelTimer = function(bit)
> > {
> > if(bit)
> > {
> > //we need to kill existing timer or we
> > lose the reference and it causes issues...
> > clearTimeout(this.timer);
> > var proxy = this;
> > this.timer =
> > setTimeout(function(){proxy.Hide();}, 250);
> > }
> > else
> > {
> > clearTimeout(this.timer);
> > this.obj_parent.PanelTimer(bit);
> > }
> > }
> > }
> >
> > function clsJSFlexMenuItem(id, obj_parent)
> > {
> > this.id = id;
> > this.obj_parent = obj_parent;
> > this.div = document.createElement("div");
> > this.state = 0;
> >
> > //set defaults...
> > this.div.id = this.id;
> > this.margin = 0;
> > this.border_style = "Solid";
> > this.border_width = 1;
> > this.border_color = "#000000";
> > this.padding = 10;
> > this.background_color = "#B9FFFF";
> > this.background_image = "";
> > this.background_repeat = "";
> > this.text_align = "Left";
> >
> > this.font_color = "#000000";
> > this.link_text = "Test";
> >
> > this.obj_parent.AppendItem(this);
> >
> > this.Render = function(obj_target)
> > {
> > while(this.div.childNodes.length)
> > {
> > this.div.removeChild(this.div.firstChild);
> > }
> >
> > this.div.style.margin = this.margin + "px";
> > this.div.style.borderStyle = this.border_style;
> > this.div.style.borderWidth = this.border_width + "px";
> > this.div.style.borderColor = this.border_color;
> > this.div.style.padding = this.padding + "px";
> > this.div.style.backgroundColor = this.background_color;
> > this.div.style.backgroundImage = this.background_image;
> > this.div.style.backgroundRepeat =
> > this.background_repeat;
> > this.div.style.textAlign = this.text_align;
> > this.div.style.color = this.font_color;
> >
> > this.div.obj_proxy = this;
> > this.div.onmouseover = function()
> > {
> > this.obj_proxy.MouseOver();
> > }
> > this.div.onmouseout = function()
> > {
> > this.obj_proxy.MouseOut();
> > }
> >
> >
> > this.div.appendChild(document.createTextNode(this.link_text));
> >
> > obj_target.appendChild(this.div);
> > }
> >
> > this.Hide = function()
> > {
> > if(this.child_panel)
> > this.child_panel.Hide();
> > }
> >
> > this.MouseOver = function()
> > {
> > this.MenuTimer(0);
> > this.obj_parent.PanelTimer(0);
> >
> > if(this.child_panel)
> > {
> > this.child_panel.Render();
> >
> > if(this.child_panel.timer)
> > {
> > this.child_panel.PanelTimer(0);
> > }
> > }
> > }
> >
> > this.MouseOut = function()
> > {
> > this.MenuTimer(1);
> >
> > if(this.child_panel)
> > this.child_panel.PanelTimer(1);
> > }
> >
> > this.MenuTimer = function(bit)
> > {
> > this.obj_parent.MenuTimer(bit);
> > }
> >
> > this.PanelTimer = function(bit)
> > {
> > if(bit)
> > {}
> > else
> > {
> > this.obj_parent.PanelTimer(bit);
> > }
> > }
> > }
> >
> > //create a test menu
> > flexmenu1 = new clsJSFlexMenu("flexmenu1");
> > flexmenuitem1 = new clsJSFlexMenuItem("flexmenuitem1",
> > flexmenu1);
> > flexmenupanel1 = new
> > clsJSFlexMenuPanel("flexmenupanel1", flexmenuitem1);
> > flexmenuitem11 = new
> > clsJSFlexMenuItem("flexmenuitem11", flexmenupanel1);
> > flexmenuitem12 = new
> > clsJSFlexMenuItem("flexmenuitem12", flexmenupanel1);
> > flexmenuitem2 = new clsJSFlexMenuItem("flexmenuitem2",
> > flexmenu1);
> > flexmenupanel2 = new
> > clsJSFlexMenuPanel("flexmenupanel2", flexmenuitem2);
> > flexmenuitem21 = new
> > clsJSFlexMenuItem("flexmenuitem21", flexmenupanel2);
> > flexmenupanel21 = new
> > clsJSFlexMenuPanel("flexmenupanel21",
> > flexmenuitem21);
> > flexmenuitem211 = new
> > clsJSFlexMenuItem("flexmenuitem211",
> > flexmenupanel21);
> > flexmenu1.Render("Navigation");
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
More information about the Javascript
mailing list