Question

I am new to jquery. I have recently designed a website in which I need to implement a color selector.
and the customer demands that he need a color selector as used in the website http://www.dulux.in/color_pallette_start.jsp
please help me how can i design it using jquery

Answer 1

I can guide you with a simple theme selector, using jQuery. You have a few steps before you finish.

1. First thing is, identify the themeable elements.
2. Create separate styles for those elements alone.
3. Use jQuery to switch classes.

Part 1: The content.

Lets have a sample content this way:

<ul class="links">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
</ul>
<div class="content">
<p>
    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
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
    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
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
​</div>
<div class="clear">Copyright</div>

Define the layout CSS for this:

.links {float: left; width: 25%; margin: 0; padding: 0;}
.links li a {display: block; padding: 5px; text-decoration: none;}
.content {float: left; width: 75%;}
.clear {clear: both; padding: 10px; text-align: center;}

Part II: Theme CSS

Say we have three themes. Light, Dark and Blue. The CSS for the same:

.light {background: #fff;}
.light .links li a {color: #09f;}
.light .content p {color: #333;}

.dark {background: #000;}
.dark .links li a {color: #00f;}
.dark .content p {color: #ccc;}

.blue {background: #00f;}
.blue .links li a {color: #f00;}
.blue .content p {color: #0ff;}

Part III: Now the JavaScript / jQuery switcher.

We just need to add or remove the classes. Since we know the names of the themes, we will remove all the classes and add the correct class.

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

We have added this handler to the links. Now we need to update the links with the name of the themes.

<ul class="links">
    <li><a href="dark">Dark Theme</a></li>
    <li><a href="light">Light Theme</a></li>
    <li><a href="blue">Blue Theme</a></li>
</ul>

Now upon clicking on the respective themes, the theme of the document gets changed.

Fiddle: http://jsfiddle.net/QSZ3R/

Hope you understood and it is easy! 🙂

For a colour palette, you can think of using Color Picker – jQuery Plugin.