hi
I am totally confused with a piece of DOM script I have written.. I am very new to this so this might be something which is simple... my script works fine in IE, but does not in Firefox and Opera (mine at least, not tested in others)
It should just basicly show a different set of 3 pictures directly underneath when the main link in the first <ul><li> for each category is given focus. it should show them directly underneath..
in firefox and opera the images load up when the page is loaded, but after a link is clicked / given focus the images dissappear. rather than just swapping for the chosen categories images.. I can only assume that they are remaining in the left:-1500px position and not being reset when the link gets focus.
I hope I am making sense.. I will show all code to maybe make it more clear.
Thanks in advance for any help you can give.
iain
code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
BODY {
font-size:15px;
background-color:#FFF;
}
#newvideo li img { border:0px; padding:0px; margin:0px; }
#newvideo ul.tabscontainer span.categorytab { display:block; padding-left:10px;}
#newvideo {
position:relative;
width:500px;
height:200px;
min-height:200px !important;
margin:0px auto;
margin-top:50px;
padding:0px;
border:1px dashed #999;
}
#newvideo ul.tabscontainer {
float:left;
width:100%;
padding:5px 0px 5px 0px;
margin:0px;
border-bottom:1px dashed #999;
}
#newvideo ul.tabscontainer li {
float:left;
margin:0px 20px 0px 0px;
list-style:none none;
background-color:#E5E5E5;
}
#newvideo ul.tabscontainer li a {
padding:5px 5px;
color:#666;
text-decoration:none;
}
#newvideo ul.tabscontainer li ul {
position:absolute;
top:55px;
left:-1500px;
z-index:100;
width:450px;
padding:10px 5px 10px 15px;
margin:0px;
border:1px dashed #999;
}
#newvideo ul.tabscontainer li ul li {
float:left;
padding:5px 5px;
margin:0px 20px 0px 0px;
background-color: #DADADA;
}
#newvideo ul.tabscontainer li ul li a {
padding:0px; margin:0px;
}
/* ----------- Visible UL Layer Properties ------------- */
#newvideo ul.tabscontainer li ul.initialvisible {
position:absolute;
top:55px;
left:15px;
}
</style>
<script type="text/javascript">
function passFocus(obj) {
var displayID = obj.id;
var firstLink = displayID + "link1";
var displayUL = displayID + "UL";
var ulList = document.getElementById('tabsUL').getElementsByTagName("ul");
for (var i=0;i<ulList.length;i++)
{
ulList[i].style.left="-1500px"
}
document.getElementById(displayUL).style.left="15px";
document.getElementById(firstLink).focus();
}
</script>
</head>
<body>
<img style="position:absolute; top:-100px; left:-1500px; z-index:-100;" src="images/image.gif" height="85" width="75" alt="dffgfdg" />
<div id="newvideo">
<ul id="tabsUL" class="tabscontainer">
<span class="categorytab">
<li><a id="newcomedy" onfocus="passFocus(this)" href="#">Comedy</a>
<ul id="newcomedyul" class="initialvisible">
<li id="newcomedylist1"><a id="newcomedylink1" href="blah.php"><img src="images/img.gif" alt="" /></a></li>
<li id="newcomedylist2"><a id="newcomedylink2" href="blah.php"><img src="images/img.gif" alt="" /></a></li>
<li id="newcomedylist3"><a id="newcomedylink3" href="blah.php"><img src="images/img.gif" alt="" /></a></li>
</ul>
</li>
</span>
<span class="categorytab">
<li><a id="newsport" onfocus="passFocus(this)" href="#">Sport</a>
<ul id="newsportul" class="initialhidden">
<li id="newsportlist1"><a id="newsportlink1" href="blah.php"><img src="images/image.gif" alt="" /></a></li>
<li id="newsportlist2"><a id="newsportlink2" href="blah.php"><img src="images/image.gif" alt="" /></a></li>
<li id="newsportlist3"><a id="newsportlink3" href="bla.php"><img src="images/image.gif" alt="" /></a></li>
</ul>
</li>
</span>
<span class="categorytab">
<li><a id="newpolitics" onfocus="passFocus(this)" href="#">Politics</a>
<ul id="newpoliticsul" class="initialhidden">
<li id="newpoliticslist1"><a id="newpoliticslink1" href="blah.php">img src="images/img3.gif" alt="" /></a></li>
<li id="newpoliticslist2"><a id="newpoliticslink2" href="blah.php"><img src="images/img3.gif" alt="" /></a></li>
<li id="newpoliticslist3"><a id="newpoliticslink3" href="blah.php"><img src="images/img3.gif" alt="" /></a></li>
</ul>
</li>
</span>
</ul>
</div>
</body>
</html>
