I have made up a code allowing users to click on a tab and show content in a neat white box, similar to what yahoo have on their homepage.
I have used 5 divs, all but one set to display:none and the other (the one seen at the start is set to display:block and the script makes the desired div become display:block and makes the div previously display:block to be display:none here is my js code:
and here is the HTML (simplified to make it more readable):
[HTML]<div id="blockoffeat ures">
<p id="links">
<a href="javascrip t:void(0)" onclick="showdi v('LatestPhoto' , this)" style="backgrou nd:#99FFCC">Lat est Photo</a>
<a href="javascrip t:void(0)" onclick="showdi v('LatestObs', this)" style="backgrou nd:#FFFFFF">Lat est Obs.</a>
<a href="javascrip t:void(0)" onclick="showdi v('LatestUpdate s', this)" style="backgrou nd:#FFFFFF">Lat est Updates</a>
</p>
<div id="features">
<div id="LatestPhoto " style="display: block;">
<h4>Latest Photo</h4>
<img src="Resources-folder/snakes/IMG_8615.jpg" alt="© djp1988" width="400" height="240" border="1" />
</div>
<div id="LatestObs" style="display: none;">
<h4>Latest Observations</h4>
<p>22nd Feb. : Malpolon monspessulanus, Psammodromus algirus, Pelophylax perezi</p>
</div>
<div id="LatestUpdat es" style="display: none;">
<h4>Latest Web Site Updates</h4>
<p >23rd Feb. : New homepage design, I have put the search bar in the menu for handy access, I have put the Sources, Site Info., Books and Links into a drop down menu over the "other&quo t; link and grouped all the usually features in this wonderful JavaScript powered area.
</div>
</div>
[/HTML]
It works in FF, Safari (mac), Opera (mac) but not on IE any version. I think there is a problem IE have with the getElementById, but how to fix it and is there also a problem with the getElementsByTa gName in IE ?
The finished product (with a hack i am testing - but i can't test because i am on a mac and have no IE) is found here: www.herpfrance.com
I have used 5 divs, all but one set to display:none and the other (the one seen at the start is set to display:block and the script makes the desired div become display:block and makes the div previously display:block to be display:none here is my js code:
Code:
function showdiv(div, link) {
divs = document.getElementById('features').getElementsByTagName('div');
links = document.getElementById('links').getElementsByTagName('a');
for (i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
links[i].style.background = "#FFFFFF";
}
document.getElementById(div).style.display = "block";
link.style.background = "#99FFCC";
}
[HTML]<div id="blockoffeat ures">
<p id="links">
<a href="javascrip t:void(0)" onclick="showdi v('LatestPhoto' , this)" style="backgrou nd:#99FFCC">Lat est Photo</a>
<a href="javascrip t:void(0)" onclick="showdi v('LatestObs', this)" style="backgrou nd:#FFFFFF">Lat est Obs.</a>
<a href="javascrip t:void(0)" onclick="showdi v('LatestUpdate s', this)" style="backgrou nd:#FFFFFF">Lat est Updates</a>
</p>
<div id="features">
<div id="LatestPhoto " style="display: block;">
<h4>Latest Photo</h4>
<img src="Resources-folder/snakes/IMG_8615.jpg" alt="© djp1988" width="400" height="240" border="1" />
</div>
<div id="LatestObs" style="display: none;">
<h4>Latest Observations</h4>
<p>22nd Feb. : Malpolon monspessulanus, Psammodromus algirus, Pelophylax perezi</p>
</div>
<div id="LatestUpdat es" style="display: none;">
<h4>Latest Web Site Updates</h4>
<p >23rd Feb. : New homepage design, I have put the search bar in the menu for handy access, I have put the Sources, Site Info., Books and Links into a drop down menu over the "other&quo t; link and grouped all the usually features in this wonderful JavaScript powered area.
</div>
</div>
[/HTML]
It works in FF, Safari (mac), Opera (mac) but not on IE any version. I think there is a problem IE have with the getElementById, but how to fix it and is there also a problem with the getElementsByTa gName in IE ?
The finished product (with a hack i am testing - but i can't test because i am on a mac and have no IE) is found here: www.herpfrance.com
Comment