[Javascript] Fwd: Javascript menus
John Warner
john at jwarner.com
Sat Apr 7 06:30:02 CDT 2007
Got a link?
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");
>
More information about the Javascript
mailing list