Introduction
Read Part-1 of this article before continuing here.
This article shows how to create a simple style switcher using jQuery and CSS by taking the advantage of jQuery's toggleClass() and hover(). Look at the animated image below that we are going to produce.
Creating HTML Body
Look at the body that I'll be using; you need to create the same.
<body>
<div id="NoStyleDIV" class="switcher">
<b>Style Switcher</b>
<br /><br />
<button id="switcher-default">
Default
</button>
<button id="switcher-red">
Red
</button>
<button id="switcher-blue">
Blue
</button>
<button id="switcher-green">
Green
</button>
</div>
<br /><br />
<div id="data">
<b>What is ITORIAN?</b>
<p>
Actually, a few years ago I decided to read every Computer Science and its Programming books ever written. Almost all basics/fundamentals languages I finished before taking admission in school or college. In year 2007-2008 I've taken admission in Bachelor (Computer Application) for some certificates. And now in 2011, I completed my Bachelor's and am now pursuing a M.Sc.(IT).
</p>
<p>
Along all the way, I kept each and every of my notes in computers and these notes eventually became ITORIAN after many revisions. And now, ITORIAN is a tangible record of my own thoughts about Computers and their Programming.
</p>
</div>
</body>
Creating Styles
When you are done with above, move on to create a style for it. We need a style that we will apply (add) to the body of the page when we click a button. Let's create the style:
<style type="text/css">
.red
{
color:Red;
}
.blue
{
color:Blue;
}
.green
{
color:Green;
}
.switcher
{
background-color:Gray;
width:310px;
padding:10px;
}
/*Add following styles*/
.hidden
{
display: none;
}
.hover
{
background-color:Fuchsia;
cursor:pointer;
}
.newsize
{
height:20px;
width:100px;
}
</style>
In the above style, I have created separate CSS classes for red, blue, green and a switcher class that is especially for a <div> tag that holds all of the buttons. You can add some more styles in each of the classes given above.
New Here:
If you already read Part-1 then, there is nothing new for you except the above bold styles. I have added three new styles to the existing styles; the first one that is .hidden, this style will be used when the user hides the buttons. The second one is .hover and this style will be used when the mouse goes over the clickable item (text) to hide the buttons. And the last one is .newsize and this will be used to resize the <div> tag when buttons are hidden. That's it.
Creating jQuery Functions
If you are done with all the above then create jQuery functions for button clicks. Here you go.
<script type="text/javascript">
$(document).ready(function () {
$('#switcher-default').bind('click', function () {
$('body').removeClass();
$("#NoStyleDIV").css("color", "Black");
});
$('#switcher-red').bind('click', function () {
$('body').addClass('red');
$('body').removeClass('blue');
$('body').removeClass('green');
$('body').removeClass('yellow');
$("#NoStyleDIV").css("color", "Black");
});
$('#switcher-blue').bind('click', function () {
$('body').addClass('blue');
$('body').removeClass('red');
$('body').removeClass('green');
$('body').removeClass('yellow');
$("#NoStyleDIV").css("color", "Black");
});
$('#switcher-green').bind('click', function () {
$('body').addClass('green');
$('body').removeClass('red');
$('body').removeClass('blue');
$('body').removeClass('yellow');
$("#NoStyleDIV").css("color", "Black");
});
//Using toggleClass()
$('#NoStyleDIV b').click(function () {
$('#NoStyleDIV button').toggleClass('hidden');
$('#NoStyleDIV').toggleClass('newsize');
});
//On Mouse Hover Action
$('#NoStyleDIV b').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
</script>
Note: Remember to add the reference of the jQuery file on your page to support the above functions.
Let's talk about specific code that I have used above.
$('#switcher-red').bind('click', function () {
Using #switcher-red, I'm selecting the button control by id and then binding a function to its click event.
$('body').addClass('red');
In the above code, I'm selecting the body tag of the page; remember I have not used any . or # operator because the tag is being selected itself, so we don't need to use . or #. And adding a CSS class named "red" with the body tag.
$('body').removeClass('green');
Using the removeClass(), I'm just removing the pre-added class from the body tag.
$("#NoStyleDIV").css("color", "Black");
# is the id selector, so by using the above line I'm adding a CSS to the NoStyleDIV named div tag. Look in the above code; I have placed all my buttons inside this <div> and I don't want to apply any style to that particular <div> tag whenever the button clicks.
New Here:
Look at the bold jQuery functions that are new here. Let's talk about each specific line.
$('#NoStyleDIV b').click(function () {
Using the above code, I'm selecting <b> tag that is located inside the "NoStyleDIV" named <div> and then attaching the click function with <b></b> tag text.
$('#NoStyleDIV button').toggleClass('hidden');
Using the above code, I'm selecting all button controls and attaching a toggleClass to it. The toggleClass is a special type of method that cycles by attaching a class (here 'hidden' is our class) and an empty class. To know more about the toggleClass read this.
$('#NoStyleDIV b').hover(function () {
Using the above code, I'm selecting the <b> tag that is located inside the "NoStyleDIV" named <div> and then attaching a mouse hover function with a <b> tag.
To learn more, download the sample project attached with this article and test it yourself.
I hope you like it. Thanks.