asked on

getElementById function Probelm

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>     <a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a>     <a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a>     <a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a>     <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 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 '
mycontent[1]='Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 '
mycontent[2]='Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 '
mycontent[3]='Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 '
mycontent[4]='Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 '
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>
 </td>
</body>
</html>

niteshn

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>     <a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a>     <a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a>     <a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a>     <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 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 '
mycontent[2]='Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 '
mycontent[3]='Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 '
mycontent[4]='Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 '
mycontent[5]='Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 '

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>
 </td>
</body>
</html>

Sanjiv Rajiv

ASKER

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>     <a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a>     <a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a>     <a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a>     <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 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 '
mycontent[2]='Topic 2 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 '
mycontent[3]='Topic 3 Topic 3Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 '
mycontent[4]='Topic 4 ic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 '
mycontent[5]='Topic 5 Topic 5 T5 Topic 5 Topic 5 Topic 5 5 '

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 Not expanding on NE 4 and 6 Need to have expanding </td></tr>
</table>
 </td>
</body>
</html>

niteshn

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>     <a style="cursor:hand" onClick="altercontent(2)" href="#no">Topic 2</a>     <a style="cursor:hand" onClick="altercontent(3)" href="#no">Topic 3</a>     <a style="cursor:hand" onClick="altercontent(4)" href="#no">Topic 4</a>     <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 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 '
mycontent[2]='Topic 2 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 '
mycontent[3]='Topic 3 Topic 3Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 '
mycontent[4]='Topic 4 ic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 '
mycontent[5]='Topic 5 Topic 5 T5 Topic 5 Topic 5 Topic 5 5 '

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 Not expanding on NE 4 and 6 Need to have expanding </td></tr>
</table>
 </td>
</body>
</html>

niteshn

Sanjiv Rajiv

ASKER

niteshn ,

Can you hide and not show in NE 4 ?

And that's all you get 250

Please
Thnaks

a1programmer

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 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 Topic 1 ';
mycontent[2]='Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 Topic 2 ';
mycontent[3]='Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 Topic 3 ';
mycontent[4]='Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 Topic 4 ';
mycontent[5]='Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 Topic 5 ';

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>     <a href="javascript:altercontent(2)">Topic 2</a>     <a href="javascript:altercontent(3)">Topic 3</a>     <a href="javascript:altercontent(4)">Topic 4</a>     <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>

niteshn

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();
}

Sanjiv Rajiv

ASKER

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

a1programmer

Try mine.

Sanjiv Rajiv

ASKER

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

niteshn

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.

niteshn

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.

Sanjiv Rajiv

ASKER

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

a1programmer

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...

niteshn

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...

ASKER CERTIFIED SOLUTION

a1programmer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

a1programmer

I meant browsers, not brosers...

niteshn

pls read "height of 15px is sufficient for the eg. here" in my comment as "height of 150px is sufficient for the eg. here"

Sanjiv Rajiv

ASKER

yep Happy!!