[SOLVED] script modifying help please

[knowram]

I am vary new to Javascript and I don't really understand how it works. I found some code at http://c82.net/article.php?ID=25 to make a checkbox list but i found out that it didn't work in Safari. So I combined that idea with code from http://mkaz.com/ref/js/checkbox.html to make something that would. the HTML and CSS that I ended up with look like this

 

    <style>
.checklist {
    border: 1px solid #ccc;
    list-style: none;
    height: 15em;
    overflow: auto;
    width: 20em;
   background: #cacaca;
}

.checklist, .checklist li {
margin: 0; 
padding: 0; 
cursor: pointer;
border-bottom: 1px solid white;
}

.checklist span {
display: block;    

}

span:hover { background: #777; color: #fff; }

* html .checklist label { height: 1%; }
</style>
<form name="test" action="test1.php" method="post">
<ul class="checklist">
        <li style="background: #777;" ><span class=label OnClick="submit()" onClick="cbsel(item101)"><input id="item101" type="checkbox" name="sdfgsdfg" value="sdfgsdfg">Item 1 - test 1 Item 1 - test 1 Item 1 - test 1 Item 1 - test 1 Item 1 - test 1 Item 1 - test 1</span></li>
        <li class="list"><span class=label onClick="myFunc(item202)"><input id=item202 type="checkbox" name="cb2" value="item2">Item 2 - test 2</span></li>
        <li class="list"><span class=label onClick="myFunc(item303)"><input id=item303 type="checkbox" name="cb3" value="item3">Item 3 - test 3</span></li>
    </ul>
  </form>

 

For the most part I was able to make everything work great. Everything but the hover effect in IE, the first site I mention uses a javascript to salve that problem. Here it is

function initChecklist() {
    if (document.all && document.getElementById) {
        // Get all unordered lists
   var lists = document.getElementsByTagName("ul");
        
        for (i = 0; i < lists.length; i++) {
            var theList = lists[i];
            
	  // Only work with those having the class "checklist"
            if (theList.className.indexOf("checklist") > -1) {
                var labels = theList.getElementsByTagName("label");
                
		 // Assign event handlers to labels within
                for (var j = 0; j < labels.length; j++) {
                    var theLabel = labels[j];
                    theLabel.onmouseover = function() { this.className += " hover"; };
                    theLabel.onmouseout = function() { this.className = this.className.replace(" hover", ""); };
                }
            }
        }
    }
}

 

I am hoping someone would be willing to help me modify that script to work with my new checklist.

 

Thanks for any help

[fenway]

What doesn't work? You can't change the classes?

[knowram]

The hover effect doesn't work and I don't know why sense I don't understand the javascript

[fenway]

Nothing ever works in Safari... try putting the hover class in the HTML code directly.

[knowram]

my problem isn't in safari it is in IE and i have the javascript directly in the page

[knowram]

maybe this will help here is a link to my testing page. It works great in Safari and Firefox but like I said I can't get the hover effect to work in IE

 

http://testing.envisionhealth.org/test1.php

[knowram]

salved fond an easy way to do it with onmouseover() and onmouseout()

[fenway]

Care to elaborate?