Welcome to WebmasterWorld Guest from 18.204.2.53

Forum Moderators: open

Message Too Old, No Replies

Can you swap text with Javascript

is it similar to swapping an image

     
6:06 pm on Sep 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 16, 2003
posts:899
votes: 0


I am able to swap images using Javascript, and I can even swap text in an input box of a form, but is there a way to swap text characters not contained in a form?

Or is there a way to create an input box that is transparent so that only the characters show up?

6:11 pm on Sept 15, 2003 (gmt 0)

Senior Member

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

joined:Sept 1, 2001
posts:4392
votes: 0


Yes, you can do it with Javscript and CSS by playing with the "style=display:none" idea.
6:21 pm on Sept 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 16, 2003
posts:899
votes: 0


so would I put the CSS and ID tags in a <b> or something like that?
6:28 pm on Sept 15, 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 can use a function like this:

<script>
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
</script>

I don't know how cross browser it is. NN4 won't see it. Then you need to style the element with display:none. Then have what ever is calling it pass the id of the hidden element as an aurgument.

Have the div:

<div id="nameOfDiv" style="display:none">text</div>

then the switcher event:

<a href="javascript:showHide('nameOfDiv');">show layer</a>

7:24 pm on Sept 15, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 16, 2003
posts:899
votes: 0


I got it to work. I wanted to swap a right arrow with a down arrow when a div was displayed so that people would understand that the div could be hidden again. (I was getting complains that the page got too long when you opened all of the layers) It's a Q&A page where the A's expand when you click on the Q's.

It looks pretty sharp. I just expanded my javascript to take a few extra calls. I also included the id and style attribute in a bold tag. It looks like this:

<b id="arrow1" style='display: block'>&#9658;</b><b id="darrow1" style='display: none'>&#9660;</b>

I guess I could have used the div but sometimes those get irritating because they don't position correctly for me cross browser, and I thought this would be much more simple.

Thanks for the tips.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members