PDA

View Full Version : text resize javascript


2mi
11-24-2005, 09:09 AM
Calling all javascript-aholics.

I found a script that resizes the text on a web page via a click of a couple of buttons. It works exactly how i wanted it to...but...it only resizes one (CSS based) style type at a time via an 'id' thingy (please forgive my ignorance - i don't know what it's called). In other words, it only resizes the main body, but not the subheaders as well.

To see the test page - please visit http://www.resort-vanuatu.com/build/textresize221105.htm ('http://www.resort-vanuatu.com/build/textresize221105.htm')

My question is: Instead of using an 'id' thingy to call the script to affect the paragraph it's sitting in front of, does anyone know how to make the script apply to unique-named CSS styles (eg. 'mainbodycopy' and 'mainbodycopybold' as these are the only parts on the page i want it to resize). I thought this would make it easier to apply to the site globally by placing the script in the template, rather than adding 'id' to each page.

I should also mention, i'd prefer the script to sit within the 'head' tags on the template page - as it is now, instead of having an external .js file. And i didn't want to use a CSS style switcher, coz i perferred only having the 2 buttons on each page to make it easier for site visitors to use.

Thanx heaps in advance to anyone who can offer any suggestions.

n

domedia
11-24-2005, 05:46 PM
using the document object model, you can use getelementbyid and target specific elements on your webpage.
Some examples:
http://www.mozilla.org/docs/dom/domref/examples.html ('http://www.mozilla.org/docs/dom/domref/examples.html')

2mi
11-25-2005, 03:12 AM
Thanx so much for the quick response. It's sincerely appreciated.

I should've mentioned that i have very little (read as: absolute beginner) experience with javascript.

I should've also mentioned, that i was hoping the script would work so, by repeatedly clicking the same trigger on the html page, it increases/decreases the text size (and line height) in steps (between a preset range - in this case, 11-16px) of multiple unique-named styles within the same CSS file.

From the link you provided 'Example 3: Manipulating styles' seems to be the closest to what i was needing...but it looks like it will only adjust the font size once...not in gradual steps.

Is that correct? Or am i simply not understanding it's capabilities.

Just in case i didn't do a very good job of explaining - which is very likely for me - what i was hoping to get help on:

Below is the script from my page which is applied to a paragraph by using:
<class="mainbody" id="enlarge">

And the triggers (inside the form) have this at the end to tell the script to work:
onclick="smaller()"/
onclick="bigger()"/




<script type="text/javascript">
<!--
//<![CDATA[

var z=11;

function bigger() {
z++;
if(z>16) {
z=16;
return;
}
document.getElementById("enlarge").style.fontSize=z+"px";
document.getElementById("enlarge").style.lineHeight=(z*1.45)+"px";
document.forms[0][1].value=i+"px";

}

function smaller() {
z--;
if(z<11) {
z=11;
return;
}
document.getElementById("enlarge").style.fontSize=z+"px";
document.getElementById("enlarge").style.lineHeight=(z*1.45)+"px";
}