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

jnag · May 24, 2007

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

Bart Van der Donck · May 25, 2007

jnag said:
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='one'">
<input type="button" value="6em"
onClick="document.getElementById('C').className='two'">
</body>

Hope this helps,

jnag · May 29, 2007

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,

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.

Bart Van der Donck · May 31, 2007

jnag said:
On May 25, 5:29 am, Bart Van der Donck wrote:

[ snip ]

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

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 ?

How to change star rating color on mouseenter, on mouseout, and on onclick	0	Sep 28, 2018
How to force text re-render after padding change from javascript in Chrome?	22	Aug 13, 2010
Font selector using radio button	2	Aug 10, 2009
newbie: how to change webpage element dynamically	2	Apr 22, 2009
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
How to Change Browser settings dynamically through javascript	6	Dec 26, 2006
How to change the font style and size on the entire aspx page programatically	0	Dec 24, 2006
How to change the font style and size on the entire Aspx page programatically	8	Dec 24, 2006

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

jnag

Bart Van der Donck

jnag

Bart Van der Donck

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads