...

View Full Version : js & css positioning with xhtml



linger
03-07-2005, 02:10 AM
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


<?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


<?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


/*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


.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.

linger
03-07-2005, 02:57 AM
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.

hemebond
03-07-2005, 04:11 AM
And yet it'll completely fall apart the instant you start serving XHTML properly.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum