How to change font size for web pages using Javascript & Coldfusion
jnag
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
> 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,
--
Bart
jnag
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
> 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='one'">
>> <input type="button" value="6em"
>> 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