469,323 Members | 1,483 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,323 developers. It's quick & easy.

IE getElementById problem ? getElementsByTagName problem ?

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:

Expand|Select|Wrap|Line Numbers
  1. function showdiv(div, link) {
  2. divs = document.getElementById('features').getElementsByTagName('div');
  3. links = document.getElementById('links').getElementsByTagName('a');
  4.     for (i = 0; i < divs.length; i++) {
  5.         divs[i].style.display = "none";
  6.         links[i].style.background = "#FFFFFF";
  7.     }
  8.     document.getElementById(div).style.display = "block";
  9.     link.style.background = "#99FFCC";
  10. }
  11.  
and here is the HTML (simplified to make it more readable):

[HTML]<div id="blockoffeatures">
<p id="links">
<a href="javascript:void(0)" onclick="showdiv('LatestPhoto', this)" style="background:#99FFCC">Latest Photo</a>
<a href="javascript:void(0)" onclick="showdiv('LatestObs', this)" style="background:#FFFFFF">Latest Obs.</a>
<a href="javascript:void(0)" onclick="showdiv('LatestUpdates', this)" style="background:#FFFFFF">Latest 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="&copy; 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="LatestUpdates" 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 &quot;other&quot; 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 getElementsByTagName 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
Feb 24 '08 #1
3 3435
acoder
16,027 Expert Mod 8TB
Seems to work on IE7 unless I've missed something.
Feb 25 '08 #2
It shouldn't do... strange, maybe IE doesn't like variable names to be the same as the id names of tags
Feb 26 '08 #3
acoder
16,027 Expert Mod 8TB
When you say it doesn't work, what happens? Is there an error message?
Feb 26 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

24 posts views Thread by Robi | last post: by
4 posts views Thread by the other john | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by Gurmeet2796 | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.