Jump to content
Sign in to follow this  
Digirunt

Font Size

Recommended Posts

If you want to allow users to dynamically change the font size of text on your page without style sheets you can use the JavaScript [ getElementById ] method as follows;

 

><html>
<head>
<title>YOUR PAGE</title>

<script LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers

                      function ChangeFontSize(id, size) {
           document.getElementById(id).style.fontSize = size + "px";
                      }

// End hiding script from old browsers -->
</SCRIPT>

</head>


<body>

<FONT FACE="Arial"  SIZE=4>
<a href="#" onclick="ChangeFontSize('lyr','20')">A</a></font>

<FONT FACE="Arial"  SIZE=5>
<a href="#" onclick="ChangeFontSize('lyr','30')">A</a></font>
</font>

<div id="lyr">

Text to change goes here

</div>


</body>
</html>

 

I've not tested whether its valid through W3 or Bobby though but I'll leave that up to you!

Share this post


Link to post
Share on other sites

It looks like you have an extra </font> in your script (right before your <div id> tag).

 

I then took your example, tweaked it slightly, and used it as an example on my CuteSITE Builder support web site. Take a look:

 

Click here

 

-kw

Share this post


Link to post
Share on other sites

Very cool! I can think of a few uses indeed.

 

Works great in Opera and IE but not in Netscape, Mozilla or Firebird.

Share this post


Link to post
Share on other sites

> <script type="text/javascript">

function ChangeFontSize(id, size) {
  	 document.getElementById(id).style.fontSize = size + "px";
}
 </script>

 

 

and

 

><FONT FACE="Arial"  SIZE=4><a href="#" onclick="ChangeFontSize('lyr','13')">A</a></font>
<FONT FACE="Arial"  SIZE=5>
<a href="#" onclick="ChangeFontSize('lyr','18')">A</a></font>
<FONT FACE="Arial"  SIZE=6>
<a href="#" onclick="ChangeFontSize('lyr','22')">A</a></font>

 

and

 

><div id="lyr">

 <H4>Going Under</H4>
<BR>
I remember that night, that terrible night<BR>
I remember the words that you said<BR>
I relive the pain again and again<BR>
Those words paranoia has fed.<BR>
I still see your smile, it haunts all the while<BR>
I see it by night and by day<BR>
I feel I am cursed, where nightmares are nursed<BR>
And devils and demons hold sway.<BR>
That cut I still feel, it might never heal<BR>
The wound continues to ooze<BR>
Never again can I win, because of your sin<BR>
Forevermore destined to lose.<BR>
Borne down by the weight, I live out my fate<BR>
And wade through an acre of mud<BR>
Though all hope has gone, I struggle along<BR>
As I drown in a river of blood.<BR>
<BR>
</div>

Share this post


Link to post
Share on other sites

Hide script from old browsers, could that be it.

 

Does firebird/mozilla think it can't support this?

 

when really it can.

Share this post


Link to post
Share on other sites

Yea, Digirunt - the page you posted DOES work but (for me) KW's does not :D

Share this post


Link to post
Share on other sites

???, I added the hiding line after I used the script on my site.

 

thats all I changed because everything else seemed to be ok.

Share this post


Link to post
Share on other sites

Hi,

 

Actually if your coding for bobby, you should not be using Javascript unless you can provide an alternative.

 

I have desinged a univeristy site last year using ASP which is all server side work so that colours and text sizes remain constant when selected by the disabled user.

 

Practing working with bright orange and purple text hurts your eyes after a while.

 

Some companies have expressed intrest in my coding too Dance

 

Jim

Share this post


Link to post
Share on other sites

That's a good point raised and that's why I am not using any Javascripts on my current site.

 

I have never tried anything with ASP, I bought a book [ASP.NET using VB.NET ] and began a tutorial once but it required installation of a .net framework then tons of other stuff and I soon became bogged down and just didn't have time to take it further.

 

Book now gathers dust.

 

Not knowing any VB I figured maybe I was trying to run before I could crawl so I decided to learn HTML and Javascript instead.

 

I am trying to focus more on accessibilty at the moment because it seems to go hand in hand with good design and that is something I feel many sites today lack.

 

What would be a good next step for me on the learning ladder?

 

Thanks

:D

Share this post


Link to post
Share on other sites

I will guess that the reason my example did not work with Netscape variant browsers is because I cheated a little, and did not put the Javascript function in the HEAD section of my page.

 

Let me play around and see if that makes a difference.

 

FYI, I'm using CuteSITE Builder, and one of the few limiting factors at all with CSB is that there is not a definitive way to insert code designated for the HEAD section of a web page. That's because with CSB the web page source code is not generated until you are ready to publish. And CSB ids designed to where you don't want to be editing the HTML source manually - ever.

 

-kw

Share this post


Link to post
Share on other sites

Well, I tried a couple of things ... but still could notr make it work with Mozilla's Firebird. I'm sure the problem is due to the fact that I am not inserting the code in the HEAD section of the page.

 

-kw

Share this post


Link to post
Share on other sites

I've been reading some wonderful articles by Jakob Nielsen recently on web site accessibility. I ran across a reference to his site while visiting w3c.org. Some of the articles are a little old, but a lot of the basic principles still hold.

 

Check out Dr. Nielsen's www.useit.com/alertbox/. "Alertbox" is his biweekly (more or less) column about web usability. A good place to start might be his Top Ten Web-Design Mistakes of 2002. If nothing else, he has some wonderful cartoons to illustrate his points. :)

 

I've changed some of my approaches after reading some of his articles. :D

Share this post


Link to post
Share on other sites

Totally agree,

I've been doing a lot of research on web site accessibility and usability.

I'm still pushing for a thread dedicated to just that.

Valid HTML, good design, good content don't seem to feature in many sites today.

 

Web sites are similar to professional cameras in that the more proffessional the camera is the more unessential features are removed?

A £500 camera will have motor rewind, built in flash and electronic operation whereas a £1500 camera will have manual rewind, no built in flash and manual operation.

 

Can you imagine if google had a 5 minute flash intro?

 

or if yahoo used mystery meat navigation?

 

It's unrealistic to build small family type sites that utilise all the major accessibility featrues but it important to get the basics right.

 

Simple user friendly navigation.

Quick page loading times.

Clear content and purpose.

Support for different browsers.

etc.

 

The link you opsted has some great tips and has gone into my fav's . . . thanks!

 

Thumbs Up

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...