Easy way of Theming in Web - The Interaction (Part II/II)

This is the second part of #-Link-Snipped-#. If you haven't read this, please check it out first and come back here, to get the context.

We are going to use jQuery to make our work simple. So, in the <head> section, we will add a link to the jQuery library, probably from the Google APIs.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Note that we are using jQuery 1.7.2 for stability purposes. And now for the code to change, we need to add three links or buttons, which handle the theme change. So, in the HTML, lets add these three links:

HTML

<div class="wrap themelinks">
    <h4>Change Themes:</h4>
    [url=light]Light[/url]
    [url=grayscale]Grayscale[/url]
</div>

CSS

.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.wrap.themelinks h4 {margin: 0; padding: 10px;}
.wrap.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.themelinks .theme:hover {background: #f90; color: #fff;}

jQuery

$(document).ready(function(){
    $(".theme").click(function(){
        var theClass = $(this).attr("href");
        $("body").removeAttr("class").addClass(theClass);
        return false;
    });
});

Here, we are changing just the class attribute of the <body> tag, which is supported by all the browsers. We also add a return false; to the .click() function of the link, in order not to propagate to the link specified in the href attribute of the Link 3</li>
[*]Link 4
[*]Link 5
</ul>
</div>
<div class="main">
<h1>Welcome</h1>
<h2>A Paragraph</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

<h2>A List</h2>
<ul>
[*]
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

[*]
Ut enim ad minim veniam, quis nostrud exercitation ullamco.

[*]
Duis aute irure dolor in reprehenderit in voluptate velit esse.

</ul>
</div>
</div>
<div class="wrap themelinks">
<h4>Change Themes:</h4>
#-Link-Snipped-#
#-Link-Snipped-#
</div>
</body>
</html>[/html]Working Demo

You can find the working demo at #-Link-Snipped-#.

Easy way of Theming in Web - The Interaction (Part II/II)

Replies

Welcome, guest