Simple Style Switcher using jQuery and CSS
Introduction
Download
This article shows how to create simple style switcher using jQuery and CSS. 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, 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 now pursuing M.Sc.(IT).
</p>
<p>
Along all the way, I kept my each
and every notes in computer and these notes eventually became ITORIAN after
many revisions. And now, ITORIAN is a tangible record of my own thoughts about
Computer and its Programming.
</p>
</div>
</body>
Creating Style
If you done with
above the, move next and create style for it. We need a style that we will
apply (add) to body of the page when we click 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;
}
</style>
In the above
style, I have created separate CSS classes for red, blue, green and switcher
class 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.
Creating jQuery Functions
If you done with
above all 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");
});
});
</script>
Note: Remember
to add the reference of the jQuery file on your page to support above
functions.
Let's talk on
distinct 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 above code, I'm
selecting the body tag of the page, remember I have not used any . or #
operator because tag is being selected itself, so we don't need to used . or #.
And adding a CSS class named 'red' with the body tag.
$('body').removeClass('green');
Using removeClass(), I'm
just removing the pre-added class from the body tag.
$("#NoStyleDIV").css("color",
"Black");
# is id selector, so by
using above line I'm adding a CSS to NoStyleDIV named div tag. Look in above code;
I have placed my all buttons inside this <div> and I don't want to apply
any style to that particular <div> tag whenever button clicks.
Download the sample
project attached with this article and test it yourself.
I hope you like it.
Thanks.
Comments
Post a Comment