Guest Post: change text size onclick with JavaScript
I have been featured on the David Walsh Blog with a post telling you how to Change Text Size On Click With Javascript. My code and explanation is there, but I do have a nice sample of the script in action.
Share your thoughts in the comments!
Make text bigger | Make text smaller
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
[...] a simple example of this all put together. This works flawlessly on at least IE, Firefox, Opera, and Safari (others [...]
I am aware that the links and things do not resize on this page because this WordPress theme is inaccessible :(
However, I encourage you to copy and paste the code into your Firebug console and test it out on an accessible site (replace “multiplier” with a 1) and convince yourself that this method works quite well.
I encourage any questions about this.
I tried your coding to make my resume website text go bigger on click however it did not work.
Can you explain to me what I am doing wrong? I put the script coding in the
function resizeText(multiplier) {
var fontsz = “1.0em”; //Default to 1em
if (Cookie.read(’site_font_size’)) {
// Set fontsz to the cookie value if it exists
fontsz = Cookie.read(’site_font_size’);
}
fontsz = parseFloat(fontsz) + (multiplier * 0.2) + “em”;
// Change body text size
document.body.style.fontSize = fontsz;
//Set a new cookie
var myCookie = Cookie.write(’site_font_size’, fontsz, {
domain: ‘eriwen.com’,
duration: 365 //Save for 1 year
});
}
and I put this coding in the
Make text bigger
|
Make text smaller
Is there something else that I am suppose to do.
Please advise. Thank you.
The Cookie functionality requires MooTools, though you could certainly write your own. Don’t forget the attach click events as well.
NOTE: In light of the above comment, I have converted eriwen.com to be more fluid so that everything does resize as one would hope. :)
Hi, it’s a nice javascript. Too bad you don’t have example which resize all the page. But thanks anyway! (I need it!) :)
@bima:
Actually you’re in luck! The method I describe DOES work on all page elements and you can check out a demo at: http://eriwen.com/examples/save-font-size-prefs-example.php
and see my new post at: http://davidwalsh.name/save-text-size-preference-mootools-12
Hi Eric
Thanks for this tip. I a working on a website for a church and the members need to be able to read larger print as an option. This will totally solve the problem for me. Thanks again. I am in the research mode now – I have not yet implemented it but I tested it on your blog – looks good. Will let you know later if it works for me.
Thanks again
Dee