To display different text content for each link without using seperate pages

[vijji]

Hi,
I was actually trying to look for some code (with a text area) that would allow me to use one single page with a couple of links. And when i click each link the content of the text area should change. It should not go to a seperate page.
can anyone help me with the code.

I just know a little of java script.

Thanks,
Vijaya

[dyates]

You can do this with javascript.

document.all.<field name>.innerHTML = "whatever"

Cheers, Daniel

[vijji]

Dear Dyates,
Thank you for your reply. Yeah I was looking for some code in java script. But as I said I am little new to java script. Can u explain me little more in detail about what you posted in ur reply. Do i need to store my contents in differnt files and call them in the program? how do i do that. I would appreciate if you could be little more elaborate. :confused:

[pyro]

document.all is IE only. It'd be better to use the DOM method, which is document.getElementById("idname").value, or just reference it through the frames array:

document.framename.elementname.value

Also, be sure you keep you pgae working for those without JavaScript enabled....

[PeOfEo]

But why does it need to all be on one page? An iframe sounds like it would be the easiest solution to me....

[vijji]

Hi pyro & PeOfEo,
Thanks a lot for your time. I am not supposed to use frames. I have seen some examples where u click a link and a particular portion of the page changes its image. But all this happens on the same page. it calls the image file when the link is clicked. So i want to do the same thing for text instead of an image. Something like, store the text in a file and read the file and write it to the text box in the page, when ever I click a particular link.

getElementBYID("idname") , do u mean my text box name?

Thanks,
Vijaya

[pyro]

No, I mean you textbox ID. Also, you have some capitilization errors, it should be getElementById -- JavaScript is case sensitive.

[vijji]

Hi Pyro,
Thanks for your reply. But I am still not clear about how do I store different contents associated with each link.

Do u mean, I should have more than one text box and make all of them hidden. Then in my code, according to the link clicked, make the text box content associated with it visible by using getElementById ?

Can u please be a little elaborate.:( I am new to javascript. I appreciate ur time.

Thanks,
Vijaya

[pyro]

I don't think I really understand what you mean, but perhaps this link will help: http://www.infinitypages.com/research/clientsidedivinclude.htm

[PeOfEo]

Pyro I looked at what you just posted and the first is nice but If you do it with a server side langauge like you did for the php include that causes the page to reload, that gets annoying so you can't really use that for navigation either. Just thought I would point that out. What I am working on right now is a drop down menu system using java script (I dislike java script but space is preicious on this site and this menu will look good) But it does not work on mozilla. So I am either going to ditch the script or have the top of the menu, the div in which mouseover stuff is in, have a text link in there as the text and have that take the user to a page with a regular menu at the bottom, or maybe do a browser detect.

[pyro]

Originally posted by PeOfEo
but If you do it with a server side langauge like you did for the php include that causes the page to reload, that gets annoying so you can't really use that for navigation either.With most navigation, the page will reload (also, the file PeOfEo is taking about can be found here (http://www.infinitypages.com/research/divinclude.php), and I would recommend using such a method over the JavaScript one.)

Originally posted by PeOfEo
What I am working on right now is a drop down menu system using java script ... But it does not work on mozilla. So I am either going to ditch the script...Ditch it... Using JavaScript for a menu makes the page inaccessible. If you must use one, be sure to provide an alternate way to navigate the site.

[PeOfEo]

Originally posted by pyro
Ditch it... Using JavaScript for a menu makes the page inaccessible. If you must use one, be sure to provide an alternate way to navigate the site. I have not seen much navigation that refrshes the site. I am trying to run drop down menus here, like the ones found on www.blizzard.com It would look like crap if it were done server side. Also I said the top would link to a page with alternate navigation, I also said I was thinking of running a browser detect, a server side one that gets the os and the browser using request.ServerVariables("HTTP_USER_AGENT") in asp.net
EDIT: Now that I look at the code blizzard used I see that they used separate event handlers for different browsers, their navigation the way its setup is accessable for those w/ out java script. I might need to copy their code and study it make something that will work on ns/mozilla browsers too. Opera handles my drop down code fine as it is now.
EDIT: I went to w3schools.com and looked at their stuff and my menu as it is right now is actually extramly similar to the one on w3schools... so you can get an idea of what I have now.

[TomDenver]

You could implement this several ways. I'd make an external function for it. Put this in your <head> tag:


<SCRIPT language="JavaScript">
function textChange(text)
{
document.getElementById('sample').innerHTML=text;
}
</SCRIPT>


Then for your links, use this example, which you can alter for each link:
Edit: for some reasons it's inserting a space between Java and Script here, make sure to remove that space.

<a href="JavaScript:textChange('Different Text Here');"
onMouseOver="(window.status='Any status bar text you want'); return true"
onMouseOut="(window.status=''); return true">Change Text</a>


And for the text area that you want to change, use this:

<div id=sample style="font-family:arial; font-size:14px;">Sample Text Here</div>


To make other links change that same text, just replace the 'Different Text Here' with what you want it to say in your <div>. The onMouseOver and onMouseOut parts are optional, they just prevent the status bar from being filled with ugly JavaScript code. You can make it say whatever you want down there. Leave the onMouseOut status empty, that clears the status bar when you move your mouse away from the link (like a normal link does).

[vijji]

Hi TomDenver,
Thanks a lot for the code. It works the way I want. Thanks to Pyro, PeOfEo, dyates for your ideas. I really appreciate it. Can any of u suggest me, what would be the best way to learn javascript?

Thanks,
Vijaya.

[pyro]

I'd recommend getting "JavaScript, The Definitive Guide" by David Flanagan, and using http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/.

[vijji]

Hi,
I have one more question. Instead of directly writting the content (of text box associated with each link) within the code, can I get the text content from an external file? .doc file or in some other format? Which one would be more efficient?

Thanks,
Vijaya.

[PeOfEo]

You can use a server side language to have content populate text boxes tables and just about any other element you want using any data base or text file (.mdb .dbo mysql mssql .xml also .xls can be used with asp and asp.net)

[vijji]

Hi,
I have a java script that displays a random image each time the page is loaded and when this image is clicked it displays a text . This text replaces the text that is already there on the page.

The following is the code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<SCRIPT language="JavaScript">

function textChange(text)

{

document.getElementById('sample').innerHTML=text;

}

</SCRIPT>



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

<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide
var imagenumber = 2 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "C:///ua-logo.jpg"
images[2] = "C://Facult2.gif"
var myimage = images[rand1]
links = new Array
links[1] = "text change1"
links[2] = "text change2"
var mylink = links[rand1]
document.write('<A HREF="' +"javascript:textChange(mylink); "+ '"><IMG src="' + myimage +
'"></A>')
document.write("The function returned ", textChange(mylink), ".")
// -- End Hiding -->
</SCRIPT>
<a href="javascript:textChange('text change1');">Link1</a>

<a href="javascript:textChange('text change2');">Link2</a>

<div id=sample style="font-family:arial; font-size:14px;"> Initial text</div>


<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font size="5"></font> </p>
</div>
</body>
</html>


I want to modify the code such that when the page is loaded it displays a random image and also some text associated with it.
can someone help ??

thanks ,
vijaya

[PeOfEo]

My suggestion is do not use java script for this. With a server side language you could have a label or something be populated with random text and some of that text could be the html for an image tag. I prefer to use java script as little as possible because it can lag up a site for the users and pose accessability problems.