473,554 Members | 5,358 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

JavaScript to change Font Size

2 New Member
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 28784
Banfa
9,065 Recognized Expert Moderator Expert
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
skguine
2 New Member
This is just the guidance that I needed. Thanks!
Jun 7 '06 #3
matcom
1 New Member
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
wardweb
1 New Member
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 New Member
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.getEle mentById("myele ment").classNam e = "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 New Member
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
alettieri
1 New Member
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='javasc ript: nFont('containe r', 'classSmaller') ;'>[-]</a>&nbsp;<a href='#' onclick='javasc ript: nFont('containe r', 'classLarge');' >[+]</a>&nbsp;<a href='#' onclick='javasc ript: nFont('containe r', 'classNormal'); '>[reset]</a>



<div id='container' class='classNor mal'>
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 Contributor
I like to set all font-sizes in ems.
Then setting the document.body.f ontSize style enlarges or reduces
everything that inherits from body...
Apr 6 '07 #9
Habes
1 New Member
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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitl ed Document</title>
<script type="text/javascript">
function setActiveTextSi ze(activetSize) {
Csize=document. getElementById( 'articleBody'). style.fontSize;
if(Csize)
document.getEle mentById(Csize) .className=Csiz e;

document.getEle mentById(active tSize).classNam e='active';
document.getEle mentById('artic leBody').style. fontSize = activetSize;
// write/rewrite cookie
createCookie("A ctiveFontSize", activetSize,100 0);
}
function createCookie(co okie_name,value ,days) {
if (days) {
var date = new Date();
date.setTime(da te.getTime()+(d ays*24*60*60*10 00));
var expires = "; expires="+date. toGMTString();
}
else expires = "";
document.cookie = cookie_name+"=" +value+expires+ "; path=/";
}
function readCookie(cook e_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('Ac tiveFontSize')) {
var Currentfontsize = readCookie('Act iveFontSize');
setActiveTextSi ze(Currentfonts ize);
} else {

setActiveTextSi ze(Currentfonts ize);
}
document.getEle mentById(Curren tfontsize).clas sName='active';
}
</script>
<style>
.textSizeTool span {
padding:2px;
margin:2px;
cursor:pointer;
}
.active{
border:thin;
background:#CCC CCC;
}
span:hover {
background:#CCC CCC;
}
.articleBody{
font-size:medium;
}
</style>
</head>
<body>
<div class="textSize Tool"><span style="font-size:small" class="small" id="small" onclick="setAct iveTextSize('sm all');">T</span><span style="font-size:medium" class="medium" id="medium" onclick="setAct iveTextSize('me dium');">T</span><span style="font-size:large" class="large" id="large" onclick="setAct iveTextSize('la rge');">T</span></div>
<div class="articleB ody" 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

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

Similar topics

2
3162
by: kmunderwood | last post by:
I am having trouble changing the font size when extracting xml into an html web page. I think it can be done so many ways, that my searches bring up examples that I am not familiar with. I am a newbie at xml and xsl This is my xml("index.xml")page(I can not change this, it comes to me this way. <?xml version="1.0" encoding="iso-8859-1"...
16
14511
by: Coder Droid | last post by:
I'm trying my first table-less site, and I've bumped my head up against a wall. I can't change the font size within a div. Real quick, my style sheet has: ------------------------------------- body { font: 8pt "face" } #nav {float: left; width: 144px; } #test { font: 12pt; font-weight: bold } -------------------------------------
15
7167
by: lharby | last post by:
Basic question, is this possible? I have managed to crib a javascript function that allows the user to increase or decrease the font size of a page. (see http://www.northamptontoday.co.uk/ViewArticle.aspx?SectionID=317&ArticleID=867063 for example. A+ A- in top right). A div id is used to apply the function to text within that id. My...
2
57222
by: Bjoern | last post by:
Hi all, how can i change the Font Size of the Text in my Label. I will change it dynamic in the code. I tryed: int number = 11; label1.Font.Size = number; But this is not possible because Size is Write-Protected. There is only a Get-Method and no Set. Plz Help
5
130231
by: VB Programmer | last post by:
How can I change the font size of a text box dynamically? I tried this but it didn't work. It said 'Size is Read-Only'. Any other ways around this? Here's the code: txtDisplay.Font.Size = 10
2
41171
by: Dave | last post by:
How can I change the font size of a label? I have: Label1.Font.Size = "12" but it's telling me that property 'Size' is readonly. Thanks,
3
3020
by: # Cyrille37 # | last post by:
Hello, Font.Size Property is readonly. How can I change the Size of a Font ??? Thanks for your help cyrille
3
21027
by: jnag | last post by:
Hello, I have a website with various font options (small to large) buttons that the user can click on the banner, which runs through the site. Site contains both static and dynamic content. I have an onclick() event on the buttons. But, I am not sure where to put the javascript function that will change the stylesheet accordingly and how to...
5
3050
by: _Who | last post by:
I spent all day yesterday trying different things. Something has happened so I can't change font size. I have a table and in the first cell I have only text. I tried using the cell's Style to change the font size. I tried using the cell's attribute to change the font size. I tried adding a paragraph element and doing the above to it....
3
3832
by: reyo | last post by:
Hi, i design a dynamic web page.infact it will be a css generator. i have a question about visited link. i want to change color,font-size,font-weight etc. of a link when it is visited. when a user change font-size dynamically visited link's font-size will be change. i use dropdown list for font-size values . there are 24 links on the...
0
7580
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7781
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8017
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7538
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7869
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5421
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3543
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3531
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1113
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.