spacer
Yehuda Shiran August 21, 2000
Changing the Font Size on the Fly
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Google to Shake Up Browsers With Own Launch
Mozilla's Ubquity Mashup: For The Masses?
iPhone Users Just Want to Have Fun
Color change is a relatively simple task for the browser, as the size of the element does not change and there is no need to reflow the document. This is not the case when you change other style properties, such as fontSize or fontFamily. When they change, the amount of space required by the element changes as well, and the browser needs to reflow the document to ensure a perfect layout. Let's take the following paragraph as an example. Mouse over and out of it:

Mouse over this paragraph and see how the font size changes to size 30. Mouse out and see it go down to 8. This is a good way to pack more text on a window-size page and let the user magnify the paragraph currently being read. See how the browser reflows the page as if this paragraph was originally written with the current font size.

Here is the code to implement it:

<SPAN STYLE="color:purple" onMouseOver="this.style.fontSize = '30'"
 onMouseOut="this.style.fontSize = '6'">
 Mouse over this paragraph and see how the font size changes to size 30.
 Mouse out and see it go down to 8. This is a good way to pack more text
 on a window-size page and let the user magnify the paragraph currently
 being read. See how the browser reflows the page as if this paragraph
 was originally written with the current font size.
</SPAN>

Learn more about the subject in Column 66, Dynamic Styles.


People who read this tip also read these tips:

Look for similar tips by subject:



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency
Intel eBook: Managing the Evolving Data Center
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Symantec eBook: The Guide to E-Mail Archiving and Management
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization
HP Webcast: Disaster Recovery Planning
Go Parallel Video: Performance and Threading Tools for Game Developers
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control
IBM Energy Efficiency eKIT: Learn How to Reduce Costs
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
HP Demo: StorageWorks EVA4400
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
The Partial Function Application in JavaScript · Creating Dynamic RSS Feeds with Ajax · Performance Optimizations for High Speed JavaScript
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Cablevision Deploys More Hotspots for Commuters · Dell Joins the Netbook Movement with its Inspiron Mini 9 · It's Official: Dell Enters the Netbook Fray