Dynamically Load Stylesheets Using MooTools 1.2
Written by David Walsh on Tuesday, April 15, 2008
Click here to learn what has changed to make your code framework-compatible.
Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different. Using a short MooTools snippet, you can dynamically load a change primary stylesheets with just one click.
Step 1: The XHTML
<p> <a href="?theme=black" class="load-css" rel="load-stylesheet/black.css">Load Black Stylesheet</a><br /><br /> <a href="?theme=red" class="load-css" rel="load-stylesheet/red.css">Load Red Stylesheet</a><br /><br /> <a href="?theme=blue" class="load-css" rel="load-stylesheet/blue.css">Load Blue Stylesheet</a><br /><br /> </p>
Above are three links to three themes. The load-css class is added and the rel attribute holds the path to the CSS file for the sake of MooTools. If the user doesn’t have javascript, I’ve added an href attribute to allow for the page to change the theme using server-side methods upon a new page load.
Step 2: The CSS
/* black.css */
body { background:#000; color:#fff; }
a { color:#ccc; }
/* blue.css */
body { background:#00f; color:#fff; }
a { color:#fff; }
/* red.css */
body { background:#f00; color:#fff; }
a { color:#fff; }Above you see the contents of three stylesheet files. These can act as three different themes, so to speak.
Step 3: The MooTools Javascript
window.addEvent('domready', function () {
//for every anchor with the class "load-css"...
$$('.load-css').each(function(el) {
//add a click event to add the stylesheet
el.addEvent('click', function() {
//get the file. file is based on the anchor's rel attribute
var css = new Asset.css(el.get('rel'), { });
});
});
});The MooTools javascript snippet is very simple. For every link with the load-css class, a click event listener is added to load the specified stylesheet. Once a stylesheet has been injected into the page, no more file calls are made — once it’s loaded, it’s loaded.
Epic Discussion
Be Heard!
I want to hear what you have to say! Share your comments and questions below.
Cool! :)
This is something that I can see myself getting a lot of use out of. I’ve always wondered how to do this so I’ll definitely check it out.
Is it possible to implement a hash-cookie processing where user can save his/her theme selection via cookie?
@Ambarita: Absolutely. You can see something like by reading this article:
http://davidwalsh.name/save-text-size-preference-mootools-12
Wow, thanks for that. I’ll use that for my site, it’s nice to be able to do that so easily with Mootools.
Poor write up.
You should really show how to modify your code to actually make it useful for those who don’t know xhtml or java scripting.
Or at the very least provide some sort of direction for readers to impliment this.
-Greg
@Greg: My blog is for Web Developers that have a basic knowledge of XHTML and javascript. Those looking for a magic wand wont find one here.
Wouldn’t the stylesheets have to be exact overlays of each other? Meaning that they all specify exactly the same attributes? Otherwise, you would end up with remnants of your previous stylesheet when you apply the new one. No?
@Matthew: Yes, but if you planned to use a system like this, you’d keep that in mind. I’d recommend one “structure” CSS file and many “theme” CSS files.
This, like so much in MooTools is very nice, however I have a problem with the use of class and rel attributes.
For me this would work without mis-use of attributes if each stylesheet theme link had a different id attribute
and the rel attribute was not specified.
ie
var css = new Asset.css(el.get(‘id’), { });
Is there a way to make a fading transition to another stylesheet? :)
Indeed can be great to have a fading effect, with a listener for the day time you can for example use a fade transition from a day css to a night css :) i love this idea..
Anyway dont really know why but this code doesnt work for me.. i use it with the last version of Mootools and change $$ by document.search() but still doesnt work.
Strange thing, the click load the true link, i m pretty sure my code is good implemented..
css and js folders are on the same level in my folder architecture.
HTML :
DAY
JS in the header just to be sure :
window.addEvent(‘domready’, function () {
//for every anchor with the class “load-css”…
document.search(‘.load-css’).each(function(el) {
//add a click event to add the stylesheet
el.addEvent(‘click’, function() {
//get the file. file is based on the anchor’s rel attribute
var css = new Asset.css(el.get(‘rel’), { });
});
});
});
If you have any idea.. Thank you for this blog it rocks :)
Hi,
Thx for your great blog, mooTools rocks and you rocks too :)
For now, I try to implement the same thing but for an Iframe that is created from mooTools… I dont know how to assign the stylesheet to my IFrame (which source is about:blank) from the script that create this IFrame…
If you have an idea, that would greatly help me, cause I really dont know by where I must start, I found no parameter for designate the document that receive the stylesheet…
And sorry for my bad english…
And again, big up for your blog, you rocks !
Found a solution :
var css = new Element(‘link’, { type: ‘text/css’, rel: ’stylesheet’, href: ’styles.css’ });
css.inject(myFrame.contentWindow.document.body, ‘top’);
but even cant find a solution to work with asset… And it makes me a problem : the css link is in the body tag, not in head… But I dont know how to access head of my IFrame to inject my css link… If anyone have an idea…
var css = new Element(‘link’, { type: ‘text/css’, rel: ’stylesheet’, href: ‘editeur.css’ });
css.inject(myFrame.contentWindow.document.getElementsByTagName(“head”)[0]);
It’s ok on FireFox but I eared it doesnt work on IE (but not tested)… I’ve search for a long time how to access head tag with mootools (wich is better cross browser than my previous uggly code !) but I’ve failed… Perhaps it doesnt exist ? Anyway, that work for me with FF, that was my mainly goal !
Great stylesheet switcher. I use it for my print and large text versions of pages and it works great.
But…I’m switching my CSS scheme to have a core stylesheet and then supplemental stylesheets for different sections of the site. Is there a way to have the “rel” attribute on tags define 2 stylesheets?
I need another stylesheet when loading from this link (wsm_feature.css) following the wsm_core.css:
Return to web page