DTP


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


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 09-06-2006, 06:52 AM   #1
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default 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?

dthomsen8 is offline   Reply With Quote
Old 09-06-2006, 08:13 AM   #2
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,187
Default

Quote:
Originally Posted by dthomsen8 View Post
+ 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!

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-25-2006, 03:51 AM   #3
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

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
iamback is offline   Reply With Quote
Old 09-06-2006, 11:30 AM   #4
John Woram
Member
 
Join Date: Aug 2005
Posts: 28
Default

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.

Last edited by ktinkel; 09-06-2006 at 01:23 PM. Reason: add CODE & /CODE to format the text
John Woram is offline   Reply With Quote
Old 09-06-2006, 01:19 PM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,187
Default

Quote:
Originally Posted by John Woram View Post
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.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-07-2006, 05:12 AM   #6
John Woram
Member
 
Join Date: Aug 2005
Posts: 28
Default

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.
John Woram is offline   Reply With Quote
Old 09-07-2006, 05:32 AM   #7
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

Quote:
Originally Posted by dthomsen8 View Post
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!)

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

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


All times are GMT -8. The time now is 12:39 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.
Contents copyright 2004–2019 Desktop Publishing Forum and its members.