Text style-switcher with Jquery

This tutorial shows some basic functions and structures of Jquery. Jquery can be extremely helpful in a number of situations as shown in this tutorial.
The simple text formatting script shows how to change the font style, family, text decoration and other basic CSS styles on the fly with Jquery.
Explanation of the Jquery code has been provided in form of comments above each line. If you have any question or suggestion, please write to me or post a comment.
I will be glad to listen from you….
Don’t forget to enjoy the live demo 😉

     Live Demo     

     Download Script     

The code lies here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#switcher{
width:500px;
float:none;
border:1px solid #cccccc;
padding:4px;
margin-left: 20%;
margin-right: 50%;
}
.label{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
background-color:#8ED2FB;
padding:2px;
}
.button{
border:2px solid #999999;
background-color:#CCCCCC;
color:#FFFFFF;
font-size:11px;
width:150px;
margin:3px;
text-align:center;
cursor:pointer;
}
.activeButton{
background-color:#AFEC9D;
}
.speech{
color:#0066FF;
border:2px dashed #ececec;
padding:3px;
margin-top:50px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.button').click(function() {
/*
Stores a variable for the speech div itself
Notice the use of a $ in the variable name, $speech.
Since $ is a legal character in JavaScript variables,
we can use it as a reminder that the variable is storing a jQuery object.
*/
var $speech = $('div.speech');
/*
The next lines stores the font size, style, weight, text-decoration of the speech div.
*/
var currentSize = $speech.css('fontSize');
var currentWeight = $speech.css('fontWeight');
var currentStyle = $speech.css('fontStyle');
var currentDecoration = $speech.css('textDecoration');
/*
The parseFloat() function looks at a string from left to right until
it encounters a non-numeric character.
The string of digits is converted into a floating-point (decimal) number.
For example, it would convert the string 12 to the number 12.
In addition, it strips non-numeric trailing characters from the string,
so 12px becomes 12 as well. If the string begins with a non-numeric character,
parseFloat() returns NaN, which stands for Not a Number. The second argument
for parseFloat() allows us to ensure that the number is interpreted as base-10
instead of octal or some other representation.
*/
var num = parseFloat(currentSize, 10);
/*
The .slice() method returns a substring beginning at the specified character in the string.
Because the unit of measurement that we are using (px) is two characters long,
we indicate that the substring should begin two characters before the end.
*/
var unit = currentSize.slice(-2);
/*
Variable for holding the font-style of the speech.
*/
var fontStyle, fontWeight, fontDecoration;
/*
All that's left is to multiply or divide num by 1.4 and then set the font size by
concatenating the two parsed variables, num and unit.
*/
if (this.id == 'switcher-large')
{
num *= 1.4;
}
else if (this.id == 'switcher-small')
{
num /= 1.4;
}
else if (this.id == 'switcher-bold')
{
if (currentWeight == '400')
{
fontWeight = '700';
}
else
{
fontWeight = '400';
}
$(this).toggleClass('activeButton');
}
else if (this.id == 'switcher-italic')
{
if (currentStyle == 'normal')
{
fontStyle = 'italic';
}
else
{
fontStyle = 'normal';
}
$(this).toggleClass('activeButton');
}
else if (this.id == 'switcher-underline')
{
if (currentDecoration == 'none')
{
fontDecoration = 'underline';
}
else
{
fontDecoration = 'none';
}
$(this).toggleClass('activeButton');
}
$speech.css('fontSize', num + unit);
$speech.css('fontStyle', fontStyle);
$speech.css('fontWeight', fontWeight);
$speech.css('textDecoration', fontDecoration);
});

/*
Set the font
*/
$('#fontFamily').bind('change', function() {
var font = $(this).val();
$('div.speech').css('fontFamily', font);
});
});
</script>
</head>

<body>
<?php include "../header.php"; ?>
<div id="switcher">
<div class="label">Style Switcher</div>
<div class="button-holder">
<div class="button" id="switcher-large" style="float:left;">Increase Text Size</div>
<div class="button" id="switcher-small" style="float:left;">Decrease Text size</div>
<div class="button" id="switcher-bold" style="float:left;">Bold</div>
<div class="button" id="switcher-italic" style="float:left;">Italic</div>
<div class="button" id="switcher-underline" style="float:left;">Underline</div>
<div style="float:left;">
<select id="fontFamily">
<option value="Arial">Arial</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="sans-serif">Sans-serif</option>
<option value="Times">Times</option>
<option value="Courier New">Courier New</option>
<option value="mono">Mono</option>
<option value="Monotype Corsiva">Monotype Corsiva</option>
</select>
</div>
</div>
<div class="speech">
<p>The jQuery library provides a general-purpose abstraction layer for common web scripting,
and is therefore useful in almost every scripting situation.
Its extensible nature means that we could never cover all possible uses and functions in a single book,
as plug-ins are constantly being developed to add new abilities.</p>
</div>
</div>
</body>
</html>

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

3 thoughts on “Text style-switcher with Jquery

  1. Wow, fantastic weblog structure! How lengthy have you been running a blog for?
    you made blogging glance easy. The whole look of your web site is
    great, as smartly as the content!
    Feel free to surf my page ; lovegra bestellen

Comments are closed.