...

View Full Version : Text Resize (increase/decrease on click)



grimaldi
07-18-2011, 11:26 AM
Hi guys,

Pretty quick question (I think)...

I'm working on a wordpress site and the client wants the 3 A's in the header that alters the size of fonts on the site. Does anyone know a good wordpress plugin for this? Or another javascript one?

Thanks advaince,
Ste

vikram1vicky
07-18-2011, 11:34 AM
Step 1: Add the following Javascript in the insde the <HEAD> tag of your HTML.
<script language="JavaScript" type="text/javascript">
function changeFontSize(inc)
{
var p = document.getElementsByTagName('p');
for(n=0; n<p.length; n++) {
if(p[n].style.fontSize) {
var size = parseInt(p[n].style.fontSize.replace("px", ""));
} else {
var size = 12;
}
p[n].style.fontSize = size+inc + 'px';
}
}
</script>Step 2: Insert the following HTML anywhere in your blog - you can customize the text or replace it with visual graphics (like the alphabet A - one small and the other one slightly large)
<a href="javascript:changeFontSize(1)">Increase Font Size</a>
<a href="javascript:changeFontSize(-1)">Decrease Font Size</a>You can extend this to either all the HTML elements on your blog or limit it to only the text sections. The font size is specified in pixels.


Let me know if it is same what you are looking for :)

grimaldi
07-18-2011, 12:05 PM
That looks great, I've got to pop off for an hour but I'll give this a whirl as soon as I get back!

I take it all the font sizes should be px based in my CSS then?

Would this method work using the "3 A's" as well? I know what the clients like, we've done it other ways but apparently it HAS to be done with 2 A's - each one bigger than the other ha.

So I guess the left most 'A' would always reset it to the default size. The middle one would enlarge the text and the last one would make it bigger still.

Does that make any sense? Thanks for your time looking at this! :)

Ste

vikram1vicky
07-18-2011, 01:14 PM
Then use following code:


<script language="JavaScript" type="text/javascript">
function changeFontSize(inc)
{
var p = document.getElementsByTagName('p');
for(n=0; n<p.length; n++)
{
p[n].style.fontSize = inc + 'px';
} }
</script>

here is code for 3 "A"



<a href="javascript:changeFontSize(12)">A</a>
<a href="javascript:changeFontSize(15)">A</a>
<a href="javascript:changeFontSize(20)">A</a>


This what you want??? :)

grimaldi
07-18-2011, 03:44 PM
Thats absolutely fantastic, perfect, thanks alot!! :)

You are a really helpful bunch on this form!

alykins
07-18-2011, 10:21 PM
Doesn't this


if(p[n].style.fontSize) {....

need a comparison sequence? pardon my ignorance if it doesn't (I've just never seen an if statement w/o a compare)

Lerura
07-19-2011, 02:31 AM
Doesn't this


if(p[n].style.fontSize) {....

need a comparison sequence? pardon my ignorance if it doesn't (I've just never seen an if statement w/o a compare)

an if statement without comparison is used to check for existence.

e.g.:

if(document.getElementById('Buuh'){
alert('the document have an element with the Id "Buuh"');
}else{
alert('the document do not have an element with the Id "Buuh"');
}

alykins
07-19-2011, 02:43 PM
an if statement without comparison is used to check for existence.

e.g.:

if(document.getElementById('Buuh'){
alert('the document have an element with the Id "Buuh"');
}else{
alert('the document do not have an element with the Id "Buuh"');
}

thanks- i didn't know that :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum