?
Solved

getElementById  function Probelm

Posted on 2003-03-25
19
Medium Priority
?
205 Views
Last Modified: 2009-07-29
I have code problem

when you click any topic from this code it show all the topic

It should show
Topic 1 for Topic 1
Topic 2 for topic 2
and so on

so if user click twice on Topic 1 is should popup only Topic 1
NOT 2,3,4,5

Here is the code

Do not give me new code because this works on NE 4 and NE 6 and IE so i don't want new code
Thanks

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#CCCCCC" text="#000000">
<td bgcolor=#003366 valign=bottom width=589>
<table border=1 cellspacing=1 cellpadding=5 width="497">
<tr> <td><a style="cursor:hand" onClick="altercontent(1)" href="#no"> Topic 1</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(5)" href="#no">Topic 5</a></td></tr>
</table>
<div id="dcontent" style="width:589px;height:28px"></div>
<ilayer id="ns4dcontent" width=589px height=28px left="-1">
<layer id="ns4dcontent2" width=589px height=28px></layer></ilayer>
<script>
//the html contents to display
var mycontent=new Array()
mycontent[0]='Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>'
mycontent[1]='Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>'
mycontent[2]='Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>'
mycontent[3]='Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>'
mycontent[4]='Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>'
var i=0

function altercontent(){
//if IE 4+
if (document.all)
dcontent.innerHTML=mycontent[i];
//else if NS 4
else if (document.layers){
document.ns4dcontent.document.ns4dcontent2.
document.write(mycontent[i]);
document.ns4dcontent.document.ns4dcontent2.
document.close();
}
//else if NS 6 (supports new DOM)
else if (document.getElementById){
rng = document.createRange();
el = document.getElementById("dcontent");
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(mycontent[i]);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
}

if (i==mycontent.length-1)
i=0
else
i++
}

function beginrotation(){
if (document.all||document.layers||document.getElementById)
setInterval("altercontent()")
}
window.onload=beginrotation


</script>
<p>&nbsp;</p></td>
</body>
</html>

0
Comment
Question by:Sanjiv Rajiv
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 5
19 Comments
 
LVL 1

Expert Comment

by:niteshn
ID: 8204433
Try this... this is your code with some slight changes...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#CCCCCC" text="#000000">
<td bgcolor=#003366 valign=bottom width=589>
<table border=1 cellspacing=1 cellpadding=5 width="497">
<tr> <td><a style="cursor:hand" onClick="altercontent(1)" href="#no"> Topic 1</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(5)" href="#no">Topic 5</a></td></tr>
</table>
<div id="dcontent" style="width:589px;height:28px"></div>
<ilayer id="ns4dcontent" width=589px height=28px left="-1">
<layer id="ns4dcontent2" width=589px height=28px></layer></ilayer>
<script>
//the html contents to display
var mycontent=new Array()
mycontent[1]='Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>'
mycontent[2]='Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>'
mycontent[3]='Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>'
mycontent[4]='Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>'
mycontent[5]='Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>'

function altercontent(i){
//if IE 4+
if (document.all)
dcontent.innerHTML=mycontent[i];
//else if NS 4
else if (document.layers){
document.ns4dcontent.document.ns4dcontent2.
document.write(mycontent[i]);
document.ns4dcontent.document.ns4dcontent2.
document.close();
}
//else if NS 6 (supports new DOM)
else if (document.getElementById){
rng = document.createRange();
el = document.getElementById("dcontent");
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(mycontent[i]);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
}


}

function beginrotation(){
if (document.all||document.layers||document.getElementById)
setInterval("altercontent(1)")
}
window.onload=beginrotation


</script>
<p>&nbsp;</p></td>
</body>
</html>
0
 

Author Comment

by:Sanjiv Rajiv
ID: 8205246
niteshn,

This is good but
I need to have expanding on NE 4 and NE 6

If you copy this code and look in IE you will see that it's expanding in IE that (yellow tabel)

but In NE 4 and NE 6 it's not expanding
help me please
here is the code

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#CCCCCC" text="#000000">
<td bgcolor=#003366 valign=bottom width=589>
<table border=1 cellspacing=1 cellpadding=5 width="497">
<tr> <td><a style="cursor:hand" onClick="altercontent(1)" href="#no"> Topic 1</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(5)" href="#no">Topic 5</a></td></tr>
</table>
<div id="dcontent" style="width:589px;height:28px"></div>
<ilayer id="ns4dcontent" width=589px height=28px>
<layer id="ns4dcontent2" width=589px height=28px></layer></ilayer>
<script>
//the html contents to display
var mycontent=new Array()
mycontent[1]='Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>'
mycontent[2]='Topic 2<br>2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>'
mycontent[3]='Topic 3<br>Topic 3Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>'
mycontent[4]='Topic 4<br>ic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>'
mycontent[5]='Topic 5<br>Topic 5<br>T5<br>Topic 5<br>Topic 5<br>Topic 5<br>5<br>'

function altercontent(i){
//if IE 4+
if (document.all)
dcontent.innerHTML=mycontent[i];
//else if NS 4
else if (document.layers){
document.ns4dcontent.document.ns4dcontent2.
document.write(mycontent[i]);
document.ns4dcontent.document.ns4dcontent2.
document.close();
}
//else if NS 6 (supports new DOM)
else if (document.getElementById){
rng = document.createRange();
el = document.getElementById("dcontent");
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(mycontent[i]);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
}
}

function beginrotation(){
if (document.all||document.layers||document.getElementById)
setInterval("altercontent(1)")
}
window.onload=beginrotation


</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFF66">
<tr><td>This is Expanding in IE <br> Not expanding on NE 4 and 6 Need to have expanding </td></tr>
</table>
<p>&nbsp;</p></td>
</body>
</html>
0
 
LVL 1

Expert Comment

by:niteshn
ID: 8209025
Try this... Though the ilayer content is still cut off in NS4

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#CCCCCC" text="#000000">
<td bgcolor=#003366 valign=bottom width=589>
<table border=0 cellspacing=1 cellpadding=5 width="497">
<tr><td ><a style="cursor:hand" onClick="altercontent(1)" href="#no"> Topic 1</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(5)" href="#no">Topic 5</a></td></tr>
<tr> <td>
<div id="dcontent" style="width:589px;height:28px"></div>
<ilayer id="ns4dcontent" width=589px height=28px>
<layer id="ns4dcontent2" width=589px height=28px></layer></ilayer>
</td></tr>
<script>
//the html contents to display
var mycontent=new Array()
mycontent[1]='Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>'
mycontent[2]='Topic 2<br>2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>'
mycontent[3]='Topic 3<br>Topic 3Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>'
mycontent[4]='Topic 4<br>ic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>'
mycontent[5]='Topic 5<br>Topic 5<br>T5<br>Topic 5<br>Topic 5<br>Topic 5<br>5<br>'

function altercontent(i){
//if IE 4+
if (document.all)
dcontent.innerHTML=mycontent[i];
//else if NS 4
else if (document.layers){
document.ns4dcontent.document.ns4dcontent2.
document.write(mycontent[i]);
document.ns4dcontent.document.ns4dcontent2.
document.close();
}
//else if NS 6 (supports new DOM)
else if (document.getElementById){
rng = document.createRange();
el = document.getElementById("dcontent");
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(mycontent[i]);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
}
}

function beginrotation(){
if (document.all||document.layers||document.getElementById)
setInterval("altercontent(1)")
}
window.onload=beginrotation


</script>
<tr><td bgcolor="#FFFF66">This is Expanding in IE <br> Not expanding on NE 4 and 6 Need to have expanding </td></tr>
</table>
<p>&nbsp;</p></td>
</body>
</html>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:niteshn
ID: 8209146
Try this... Though the ilayer content is still cut off in NS4

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#CCCCCC" text="#000000">
<td bgcolor=#003366 valign=bottom width=589>
<table border=0 cellspacing=1 cellpadding=5 width="497">
<tr><td ><a style="cursor:hand" onClick="altercontent(1)" href="#no"> Topic 1</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a> &nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:hand" onClick="altercontent(5)" href="#no">Topic 5</a></td></tr>
<tr> <td>
<div id="dcontent" style="width:589px;height:28px"></div>
<ilayer id="ns4dcontent" width=589px height=28px>
<layer id="ns4dcontent2" width=589px height=28px></layer></ilayer>
</td></tr>
<script>
//the html contents to display
var mycontent=new Array()
mycontent[1]='Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>'
mycontent[2]='Topic 2<br>2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>'
mycontent[3]='Topic 3<br>Topic 3Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>'
mycontent[4]='Topic 4<br>ic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>'
mycontent[5]='Topic 5<br>Topic 5<br>T5<br>Topic 5<br>Topic 5<br>Topic 5<br>5<br>'

function altercontent(i){
//if IE 4+
if (document.all)
dcontent.innerHTML=mycontent[i];
//else if NS 4
else if (document.layers){
document.ns4dcontent.document.ns4dcontent2.
document.write(mycontent[i]);
document.ns4dcontent.document.ns4dcontent2.
document.close();
}
//else if NS 6 (supports new DOM)
else if (document.getElementById){
rng = document.createRange();
el = document.getElementById("dcontent");
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(mycontent[i]);
while (el.hasChildNodes())
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
}
}

function beginrotation(){
if (document.all||document.layers||document.getElementById)
setInterval("altercontent(1)")
}
window.onload=beginrotation


</script>
<tr><td bgcolor="#FFFF66">This is Expanding in IE <br> Not expanding on NE 4 and 6 Need to have expanding </td></tr>
</table>
<p>&nbsp;</p></td>
</body>
</html>
0
 

Author Comment

by:Sanjiv Rajiv
ID: 8210818
niteshn ,

Can you hide and not show in NE 4 ?

And that's all you get 250

Please
Thnaks
0
 
LVL 7

Expert Comment

by:a1programmer
ID: 8210961
This should work better for you...
You don't need the extra CSS on the <A ...>
The hand is automatically the cursor links.

And you can make the href a javascript function as shown above... You were passing the value of the topic into the function, but not using the paramater in the function...

adding the href="#no" sometimes caused the text to disappear.

This works good in IE and NS 4.7, didn't test it in NS 6+.



<html>
<body bgcolor="#CCCCCC" text="#000000">
<script language="javascript">
//the html contents to display
var mycontent=new Array();
mycontent[1]='Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>';
mycontent[2]='Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>';
mycontent[3]='Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>';
mycontent[4]='Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>';
mycontent[5]='Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>';

function altercontent(i){
     //if IE 4+
     if (document.all)
               dcontent.innerHTML=mycontent[i];
     //else if NS 4
     else if (document.layers){
               document.ns4dcontent.document.ns4dcontent2.
               document.write(mycontent[i]);
               document.ns4dcontent.document.ns4dcontent2.
               document.close();
     }else if (document.getElementById){     //else if NS 6 (supports new DOM)
          rng = document.createRange();
          el = document.getElementById("dcontent");
          el.innerHtml = 'crap';
          rng.setStartBefore(el);
          htmlFrag = rng.createContextualFragment(mycontent[i]);
          }
     else ;
}
</script>

<table border=1 cellspacing=1 cellpadding=5 width="497">
     <tr><td><a href="javascript:altercontent(1)" > Topic 1</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:altercontent(2)">Topic 2</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:altercontent(3)">Topic 3</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:altercontent(4)">Topic 4</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:altercontent(5)">Topic 5</a></td></tr>
</table>

<div id="dcontent" style="width:589px;height:28px"></div>

<ilayer id="ns4dcontent" width=589px height=28px left="-1">
     <layer id="ns4dcontent2" width=589px height=28px></layer>
</ilayer>

</body>
</html>
0
 
LVL 1

Expert Comment

by:niteshn
ID: 8211022
You don't really need to hide it all in NS4. you can probably set the height of the layer. If you still need to disable the whole page for NS4 you can try

<head>
<script language="javascript">
if(navigator.appName=="Netscape" && document.layers)
{
  alert("This page doesnot work with Netscape 4.X- versions")
  window.location = "alternativepageforns4.html"
}
</script>
</head>
<body>
...

Else if you just need to stop this function in NS4 just remove this portion from your code...
 //else if NS 4
 else if (document.layers){
              document.ns4dcontent.document.ns4dcontent2.
              document.write(mycontent[i]);
              document.ns4dcontent.document.ns4dcontent2.
              document.close();
    }
0
 

Author Comment

by:Sanjiv Rajiv
ID: 8212631
niteshn

When i remove this i get error on IE

Else if you just need to stop this function in NS4 just remove this portion from your code...
//else if NS 4
else if (document.layers){
             document.ns4dcontent.document.ns4dcontent2.
             document.write(mycontent[i]);
             document.ns4dcontent.document.ns4dcontent2.
             document.close();
   }


I want to make it work like what this site has it
http://www.attbi.com

Top News businss and sports in center

If you could make this work in all IE and NE 4+
I can live with different approch as long as it works
If you need more points i can do that to 1000 points or 1500 points  
Thanks
0
 
LVL 7

Expert Comment

by:a1programmer
ID: 8212729
Try  mine.
0
 

Author Comment

by:Sanjiv Rajiv
ID: 8213673
a1programmer,

Problem with NE 6 with your code

I want to make it work like what this site has it
http://www.attbi.com

Top News businss and sports in center

If you could make this work in all IE and NE 4+
I can live with different approch as long as it works
If you need more points i can do that to 1000 points or 1500 points  
Thanks
0
 
LVL 1

Expert Comment

by:niteshn
ID: 8216558
You can see that here the height of the content is consistant. You'll have to specify the height of the layer in that case for NS4. For other browsers it'll work fine. Instead of 28px as specified now you should specify the height so as the content fills in fine.
0
 
LVL 1

Expert Comment

by:niteshn
ID: 8216569
You can see that in case of attbi site the height of the content for each menu item is consistant. You'll have to specify the height of the layer in that case for NS4. For other browsers it'll work fine. Instead of 28px as specified now you should specify the height so as the content fills in fine. ie it should be like

<ilayer id="ns4dcontent" width=589px height=200px left="-1">
    <layer id="ns4dcontent2" width=589px height=200px></layer>
</ilayer>

height needs to be increased accroding to the height of the content text you have.
0
 

Author Comment

by:Sanjiv Rajiv
ID: 8218687
niteshn,
Yes I can have the Ilayer hight 200px
But the probelm i am runnig into is
why this is not expanding in NE 4
if you put tabel after </ilayer>
<table width="100" border="0" cellspacing="0" cellpadding="0" bgcolor="#CCFF66">
<tr><td>&test test test tese </td></tr>

and see in NE 4
0
 
LVL 7

Expert Comment

by:a1programmer
ID: 8218737
Your going to have limitations with making it compatible with all brosers..

NS will not shift some things down when other things expand...  The site you gave us as an example demonstrates this perfectly, but there is no dynamic sizing...

0
 
LVL 1

Expert Comment

by:niteshn
ID: 8218774
The auto expand/collapse that happens in IE ans NS6+ will not happen in NS4. It is the default behaviour in the browser that once a layer height is fixed it doesn't change automatically. So if the content is more than the height it is truncated. That is why i suggested thagt you fix the height of the ilayer so that it contains the max content. height of 15px is sufficient for the eg. here. This would eb something you'll have to live with.

The other option would be to change the height of the layer each time you put the content. For this you'll have you estimate a prospective height for each topic and change it using...
document.ns4dcontent.height = "100px"
document.ns4dcontent.document.ns4dcontent2.height="100px"
etc...
0
 
LVL 7

Accepted Solution

by:
a1programmer earned 1000 total points
ID: 8218797
I think this works in NS 6 now,  But your not going to be able to get it to resize right....

<html>
<body bgcolor="#CCCCCC" text="#000000">
<script language="javascript">
//the html contents to display
var mycontent=new Array();
mycontent[1]='Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>Topic 1<br>';
mycontent[2]='Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>Topic 2<br>';
mycontent[3]='Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>Topic 3<br>';
mycontent[4]='Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>Topic 4<br>';
mycontent[5]='Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>Topic 5<br>';

function altercontent(i){
    //if IE 4+
    if (document.all)
              dcontent.innerHTML=mycontent[i];
    //else if NS 4
    else if (document.layers){
              document.ns4dcontent.document.ns4dcontent2.
              document.write(mycontent[i]);
              document.ns4dcontent.document.ns4dcontent2.
              document.close();
    }else if (document.getElementById){     //else if NS 6 (supports new DOM)
          rng = document.createRange();
          el = document.getElementById("dcontent");
          rng.setStartBefore(el);
          htmlFrag = rng.createContextualFragment(mycontent[i]);
          while (el.hasChildNodes())
          el.removeChild(el.lastChild);
          el.appendChild(htmlFrag);
          }
       
    else ;
}
</script>

<table border=1 cellspacing=1 cellpadding=5 width="497">
    <tr><td><a href="javascript:altercontent(1)" > Topic 1</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:altercontent(2)">Topic 2</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:altercontent(3)">Topic 3</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:altercontent(4)">Topic 4</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:altercontent(5)">Topic 5</a></td></tr>
</table>

<div id="dcontent" style="background-color:EEEEEE; width:589px;height:228px"></div>

<ilayer id="ns4dcontent" bgColor="#EEEEEE" width=589px height=300px left="-1">
    <layer id="ns4dcontent2" bgColor="#EEEEEE" width=589px height=228px></layer>
</ilayer>

</body>
</html>
0
 
LVL 7

Expert Comment

by:a1programmer
ID: 8218811
I meant browsers, not brosers...
0
 
LVL 1

Expert Comment

by:niteshn
ID: 8218837
pls read "height of 15px is sufficient for the eg. here" in my comment as "height of 150px is sufficient for the eg. here"
0
 

Author Comment

by:Sanjiv Rajiv
ID: 8225353
yep Happy!!
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question