...

View Full Version : Changing font size...



ihitman
08-07-2002, 09:19 PM
Howdy, firstly, newbie to the group, but have a bit of web dev ex, no JS though, tis what lead me here in first place. I'll stop boring you now...

I'm wanting to place to two graphics on a web page, one a big minus sign and one a big plus sign. When these graphics are clicked, depending on the graphic, if the MINUS one is clicked I want the font size of the entire webpage to go down one point and likewise with the PLUS button, but have the font size increase in size by one point.

Is this possible? If so, could anyone divulge the script or point me
in the direction of somewhere that uses a technique like this?

Any help would be great coz this has stumped me now for a couple of days!

Cheers,

ih.

beetle
08-07-2002, 11:03 PM
What you suggest is no simple task for a novice. You want to dynamically switch styles. Here are some online examples, perhaps you can learn from them.

http://www.meyerweb.com/ui/setup.html

adios
08-08-2002, 01:34 AM
http://www.codingforums.com/ubb/Forum1/HTML/025086.html

ihitman
08-08-2002, 08:39 AM
Firstly, Adios, that's exactly what I was looking for.

Secondly, does anyone know a way of whenever the user makes the font size bigger by using this function that I could store this value then use this as the default size in any further pages accessed by them.

Also, could the size change be restricted so say for instance, it can't go below the size of 12 or above the size of 24?

I'm thinking maybe place the size selected in a session variable, but as stated, my javascript knowledge is very minimal.

Any ideas?

Thanks so far though...

ih.

ps. I'm using this code...

<script>
function change(val) {
changetxt.style.fontSize=parseInt(changetxt.style.fontSize)+val;
}
</script>

<div id="changetxt" style="font-size: 8px">

Put page here!

<a href="#" onclick="change(1)">+</a> <a href="#" onclick="change(-1)">-</a>

</div>

glenngv
08-08-2002, 09:01 AM
<script>
function change(val) {
fsize=parseInt(changetxt.style.fontSize)+val;
if (fsize==11) fsize=12;
else if (fsize==25) fsize=24;
changetxt.style.fontSize=fsize;
}
</script>

<div id="changetxt" style="font-size: 12px">

Put page here!

<a href="#" onclick="change(1)">+</a> <a href="#" onclick="change(-1)">-</a>

</div>

if you want the size to be the same through all the pages, you have to save the size to a cookie.

ihitman
08-08-2002, 06:49 PM
Ok dokey, I'm getting further but I can't seem to get what I want to work. I've not been able to create a cookie called FontSize but I can't do much else with it.

What I'd like is for it to check this cookie first, if it has a value then use this as the starting font size, if not, just bypass and start it at 12.

Here's my code anyway so you's can show me the folly of my ways.

Again, thanks so far for all the help and pointers.

ih.


<html>
<head>

<script>

function change(val) {
fsize=parseInt(changetxt.style.fontSize)+val;
if (fsize==11) fsize=12;
else if (fsize==25) fsize=24;
changetxt.style.fontSize=fsize;

var expdate = new Date();
expdate.setTime (expdate.getTime() + (1000 * 60 * 60 * 24 * 31));
setCookie ("FontSize", fsize, expdate);
}

function setCookie (name, value, expires) {
if (!expires) expires = new Date();
document.cookie = name + "=" + escape (value) +
"; expires=" + expires.toGMTString() + "; path=/";
}


function getCookie (name) {
var dcookie = document.cookie;
var cname = name + "=";
var clen = dcookie.length;
var cbegin = 0;
while (cbegin < clen) {
var vbegin = cbegin + cname.length;
if (dcookie.substring(cbegin, vbegin) == cname) {
var vend = dcookie.indexOf (";", vbegin);
if (vend == -1) vend = clen;
return unescape(dcookie.substring(vbegin, vend));
}
cbegin = dcookie.indexOf(" ", cbegin) + 1;
if (cbegin == 0) break;
}
return null;
}



</script>

</head>
<body>

<div id="changetxt" style="font-size: 12px">

<p>
This script allows you to change the size of the text on screen
and saves the size as a cookie, so whenever you click refresh, it
'should' refresh the page in the same size of font!
</p>

<p>
<a href="#" onclick="change(1)">+</a> <a href="#" onclick="change(-1)">-</a>
</p>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum