PDA

View Full Version : IE7 and appended elememnt styling issue



gerudo
06-29-2010, 12:15 AM
Hello and thank you in advance for your answers.

I came across a multi level dropdown javascript code that liked and wanted to implement, which can be found at http://www.leigeber.com/2008/11/drop-down-menu/.

I am pulling the navigation links from a database and dont know how many sublevels there will be so i had to use javascript in order to add to nodes to achieve this (since im using asp and not .net)

I created a script that works perfectly in IE8, FF, and Chrome. It even works in IE 7, but, this is where the problem comes, in the UL and LI elements are not styled in IE 7. However if i alert the class attribute of my main UL element it is correctly assigned, which is supposed to "main". Below is my javascript and html. Did i miss anything or is there no way to style an appended element? Any help would be great, Thanks.

here is a link to the page
http://new.jewels2000.com/jewelsadmin/templates/template_2_0.asp



<style>
ul.menu {list-style:none; margin:0; padding:0; height:50px; }
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#1c314e; text-decoration:none; height:34px;}
ul.menu li {position:relative; float:left;}
ul.menu ul {position:absolute;top:32px; left:10px; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; min-width:148px; width:100%; background-image:url(/jewelsadmin/adminImages/dropmenubg.png); background-repeat:repeat-x; top:1px; }
ul.menu ul li a {display:block; padding-left:10px; padding-right:15px; text-indent:0px; height:30px;}
ul.menu ul li a:hover {color:#FFF;}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {width:134px}
ul.menu .sub {background:url(images/arrow.gif) 95% 8px no-repeat}

</style>
<!-- Holder for Navigation Links, will be generated by javascript -->
<!-- End Holder for Navigation Links, will be generated by javascript -->
<div id="navLinks">
</div>
<script language="javascript" type="text/javascript">

function initDropdown(aryNav, divID) {
var aryTemp = new Array();
var tempString = new String;
var menuDiv, menuUl;
var ii, numChildren = 0;
var newUl, newLi, aElement;

if (document.getElementById(divID) != null){ //Have to check if the divID holder exists
//stores menu div element
menuDiv = document.getElementById(divID);
//creates the main UI element
menuUl = document.createElement("UL");

//assigns class and id to main UI element
menuUl.setAttribute("class","menu");
menuUl.setAttribute("id","menu");

//add main UI element to passed divID element
menuDiv.appendChild(menuUl);

//Loop through each element of the passed array object
for (ii = 0; ii < aryNav.length; ii++) {
newLi = document.createElement("LI"); //every link is put into a li element so we must creat a new li element each loop
aElement = document.createElement("A"); //every link is put into an anchor element so we must creat a new anchor element each loop
tempString = aryNav[ii]; //put navigation string into a strip objec to be split into an array
aryTemp = tempString.split(";"); //split navigation string into an array because they are easier to work with

// 0 = main navigation and is treated differently
if (aryTemp[3] == 0) {
newLi.setAttribute("id", "li" + aryTemp[0]); //assigns and id to the li element to be accessed by children elements

menuUl.appendChild(newLi); //adds li element to main UI element

aElement.setAttribute("class", "menulink"); //since we are dealing with parent elements we must assign the menulink class to the ancher element
aElement.setAttribute("href", aryTemp[2]); //assign the link given
aElement.setAttribute("id", "a" + aryTemp[0]); //assigns an id to the element to be accessed by children elements

newLi.appendChild(aElement); //adds anchor element to li element
document.getElementById("a" + aryTemp[0]).innerHTML = aryTemp[1]; //since anchor tags act like spans we much change the inner html of the tag to the navigation name
}
else {//handles children navigation links
numChildren = document.getElementById("li" + aryTemp[3]).childNodes.length; //stores the number of child elements in the parent li tag; will always be at least 1
if (numChildren == 1) { //if the only element in the parent li is an anchor tag we need to add the child ui element before adding the child li element
newUl = document.createElement("UL"); //creates ui holder for children li
newUl.setAttribute("id", "ul" + aryTemp[3]); //assigns an id to the element to be accessed by children elements
document.getElementById("li" + aryTemp[3]).appendChild(newUl); //access parent li to add ui holder to

//if the class is null, meaning to a main navigation then we have to add sub class to get the arrow
if (document.getElementById("a" + aryTemp[3]).getAttribute("class") == null)
document.getElementById("a" + aryTemp[3]).setAttribute("class", "sub");
}
newLi.setAttribute("id", "li" + aryTemp[0]); //assigns an id to the element to be accessed by children elements

document.getElementById("ul" + aryTemp[3]).appendChild(newLi); //adds the child li to parent ui holder

aElement.setAttribute("href", aryTemp[2]); //assign the link given
aElement.setAttribute("id", "a" + aryTemp[0]); //assigns an id to the element to be accessed by children elements

document.getElementById("li" + aryTemp[0]).appendChild(aElement); //adds anchor element to li element
document.getElementById("a" + aryTemp[0]).innerHTML = aryTemp[1]; //since anchor tags act like spans we much change the inner html of the tag to the navigation name
}
}
}
else
document.write("The element " + divID + " does not exist yet."); //Tells the developer why the navigation didn't initialize
}



// create javascript array
var aryNav = new Array();
aryNav[0] = "1;Settings;link1;0" //"Nav ID; Nav Name; Nav Link; Parent ID"
aryNav[1] = "2;Login;link2;0"
aryNav[2] = "3;Configuration;link3;1"
aryNav[3] = "4;Settings;link4;1"

//calls function to create javascript dropdown based on aryNav
//must call function after array is created to prevent navigation lag and screen flicker
//pass the array object, and div id you wish to initialize under
initDropdown(aryNav, "navLinks");




</script>

molendijk
06-29-2010, 05:16 PM
Replace all occurrences of bla.setAttribute("class","some_class") with: bla.class='some_class'. That may help.
===
Arie Molendijk.

gerudo
06-29-2010, 05:58 PM
that was it for some reason ie7 doesnt understand the setAttribute method. However it is className, not just class. Thanks for the help

molendijk
06-29-2010, 10:13 PM
... it is className, not just class. Thanks for the help
Of course, you're right. Glad it works now.
===
Arie.

jscheuer1
06-30-2010, 01:26 PM
In IE it's className even if you use the setAttribute() method. But that won't have the desired result in other browsers. So it's best (as already pointed out) to use:


something.className = 'whatever';

Virtually all browsers understand that.