468,525 Members | 2,234 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

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

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

May 24 '07 #1
3 20729
jnag wrote:
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.
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='o ne'">
<input type="button" value="6em"
onClick="document.getElementById('C').className='t wo'">
</body>

Hope this helps,

--
Bart

May 25 '07 #2
On May 25, 5:29 am, Bart Van der Donck <b...@nijlen.comwrote:
jnag wrote:
I have a website with variousfontoptions(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 thejavascriptfunction that willchange
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='o ne'">
<input type="button" value="6em"
onClick="document.getElementById('C').className='t wo'">
</body>

Hope this helps,

--
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 <scripttag 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.

May 29 '07 #3
jnag wrote:
On May 25, 5:29 am, Bart Van der Donck wrote:
[ snip ]
> <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='o ne'">
<input type="button" value="6em"
onClick="document.getElementById('C').className='t wo'">
</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 <scripttag 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

May 31 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Michael Hill | last post: by
6 posts views Thread by Liam Gibbs | last post: by
15 posts views Thread by lharby | last post: by
4 posts views Thread by Richard Cornford | last post: by
9 posts views Thread by Dr John Stockton | last post: by
reply views Thread by csgraham74 | last post: by
4 posts views Thread by hgraham | last post: by
3 posts views Thread by coyttl | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.