Hey, ho scritto questo articolo 14 anni e 11 mesi fa.
È molto probabile che nel frattempo le cose siano cambiate.
È molto probabile che nel frattempo le cose siano cambiate.
via: http://devolux.org/2009/03/jquery-font-resizer/
I just programmed a simple but nicely working jQuery font resizer. I intend to create a jQuery and a WordPress plug-in from it.
Required are the jQeruy core and the jQuery plug-in “COOKIE”. Here you see the font resizer jQuery code:
$(document).ready(function(){ $("#small").click(function(event){ event.preventDefault(); $("#page").css("font-size","8px"); $.cookie("fontSize","8px"); }); $("#default").click(function(event){ event.preventDefault(); $("#page").css("font-size","10px"); $.cookie("fontSize","10px"); }); $("#large").click(function(event){ event.preventDefault(); $("#page").css("font-size","12px"); $.cookie("fontSize","12px"); }); // Cookie var fontSize = $.cookie("fontSize"); // Calling Cookie if(fontSize == "8px") { $("#page").css("font-size","8px"); }; if(fontSize == "10px") { $("#page").css("font-size","10px"); }; if(fontSize == "12px") { $("#page").css("font-size","12px"); }; });In addition, the font resizer affects two other files of your website. You must insert three links into your html document, just as it is done here:
<html> <head> <title>font resizer</title> <link rel="stylesheet" href="fontResizer.css" type="text/css" /> <script type="text/javascript" src="jquery-1-3-2.js"></script> <script type="text/javascript" src="cookies.js"></script> <script type="text/javascript" src="fontResizer.js"></script> </head> <body> <div id="page"> <p> <a id="small" href="http://jquery.com/">small</a> <a id="default" href="http://jquery.com/">default</a> <a id="large" href="http://jquery.com/">large</a> </p> <div id="content"> 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. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <p id="test">Duis autem vel eum iriure dolor in hendrerit</p> in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. 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. 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. </div> </div> </body> </html>Finally it is essential that only the outward element of your document owns an absolute CSS font size. All elements inside it must obtain relative font sizes. These will be in relation to the value set in the outward container. Have a look at the following CSS:
div#page {font: normal 10px Verdana;} a {font-size: 110%;} div#content {font-size: 120%;}This will result in an 11px font size for all a-element and a12px font size for divs. That’s it. I hope you will enjoy it.
Note: If you should use this code on your homepage I’d be very graceful for creating also a link to my website.
e adesso si ragiona per integrarlo bene a PHP-Fusion..