properties of the element collection returned by getElementsByTagName

[snowneil]

Hi, i am trying to position an iframe shim behind a <ul> when it appears using mouseover. Just wanted some help on how to do it, possibly using getElementsByTagName().

The following is my markup example.

<div id="headerNav">
<ul>
    <li id="header_nav1" class="nav1"><a href="#">N</a></li>
    <li id="header_nav2" class="nav2"><a href="">A</a>
        <ul class="subCategories">
            <li class="nav2"><a href="#">S</a></li>
	    <li class="nav2"><a href="#">H</a></li>
	    <li class="nav2"><a href="#">B</a></li>
        </ul>
    </li>
    <li id="header_nav3" class="nav3"><a href="#">G</a></li>
</ul>
</div>
<iframe
  id="DivShim"
  src="javascript:false;"
  scrolling="no"
  frameborder="0"
  style="position:absolute; top:0px; left:0px; display:none;">
 </iframe>

I tried the below Javascript but firstChild.nextSibling doesn't have those properties.

<script>
  
startList = function() {
	
  var DivRef = document.getElementById('headerNav');
  var IfrRef = document.getElementById('DivShim');
	
	if (document.all && document.getElementById) {
		
		navRoot = DivRef.firstChild;
	
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
					IfrRef.style.display = "block";
					
    			IfrRef.style.width = node.firstChild.nextSibling.offsetWidth;
    			IfrRef.style.height = node.firstChild.nextSibling.offsetHeight;
    			IfrRef.style.top = node.firstChild.nextSibling.style.top;
    			IfrRef.style.left = node.firstChild.nextSibling.style.left;
    			IfrRef.style.zIndex = node.firstChild.nextSibling.style.zIndex - 1;
	  		}
	  	
	  		node.onmouseout=function() {
	  			this.className=this.className.replace(" over", "");
	  			IfrRef.style.display = "none";
	   		}
	  	}
	 	}
	}
}

window.onload=startList;

 </script>

I also tried

  nodeSubList = node.getElementsByTagName('ul');
  IfrRef.style.top = nodeSubList[0].style.top;

  etc...

Didnt think it would work and it certainly doesn't.

 

[kaht]

What's this line in there for?

if (document.all && document.getElementById) {

You do realize that's going to make it break in all non IE browsers, right?

Instead of trying to make the shim resize itself over every single child node in the list, why not just make it big enough to cover the entire list? Then you don't have to keep dynamically resizing it and positioning it over every element.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[snowneil]

That was my bad, i was playing around with existing code and forgot to take it out.

Here is the code now

startList = function() {
	//alert("starting");
 	if (document.all&&document.getElementById) {
 		if (document.getElementById("headerNav")) {
			navRoot = document.getElementById("headerNav");
			//alert("Node Name = " +navRoot.nodeName);
			for (i=0; i<navRoot.childNodes.length; i++) {
				node = navRoot.childNodes[i];
				//alert("Node Name = " +node.nodeName);
				if (node.nodeName=="UL") {
					for (j=0; j<node.childNodes.length; j++) {
						anode = node.childNodes[j];
						//alert("Node Name = " +anode.nodeName);
						if (anode.nodeName=="LI") {
							//alert("added");
							anode.onmouseover=function() {
								this.className+=" over";
								if(document.getElementById("DivShim")) {
									
									ifrRef = document.getElementById("DivShim");
									
									for(k=0; k < this.childNodes.length; k++) {
										nodeChild = this.childNodes[k];
										if(nodeChild.nodeName == "UL") {
											subList = nodeChild;
										}
									}
									
									if (subList != undefined) {
										ifrRef.style.display = "block";
					  				ifrRef.style.width = subList.offsetWidth;
					  				ifrRef.style.height = subList.offsetHeight;
					  				ifrRef.style.top = subList.offsetTop;
					  				ifrRef.style.left = subList.parentNode.offsetLeft;
					  				ifrRef.style.zIndex = subList.style.zIndex - 1;
					  			}
								}
							}
							anode.onmouseout=function() {
								this.className=this.className.replace(" over", "");
								if(document.getElementById("DivShim")) {
									ifrRef = document.getElementById("DivShim");
									ifrRef.style.display = "none";
								}
							}
						}
					}
				}
			}
		}
	}
}

I think the above should work, still needs some testing. Wasn't sure if setting the iframe to cover the whole nav wouldn't obscure other parts of the site at times... ill have to try it that way next time.