Skip to content
jStyler
- February 9 2008
9 comments –
You can leave a response, or trackback from your own site.
The first time you write a plugin, however simple it is, a sense of accomplishment takes over. It might last a couple hours, but those hours are precious as walking on the moon. As a person who recently got addicted to jQuery, the library has certainly lived up to its reputation in helping cutting lines of codes. Without further ado, here’s my first jQuery plugin – a stylesheet switcher.
This is a cookie based style switcher. Once a stylesheet is selected, it will use that stylesheet until the cookie is removed. Also note that Javascript is case sensitive. Make sure that the title attribute for the <link> and the href has the same case.
View jStyler’s capabilities here.
Step 1: Link the script files
Link all the necessary Javascript files.
<script type="text/javascript" src="jquery-1.2.2.min.js></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="switcher.js"></script>
Step 2: Set up stylesheets
First, list out all the stylesheets you would like to include in your site. All except the default stylesheet gets an additional “alternate” attribute in the rel attribute. Add a title to each stylesheet. This will be the identifier for your stylesheet.
<link rel=”stylesheet” type=”text/css” href=”screen.css” title=”A” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” href=”screen2.css” title=”B” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” href=”screen3.css” title=”C” media=”screen” />
Step 3: Set up your style switcher
This is what will invoke the stylesheets. For the sake of presentation, I am using color blocks as my switcher. You can use any other forms of HTML elements to create the switcher.
The selected stylesheet will be indicated using a css class on appropriate a tag using a classname of “on”.
<ul id="switcher"> <li><a href="#A"><img src="images/A.gif" alt="A" /></a></li> <li><a href="#B"><img src="images/B.gif" alt="B" /></a></li> <li><a href="#C"><img src="images/C.gif" alt="C" /></a></li> </ul>
Step 4: Lastly, call the function
The last thing you need to do is call up the function. That is all.
<script type="text/javascript">
jQuery(document).ready(function() {
$('#switcher').switcher();
});
</script>
What the point of use jQuery.
it’s can be done like this:
html:
<a href=”getNewCSS(1); void(0);” rel=”nofollow”></a>
JS:
function getNewCSS(cssIndex) {
var newStyleSheet;
switch (cssIndex) {
case 1:
newStyleSheet=’go1.css’;
break;
case 2:
newStyleSheet=’go2.css’;
break;
……..
default:
newStyleSheet=’go0.css’;
break;
}
document.getElementById(”myStyleSheet”).href=newStyleSheet;
}
Dimas,
You definitely could. But I would change the implementation to be non-obstrusive as it would make the code more readable and it will also degrade gracefully in browsers that don’t have Javascript enabled.
Thanks for this example and the explanation of use. You seem to have a newish site, with few comments, yet, from what I have seen so far - you have some interesting stuff here. I’ll bookmark you and pop back again.
Thanks
Ruth,
Thanks for visiting. Hope it was helpful to you.
Here might lie a “challenge”.
Let us assume, we have a few stylesheets, and we create one page on a site, where the site user can go to “change the look” of the site - your JStyler stuff works great and does just that, right out the box.
Currently, it appears that every other page on the site requires the links to all stylesheets and alternate stylesheets, for this to fully work.
However, here is a thought. Is there anyway, that we can link to ONE style sheet on every page - let’s call it “chosen stylesheet”, or, if none selected - load the default stylesheet.
Thus, when a user changes the “chosen stylesheet” using JStyler (on the specific JStyler page) - it modifies sitewide.
Why? because we can then ADD additional stylsheets - over time, without having to modify the entire site…
Or, can you already do this and I have missed something?
Um, yes, I am still playing with your styler and having great fun to boot.
Ruth,
I think I get what you mean. This has never crossed my mind before as usually I use templates or reusable controls (include files) so that I can just keep one copy for easier maintenance. But looks like you have just pointed out a great addition I could be making for the jStyler. Looks like I will be spending some time implementing it.
I understand the notion of a “template”. I am also grasping the notion of using PHP includes etc. And, yes, I am well aware that there are stylesheet switchers created using PHP that call from one file. However, not everyone wants to use PHP etc to achieve this.
With the interest in JStyler/JQuery and all its abilities, the notion of being able to add stylesheets at a later date, without modifying every page on a site, does, to me, seem like a terrific addition.
Given that IE<7 has key “hiccups” one method of curing some of these issues, is by using a javascript stylesheet switcher - but, some of these clash with JQuery (i.e. if you use JQuery for other things - like a gallery).
So, by implementing a stylesheet switcher that uses JQuery and that achieves a measure of ultimate usability in terms of adding more stylesheets at a later date and having this take effect site wide - yes, it would be a real good addition.
I was not trying to get you to go through hoops or put in huge blocks of time here, I just wanted to offer a suggestion, so don’t feel compelled. I am sure you have a heap more things to think about. Currently, I am having to look to a PHP solution, which I am not thrilled about.
You have to remember, I raise sheep on a croft and am not in any way a website developer - or whatever they are called.
Further thoughts
Well on with messing with PHP includes. All well and good, so far.
Now, we move on to accessibility and that apparently oft misused “long description”. So, if, for every image on every website, we have to create an extra page to “provide that extra bit of description” - that does not seem to be 100% accessible. Just exactly how many people understand their “back button”.
So, wouldn’t it be “novel” if a JQuery component were to be built that allowed, at the press of a specific key, a small online window to pop up (kind of like a tool tip I guess) - that displayed the relevant “long description” information…
Well, that might not pass the W3C tests. But. It might, if all the information for every image on a website was contained on one htm page and, each “snippet” of info was then brought into the little opening window. Get my drift?
Thoughts?
Ruth,
Looks like that question needs a longer answer that can fit here. Check out Progressive enhancements with “longdesc”