How to change font size for web pages using Javascript & Coldfusion

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

jnag - 24 May 2007 22:11 GMT

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 write
this piece of code. Any help is appreciated.

Thanks,
jnag

Reply to this Message

Bart Van der Donck - 25 May 2007 10:29 GMT

> I have a website with various font options (small to
> large) buttons that the user can click on the banner,
[quoted text clipped - 4 lines]
> the stylesheet accordingly and how to write this piece
> of code.

One way is to use a camelcase:

<script type="text/javascript">
function f(n) {
document.getElementById('C').style.fontSize = n
}
</script>
<div id="C">Text</div>
<input type="button" onClick="f('18px')" value="18px">
<input type="button" onClick="f('200%')" value="200%">
<input type="button" onClick="f('36pt')" value="36pt">
<input type="button" onClick="f('2cm')" value="2cm">
<input type="button" onClick="f('8em')" value="8em">
<input type="button" onClick="f('2.5in')" value="2.5in">
<input type="button" onClick="f('18pc')" value="18pc">

Variant, changing CSS-classes:

<head>
<title>My test page</title>
<style type="text/css">
.one { font-size: 22px }
.two { font-size: 6em }
</style>
</head>

<body>
<div id="C">Text</div>
<input type="button" value="22px"
onClick="document.getElementById('C').className='one'">
<input type="button" value="6em"
onClick="document.getElementById('C').className='two'">
</body>

Hope this helps,

--
Bart

Reply to this Message

jnag - 29 May 2007 16:33 GMT

> > I have a website with variousfontoptions(small to
> > large) buttons that the user can click on the banner,
[quoted text clipped - 43 lines]
> --
> Bart

Thanks. My problem is this. I have a index.cfm in which I have all the
<link rel="....") statements which define the various stylesheets.
Then, I have the <script> tag for the styleswitcher javascript
function. This index.cfm refers to modHeader.cfm in which I have the
call to the javascript function based on an onClick() event. I think
the javascript function is not being recognized, since the styles are
not changing though everything seems alright.

Reply to this Message

Bart Van der Donck - 31 May 2007 21:44 GMT

[ snip ]

>> <head>
>> <title>My test page</title>
[quoted text clipped - 11 lines]
>> onClick="document.getElementById('C').className='two'">
>> </body>

> Thanks. My problem is this. I have a index.cfm in which
> I have all the <link rel="....") statements which define
> the various stylesheets.

No problem; you could use my second code example (with the CSS-
classes) and load the styles using

<link rel="stylesheet" href="profile.css" type="text/css">

> Then, I have the <script> tag for the styleswitcher
> javascript function. This index.cfm refers to modHeader.cfm
> in which I have the call to the javascript function based on
> an onClick() event. I think the javascript function is not
> being recognized, since the styles are not changing though
> everything seems alright.

It could be many things. I'm guessing at a typo, errorneous CSS/js
call, ...

Every page that uses the javascript and the CSS must load it
separately (so, both index.cfm and modHeader.cfm).

Could you post the (shortened) code that causes the problem ?

--
Bart

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / May 2007

How to change font size for web pages using Javascript & Coldfusion