Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    js & css positioning with xhtml

    so i wrote a menu script that works pretty good, still some bugs, when i use html, but when i use a xhtml transitional doctype (valid document) i can not use "NodeElementChild.style.left = blah" or style.top to reposition the drop down menu.
    All i change between the xhtml and html versions is that at the top of the xhtml file i put
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    and with the html version it has no doctype, just the <html> tag

    Here are the rest of the scripts

    xhtml
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <HTML>
    <HEAD>
    <TITLE>Untitled Document</TITLE>
    <link rel='stylesheet' type='text/css' href="tree.css" media='screen' title="default" />
    <script language="JavaScript" src='../global/javascript/menu.js'> </script>
    </HEAD>
    
    <BODY>
    <script language="JavaScript">
    t = new Menu('t');
    t.AddNode(0,'Blocks','','');
    t.AddNode(1,'Add','?add','');
    t.AddNode(1,'Delete','?del','');
    t.AddNode(0,'Modules','','');
    t.AddNode(4,'Add','?addmod','');
    t.AddNode(4,'Delete','?del','');
    t.AddNode(4,'What','','');
    t.AddNode(7,'Yep','?ype','');
    t.AddNode(7,'Double','?doub','');
    document.write(t);
    </script>
    </BODY>
    </HTML>
    JavaScript
    Code:
    /*Menu functinos*/
    
    if(!Array.prototype.pop){
    	Array.prototype.pop = function array_pop(){
    		LastElement = this[this.length - 1];
    		this.length--;
    		return LastElement;
    	}
    }
    if(!Array.prototype.push){
    	Array.prototype.push = function array_push(){
    		for(var i=0;i<arguments.length;i++){
    			this[this.length] = arguments[i];
    		}
    	}
    }
    	
    
    /*The collapsable menu*/
    
    function Node(pid, id, name, url, Icon){
    	this.pid = pid;
    	this.id = id;
    	this.name = name;
    	this.url = url;
    	this.HasChild = false;
    	this.Open = false;
    	if(Icon != '' && Icon != undefined){
    		this.Icons = {
    					  normal : Icon[0],
    					  active : Icon[1]
    				  	 }
    	}else
    		this.Icons = {normal : '', active : ''}
    };
    
    function Menu(obj){
    	this.Config = {
    				   UseIcons : true
    			   	  }
    	this.obj = obj;
    	this.Nodes = [];
    	this.Depth = [];
    	this.CurParent = 0;
    	this.CurID = 0; //this.Nodes.length would return a count too high, i couldn't figure it out. This is a workaround
    };
    
    Menu.prototype.AddNode = function(pid, name, url, Icon){
    	if(pid != 0)
    		this.Nodes[pid].HasChild = true;
    	this.CurID++;
    	this.Nodes[this.CurID] = new Node(pid, this.CurID, name, url, Icon);
    	return this.CurID;
    };
    Menu.prototype.NodeDepth = function(add, pid, id){
    	if(add == false){
    		this.Depth.pop();
    		if(id != this.Depth[this.Depth.length] && pid != 0){
    			Parent = this.Nodes[pid];
    			this.NodeDepth(false, Parent.pid, Parent.id);
    		}
    	}else{
    		if(pid != this.Depth[this.Depth.length - 1] && pid != 0){
    			Parent = this.Nodes[pid];
    			this.Depth.pop();
    			this.NodeDepth(true, Parent.pid, id);
    		}
    	}
    };
    Menu.prototype.GetLocation = function(Base, BaseX, BaseY, BaseHeight, BaseWidth){
    	var Top = 0;
    	var Left = 0;
    	if(Base == true){
    		Top = (BaseY + BaseHeight);
    		Left = BaseX;
    	}else{
    		Top = BaseY;
    		Left = (BaseX + BaseWidth);
    	}
    	//alert(Base + '-' + BaseX);
    	return new Array(Left, Top);
    }
    Menu.prototype.ChngStatus = function(id, LoopParent){
    	if(id == 0)
    		return false;
    	var Node = this.Nodes[id];
    	var Parent = Node.pid;//(Node.pid == 0 ? 0 : this.Nodes[Node.pid].pid);
    	var Base = (Node.pid == 0 ? 'Base' : '');
    	NodeElement = document.getElementById(this.obj+"-MenuNode-"+id);
    	NodeElementLink = document.getElementById(this.obj+"-MenuNodeLink-"+id);
    	NodeElementImg = document.getElementById(this.obj+"-MenuNodeIcon-"+id);
    	NodeElementChild = document.getElementById(this.obj+'-MenuNodeChild-'+id);
    	this.CurParent = Node.pid;
    	if(Node.Open == false && Node.HasChild == true){
    		var Location = this.GetLocation((Parent==0?true:false), NodeElement.offsetLeft, NodeElement.offsetTop, NodeElement.offsetHeight, NodeElement.offsetWidth);
    		this.NodeDepth(true, Node.pid, id);
    		this.Depth.push(id);
    		Node.Open = true;
    		NodeElement.className='MenuNode'+Base+'Active';
    		NodeElementLink.className = 'MenuParentActive';
    		NodeElementImg.src = Node.Icons.active;
    		NodeElementChild.style.left = Location[0];
    		NodeElementChild.style.top  = Location[1];
    		NodeElementChild.style.visibility = 'visible';
    		if(LoopParent == true)
    			this.ChngStatus(Node.pid, true);
    	}else if(Node.HasChild == true){
    		this.NodeDepth(false, Node.pid, id);
    		Node.Open = false;
    		NodeElement.className='MenuNode'+Base;
    		NodeElementLink.className = 'MenuParent';
    		NodeElementImg.src = Node.Icons.normal;
    		NodeElementChild.style.visibility = 'hidden';
    		if(LoopParent == true)
    			this.ChngStatus(Node.pid, true);
    	}
    };
    Menu.prototype.BuildList = function(pid){
    	var str = '';
    	if(pid != 0) str = '<div id="'+this.obj+'-MenuNodeChild-'+pid+'" class="MenuNodeChild" OnMouseOver="'+this.obj+'.ChngStatus('+pid+', false)" OnMouseOut="'+this.obj+'.ChngStatus('+pid+', false)">';
    	for(var i=1;i<=this.CurID;i++){
    		if(pid == this.Nodes[i].pid)
    			str += this.BuildNode(i);		
    	}
    	if(pid != 0) str += "\n</div>";
    	return str;
    };
    Menu.prototype.BuildNode = function(id){
    	var Node = this.Nodes[id];
    	var str = "\n<div class='MenuNode"+(Node.pid == 0 ? 'Base' : '')+(Node.Open == true ? "Active" : '')+"' id='"+this.obj+"-MenuNode-"+id+"'"+(Node.HasChild == true ? " OnMouseOver='"+this.obj+".ChngStatus("+Node.id+",false)' OnMouseOut='"+this.obj+".ChngStatus("+Node.id+",false)'" : '')+">";
    	if(this.Config.UseIcons == true){
    		str += "\n\t<div class='MenuNodeIcon'>";
    		if(Node.Open == true)
    			str += "\n\t\t<img id='"+this.obj+"-MenuNodeIcon-"+id+"' src='" + Node.Icons.active + "' border='0' />";
    		else
    			str += "\n\t\t<img id='"+this.obj+"-MenuNodeIcon-"+id+"' src='" + Node.Icons.normal + "' border='0' />";
    		str += "\n\t</div>";
    	}
    	str += "\n\t<a id='"+this.obj+"-MenuNodeLink-"+id+"' class='" + (Node.HasChild == true ? ('MenuParent' + (Node.Open == true ? 'Acitve' : '')) : 'MenuNode') + "'"+(Node.url != '' ? ' href="'+Node.url+'"' : '')+"'>"+Node.name+"</a>";
    	str += "\n</div>";
    	if(Node.HasChild == true)
    		str += this.BuildList(id);
    	return str;
    };
    Menu.prototype.toString = function(){
    	var str = "\n<div class='Menu'>";
    	if(document.getElementById){
    		str += this.BuildList(0);
    	}else str += "Your browser is not supported";
    	str += "\n</div>";
    	return str;
    };
    CSS
    Code:
    .MenuNodeChild{
    	visibility:hidden;
    	position:absolute;
    	left:0px;
    	top:0px;
    	z-index:4;
    }
    .MenuNodeBase{
    	float:left;
    	width:40px;
    	height:40px;
    	background:#DDDDDD;
    }
    .MenuNodeBaseActive{
    	float:left;
    	width:40px;
    	height:40px;
    	background:#808080;
    }
    .MenuNode{
    	width:40px;
    	height:40px;
    	background:#eeeeee;
    }
    .MenuNodeActive{
    	width:20px;
    	height:15px;
    	background:#cccccc;
    }
    .Menu{
    	font-family:verdana;
    	font-size:11px;
    	color:#000000;
    	white-space:nowrap;
    }
    Any help would be really appreciated, i'm really trying to figure it out.

  • #2
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured it out!!!
    i had to do
    NodeElementChild.style.left = Location[0]+"px";
    instead of doing
    NodeElementChild.style.left = Location[0];

    i was just sitting there switching things around and this worked.

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    And yet it'll completely fall apart the instant you start serving XHTML properly.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •