PDA

View Full Version : Dyamicly Changing Content of <DIV>

Squintz
08-16-2002, 05:06 PM
Is it possible to change the content in a DIV based on what link a user clicks...

I have a Small <DIV> in my screen and without loading another page i want to be able to change the conent in that DIV...

Than for any replie leading to a solution
beetle
08-16-2002, 05:42 PM
Check this link

http://wsabstract.com/javatutors/dynamiccontent4.shtml#
Squintz
08-16-2002, 06:13 PM
Thanx Beetle,

This is the code i cam up with but i have to ALter it a little Bit...
Im not to fluent with java so i took a stab at the code... Can someone review it and tell me if its going to do what i want it to do.... And how do i get the <A Href="" onClick="altercontent('1')";>Click HERE</A> to not take me to another page... I want to keep my page loaded and change the content in the DIV.... What am i doing wrong



<ilayer id="ns4dcontent" width=100% height=38px><layer id="ns4dcontent2" width=100% height=38px></layer></ilayer>

<script>

//the html contents to display
var mycontent=new Array()
mycontent[0]='0'
mycontent[1]='1'
mycontent[2]='2'
mycontent[3]='3'

var i=0

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


</script>




<A Href="" onClick="altercontent('1')";>HTML Goodies</A>
Squintz
08-16-2002, 06:20 PM
oh and the DIV im using says this:


<Div id="dcontent"> Test </DIV
Vladdy
08-16-2002, 06:26 PM
<A Href="Javascript: altercontent('1')">Click HERE</A>

- that is for executing javascript function from a link
Squintz
08-16-2002, 06:30 PM
Thanx for the link code vladdy...


Can anyone take a look at my abouve code and tell me if you see anything wrong with it... Im running IE 5.5 and it doesnt seam to be changing the content...

Do me a Fav and do just post the right script...Please point out the area which i have gone wrong so i can learn...
Squintz
08-16-2002, 07:00 PM
Bump...EDIT
Vladdy
08-16-2002, 07:06 PM
How can I do it when the whole thing is wrong :D :D ......hehe, just kidding.........

However here is how I would modify the code you have so you have a better starting point (and I will do my best explaining it)

IE 5+ and all Gekko browsers support document.getElementById and that is over 90% of all users so it would make sense to start with this test, not leave it till the end:

if(document.getElementById)
{ el = document.getElementById("dcontent");
/* Now, even though innerHTML is not in the W3C spec
it is supported by all the current browsers
(including the latest Mozilla Beta),
so for now the following will do the job */
if(el.innerHTML)
el.innerHTML=mycontent[i];
else
{ /* you may never have to implement this part,
'cause IMHO it is argueable what happens first:
browsers stop supporting innerHTML
or it finds its way into the standard as
convinience method)
*/
}
}
else
{ /* It's been awhile since I did anything outside DOM
so you can use what you got for other browsers
unless someone else finds an error.
Personally I would put here the following:*/
alert("How about upgrading your browser, huh?");
}


Hope that helps
Squintz
08-16-2002, 07:16 PM
OK this is my entire HTML... I dont get an error now but it simply does not add the content when i click the link...

ANYBODY.... Thanx in advance



<HTML>
<Head><Title>LineSlice</Title>


</Head>
<BODY Style="Margin-top:0; Margin-Left:0; Margin-Right:0; OverFlow:auto">

<A Href="Javascript: altercontent('1')">Click HERE</A>

<script language="JavaScript">

//the html contents to display
var mycontent=new Array()
mycontent[0]='0'
mycontent[1]='1'
mycontent[2]='2'
mycontent[3]='3'

var i=0

function altercontent(i){

if(document.getElementById)
{ el = document.getElementById("dcontent");
/* Now, even though innerHTML is not in the W3C spec
it is supported by all the current browsers
(including the latest Mozilla Beta),
so for now the following will do the job */
if(el.innerHTML)
el.innerHTML=mycontent[i];
else
{ /* you may never have to implement this part,
'cause IMHO it is argueable what happens first:
browsers stop supporting innerHTML
or it finds its way into the standard as
convinience method)
*/
}
}
else
{ /* It's been awhile since I did anything outside DOM so you can use what you got for other browsers unless someone else finds an error. Personally I would put here the following:*/
alert("How about upgrading your browser, huh?");
}
}
</script>





<TABLE CELLSPACING = 0 CELLPADDING = 0 BORDER = 1>
<TR><TD><IMG
SRC = "imag000.gif" WIDTH = 410 HEIGHT = 109></TD><TD><IMG
SRC = "imag001.gif" WIDTH = 327 HEIGHT = 109></TD><TD><IMG
SRC = "imag002.gif" WIDTH = 40 HEIGHT = 109></TD></TR><TR><TD><IMG
SRC = "imag003.gif" WIDTH = 410 HEIGHT = 140></TD><TD>
<Div id="dcontent" Style="Position:Static; Width:327px; Height:140px; Background-Color:Gray;Overflow:Auto">


</Div></TD><TD><IMG
SRC = "imag005.gif" WIDTH = 40 HEIGHT = 140></TD></TR><TR><TD><IMG
SRC = "imag006.gif" WIDTH = 410 HEIGHT = 176></TD><TD><IMG
SRC = "imag007.gif" WIDTH = 327 HEIGHT = 176></TD><TD><IMG
SRC = "imag008.gif" WIDTH = 40 HEIGHT = 176></TD></TR>
</TABLE>



</BODY>
</HTML>
Vladdy
08-16-2002, 07:22 PM
lets start with putting the code in the <head> and having

..href="javascript: ....

not

..href="java script: ....


also a good idea to have

function .... (....)
{ alert('here we are');
.....
}

to see if the problem is in the function code or in calling it.
Vladdy
08-16-2002, 07:30 PM
Even better idea:
Download and install Mozilla 1.1 beta - saves you loads of time when you think you are doing something wrong but it ends up being yet another bug in stoopid IE....

It does not initialize the innerHTML if its an empty string!!!
Three fixes:

1: put something inside your <div> to begin with:
<Div id="dcontent" Style="Position:Static; Width:327px; Height:140px; Background-Color:Gray;Overflow:Auto">
initial content.
</Div>

2: simplify the code by removing the innerHTML check:
if(document.getElementById)
{ el = document.getElementById("dcontent");
el.innerHTML=mycontent[i];
}
else
{ /* It's been awhile since I did anything outside DOM so you can use what you got for other browsers unless someone else finds an error. Personally I would put here the following:*/
alert("How about upgrading your browser, huh?");
}

3: do the check for innerHTML support with document.body:

if(document.getElementById)
{ el = document.getElementById("dcontent");
if(document.body.innerHTML)
el.innerHTML=mycontent[i];
else
{ }
}
else
{ /* It's been awhile since I did anything outside DOM so you can use what you got for other browsers unless someone else finds an error. Personally I would put here the following:*/
alert("How about upgrading your browser, huh?");
}
t3cat5
08-18-2002, 02:32 PM
Ok I have a freebie you can download from my site which will do what you need. goto the samples/freebies section lower left and select dynamic pages 2 for the template sample and download

URL http://www.4gigs.com/~t3cat5/