Welcome to WebmasterWorld Guest from 35.173.47.43

Forum Moderators: open

Message Too Old, No Replies

DHTML Replace Content

     
12:52 am on Oct 20, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:May 3, 2001
posts:365
votes: 0


Hi everyone,

Quick Question. I have two links like below.

Link 1 Link 2

When I click on "link 1" I want Text A to appear.

Example: *Click* "Link 1" Link 2
Text A

When I click on "link 2" I want Text B to appears instead of Text A.

Example: Link 1 *Click* "Link 2"
Text B

Am I making sense? Well, that's what I want to do but I can't figure out how to get it to work.

I finally got a book on DHTML today and it's by O'Reilly. It's GOOD! so far. :)

Thanks

2:10 am on Oct 20, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 0


You need to switch visibility in an element on and off. Use none and visible I think. Position the two divs in the same place and use the onclick from the link to show and hide each div.

This thread may help:
[webmasterworld.com...]

2:53 am on Oct 20, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


Visibility will still allow the element to take up space but will not display it (which is totally wierd if you ask me), so I usually use the display attribute; it can take 'none' or 'block' or 'inline' (among others) as values, and if set to 'none', it takes up no space at all in the document flow.

Jordan

2:55 am on Oct 20, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 0


You are right Jordan. I aslo find it strange to keep the space if it is set to none.
3:47 am on Oct 20, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:May 3, 2001
posts:365
votes: 0


Thanks guys!

Here's something I thought of while I was doing this. If I create a JS that has two sets of arrays, but I only want to use one at a time, how can I go about using the links to have the JS change between using arrays?

Here's what I was thinking:

if (click link one) {

var picDir = new Array();
picDir[0] = "images/image1.gif";
picDir[1] = "images/image2.gif";
picDir[2] = "images/image3.gif";
picDir[3] = "images/image4.gif";

} else if (click link two) {

var picDir = new Array();
picDir[0] = "second/images/image1.gif";
picDir[1] = "second/images/image2.gif";
picDir[2] = "second/images/image3.gif";
picDir[3] = "second/images/image4.gif";

}

So when I click on link one the JS would use array set one and when I click link two it uses array set two.

My apologies to ask all these questions, but reading this book I'm exited to find out more and more.

4:04 pm on Oct 20, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


You could give each link an ID, and test using that. So..


function showImages(obj) {
if (obj.id == "Link1") {
var picDir = new Array();
picDir[0] = "images/image1.gif";
...
} else if (obj.id == "Link2") {
var picDir = new Array();
picDir[0] = "second/images/image1.gif";
...
}
}
...
<a href="javascript:showImages(this)" id="Link1">Link 1</a> <a href="javascript:showImages(this)" id="Link2">Link 2</a>

..Or there are more alternatives than you can imagine. You just have to find a unique value to test for. For instance, you can pass a 1 or a 2 into the function, depending on the link clicked. You could also call a seperate function for each link.

hth,
g.

11:17 am on Oct 22, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 22, 2002
posts:1751
votes: 0


circuit, in stead of juggling with visibility and/or display, you could use the innerHTML property. Supported by IE 5 and up, Mozilla 0.9+ and Opera (5+?). Basically, try this:

<script type="text/javascript">
function showText(theText) {
if (!document.getElementById) return false;
document.getElementById("toggle").innerHTML = theText;
}
</script>
<a href="#" onClick="showText('Text A'); return false">link 1</a>
<a href="#" onClick="showText('Text B'); return false">link 2</a>
<div id="toggle"></div>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members