Anyone that’s in the business will know that there are some common functional elements that you end up having to build with javascript: accordions, tabs, faders, sliders, lightboxes, filters, etc. Many of these items can bleed over into non-report sites, such as intranets or even public-facing sites.

Now some of those are fairly straight forward: an accordion is just a simple animate of a content section, repeat per title; tabs? Same deal. So you might be pretty inclined to just write the script adhoc on a project to project basis, copy and pasting it as you go. We were doing that at my work when I started on, but I found that we kept on having to add something, remove something, add hooks at certain points etc. In some cases we used someone else’s plugin to do these things, but we ran into some issues when it came to having to tweak the plugin for our needs.

As I was hired on as the senior front-ender, I was given the task of trying to help simplify things in our working process. This required me to dive right into plugin development, because one spot we were spending a lot of time was reinventing the wheel project to project. Even more time was spent debugging random plugins, or lashing them together.

As my place of employment works with jQuery, I wanted to develop something that could be maintained in-house, and would be a good starting point for repeating functionality. I ended up developing a jQuery plugin template, which I am sharing today.

Now, while I can’t feature the plugins I’ve made for my work here on my site (I’m pretty sure my they’d be less than impressed with that), I feel it’s fairly safe to distribute this template (boiler plate?) to the internets. It’s a compilation of a couple tutorials, as well as my own exploration into javascript. I’d be more than happy to give credit where it’s due, but I cannot remember where the heck I got some of the snippets I integrated. If anyone reading this happens to know, leave a comment and I’ll be more than happy to give said credit.

Below you will find my jQuery plugin template code in it’s entirety. I’m open to suggestions on how to improve it, so feel free to comment.

/*
*
    Name:      my.blank.plugin.js
    Purpose:   Shell to use for jQuery plugins
*/
(function ($) {
    // DONT FORGET TO NAME YOUR PLUGIN
    jQuery.fn.myPlugin = function (options, i) {
        // This handles multiple elements (like a class selector)
        if (this.length > 1) {
            var a = new Array();
            this.each(
                function (i) {
                    a.push($(this).myPlugin(options, i));
                });
            return a;
        }
        var opts = $.extend({}, $().myPlugin.defaults, options);

        /* PUBLIC FUNCTIONS */

        /* reInit is a flag that you can pass in case you don't
           want to remove everything during the destroy phase. */
        this.Destroy = function (reInit) {
            var container = this;
            var reInit = (reInit != undefined) ? reInit : false;
            $(container).removeData("myPlugin");
            // this removes the flag so we can re-initialize
        };

        this.Update = function (options) {
            opts = null;
            opts = $.extend({}, $().myPlugin.defaults, options);
            this.Destroy(true);
            return this.Create();
        };

        /* iteration will give you the index of the item
           in the selection. If not part of a loop, I'm
           prett sure this will be null. You've been warned. */
        this.Create = function (iteration) {

            // this stops double initialization
            if ($(container).data("myPlugin") == true)
                return this;

            // call a function before you do anything
            if (opts.beforeCreateFunction != null && $.isFunction(opts.beforeCreateFunction))
                opts.beforeCreateFunction(targetSection, opts);

             // reference to the object you're manipulating. To jQuery it, use $(container).
            var container = this;
            /* Failing that, you could just use 'this' without the var declaration,
               but if you are doing a lot of child looping, you'll be glad to have
               a reference to the target object. Also, performance improvements! */

            ////////////////////
            // DO STUFF HERE
            ////////////////////

            // Set a flag to show that this element has been plugin'd
            $(container).data("myPlugin", true);

            // call a function after you've initialized your plugin
            if (opts.afterCreateFunction != null && $.isFunction(opts.afterCreateFunction))
                opts.afterCreateFunction(targetSection, opts);

            /* Make sure to return, otherwise you can't store the element in a varaible,
               which means you can't use any of the plubic functions (you may not need
               them, but it's still good practice.) */
            return this;
        };

        /* Example of a public function, this can be used if you store
           this object in a variable.

           e.g. var foo = $("#target").myPlugin();
                foo.PublicFunction();
        */

        this.PublicFunction = function () {
            // do something
            myPrivatefunction();
        };

        /* PRIVATE FUNCTIONS */

        /* These aren't accessibly externally, and so can only
           be called from within the enclosure code. */

        function myPrivatefunction() { };

        /* arguably, you could wrap your private (or public)
        functions in an array such as the following: */

        // Private helper functions
        helper = {
            firstHelper: function () { /* do something */ },
            secondHelper: function (somevalue) { /* do something with the variable passed in */ }
        };

        //Public helper functions
        this.Helper = {
            FirstHelper: function () { /* do something */ },
            SecondHelper: function (somevalue) { /* do something with the variable passed in */ }
        };

        /* Personally, I don't see the point of doing this for
           anything OTHER than helper functions, I could, and
           probably am, wrong here... or at least ignorant. */

        // Finally
        return this.Create(i);
    };

    // DONT FORGET TO NAME YOUR DEFAULTS WITH THE SAME NAME
    jQuery.fn.myPlugin.defaults = {
        foo: "bar",
        something: "else",

        // Remember: these are function _references_ not function calls
        beforeCreateFunction: null,
        afterCreateFunction: null
    };
})(jQuery);

I’ve tried to comment the hell out of the code, so that it’s as straight-forward as possible. I assume that anyone that uses this will strip out the comments, as well as any of the functionality that isn’t required.

Please feel free to use this, but If you’d be so kind as to give me credit, that’d be swell. I can’t force you, but we’re all friends out here, aren’t we?

I made the last one basically because I have an impulse to change my layout roughly once every year (or two). I was suckered into the whole pop-out style that was going around at the time, and I wanted my piece of the action. As a side-effect, The site sort of fell on its ass when certain browsers hit it. I had already given up on the layout before I had even really finished it.

That’s always a good sign.

First off, you may have noticed that the site has a bit more… character to it. I think this layout is a bit more me. At the very least, it gives viewers a brief glimpse into the borderline insanity that is my mind. I’ve removed my resume from the site, since no one actually cares about that. I’ve split the site – quite literally – down the middle. To the left are my ramblings for your continued enjoyment. To the right is my portfolio… such as it is.

Changes to the blog

So on top of having a bitching yellow background, I’ve narrowed things down. Comments are on the left (a couple styles still need to be applied there) and the main section is more narrow. This makes the page longer, but is more friendly for mobile readers, and actually is fairly readable for screen-readers. Pictures should take up the whole width of the column now. I haven’t gone back into old posts to correct them, so the wide picture thing is a ‘from here on out’ scenario.

Archive pages exist again for things like Categories, Tabs and such. You could probably url-hack the site to get the archives for dates ‘n the like, but I have opted to not include any straight-up way of getting to them. Really they’re just not that important.

I’ve also got search going again! I’m a but surprised that not a single person complained about that on my old design, despite it being a total oversite on my part. And when I did notice it, I had absolutely no intention of adding it (read: giving up on the layout).

Changes to the portfolio

The portfolio is far from complete. After talking to some designers that are far superior to myself, I’ve had some gentle instruction to rethink what I was going for. Very valid arguments that I agree with. So as of right now, it looks the way it looks. When I get done with it, it’ll look totally different. I think I may just skip to the next part, which will talk about what I did here in greater detail.

Suffice it to say that it’s currently an alpha layout at best. I wasn’t happy with it when I started, so think of the current layout as more of a tech-demo.

Code changey stuff

First off, with my running this blog in WP 3-point-whatever version it is this week, I wanted to try and take advantage of some of the new features.

Custom content types! Gone are the hackey days of hidden categories and private posts. Now I’ve got Posts, Portfolio items, and Code items (subject to change). This allows for an easy separation of content, which has made my life so much easier. It requires me to do some custom loop stuff on the portfolio page, but man oh man is it easier.

JQuery stuff! In the last eight months or so, I’ve gone from knowing a smattering of jQuery stuff (how to make plugins go… barely) to writing my own. This is down mostly to my being a senior front-ender at Radley Yeldar, and the ever-pressing advances the designers want to go for with their designs.

Hm. That sounds bitter. I’m not, actually. It’s been a great learning experience for me, and I’m happy to have the challenge. Seriously every day it’s something new. Regardless, I’ve opted to gussy up my site with a bunch of interactions based on some more basic jQuery. Some are more obvious than others. The most noticeable one is the portfolio/code area functionality.

Basically I’ve ajax-ed the whole thing so that when you enter an article, it’ll load it up right there. The nice thing about it is that the fallback for non-js is that it will just link to an article-style page. Simple but effective. The final version of the portfolio will probably maintain that functionality, though the layout will be changing. I’m not sure to what yet (I was just glad to get the layout complete enough to release), but you can assume that the final version will be stunning.

Other changes that are afoot

I’m trying to get into a more regular posting schedule, if only to train myself to stick with anything for longer than a couple of weeks. Normally on Thursdays, but recent things (like releasing and altering a new layout) sort of took over. I’ll try and do a double-post this week. Key word: try.

I’m also going to be investing some more time into varying my posts up a bit more. I’ll be doing more tech-posting, since I’m back in that world. They will probably range between ‘pointless rants’ to ‘something useful and/or downloadable.’ Hopefully more of the latter, but knowing me – which I should – it’ll probably be more of the former. I’m a bit of a bitch that way.

Anyways, I’d love some feedback if anyone has any. I generally take constructive criticism into consideration, but saying ‘ It sucks lol’ will just be met with a sage nod, knowing that the Internet is maintaining the status quo.

When I developed the theme I am currently using, I searched high and low for something I could steal take inspiration from. The funny thing is that most people don’t even know where the colour swapper is on my site. So few in fact that I had to add a caption to it to help make it a little more obvious.

In any case I felt that I would share the method I used to create the swapping functionality on my website. I’m aware that most of it can be figured out with a little imagination and some source viewing, but I think that going through it step by step is more helpful.

UPDATE – 10/09/2008 - In record time, a second pair of eyes looking at this has managed to refine the process. Thank you Bart for pointing out that if the CSS files are named the same as the Title attribute of the Anchor, then you can drop the whole If statement. I’ve updated the tutorial accordingly

Table of contents

• The idea
• Before we begin
• Setting up our files
• Setting up the CSS files
• A dash of PHP
• The basic markup
• The JavaScript
  • Importing the required files
  • Adding functionality
• Pulling it all together
  • Flow
• Conclusion

The idea

So you want to build a colour swapper? Easy as pie. You want to do it without causing a postback and sustains itself throughout the navigation? That’s a little more tricky, and what I wanted to do myself.

What, you’re too lazy to figure this out for yourself? No problem. Read on and be merry.

Before we begin

A few words before we begin:

• I am not a master of JavaScript, let alone JQuery. I’m not a novice, but I am in no way a master of the language. There are probably many ways in which to improve my methods here. I’m going to take another crack at them and see what I can come up with. I’ll update the code to this post If I come up with anything.
• In addition to the last note, I’m not going to explain how JQuery works. they do a fine job on their own. If you don’t understand it, I suggest you take some time and become familiar with it.
• This whole solution rides on the idea that your users allow JavaScript and Cookies. If the Cookies are disabled, the styles will still change, but will not persist between page refreshes/navigation. If JavaScript is disabled, nothing will work because I have not yet implemented a postback-friendly alternate. If I find myself with time I’ll do this as well and update this post.
• This whole tutorial is based on the idea that you are applying this to a WordPress theme. If you’re using something else, you’ll need to alter this as you need.
• I have noticed that in some browsers, the swapping is not instant, and you may notice somewhat of a flicker. In my case the colours go away, and then the new ones are applied. Some browsers do not do this. I have no idea why this happens.

Setting up our files

For this solution we’re going to need to get some files from the JQuery website (the latest JQuery build), and create some files in our Theme folder.

You are going to need to make a JavaScript folder – I called mine “js” – and multiple CSS files. One will be a core style sheet that contains all of the universal CSS styles, and then alternate sheets that contain the CSS that is swapped around.

Example setup:

• THEME FOLDER
  • style.css
  • Yellow Version.css
  • Red Version.css
  • Blue Version.css
  • Green Version.css
  • JS FOLDER
    • jquery.js
    • functions.js

The rest of this example will assume that you have that setup.

Setting up the CSS files

First off, you’re going to need some CSS files to play around with. Generally you would have a core css file that would contain all the styles that wouldn’t be affected by your swapper. Depending on how you use your swapper, this may or may not be the case. Some people want to totally alter the website with their swapper; I just wanted a colour change.

Note: I’m not going to paste all the CSS I used to format the actual tiles, because my layout requirements will be different than yours. Set the CSS code up however you need to make your selector HTML – we’ll see that in a bit – look right.

So you have your core css file (style.css for WordPress users). Do what you need to in that file and then put it away. We won’t be touching it very much. The only addition I put in my CSS files are the following:

.red {background-color:#FF3333;}
.yellow {background-color:#FBDC00;}
.green {background-color:#1FF900;}
.blue {background-color:#00CCFF;}

These four styles are in my core CSS file so that my swappers always have access to correct classes for them. What this means is that regardless of what CSS file is imported, the swapper tiles will always look the same.

Next up we have our swapping CSS files: Blue Version, Green Version, Red Version and Yellow Version.

Note: I use Yellow Version as my default, but that doesn’t come in for a little bit yet.

So in each one of these CSS files, I have the same selectors:

.specialBGColor {background-color:#FBDC00;}
a, .specialColourText, #left_bar .widget table th {color:#FBDC00;}
.specialTopBorder{border-top:20px solid #FBDC00;}

All of your swappable CSS files will have the same selectors with whatever colour differences you need. In my case The hex colours are going to change to whatever is appropriate for the file (yellow is #FBDC00, red is #FF3333, etc.) “specialBGColor” is basically a class I apply to anything that is going to have a swappable background. I also have a “speciallTopBorder” that does something similar, and some selectors for links and table headers to change their colours.

All of these swappable CSS files should be in the same directory. Since I am using WordPress my CSS files are all kept together in the same directory: the theme directory. I dislike the lack of separation but I’ll manage.

Once you’ve got all those set up we can move on to setting up the PHP functions

A dash of PHP

We need to add a little function to our functions.php file. The function will attempt to grab a value from the users cookie cache and return it. Pretty simple overall. In my case, if the cookie is not found, it returns a default string that is the URL to my yellow style sheet. As previously stated, the Yellow CSS file is the same.

Add the following to your functions.php file:

function getStyleCookie()
{
   if($_COOKIE["styleHref"] != null && $_COOKIE["styleHref"] != "")
   {
      echo $_COOKIE["styleHref"];
   }
   else
   {
      $url = bloginfo('template_url') + "/Yellow Version.css";
      echo $url;
   }
}

What this does is if it can get the cookies value – in this case “styleHref” cookie – this is explained in the JS – it will echo the value of the cookie. if it can’t it returns the default value of the Yellow Version.css location.

Note: I could have made the function a bit more universal by passing in the cookie name, but as I’m only using it for this one instance, I didn’t bother.

The basic markup

Alright lets set up the markup. Lets start with the header.

Locate the <head></head> section of your website (for WordPress users, this is usually the header.php file).

You’ll need to find where you have any current CSS files linked and paste the following over or after the CSS tags. I say over or after because depending how much of this you’re following, you may already have a core CSS file that you don’t want to remove.

<!-- THIS IS YOUR CORE CSS FILE. IGNORE THIS LINE IF YOU ALREADY HAVE THIS IN YOUR HEADER -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"/>

<!-- some dynamic stuff that won't make any sense yet, but it will later -->
<?php if($_COOKIE["styleHref"] != null && $_COOKIE["styleHref"] != "") : ?>
   <link id="altsheet" rel="stylesheet" href="<?php echo $_COOKIE["styleHref"]; ?>" type="text/css"/>
<?php else : ?>
   <link id="altsheet" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/Yellow Version.css" type="text/css"/>
<?php endif; ?>

What this does: try and get the URL to the currently used CSS file and render that CSS file. If nothing can be found, default to the Yellow Version style sheet. This may seem repetitive given that the functions.php code we put in also compensates for a lack of cookie. I’m one for having backup plans, and this was mine. If you don’t like it, you can simply remove the entire else section.

Next up is the actual swapper markup. I’m going to paste a simplified version of mine, because as I stated before, your swapper will look different than mine. As long as the base HMTL is the same, this solution works. how you style things up is totally up to you.

<div id="colour_swapper">
   <ul>
      <li>
         <a href="javascript:;" class="green" title="Green Version">Swap to green</a>
      </li>
      <li>
         <a href="javascript:;" class="yellow" title="Yellow Version">Swap to yellow</a>
      </li>
      <li>
         <a href="javascript:;" class="blue" title="Blue Version">Swap to blue</a>
      </li>
      <li>
         <a href="javascript:;" class="red" title="Red Version">Swap to red</a>
      </li>
   </ul>
</div>

The important parts to this are two-fold.

First, the ID of the DIV element is going to be used in the JavaScript. I’m aware that the DIV isn’t really needed, but as I said, this is a simplified version of what I’m using, and as such I’ve actually stripped out additional elements contained in the DIV.

The second thing is the title of the ANCHOR items. The title will be used in the JavaScript to determine what CSS file to get.

Note: I’m aware that having a href of ‘javascript:;’ is a bad practice. In reality the href should offer a link that would manually post back the page, and have PHP  code that would look for that action and set the cookie that way. Doing so would allow for the swapper to work when JavaScript is disabled.

The JavaScript

Importing the required files

This is where everything is tied together and starts working.

First off we need to import some JS files. This solution imports JQuery, as well as a functions.js file that I created in a sub directory of my Theme folder called “js”. This was explained in the Setup section, but I’m still reiterating.

First we need to add a bit more markup within our <head></head> sections:

<script type="text/JavaScript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<script type="text/javascript">
   var templateUrl = "<?php bloginfo('template_url'); ?>";
</script>
<script type="text/JavaScript" src="<?php bloginfo('template_url'); ?>/js/functions.js"></script>

What we’re doing here:

1. Importing the JQuery framework.
2. Setting a JavaScript variable that contains the template_url value from WordPress. This makes life easier when we get to the actual cookie setting.
3. Importing our functions.js file that will contain all of our functionality.

Note: I’m not a JavaScript expert, and part of me thinks that there should be a way to pass in the template URL to the functions.js import call. I don’t know and if someone can comment on this and explain, I’d be more than happy to refine my work.

Next up we need to add some functionality to the functions.js file!

Adding functionality

I’ll pase the code first and then explain it:

var $j = jQuery.noConflict();

$j(document).ready(function(){
   $j("#colour_swapper a").click( function(){
	var style_title = $j(this).attr("title");
	var style_href= "";
	var altSheet = $j("#altsheet");

	altSheet.attr({"href":templateUrl +"/" + style_title+".css"});

	style_href = altSheet.attr("href");

	var date = new Date();
	date.setTime(date.getTime()+(1*24*60*60*1000));
	var expires = "; expires="+date.toGMTString();
	document.cookie = "styleHref="+style_href+"; expires="+date.toGMTString()+"; path=/";
   });
 });

What the hell is going on:

1. Set JQuery to no conflict mode by assigning it to a different variable. I had to do this because of other plugins I use on my site. I maintain that this is a good idea when you are working in a plugin-heavy framework like WordPress.
2. For every link found within the element with the id of colour_swapper attach a new click function
3. Set a variable to the value of the links title (Yellow Version, Green Version, etc)
4. Grab the element with the id of “altsheet” (in our case this is a link element in our header) and change it’s href value to the url of the new style sheet. This url is made up of the template URL and the name of the style sheet (title of the anchor)
5. Set a variable with the URL the new CSS file to be used.
6. Create a date variable, and set it to the future (exact day eludes me at the moment. Part of me thinks that it’s either 24 hours into the future, or 1000 days. I can’t honestly remember at this point).
7. Convert the date to a GMTString which is used in the creation of cookies.
8. Create a cookie, “styleHref”, that stores the URL of the style sheet used. This cookie is set to expire in the future, and will apply to all pages within the website (that’s what the “/” is for)

Whew! That took longer to explain than I thought.

Pulling it all together

So now that we’ve gone through all that, everything should work. To give you an idea on how it all comes together I’ll explain the general flow.

Flow

• While the page is loading, try and grab the cookie and set the secondary style sheet. If none is found, apply a default (Yellow Version)
• Import all of the JavaScript needed.
• User clicks on a style swapping link
• JavaScript figures out what style sheet to use
• Changes the secondary sheets href to the new CSS file
• Sets a cookie to store the URL of the new CSS file

Now if a user navigates to another page in your website, the first step will apply the change right off the bat.

Conclusion

I hope that this helps someone out there, and comments are more than appreciated to help improve the solution. I’ll try and refine the solution a little more when I have time.

Good luck and happy coding!