469,301 Members | 2,071 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,301 developers. It's quick & easy.

JavaScript to change Font Size

I am new to using javascript in conjunction with css, so please bear with me....

I have noticed that on the ESPN site, as well as some others, they implement a nifty little script that allows the user to select a larger or smaller font size by pressing a gif of a smaller or larger letter (see http://sports.espn.go.com/golf/news/story?id=2463902 for an example; the control is in the right column, below the ads).

Can someone either point me to a script that does this or (even better) suggest a good reference to better understand this technique?

Your assistance is appreciated.

-Stephen
Jun 6 '06 #1
10 28579
Banfa
9,064 Expert Mod 8TB
So it's quite a clever little trick, I suggest that you look at the page source and DOM (using FireFox of cource since IE doesn't do this or have good page search facilities).

In the page source look for fontsize and text11. But basically it does the following
  1. Load the font size from a cookie, use a default if the cookie does not exist
  2. Use javascript to write a short section of style code at the top of the page defining the style class .text11 with the font size loaded from the cookie. Ths style is already applied to the divs that the author wanted to control the size of.
  3. Using javascript (although this is only so it shows the selected size) write 4 links to change the font size. These call a javascript function that writes a new value for the font size to the cookie and then reload the page.

I would say that it is all easily liftable from the page you reference.
Jun 6 '06 #2
This is just the guidance that I needed. Thanks!
Jun 7 '06 #3
matcom
1
So it's quite a clever little trick, I suggest that you look at the page source and DOM (using FireFox of cource since IE doesn't do this or have good page search facilities).

In the page source look for fontsize and text11. But basically it does the following
  1. Load the font size from a cookie, use a default if the cookie does not exist
  2. Use javascript to write a short section of style code at the top of the page defining the style class .text11 with the font size loaded from the cookie. Ths style is already applied to the divs that the author wanted to control the size of.
  3. Using javascript (although this is only so it shows the selected size) write 4 links to change the font size. These call a javascript function that writes a new value for the font size to the cookie and then reload the page.

I would say that it is all easily liftable from the page you reference.
Hello.

As you can see I am brand new here and brand new to CSS and javascript. I am trying to implement the same script on my site and am having troubles. I lifted the font size script from that page referenced above but it isn't working. Do I need to create a Style Sheet and add some code to it for this script to work on my site? I have searched the espn source code but can't see where a style sheet is referenced.

Sorry for such a newbie question but this has me frustrated. Alternatively, if you know of a ready-made script that will perform the same function, i'd be happy to use that for now and take the time to learn what it means later as i'm in a pinch.

thank you again
Aug 13 '06 #4
Hello.

As you can see I am brand new here and brand new to CSS and javascript. I am trying to implement the same script on my site and am having troubles. I lifted the font size script from that page referenced above but it isn't working. Do I need to create a Style Sheet and add some code to it for this script to work on my site? I have searched the espn source code but can't see where a style sheet is referenced.

Sorry for such a newbie question but this has me frustrated. Alternatively, if you know of a ready-made script that will perform the same function, i'd be happy to use that for now and take the time to learn what it means later as i'm in a pinch.

thank you again
I'm brand new, too, so I sympathize.

I tried the script and had some problems until I figured out that I needed to surround the paragraphs I wanted to be resizable with the "text11" div class, like this (no period before "text11"):
Expand|Select|Wrap|Line Numbers
  1. <div class="text11"><p>Here's the text I wanted to be resizable.</p></div>
I was using a style sheet, but I commented it out to test the resizing script. When I got the script working I uncommented my style sheet and it worked fine with the script. No changes were necessary to my style sheet (of course, there's no ".text11" style in my style sheet). I may have made some other tweaks to the JavaScript, but I think this was the one that counted. Hope this helps.
Aug 21 '06 #5
Arielle
76
Two ways...

You can use the javascript either to change just the font size directly or (better way) is to set the elements class name using DOM.

document.getElementById("myelement").className = "myClass"

You could easily have an array that is governened by the arrow keys that rotates through the array to set fonts.
Aug 22 '06 #6
Rokko
1
I am also trying to utilize this function and cannot seem to get it to work. I've tried using the <div class="text11"> but still no luck. Maybe I am lifting the wrong code from the ESPN site. Any thoughts?

Thank you
Rokko
Nov 2 '06 #7
Have you had a look at the JQuery Library. It is very easy to traverse the dom using jquery and changing the layout of your page.

Another method of possibly changing your Font Size is to apply a new class using Javascript.

For example. You have a set font for the page and two additional css classes with larger or smaller font sizes.

[HTML]<style type='text/css'>
/* DIV Container */

#container .classNormal{
font-size: medium;
}

.classSmaller {
font-size: small;
}
.classLarger {
font-size: large;
}
</style>[/HTML]

Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript' language='javascript'>
  2.  function nFont(id, fontClass) {
  3.    document.getElementById(id).setAttribute('className', fontClass);
  4.   /*or
  5.   document.getElementById(id).className = fontClass;
  6. */
  7.  
  8.    return false;
  9. }
  10.  
  11. </script>
[HTML]

Font:&nbsp;<a href='#' onclick='javascript: nFont('container', 'classSmaller');'>[-]</a>&nbsp;<a href='#' onclick='javascript: nFont('container', 'classLarge');'>[+]</a>&nbsp;<a href='#' onclick='javascript: nFont('container', 'classNormal');'>[reset]</a>



<div id='container' class='classNormal'>
Here is my font
</div>
[/HTML]

I hope that explains some of it... I would be more than happy to help some more... good learning experience for me too... i'm very fresh to javascript myself...
Apr 6 '07 #8
mrhoo
428 256MB
I like to set all font-sizes in ems.
Then setting the document.body.fontSize style enlarges or reduces
everything that inherits from body...
Apr 6 '07 #9
Habes
1
Try this code, it works fine for you, current font style is stored in cookie for future visits, I think it is simple and easy to understand

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function setActiveTextSize(activetSize){
Csize=document.getElementById('articleBody').style .fontSize;
if(Csize)
document.getElementById(Csize).className=Csize;

document.getElementById(activetSize).className='ac tive';
document.getElementById('articleBody').style.fontS ize = activetSize;
// write/rewrite cookie
createCookie("ActiveFontSize",activetSize,1000);
}
function createCookie(cookie_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 = cookie_name+"="+value+expires+"; path=/";
}
function readCookie(cooke_name) {
regexpr = cooke_name+ '=(.*?)(;|$)';
var results = document.cookie.match (regexpr);
if ( results ) {
return ( unescape ( results[1] ) );
}
else { return null; }
}

function applystyle(){
var Currentfontsize ='medium';
if (readCookie('ActiveFontSize')) {
var Currentfontsize = readCookie('ActiveFontSize');
setActiveTextSize(Currentfontsize);
} else {

setActiveTextSize(Currentfontsize);
}
document.getElementById(Currentfontsize).className ='active';
}
</script>
<style>
.textSizeTool span {
padding:2px;
margin:2px;
cursor:pointer;
}
.active{
border:thin;
background:#CCCCCC;
}
span:hover {
background:#CCCCCC;
}
.articleBody{
font-size:medium;
}
</style>
</head>
<body>
<div class="textSizeTool"><span style="font-size:small" class="small" id="small" onclick="setActiveTextSize('small');">T</span><span style="font-size:medium" class="medium" id="medium" onclick="setActiveTextSize('medium');">T</span><span style="font-size:large" class="large" id="large" onclick="setActiveTextSize('large');">T</span></div>
<div class="articleBody" id="articleBody">
A strong quake hit near Sakhalin island on Thursday, killing two people in a Russian fishing village and generating small tsunami waves that hit northern Japan.

The quake, with a preliminary magnitude of 6.4, struck at 0238 GMT on the southern tip of Sakhalin, just north of Japan, according to Japan's Meteorological Agency.

Viktor Beltsov, a spokesman for the Russian Emergency Situations Ministry, told The Associated Press that one woman died and two others were injured when the roof of a Palace of Culture collapsed in the small port town of Nevelsk. A man in Nevelsk died of a heart attack.
<script>
applystyle();
</script>
</div>
</body>
</html>[/HTML]
Aug 2 '07 #10
drhowarddrfine
7,435 Expert 4TB
I didn't read all this so I may be out of context but applying the styles in the first post only applied those styles to the <div> and not the <p>. Move the class/id name to the <p> and that should work.
Aug 2 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by kmunderwood | last post: by
16 posts views Thread by Coder Droid | last post: by
15 posts views Thread by lharby | last post: by
2 posts views Thread by Bjoern | last post: by
5 posts views Thread by VB Programmer | last post: by
2 posts views Thread by Dave | last post: by
3 posts views Thread by # Cyrille37 # | last post: by
5 posts views Thread by _Who | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.