Installation:
Step One: Include the scripts
Include the jquery.fonttweaks.js, jquery.js and jquery-ui-1.8.14.custom.min.js files in the head section of the page. And link the css stylesheets in the head section.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.fonttweaks.js"> </script> <link rel="stylesheet" type="text/css" href="js/jquery-ui-1.8.14.custom_2/css/ui-darkness/jquery-ui-1.8.14.custom.css" /> <link rel="stylesheet" type="text/css" href="css/ft_redglass.css" /> <link rel="stylesheet" type="text/css" href="css/webfonts.css" />
Changing styles:
To change control styles simply change the ft_colorglass.css to the desired color. Here is a list of the available stylesheets:
The jquery-ui-1.8.14.custom.css stylesheet is needed to style the sliders on the control.
- css/ft_redglass.css
- css/ft_orangeglass.css
- css/ft_yellowglass.css
- css/ft_blueglass.css
- css/ft_greenglass.css
- css/ft_purpleglass.css
- css/ft_greyglass.css
- css/ft_darkglass.css
- css/ft_blackglass.css
Step Two: Include The HTML Structure
<div class="fonttweaks">
<!-- fontfamily selector -->
<select class="famcontrol">
<option selected="selected" value="selectfont" >Select a font...</option>
<option value="Fredoka One" fontname="Fredoka One" style="font-family:Fredoka One;">Fredoka One</option>
...
</select>
<!-- font size slider -->
<div class="fsize_slider_container">
<div class="fsize_slider_bar">
<div class="fsize_slider_caption"></div>
<div class="fsize_slider_handle"></div>
</div>
</div>
<!-- end font size slider -->
<!-- start color sliders -->
<div class="color_slider_wrap">
<div class="slider_red"></div>
<div class="slider_green"></div>
<div class="slider_blue"></div>
<div class="slider_opacity"></div>
<div class="color_caption"></div>
</div>
</div>
<!-- end .fonttweaks div
Including fonts
You can add webfonts to the options list by adding another option and set your font name to all the properties. Make sure to add the @import in the webfonts.css for your fonts.
Targeting:
You should target the container that holds the .fonttweak div. example:
$('#wrap').fonttweaks({
targettext: '.text1',
minfontsize: 2,
maxfontsize: 125,
});
The #wrap container contains the .fonttweaks div and will target the .text1 element.
Including the javascript on the page.
Wrap the jQuery in a document.ready script like so and inlcude it on the page.
<script type="text/javascript">
$(document).ready(function(){
$('#wrap').fonttweaks({
targettext: '.text1', //required
minfontsize: 2, //optional default=2
maxfontsize: 125, //optional default=190
red: 155, //optional default=155
blue: 155, //optional default=155
green: 155, //optional default=155
easing: 'easeOutBounce', //optional default="swing"
openspeed: 2000, //optional default=2000
fadeSpeed: 2000, //optional default=2000
closedelay: 3000, //optional default=3000
hover: 'true', //optional default="true"
});
});
</script>
Options:
- targettext: '.text1', - This is the text with a class of "text1" that will be changed.
- minfontsize: 2, - this is the minimum font size.
- maxfontsize: 125, - thisis the maximum font size.
- red: 155, these colors are the default font color - they correspond to rgb(red,blue,green) colors. You can override the color by setting the text color in your css.
- blue: 155,
- green: 155,
- easing: "swing", this is the easing for the open and close animation. Can use third party easing like jQuery-ui easing.
- openspeed: 2000, this is the speed of the open and close animation.
- fadeSpeed: 2000, - this is the speed in milleseconds that the text fades in and out when changing the font-family.
- closedelay: 3000, - this is the time in milleseconds that the controls will remain open after the cursor hoversout(mouseout) of the .fonttweak control div.
- hover: 'true', - set to true to have the controls open on hover - if set to false the controls will stay open indefinitely.
- Use Multiple controls on one page.
Misc:
Feel free to style .fonttweaks to have a starting opacity less than zero. The plugin animates the controls to opacity:1; on mouseover.
Support:
For questions and concerns please email me at nuvuscripts@gmail.com.