2020-08-05
103
Finally at the bottom of the document before any closing </body> tag we need to setup a block of JavaScript. Keep in mind this could be written into an external file and then included into the page header. It’s all about preference and how you need to setup your website.
$(function(){ $('.options a').on('click', function(e){ e.preventDefault(); if($(this).hasClass('active')) { // do nothing if the clicked link is already active return; } $('.options a').removeClass('active'); $(this).addClass('active'); var clickid = $(this).attr('id'); $('#listdisplay').fadeOut(240, function(){ if(clickid == 'thumbnails-list') { $(this).addClass('thumbview'); } else { $(this).removeClass('thumbview'); } $('#listdisplay').fadeIn(200); }); });});This script requires a single event handler checking against each of the anchor links within the options list. First we call e.preventDefault() to stop the default click action, followed by a class check. If the icon link currently has a class of .active then we don’t want to do anything. Otherwise the script needs to switch between display views – first by removing the .active class from both links and then adding it onto the newly-clicked link.
Next I’m grabbing the current link ID so we know which content view should be displayed. I am hiding the entire list using fadeOut() and we run some logic within a callback method. If the ID is #thumbnails-list then we need to append that CSS class onto the UL element. Otherwise we need to remove that class.
Finally once the logic has completed we can re-display the list view onto the page usingfadeIn(). There are probably ways to do this using other jQuery animated effects. But when just getting started this method simply works – it’s easy to follow, and it’s easy to customize.
Create a better jQuery stylesheet switcher
Normal way
First, I'll show how jQuery users normally would change their CSS file.
HTML
This is the trimmed down version of the HTML file. As you can see, there is one style.css placed in the head and there are three links to color changers.
<html><head> <link href="style.css" rel="stylesheet" type="text/css" /></head><body><div id="colorchanger"> <a class ="colorbox colorblue" href="?theme=blue" title="Blue Theme"></a> <a class ="colorbox colorgreen" href="?theme=green" title="Green Theme"></a> <a class ="colorbox colororange" href="?theme=orange" title="Orange Theme"></a></div></body></html>Nothing really fancy going on here - just the markup that we need for the page.
CSS
Now straight to the important part of the CSS file: The colorchanger. We'll turn the links into block elements.
/* COLOR CHANGER */#colorchanger { float:right; }. colorbox { width:20px; height:20px; border:1px solid #050505; float:left; margin:5px; cursor:pointer; display:block; }. colorblue { background-color: #bfe1f1; }. colorblue:hover { background-color: #90bcd0; }. colororange { background-color: #F69C3A; }. colororange:hover { background-color: #FF5C01; }. colorgreen { background-color: #78A848; }. colorgreen:hover { background-color: #189048; }As you can see, the boxes each have their own color and hover effect. We'll now use jQuery to actually change the stylesheet when the user clicks on one of these links.
JQuery
After loading jQuery, we can now use it's power to change the link-element in the HTML-head (the place where we defined the first CSS sheet: style.css).
google.load("jquery", "1.3.1");google.setOnLoadCallback(function (){ // Color changer $(".colorblue").click(function (){ $("link").attr("href", "blue.css"); return false; }); $(".colorgreen").click(function (){ $("link").attr("href", "green.css"); return false; }); $(".colororange").click(function (){ $("link").attr("href", "orange.css"); return false; }); });This works great! Every time the user clicks on one link, the stylesheet gets replaced. Now the only thing we have to do, is define how the CSS should look like when switching colours.
The problem
There are two problems when looking at this solution: One small one, and a bigger one. The small one, is that the whole style.css gets replaced with the new CSS file (for example: blue.css). Since this new CSS file needs to be downloaded and parsed by the browser, the user will see a little flickering; A split second of the "naked" HTML file (no CSS).
But there is a bigger problem when using this solution. The whole style.css gets replaced, which means that all your CSS definitions will get replaced too. Everything you already set for body, #wrapper, #sidebar (like fonts, floats and sizes) in style.css will be gone as well.
" But you can copy the whole style.css content to the other style sheet files and change the colours, right? " That's absolutely true. But, what will happen if one style sheet would change? You would have to change all other CSS files which will cause loads of work. Also, you're not really saving bandwith with almost duplicate CSS.
The solution
I found a solution for this problem. The key lies in the fact that there are two ways of adding CSS to an HTML page. The normal way, is by using link rel='stylesheet'. The other way is using the styleelement.
We're going to use this difference to our advantage. We'll create one base CSS file (style.css) where we're going to place all CSS definitions except for the colours. Each colour gets his own CSS file that we're going to switch using jQuery.
HTML
We'll change the HTML a little bit to make this technique work.
<html><head> <style type="text/css">@import url("style.css");</style> <link href="green.css" rel="stylesheet" type="text/css" /></head><body> <!-- Body contents here --></body></html>Now, when we use the color changer, only the green.css file gets replaced by the other CSS file. This is how they can look like:
style.css (sizes, fonts etc.)
h2 a { display: block; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif; text-align: center; } #wrapper { width:940px; margin:40px auto; background-repeat:no-repeat; }green.css (colours only)
h2 a { color: #78A848; } h2 a:hover { color: #189048; }#wrapper { background-image:url("images/monster_green.png"); }That's all! Now, when the user changes the CSS files, only the colours get changed. Also, you can easily change the style.css file without having to make the same change in all other CSS files.
