[sman]

Hello,

I wrote a nice Script to toggle all <span>-Tags within a <code id="x"> environment on and off.
It only works for the Standard DOM Browsers Mozilla Firefox and Opera, but results completlete malfunction with Internet Explorer 6 (and above I guess) .

I need help to rewrite this code for IE compatibility:

Code:

function toggle( idname )
{
  var tag = document.getElementById( idname ); 
  var spans = tag.getElementsByTagName("span"); 

  for (var i = 0; i < spans.length; i++) {
    spans[i].style.display = ( spans[i].style.display=='block' ) ? 'none' : 'block'; }
}

...

<a href="javascript:toggle('x')">toggle</a>
<code id="x"><span>test</span</code>

Thank you in advance!

[wirehopper]

First try it on IE7.

Then decide if you want to support IE6.

Don't spend a lot of time worrying about IE6, many people are upgrading.

You can add a warning to the pages that IE6 doesn't work.

The span tag isn't closed (missing a >)

<code id="x"><span>test</span</code>

[sman]

Hi, thank you for reply.

i don't have IE 7 to test it at the moment, IE 7 and later versions don't run on my system. But i will try to find someone having IE installed....maybe.

Do you think this code would work on the newer IEs? Are they compatible now to DOM standards?

The Spantag is only a typing error in the post, but thank you

[job0107]

I have IE8 and FireFox 3.0.10 and your code works in both browsers, except FireFox ignores the style in the <code> tags.
The only thing I don't understand is why you are assigning a display type of block to an inline element.

When I run your code, the text "test" is displayed to the right of the toggle link.
When I first click on the toggle link, the text moves below the link.
Then each subsequent click turns the text on and off.

I modified your test code to work with the inline elements (<span>).
So when you click on the toggle link, the text toggles on and off right away.

Code:

<script>
function toggle( idname )
{
  var tag = document.getElementById( idname );
  var spans = tag.getElementsByTagName("span");

  for (var i = 0; i < spans.length; i++) {
    spans[i].style.display = ( spans[i].style.display=='none' ) ? 'inline' : 'none'; }
}
</script>

<div id="x">
<table>
 <tr>
  <td><a href="javascript:toggle('x')">toggle</a></td><td width="40px"><span><code>test1</code></span></td><td width="25px"><code> --- </code></td><td width="40px"><span><code>test2</code></span></td>
 </tr>
</table>
</div>

By using a <div> element instead of the <code> element, I was able to get the code to work properly in both browsers.
Though the <code> element is supported in all major browsers, it is not supported very well.

[sman]

I have IE8 and FireFox 3.0.10 and your code works in both browsers

Thank you !

except FireFox ignores the style in the <code> tags

That's interesting, I also have Firefox 3.0.1 and everything works how it should... I think I do not mind it for now and hope it is going on working in future... Is there any deeper difference why <code> and <div> are differently treated in browsers? I mean using <div class=code> instead is no problem, but is there really a sense behind it? Why is <code> not supportet very well?

The only thing I don't understand is why you are assigning a display type of block to an inline element.

To explain myself, I have some <code> environments to show program code on my website, behind each line there are comments, that should not be visible at startup. The user now is able to switch the comments of every code-environment separatly on and off, making them visible in a new line, such that

Code:

var i = 0;
i+=3;

goes to

Code:

var i = 0;
// define variable here
i+=3;
// add 3 to it

This works very well at the moment, except IE 6 (I hope so, IE7 and 8 is enough).

[job0107]

Try this code in FireFox.
You will find that the <span> elements can't be found by the Javascript code.
But it will work in IE.

Code:

<script>
function toggle( idname )
{
  var tag = document.getElementById( idname );
  var spans = tag.getElementsByTagName("span");

  for (var i = 0; i < spans.length; i++) {
    spans[i].style.display = spans[i].style.display=='none' ? 'inline' : 'none'; }
}
</script>

<code id="x">
<table>
 <tr>
  <td><a href="javascript:toggle('x')">toggle</a></td><td width="40px"><span><code>test1</code></span></td><td width="25px"><code> --- </code></td><td width="40px"><span><code>test2</code></span></td>
 </tr>
</table>
</code>

But when I use a <div> element the <span> elements are found easily by both browsers.

Code:

<script>
function toggle( idname )
{
  var tag = document.getElementById( idname );
  var spans = tag.getElementsByTagName("span");

  for (var i = 0; i < spans.length; i++) {
    spans[i].style.display = spans[i].style.display=='none' ? 'inline' : 'none'; }
}
</script>

<div id="x">
<table>
 <tr>
  <td><a href="javascript:toggle('x')">toggle</a></td><td width="40px"><span><code>test1</code></span></td><td width="25px"><code> --- </code></td><td width="40px"><span><code>test2</code></span></td>
 </tr>
</table>
</div>

And no, I don't know why the <code> element acts that way. I just know it does.
I would assume it has something to do with the Javascript interpreter that is being used for each browser.
Not all Javascript interpreters are the same from browser to browser.

It could also be that the <code> element is a lower order element like the <b>, <i> and <u> elements.
While the <div> element is a higher order element.

I guess it's kinda like putting a <div> element inside a <span> element.
Though it will probably work in some browsers, it is pragmatically incorrect.