Author Topic: jQuery font resizer  (Read 4396 times)

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
jQuery font resizer
« on: January 06, 2010, 09:15:55 PM »
There are several ways to create a font resizer on your site, but here's one using jQuery. I took this part from another post of mine, to place it in this jQuery forum.

Download fontsizer.jquery.js from http://www.fluidbyte.net/index.php?view=JQuery-Font-Sizer and save it in your template dir.

Put this in the HEAD of your template:
Code: [Select]
<script type="text/JavaScript" src="<?php echo WB_URL?>/include/jquery/jquery-min.js"></script>
<script type="text/JavaScript" src="<?php echo TEMPLATE_DIR?>/fontsizer.jquery.js"> </script>

and
Code: [Select]
<script language="javascript">
  $(document).ready(function() {
  fontResizer('85%','100%','110%');
  });
</script>

Try different percentages to get it right for your site.
« Last Edit: January 06, 2010, 09:17:33 PM by Argos »
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline maverik

  • Posts: 1572
  • Gender: Male
  • ..:: viva los tioz ::..
Re: jQuery font resizer
« Reply #1 on: January 07, 2010, 03:08:16 AM »
Your statements about the link posted by you are incomplete and can not work that way. In the download package, there is a css file which must be integrated and the integration is another.

head

Code: [Select]
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR?>/default.css" media="all" />
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR;?>/jquery.jfontsizer.min.js"></script>

and

Code: [Select]
<script type="text/javascript">
  $(document).ready(function(){
  $('#fontsizer').jfontsizer({
    applyTo: '.content',
    changesmall: '3',
    changelarge: '6',
    expire: 30
  });
});

</script>

body

Code: [Select]
<div id="fontsizer"></div>
in default.css delete line 1 and 2 before upload

the div comes at the place where the link for resizing shout be and the applyto in code above is the class or id where the script will work. changesmall and changelarge will be a number between 1-10

sorry i cant better explain in english but you all can read at the page from the link above.

you can see it here http://wbsvn.developer-base.de/

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: jQuery font resizer
« Reply #2 on: January 07, 2010, 03:18:53 AM »
While you're right about the css (they are needed, but I just put the styles into my regular stylesheet, and forgot to mention them), the rest of the info was correct for version 1, which I used. In the mean time the script has arrived at version 2, and apparently has different code. Thanks for the update.
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

 

postern-length