Can anyone please help with DOM script - Printable Version
-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: Can anyone please help with DOM script (/showthread.php?tid=78792)
Can anyone please help with DOM script by iainb on 11-06-2007 at 04:24 AM
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>
RE: Can anyone please help with DOM script by WDZ on 11-06-2007 at 04:42 AM
getElementById is case-sensitive in browsers other than IE, so that might be your problem...
code:
var displayUL = displayID + "UL";
...
<ul id="newcomedyul"
RE: Can anyone please help with DOM script by iainb on 11-06-2007 at 04:51 AM
hi WDZ,
Thanks for the speedy reply, that sorted it out perfectly.
you are a legend : )
RE: Can anyone please help with DOM script by -dt- on 11-06-2007 at 04:52 AM
why dont you just set the element you want hidden to
code:
display: none;
and when you want it to show do
code:
document.getElementById('xxx').style.display = "block";
RE: Can anyone please help with DOM script by iainb on 11-06-2007 at 01:05 PM
hi dt.
I originally used left:-1500px instead of "display:none" because I wanted it to remain in the tab order and then just appear when it gained focus. In a hope to keep it more accessible. But as that it now recieves focus from its parent link that is not an issue and have now reverted back to the display:none method
thanks