Welcome, Guest. Please login or register.
Did you miss your activation email?
February 12, 2012, 04:12:07 AM

Login with username, password and session length
Search:     Advanced search
Interested in joining the WebsiteBaker team?
For more Information read here or on our new website.
149621 Posts in 21098 Topics by 7537 Members
Latest Member: lotte2
* Home Help Search Login Register
Pages: [1]   Go Down
Print
Author Topic: jQuery font resizer  (Read 1453 times)
Argos
WebsiteBaker Org e.V.

Offline Offline

Posts: 2084


WWW
« 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:
<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:
<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 » Logged

Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
WB Showcase: http://www.mywebsitebaker.com/pages/showcase.php?v&category_id=1242&count=30
----------------------------------------------------------------
Please don't request personal support, use the forums!
maverik

Offline Offline

Posts: 1541



WWW
« 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:
<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:
<script type="text/javascript">
  $(document).ready(function(){
  $('#fontsizer').jfontsizer({
    applyTo: '.content',
    changesmall: '3',
    changelarge: '6',
    expire: 30
  });
});

</script>

body

Code:
<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/
Logged

Signatur wird geladen...
Argos
WebsiteBaker Org e.V.

Offline Offline

Posts: 2084


WWW
« 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.
Logged

Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
WB Showcase: http://www.mywebsitebaker.com/pages/showcase.php?v&category_id=1242&count=30
----------------------------------------------------------------
Please don't request personal support, use the forums!
Pages: [1]   Go Up
Print
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.16 | SMF © 2011, Simple Machines Valid XHTML 1.0! Valid CSS!