Text resizer snippet

Forum Moderators: open

Message Too Old, No Replies

Text resizer snippet

music_man

12:37 am on Mar 25, 2007 (gmt 0)

Hi everyone,

Just came up with a small function to allow text resizing.

function fSize(i){var r;if(isNaN(parseInt(i))){r=i;var i=prompt(i,"");if(i)if(isNaN(parseInt(i))){fSize(r,"");}}var c=document.body.style.fontSize;if(!c){c="100%";}var n=c.split("%");document.body.style.fontSize=(parseInt(n[0]))+(parseInt(i))+"%";}

In your HTML you can call it:

onClick="fSize('+10');

onClick="fSize('Percentage difference?');

It works for me...

music_man

1:03 am on Mar 25, 2007 (gmt 0)

Here is a *tentative* addition that increases the image size as well:

function fSize(i){var r;if(isNaN(parseInt(i))){r=i;var i=prompt(i,"");if(i)if(isNaN(parseInt(i))){fSize(r,"");}}var c=document.body.style.fontSize;var img = document.getElementsByTagName("img");for(var x=0;x<img.length;x++) {var o1=img[x].width; var o2=img[x].height; img[x].width=(parseInt(o1))+(parseInt(i));img[x].height = (parseInt(o2))+(parseInt(i));} if(!c){c="100%";}var n=c.split("%"); document.body.style.fontSize=(parseInt(n[0]))+(parseInt(i))+"%"; }

music_man

12:10 am on Apr 8, 2007 (gmt 0)

Done some revising and it should work with <h1> tags:

<html>
<head>
<script type="text/javascript">
function fSize(M){var r;if(isNaN(parseInt(M))){var L=M;var M=prompt(L,"");}if(M){if(isNaN(parseInt(M))){fSize(L,"");}else{var
N=document.body.style.fontSize;var O=document.getElementsByTagName("img");for(var P=0;P<O.length;P++){var D=O[P].width;var
o2=O[P].height;O[P].width=(parseInt(D))+(parseInt(M));O[P].height=(parseInt(o2))+(parseInt(M));}if(!N){N="100%";}var
Q=N.split("%");document.body.style.fontSize=(parseInt(Q[0]))+(parseInt(M))+"%";M=M/100;for(var F=1;F<7;F++){var R="h"+F;var
H=document.getElementsByTagName(R);for(var I=0;I<H.length;I++){var
J=H[I].style.fontSize;if(!J){switch(R){case'h1':J=2;break;case'h2':J=1.5;break;case'h3':J=1.17;break;case'h4':J=1;break;case'
h5':J=.83;break;case'h6':J=.75;break;}}H[I].style.fontSize=(parseInt(J))+(parseInt(M))+"em";}}}}}
</script>
</head>
<body>
<h1>Test</h1>
<h1>Test</h1>
<h3>Test</h3>
<h4>test</h4>
<p>Test</p>
<p><a href="#" onClick="fSize('+10');">Higher</a></p>
<p><a href="#" onClick="fSize('-10');">Lower</a></p>
<p><a href="#" onClick="fSize('How much difference? E.g. +10 or -10');">Prompt</a></p>
</body>
</html>

Fiasst

9:32 am on Apr 9, 2007 (gmt 0)

This is great!

I tryed to add some functionality to this but its beyond my skill level.

Is there any chance someone can add the ability for the fontSize to only go as high as a set value and as low as anouther value. Also, If it only targets text inside certain classNames. So an array of targeted classnames? I don't know.

Cheers anyways :)

music_man

10:52 am on Apr 9, 2007 (gmt 0)

Hi there, Fiasst.

Glad you like it!

Is there any chance someone can add the ability for the fontSize to only go as high as a set value and as low as anouther value. Also, If it only targets text inside certain classNames. So an array of targeted classnames? I don't know.

So you would like to be able to set a limit? So it can only go up to 20% higher?

At the moment you can change how much the size is increased and decreased by changing the +10 to e.g. +20 or -10 to -20 etc.

Also you would like to have the ability to have a list of affected class names?

I had a look at implementing a cookie function to make the script remember the settings. Good idea?

Fiasst

1:45 pm on Apr 9, 2007 (gmt 0)

Ooo, I didn�t think about the text resetting on every page load. A cookie is a great idea!

Also you would like to have the ability to have a list of affected class names?

Yes please.

This script will be perfect for my site because I�m already planning on having multiple style sheets for users to choose a color theme for the site. I�d rather not have even more CSS files for different text options too.

Thanks music_man :)

music_man

5:21 am on Apr 10, 2007 (gmt 0)

May I ask why you would like to have only specific class names affected? Is it to make sure it fits your layout?

music_man

6:42 am on Apr 10, 2007 (gmt 0)

I'm not sure how well this works, but here is the code (in less condensed format) with cookie function.

<html>
<head>
<script type="text/javascript">
function fCheck()
{
if (document.cookie.length>0) {
c_start=document.cookie.indexOf('fSize' + "=")
if (c_start!=-1) {
c_start=c_start + "fsize".length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) {
c_end=document.cookie.length
}
var M = (unescape(document.cookie.substring(c_start,c_end)));
M = M.split(',');
M = M[0];
// Do the resize function
fSize(M);
}
}
}
function fSize(M)
{
var r;
if (isNaN(parseInt(M))) {
var L=M;
var M=prompt(L,"");
}
if (M) {
if (isNaN(parseInt(M))) {
fSize(L,"");
} else {
var N=document.body.style.fontSize;
var O=document.getElementsByTagName("img");
for (var P=0; P<O.length; P++) {
var D=O[P].width;
var o2=O[P].height;
O[P].width=(parseInt(D))+(parseInt(M));
O[P].height=(parseInt(o2))+(parseInt(M));
}
if (!N) {
N="100%";
}
var Q=N.split("%");
document.body.style.fontSize=(parseInt(Q[0]))+(parseInt(M))+"%";
// Set cookie value
// Remove the 100 to get the incremented value.
var A = (parseInt(Q[0]))+(parseInt(M))-100;
M=M/100;
for (var F=1; F<7; F++) {
var R="h"+F;
var H=document.getElementsByTagName(R);
for (var I=0; I<H.length; I++) {
var J=H[I].style.fontSize;
if (!J) {
switch (R) {
// The h1, h2 etc tags have set font sizes
case'h1':J=2;
break;
case'h2':J=1.5;
break;
case'h3':J=1.17;
break;
case'h4':J=1;
break;
case'h5':J=.83;
break;
case'h6':J=.75;
break;
}
}
H[I].style.fontSize=(parseInt(J))+(parseInt(M))+"em";
}
}
}
}
// Delete cookie
var when=new Date();
when.setDate(when.getDate()-365)
document.cookie="fSize="+",expires="+when.toGMTString();
// Make cookie
var exdate=new Date();
exdate.setDate(exdate.getDate()+365)
document.cookie="fSize="+A+",expires="+exdate.toGMTString();
}
</script>
</head>
<body onload="fCheck()";
>
<h1>Test</h1>
<h1>Test</h1>
<h3>Test</h3>
<h4>test</h4>
<p>Test</p>
<p><a href="#" onClick="fSize('+10');">Higher</a></p>
<p><a href="#" onClick="fSize('-10');">Lower</a></p>
<p><a href="#" onClick="fSize('How much difference? E.g. +10 or -10');">Prompt</a></p>
</body>
</html>

music_man

7:17 am on Apr 10, 2007 (gmt 0)

If you copy and paste from this forum, the script doesn't seem to work in Safari. It works from my file, however...

Trace

4:29 pm on Apr 10, 2007 (gmt 0)

Another option, especially if you want to have more control, would be to just switch up the style sheet. I do it like this;

and here's the Javascript

var globalTitle = "small";
var sizesArray = new Array();
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) {
a.disabled = false;
globalTitle = title;
}
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title") &&!a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function loadSizes() {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title")) {
sizesArray.push(a.getAttribute("title"));
}
}
}
function increaseSize()
{
var pos = indexOf(sizesArray, globalTitle);
if (pos!= sizesArray.length-1)
{
++pos;
}
setActiveStyleSheet(sizesArray[pos]);
checkBlogueFrame(sizesArray[pos]);
}
function decreaseSize()
{
var pos = indexOf(sizesArray, globalTitle);
if (pos!= 0)
{
--pos;
}
setActiveStyleSheet(sizesArray[pos]);
checkBlogueFrame(sizesArray[pos]);
}
function indexOf(arrayToCheck, valueToCheck)
{
for (var i=0; i<arrayToCheck.length; i++)
{
if(arrayToCheck[i] == valueToCheck)
{
return i;
}
}
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
loadSizes();
var cookie = readCookie("style");
var title = cookie? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

[edited by: Trace at 4:30 pm (utc) on April 10, 2007]

Fiasst

4:43 pm on Apr 10, 2007 (gmt 0)

Hello, this is great!

Yes, I'd like to be able to pick which elements are affected so I can protect my layout with ease. If it's possible to include a div element by its className and have all text inside that div respond to the script that would save using class names on every <p> tag inside the containing div.

I couldn't see anything that limits the font size. Am I over-looking the code?

Also, The text seems to take a second to resize to the last desired font size on page load. With a large amount of text this could really knock a layout around. Is there a way to make the cookie adjust the text before/as soon as the page is displayed?

These are just points, I'd love it if you could improve your script but I understand if you are bored with it :)

Thanks anyway!

Fiasst

5:13 pm on Apr 10, 2007 (gmt 0)

Hold that thought, I think I will use Traces' multiple CSS sheet script. Im looking for alot of control over my styles so I think its the best solution.

Thank you both :)