WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => jQuery => Topic started by: Argos on January 06, 2010, 09:15:55 PM

Title: jQuery font resizer
Post by: Argos 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.
Title: Re: jQuery font resizer
Post by: maverik 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/
Title: Re: jQuery font resizer
Post by: Argos 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.