This JavaScript doesn't work on Mozilla.

JdS · #1 22-Feb-2003, 04:33

I am trying to hide / show 2 different versions of each row using this JavaScript code (by the user clicking on the + or - signs that appear on the page). The thing is, it works fine on Internet Explorer but nothing happens with Mozilla.

I would appreciate it if someone would try out this page and tell me where I went wrong...

HTML Code:


<html>
<head>
<title>Testing JavaScript Hiding code</title>
<script type="text/javascript">
<!--
function show( divid )
{
  divid.style.display = 'block';
  divid.style.margin = '5px 0px';
}

function hide( divid )
{
  divid.style.display = 'none';
  divid.style.margin = '0px';
}
//-->
</script>
<style type="text/css">
<!--
table { font:11px verdana,arial,helvetica,sans-serif }
tr { background-color:#CCC }
div.divHidden { display:none; margin:0px }
div { margin:0px }
-->
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr> 
  <td>
    <div id="r1l">
      <p>[<span onclick="show(r1m);hide(r1l);">+</span>]&nbsp;Abbreviated Title : Row 1.</p>
    </div>
    <div id="r1m" class="divHidden">
      <p>[<span onclick="show(r1l);hide(r1m);">-</span>]&nbsp;Long title: Row 1.</p>
      <p>This is some long winded description in Row 1.</p>
    </div>
  </td>
</tr>
<tr> 
  <td>
    <div id="r2l">
      <p>[<span onclick="show(r2m);hide(r2l);">+</span>]&nbsp;Abbreviated Title : Row 2.</p>
    </div>
    <div id="r2m" class="divHidden">
      <p>[<span onclick="show(r2l);hide(r2m);">-</span>]&nbsp;Long title: Row 2</p>
      <p>This is some long winded description in Row 2.</p>
    </div>
  </td>
</tr>
<tr> 
  <td>
    <div id="r3l">
      <p>[<span onclick="show(r3m);hide(r3l);">+</span>]&nbsp;Abbreviated Title : Row 3.</p>
    </div>
    <div id="r3m" class="divHidden">
      <p>[<span onclick="show(r3l);hide(r3m);">-</span>]&nbsp;Long title: Row 3.</p>
      <p>This is some long winded description in Row 3.</p>
    </div>
  </td>
</tr>
</table>
</body>
</html>

Garth Farley · #2 22-Feb-2003, 09:05

According www.dansteinman.com, Mozilla uses a different DOM to IE.

I've tried to edit your code, but nothing is working for me. But if you follow his tutorial, things might be better for you

GF

JdS · #3 22-Feb-2003, 09:44

Well... that was quite an old page / tutorial and...
http://www.dansteinman.com/dynduo/en...ingstyles.html , not one sample link on that page worked with Mozilla.

Now I remember why I never got around to learning JavaScript...

Garth Farley · #4 22-Feb-2003, 10:49

Oh you're not serious

Yet another browser with it's own DOM? Will it ever end? Surely it's the same as Netscape's? Grrr, I'll have a try at it later tonight, and see if I get anywhere.

GF

JdS · #5 22-Feb-2003, 11:19

I STILL cannot believe this but I think I got it!

Here's where I went wrong - I had to use

Code:

document.getElementById(id).style.display = 'block';

instead of

Code:

document.all[id].style.display = 'block';

or (as I had initially tried in the html code above)

Code:

divid.style.display = 'block';

Now it works both with MSIE and Mozilla... tomorrow, a quick check with Opera. Before that, some well deserved sleep.

JdS · #6 22-Feb-2003, 22:17

I have updated the code with all the corrections that make it now work both with Mozilla and Microsoft's Internet Explorer (and I suspect, the latest version of Netscape too).

Unfortunately, it doesn't work at all with Opera 6.0. I hope it does on the latest, version 7. If anyone can confirm this, I would appreciate it.

Corrected Code:

HTML Code:


<html>
<head>
<title>Testing JavaScript Hiding code</title>
<script type="text/javascript">
<!--
  function show( id )
  {
    document.getElementById(id).style.display = 'block';
  }

  function hide( id )
  {
    document.getElementById(id).style.display = 'none';
  }
//-->
</script>
<style type="text/css">
<!--
table { font:12px verdana,arial,helvetica,sans-serif }
tr { background-color:#FFC }
td { padding:3px 5px }
div.divHidden { display:none }
span { cursor:pointer }
-->
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr> 
  <td>
    <div id="r1l">
      <p>[<span onclick="show('r1m');hide('r1l');">+</span>]&nbsp;Short Title : Row 1.</p>
    </div>
    <div id="r1m" class="divHidden">
      <p>[<span onclick="show('r1l');hide('r1m');">-</span>]&nbsp;Long title: Row 1.</p>
      <p>This is some long winded description in Row 1.</p>
    </div>
  </td>
</tr>
<tr> 
  <td>
    <div id="r2l">
      <p>[<span onclick="show('r2m');hide('r2l');">+</span>]&nbsp;Short Title : Row 2.</p>
    </div>
    <div id="r2m" class="divHidden">
      <p>[<span onclick="show('r2l');hide('r2m');">-</span>]&nbsp;Long title: Row 2</p>
      <p>This is some long winded description in Row 2.</p>
    </div>
  </td>
</tr>
<tr> 
  <td>
    <div id="r3l">
      <p>[<span onclick="show('r3m');hide('r3l');">+</span>]&nbsp;Short Title : Row 3.</p>
    </div>
    <div id="r3m" class="divHidden">
      <p>[<span onclick="show('r3l');hide('r3m');">-</span>]&nbsp;Long title: Row 3.</p>
      <p>This is some long winded description in Row 3.</p>
    </div>
  </td>
</tr>
</table>
</body>
</html>

conkermaniac · #7 24-Feb-2003, 07:41

Hi JdS,

I have absolutely no clue where you went wrong (as I have never worked with JavaScript), but I usually don't care about compatibility. I only test my pages in IE to make sure they work fine, and I make sure that the site looks fine on 800x600 and 1024x768 (the two resolutions that I generally use). I do have Mozilla, Netscape, Opera, Mosaic, K-Meleon, Hotjava, and Beonex at my dispensal.

Anyway, back to the topic. It doesn't make too much of a difference to me if 8% of people can't view my site properly. In fact, the only client-side scripting language that I use is VBScript, which only works in IE (and Netscape if you have the plugin installed).

Garth Farley · #8 24-Feb-2003, 11:49

Nope, Opera 6 doesn't like it, but it's DOM is pretty crappy anyway.

But are you aware that it only supports common DHTML if you've it set up to identify itself as IE5? Otherwise most DOM objects don't exist.

GF

jrobbio · #9 02-Jul-2003, 14:08

The second one works absolutely fine in firebird, which uses Mozilla 1.4.

Did anyone test it in Opera 7?

Rob

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
We're looking for JavaScript codes / mini tutorials.	JdS	Web Design Forum	7	31-Mar-2008 23:25
JavaScript Tutorial Part 1	pcxgamer	Web Design Forum	2	01-Dec-2003 09:16
Why doesnt my form work correctly?	rhino1616	Web Design Forum	2	06-Nov-2003 17:21
How do web redirection scripts work?	rhino1616	Web Design Forum	9	27-Oct-2003 09:47
Mozilla TARGET question	nickbeee	Web Design Forum	2	03-Aug-2002 03:57

This JavaScript doesn't work on Mozilla.

JavaScript's "document.getElementById(id).style.display"