Change the "Look n Feel" of web page dynamically

"Look and Feel" of your web page matters the most when someone is visiting your web site, it’s like "FIRST IMPRESSION LAST IMPRESSION", but what if you can give your end user the freedom to change or select the CSS of their choice and your web page will change its appearance so magically in just one click. This article shows the same with java script and some sample CSS

One Click Magic with CSS and Java script


I have always believed that “look n feel” of your web page matters the most when someone is visiting your web site, it’s like “FIRST IMPRESSION LAST IMPRESSION”, but what if you can give your end user the freedom to change or select the CSS of their choice and your web page will change its appearance so magically in just one click. This blog post is to show the same with java script and some sample CSS.


Following is a sample page that I have created which is standard web page design in VS Studio 2010 inbuilt CSS called Site.css, first of all I will show you the project structure. See the figure below.

Solution Explorer


As you can see in the styles folder, there is one default style sheet called Site.css, which gives the default bluish layout to our page, now observe the other CSS as well, these are the CSS you will use to change the look of the page, the only difference among those CSS is change of attributes inside class, i.e every CSS has same number of class but only properties inside the class changes i.e color changes, image changes…but class name remains same

So what happens is say one control is given cssclass=”bgClass”, now even if the CSS changes the class will remain same so eventually that control will be referencing the same class cssclass=”bgclass” unaware of that CSS has changed, so same button which had blue color now will be with the color which the other style CSS has for it


DEMO

See the following page where there is one default CSS called Site.css applied, and the same page has some options on right hand side, giving your end users freedom to change the layout of their choice, I think that is awesome idea to give power to visitors.



As soon as user clicks on any of the link the page will change its look in SPLIT SECOND and your page will adopt the look of new CSS selected by you, see following when black CSS is clicked.


Same for orange css, the effect will be like following



I think  this is simplest of the example I have created with simple CSS, but you can imagine changing images and making it so interactive and user friendly and attractive effects with it


THE CODE


Now just have a look at the small java script I have written for it, its like magic when you see it you feel amazed but when someone reveals it, you may feel how simple it is, just see the below code


function ChangeCss(cssHref) {
    var arr = document.styleSheets;
    for (var css = 0; css < arr.length; css++) {
        arr[css].disabled = true;
    }
    var NewCss = document.createElement("link");
    NewCss.href = cssHref;
    NewCss.rel = "stylesheet";
    NewCss.type = "text/css";
    NewCss.disabled = false;
    document.childNodes[1].childNodes[0].appendChild(NewCss);
}


What is is doing is it loops through all the available CSS on the page and first it disables all CSS and after it actives only the CSS selected by user by creating LINK tag and adding it as child of head tag, here function takes on parameter called cssHref, which is the path of new CSS to be applied which user has clicked, so see the html for that as well


[ <a href="javascript:void(0)" ID="redCss" runat="server" onclick="ChangeCss('Styles/Orange.css');">Orange</a> ]      [ <a href="javascript:void(0)" ID="blackCss" runat="server" onclick="ChangeCss('Styles/Black.css');">Black</a> ]     [ <a href="javascript:void(0)" ID="changeCss" runat="server" onclick="ChangeCss('Styles/Site.css');">Default</a> ]

Here I just wanted to show you the demo so I have passed it hardcode but you can store it in database, display them from database and when ever user clicks any of it, just pass that path to the function and you are done

SIMPLE BUT POWERFUL…HAPPY CODING…
Daivagna Nanavati

By Daivagna Nanavati   Popularity  (881 Views)
Picture
Biography - Daivagna Nanavati
For any queries or help ...just drop me a mail at daivagnas@gmail.com