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