Need help with text change! - Webmaster Forum - Web Design, Programming and SEO forums

05-11-2008, 10:18 AM

Jamesy

Status: Member
Join date: Apr 2008
Location: Oxford
Expertise:
Software:

Posts: 486

iTrader: 1 / 57%

Jamesy is an unknown quantity at this point

Need help with text change!

Hey; when it comes to Javascript, I have no idea; although I'm sure that this is pretty simple.

I need a script which can change a piece of text within a page when you click a link, without the page refreshing itself.

It's for the 'Testimonials' section of my new homepage. I just have a small paragraph of text which I need to change when a link is clicked.

Any ideas?

05-11-2008, 10:54 AM

CreativeLogic

Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:

Posts: 1,078

iTrader: 6 / 100%

CreativeLogic is on a distinguished road

You have three similar options to complete this task, you can use hidden elements which will cycle through when the link is clicked. You can use ajax and load the content from the server when the link is clicked, or you can just simply change the actual content of the container of the text.

The best option really depends on your taste and the actual specifications that you're in need of.

I'd personally look into getting a light weight javascript framework. Many such as jquery will give you examples to use and you can easily implement what you need to accomplish.

05-14-2008, 08:23 AM

crazyryan

Status: I love this place
Join date: May 2006
Location:
Expertise:
Software:

Posts: 603

iTrader: 6 / 100%

crazyryan is an unknown quantity at this point

Yeah, as CreativeLogic said, you can use a framework such as jquery and the effects are stuff are already there for you, and theres a good IRC room of freenode.net for jquery as well (#jquery).

http://docs.jquery.com/Effects/fadeIn

05-19-2008, 07:58 PM

Garrett

Status: Waving
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 2,694

iTrader: 11 / 100%

Garrett is on a distinguished road

I wouldn't recommend a whole framework just to update one paragraph.

Here is how you could do what you are wanting to do:

The Paragraph

Code:

<p id="test">Text here</p>

The Link

Code:

<a href="#" onclick="document.getElementById('test').innerHTML='My new text'; return false;">Change Text</a>

You can also put that into a function for cleaner code. If you want to have it toggle what it says back and forth, you will have to make a different function.

05-20-2008, 10:01 AM

Wildhoney

Status: Request a custom title
Join date: Feb 2006
Location: Nottingham
Expertise:
Software:

Posts: 1,648

iTrader: 18 / 95%

Wildhoney is on a distinguished road

I concur with Garrett in this instance. If it is a simple switch of text then pure Javascript, without Ajax, would more than suffice. If nothing else, it's almost instant, whereas with Ajax there is a natural wait time, albeit half a second. Try the following code I've wrote for you. Nothing like a little Javascript in the morning to give vigour to a sleepy soul!

HTML segment:

Code:

<body onload="TextChange.init();">

	<div id="toggleDefault">
		Small paragraph to be changed.
	</div>
	
	<div id="toggleHidden" style="display: none;">
		Small paragraph to be shown upon click.
	</div>
	
	<br />
	
	<a href="javascript:void(0);" id="toggleLink">Toggle</a>

</body>

Javascript segment:

Code:

<script type="text/javascript">

	var TextChange = 
	{
		init: function()
		{
			TextChange.State = 1;
			TextChange.Default = document.getElementById('toggleDefault');
			TextChange.Hidden = document.getElementById('toggleHidden');
			TextChange.Link = document.getElementById('toggleLink');
			
			TextChange.Link.onclick = function()
			{
				switch(TextChange.State)
				{
					case(1): TextChange.show(); break;
					case(2): TextChange.hide(); break;
				}
			}
		},
		
		show: function()
		{
			TextChange.Default.style.display = 'none';
			TextChange.Hidden.style.display = '';
			
			TextChange.State = 2;
		},
		
		hide: function()
		{
			TextChange.Hidden.style.display = 'none';
			TextChange.Default.style.display = '';
			
			TextChange.State = 1;
		}
	}

</script>