Lively discussions on the graphic arts and publishing — in print or on the web

dthomsen8 · 09-06-2006, 06:52 AM

+ Larger Font | + Smaller Font

These choices were on a web site I visited recently. A good idea, but the JavaScript was not readily available. Does anyone have it?

ktinkel · 09-06-2006, 08:13 AM

Quote:

Originally Posted by dthomsen8

+ Larger Font | + Smaller Font

These choices were on a web site I visited recently. A good idea, but the JavaScript was not readily available. Does anyone have it?

I have been frustrated in figuring this out myself (but I am no techie!).

I often see this technique in use — just today, when I tried to google on this topic, I saw a charming implementation on a blog, with three font-size buttons at the top of the screen. But none of the samples I have found produces that effect.

I would suggest you search within AListApart — it seems to have very many clever bits of code. And you can look at these:

This one simply enlarges font size if it is below a certain threshold (you don’t have to click on anything):
A JavaScript fix for text that's too tiny

AListApart has one that uses alternate style sheets and JavaScript to change font sizes:
Alternative Style: Working with alternate style sheets

Another method also uses alternate style sheets (and requires PHP):
The unobtrusive degradable Ajax style sheet switcher!

John Woram · 09-06-2006, 11:30 AM

Would this do what you want?

Code:

<script type="text/javascript">
function resize(k){
switch (k){
case 1: document.getElementById('changeSize').style.fontSize="150%"; break;
case 2: document.getElementById('changeSize').style.fontSize="75%"; break;
}}
</script>
</head>
 
<body>
<p><a href="javascript:resize(1)">Bigger</a></p>
<p><a href="javascript:resize(2)">Smaller</a></p>
<p id="changeSize">This is a test paragraph</p>
</body>

Hmmm, when I preview this, I see ".fontSi" and "ze" with a space between them that of course shouldn't be there.

ktinkel · 09-06-2006, 01:19 PM

Quote:

Originally Posted by John Woram

Would this do what you want?
<script type="text/javascript">
function resize(k){
switch (k){
case 1: document.getElementById('changeSize').style.fontSi ze="150%"; break;
case 2: document.getElementById('changeSize').style.fontSi ze="75%"; break;
}}
</script>
</head>

<body>
<p><a href="javascript:resize(1)">Bigger</a></p>
<p><a href="javascript:resize(2)">Smaller</a></p>
<p id="changeSize">This is a test paragraph</p>
</body>

Hmmm, when I preview this, I see ".fontSi" and "ze" with a space between them that of course shouldn't be there.

I edited your message, enclosing the code in CODE thingies.

The forum software forced a line break in your text and it came out as a space. Now it forced the window to be wide enough instead.

John Woram · 09-07-2006, 05:12 AM

ktinkel wrote: "I edited your message ..."

Thanks! I didn't know about the CODE wraps. Also, here's an improvement (I think

). Every time the "Bigger" link (same as before) is clicked, the function increases font size by 10%.

Code:

 
function bigger(){
k = k + (.1 * k);
document.getElementById('changeSize').style.fontSize=k + "%";
}

Replace the "+" with a "-" to write another function to reduce the font size.

Kelvyn · 09-07-2006, 05:32 AM

Quote:

Originally Posted by dthomsen8

+ Larger Font | + Smaller Font

I use a script for this which also sets a cookie storing the users prefered font size.

Code:

<!--

//TEXT RESIZE
var prefsLoaded = false;
var defaultFontSize = 70;
var currentFontSize = defaultFontSize;

function revertStyles(){
    currentFontSize = defaultFontSize;
    changeFontSize(0);
}

function changeFontSize(sizeDifference){
    currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

    if(currentFontSize > 100){
        currentFontSize = 100;
    }else if(currentFontSize < 70){
        currentFontSize = 70;
    }

    setFontSize(currentFontSize);
    createCookie("fontSize", currentFontSize, 365);
};

function setFontSize(fontSize){
    var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
    document.body.style.fontSize = fontSize + '%';
};


function setUserOptions(){
  var cookie = readCookie("style");
    if(!prefsLoaded){

        cookie = readCookie("fontSize");
        currentFontSize = cookie ? cookie : defaultFontSize;
        setFontSize(currentFontSize);
        
        prefsLoaded = true;
    }

}

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;
}

I use an image map to display & utilise font size icons - snippet from this:

Code:

<area shape="rect" coords="57,11,78,30" title="Increase size" href="#Size+" onclick="changeFontSize(1);return false;" />
<area shape="rect" coords="90,12,110,30" title="Decrease size" href="#Size-" onclick="changeFontSize(-1);return false;" />
<area shape="rect" coords="119,12,140,29"title="Default size" href="#DefaultSize" onclick="revertStyles(); return false;" />

See this on a Joomla site under construction (so ignore most of the content!)

iamback · 09-25-2006, 03:51 AM

I particularly like the last of these, mainly because it's totally unobtrusive: there's just plain HTML, without any "onload", "onclick" or other event attributes in sight (let alone "javascript protocol" links!). The links that "cause" the switching merely have class that the (linked) JavaScript picks up on and link to a normal URL. Even better, the switching works without JavaScript as well.

This is JavaScript how it should be done these days, unobtrusive (nothing but links to scripts in the head section) and degradable (the functionality is still provided without JavaScript, because the switch links link to URLs that take over the work of the JavaScript).

It's not only a text size switcher, but a nice model of a stylesheet switcher in general. And it demonstrates the JavaScript techniques I really want to learn: I feel that with the "unobtrusive movement" JavaScript has finally come of age; coding techniques are much better now, and HTML stays clean of needless clutter.

09-06-2006, 06:52 AM	#1
dthomsen8 Member Join Date: Aug 2005 Location: Philadelphia, PA 19130 Posts: 2,158	Larger Font/Smaller Font JavaScripts + Larger Font \| + Smaller Font These choices were on a web site I visited recently. A good idea, but the JavaScript was not readily available. Does anyone have it?

09-07-2006, 05:12 AM	#5
John Woram Member Join Date: Aug 2005 Posts: 28	ktinkel wrote: "I edited your message ..." Thanks! I didn't know about the CODE wraps. Also, here's an improvement (I think). Every time the "Bigger" link (same as before) is clicked, the function increases font size by 10%. Code: function bigger(){ k = k + (.1 * k); document.getElementById('changeSize').style.fontSize=k + "%"; } Replace the "+" with a "-" to write another function to reduce the font size.

09-25-2006, 03:51 AM	#7
iamback Member Join Date: Oct 2005 Location: Amsterdam, NL Posts: 4,894	I particularly like the last of these, mainly because it's totally unobtrusive: there's just plain HTML, without any "onload", "onclick" or other event attributes in sight (let alone "javascript protocol" links!). The links that "cause" the switching merely have class that the (linked) JavaScript picks up on and link to a normal URL. Even better, the switching works without JavaScript as well. This is JavaScript how it should be done these days, unobtrusive (nothing but links to scripts in the head section) and degradable (the functionality is still provided without JavaScript, because the switch links link to URLs that take over the work of the JavaScript). It's not only a text size switcher, but a nice model of a stylesheet switcher in general. And it demonstrates the JavaScript techniques I really want to learn: I feel that with the "unobtrusive movement" JavaScript has finally come of age; coding techniques are much better now, and HTML stays clean of needless clutter. __________________ Marjolein Katsma Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr. Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Font site, Flash movie, free font	ktinkel	Fonts & Typography	2	12-03-2006 01:17 PM
Font ID please!!	Dulce_Diesel	Fonts & Typography	4	11-04-2006 12:08 PM
Font Sizes in <font> or CSS	dthomsen8	Web Site Building & Maintenance	10	02-27-2006 06:14 AM
Font "activation" by font managers	lindaniel	Fonts & Typography	5	07-02-2005 11:39 AM
Font Management: Font Agent Pro	michelen	Fonts & Typography	13	03-25-2005 10:25 AM