Magneto

Magento was my first port of call as it does look head and shoulders above any other free offering and indeed the feature set looks rich enough to compete with many commercial offerings. What I discovered rather quickly and frustratingly was that Magento is horribly complicated to skin and manipulate. The learning curve of Magento is quite possibly the steepest I have ever come across in open source product. I’d love to get to grips with Magento and really learn the ins and outs but it seems that Magento skinning and tweaking is a skill picked up over the course of months and months rather than days which is really what you need when you are coming into a project that is already on a tight budget.

Magneto Commerce

osCommerce / Zen Cart

osCommerce seems to be going strong after many years of open source development. The issue I always had with osCommerce however is that it feels badly put together and not entirely secure. The organisation of the source files and the admin interface were always pretty shabby. Now in osCommerce’ defence the last time I used a release was many years ago but unless there has been a complete overhaul I can’t see this being much improved over that version.

Similarly Zen Cart seems to suffer the same fate. The admin interface screams osCommerce and if Zen Cart is simply osCommerce re-labeled (not confirmed but likely) it will more than likely have osCommerce like issues.

osCommerce | Zen Cart

Cubecart / X-Cart and similar

Cubecart, X-Cart and similar sit on on a level above the free offerings but below the full blown commercial offerings. They are solid products but are still commercial offerings which deduct, however minor, from a project’s budget. Had I not found the next open source product in this list I would have probably stumped for one of these or one of there many derivatives which are all fairly similar in features and set-up. Again solid offerings but not within the open source range.

CubeCart | X-Cart

OpenCart

My saviour. Quite frankly not a great deal seems to have changed with regards to open source ecommerce products since the break through of Magento apart from this neat piece of development.

The structure of OpenCart follows MVC, Model View Controller and in general the code is nicely put together and feels clean as well as secure. Following the MVC convention makes OpenCart as flexible and as complex as you need or want it to be. The admin interface is clean and rather aesthetically pleasing whilst being packed with features.

The only grumble I have over OpenCart is that it’s realtively young and as such the community and documentation is not quite on par with say, Magento or osCommerce. As the product matures however I am sure that this will only improve.

The most impressive feature of OpenCart is without doubt the lack of bloat. Possibly a positive knock on affect of its young age, the simplicity of the code and the way it is structured in comparison with the punch it packs is quite glorious.

OpenCart

In Summary

As I’ve mentioned above major players in the open source community don’t come and go overnight particularly not in a category as crucial as ecommerce development. So it wasn’t particularly surprising to find that there was not a great number of new stable ecommerce offerings to choose from.

Magento I feel is a definite market leader and something that every self respecting developer should take the time to understand if they are working regularly with ecommerce projects that require open source assistance. OpenCart for my money however can not be beaten for feature set versus learning curve. OpenCart apart from the usual road bumps in using a new open source package has been delightful and will be a project I keep an eye on for any future ecommerce projects.

If I’ve missed any great open source eccomerce offerings, please do let me know in the comments or via the contact page.

Over the years I’ve been ‘at the helm’ of a fair few web sites, some good, some bad but most returning revenue in some form.

I’m genuinely un-fussed as a visitor if I arrive at a site with tasteful advertisements tucked away in the sidebar. Even sites that are completely loaded with advertisements that have great content don’t particularly bother me.

Obviously I would consider myself a little more clued-up than an average visitor but then this post is directed at design or development blog owners looking to monetize their content.

How, when, where and why you should display advertisements on your design or development blog are decisions entirely down to you. My opinion on the subject is simple, if done tastefully and with the right motives your audience will respect the decision to monetize the content you’ve worked hard to bring them.

Below I’ve produced a write-up of each advertisement network or revenue source I’ve come across that are applicable to design or development resource and blog sites. With each write-up I’ll give you my experience with the network, what type of advertisements they offer, likeliness of being accepted and payout information that may help you get a better return from the network or revenue source.

Note: A few, if not, all of the links outgoing to networks and revenue sources from this post will be referal links. To those who are unaware, these links mean that if you go on start earning with the sites I’ve recommended I’ll receive a nice bonus from them myself for refering you. If you think this is unreasonable and I’m a greedy so and so then I’m sure you can find a way to the sites directly.

Sponsored Tweets
Type of ads : Tweets
An extremely interesting network especially for the designers and developers of the web. This network does exactly what it says on the tin. It allows to you sell sponsored tweets to advertisers. Heck! you don’t even need to have a web site to use Sponsored Tweets. They have a lot of celebrities on their books at present and the more followers you have on twitter, the better payouts you are likely to receive. The price per tweet is extremely good for this network. You will need to have 100 tweets, 100 followers and have an account over 60 days old to be publicized in the advertiser directory but you can still sign up if you don’t meet these requirements for possible direct offers. Highly recommended.

Amazon.co.uk & Amazon.com
Type of ads : Commission based referrals
An ol’ cornerstone of the web, Amazon.com and the co.uk variant allow you to sign up to their associates program and promote products they have in stock for a percentage of any sale that is made from said promotion. Its quick and easy to get started with them and the acceptance criteria is very low. Where Amazon come in pretty handy for design and development web sites is their great range of books related to the subject of design and development. The referral fee per product varies slightly but it usually sits between 5 and 10% of the sold product value.

Peerfly.com
Type of ads : CPA
A personal favourite of mine – Peerfly are starting to gain a big reputation amongst web site owners. Their payment model maybe a little different from what most design and development blog and site owners are used too. With that said the potential rewards for your visitors and indeed yourself as the site owner are good. Peerfly are a Cost Per Action network which means that their advertisers will pay you when one of your visitors fulfill a predefined action on their web site. This can be a simple as one of your visitors entering their email address for a macbook competition (which is an offer available right now). Payouts vary depending on the types of offer but if your looking for a different type of ad network than the crowd Peerfly are very much recommended.

Google Adsense
Type of ads : CPC (mainly)
Google Adsense are second to none the in the advertisement network stakes. The acceptance criteria is also one that 99% of web sites should fulfill with ease. They offer a range of advertising types to help monetize your design or development sites but by far their most popular are the Cost Per Click adverts. Google Adsense have also recently added mobile phone specific advertisements and advertisements for feeds, which are perfect for design or development web sites with a big readership. Your earning power with Google Adsense will vary from page to page as it is completely dependant on which keywords Google find in each of your pages. All in all with the low acceptance barrier and not forgetting the highly customizable adverts Adsense is a good choice for any web design or development site. Google Adsense offer a variety of payment options.

Type of ads : Text Links
Text Link Ads are a great network I’ve used on a number of occasions. They allow you to drop a block of Javascript code into your pages and then they will broker for you in getting advertisers to purchase text links on these pages. The higher pagerank your web site has the better the going rate will be for your text link real estate. Page rank really is the key with this network to getting the best price for your advertisements. A nice bonus is the extremely usable interface that Text Link Ads provide for publishers, that not only allows you to switch between Advertiser or Publisher but also allows you to manage multiple web sites from one account. Payment options are cheque or paypal.

Type of ads : Inline Text Links
A different type of advertisement offered to any of the other networks featured in this post. inLinks allow you to sell individual words and sentences in your posts to advertisers. They allow a high level of customization and control over what you sell and what it looks like so the advertisements are less likely to make a pig’s ear of your valuable content. Used correctly inLinks can be a constant yet subtle source of income for your design or development blog. Payment is via Paypal or Cheque.

Buysellads.com
Type of ads : CPM
Buysellads.com are relatively new in comparison with some of the other networks listed here. They are responsible for some, if not most of the side image advertisements across design and development web sites. At the time of writing I’d take a punt and say they were the leaders in design and development blog and web site advertising. They have a very high standard of sites under their control and you may find it hard to become an accepted publisher if you are new or have low traffic numbers. Using their administration area you can designate specific ad areas that you would like to offer potential advertisers. Buysellads.com then act as a broker for setting up the relationship between yourself and the advertiser. They do take a slightly larger cut of your agreed price with any advertiser but are fast becoming the most reputable design and development advertising network.

Adbrite.com
Type of ads : CPC, CPM
Adbrite are a Buysellads.com alternative that do a very good job of selling advertisements for their members. Again the return for your site will be dependant on the size but if you need a network similar to Buysellads.com that doesn’t have as higher acceptance barrier then Adbrite will serve you well. Adbrite also have a wider range of advertising options such as Pay Per Click as opposed to the set time periods of Buysellads.com.

AdToll
Type of ads : CPC, CPM and more
Adtoll are seen as a viable alternative to Buysellads.com and there high acceptance standard. They are also similar to Adbrite. Site owners signing up to Adtoll can expect to be accepted 99% of the time but may find it harder to sell space on there site that they would on Buysellads.com. Payout rates will again depend on the size and popularity of your site. Adtoll offer a range of options for you as a site owner so head over now and take a look.

Pay Per Post
Type of ads : Pay Per Post
This is one more for the bloggers. Pay Per Post should be pretty self explanatory, you sign up and get paid to make postings on your blog that either review or link to a company or product. The payouts really do differ based on a number of factors such as pagerank and readership. Payments are made via Pay Pal and quite honestly I’ve had mixed experiences with Pay Per Post but would definitely recommend you give it a try.

If you have any experiences with the above networks or would like to suggest one of your own that would be useful to design or development web site owners please leave them in the comments.

One thing however that has always bothered me is IE7 and IE8’s rendering of embedded fonts, so today with IE tester at hand and google ready to get wild I vowed to come up with a solution and I think I may just have.

First off a quick recap

If you haven’t already read my previous postings on @font-face I’d like to direct you to the following two posts:

• Revisiting @font-face introduces font embedding options right now.
• Embedding fonts using @font-face is a guide to using fontsquirrel.com’s previously mention @font-face generator

Now let me illustrate the problem.

When embedding using @font-face IE6 (surprisingly) renders the type face perfectly as does Firefox and Safari but IE7 and IE8 serve up a sub-standard jagged font face that is really not pretty to look at.

Take a look at the first demo page for a simple example of a custom font-face that has been embedded. If you can, take a look at this page in both Firefox and either IE7 or 8 to see the difference.

What causes this?

After much research I discovered the problem was being caused by Microsoft’s ClearType functionality. ClearType is designed and very much works to make rendered text online and throughout the windows system clearer to read. That’s great for body text and like I say it does work but when it comes to custom fonts that have been embedded ClearType is attempting to do a job which isn’t needed. This is what gives us the sharp, jagged looking font face that we don’t want. Because we want nicely anti-aliased text like we see in Firefox, IE6 and Safari.

As a side note I’m assuming that IE6 never had the functionality to render ClearType functionality and uses some other sort of properietary technology, leading to nicely embedded fonts in IE6 in a perverse sort of way.

Update: For IE6, Windows XP does not force ClearType on in the browser and Windows Vista was shipped with IE7 pre-installed (falling into the bracket of our fix) therefore the risk of IE6 users being exposed to ClearType issues is minimal.

How to fix this

The good news is that there is a way to disable ClearType via the browser when visitors are viewing your web site. Now I’m not recommending this for any other use than what I’m demonstrating today, in general ClearType gets it right and helps visitors read your site the way it was meant to be read. Disabling ClearType in most circumstances leads to horribly rendered body text and a whole help of problems for your visitors eyes.

The process of disabling ClearType

Internet Explorer as a rule do not apply ClearType to elements using their proprietary CSS filters as they can conflict and result in wider issues for the browser so we can exploit this to make Internet Explorer leave our embedded fonts alone. Now unfortunately there a few subtle differences between the browser that mean we can’t simply apply a useless filter and move on.

Take a look at the second demo page where I’ve added a few additional fixes for IE7 and 8. Go ahead and take a look in both Firefox and IE7/8, you should now find a much nicer rendering of the font in IE. I’ll break down what’s been added below.

The crux of the fix:

h2, p {font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif;letter-spacing: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;}

The above snippet of CSS fixes our smoothing issues in both IE7 and IE8 as seen in the previously linked demo page. The key to this is filter CSS property and the zoom property which are only applicable to Internet Explorer.

Looking at the filter property

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop);

This part is mostly for IE8, both IE7 and 8 need to have a filter present to disable ClearType but IE8 has to have this filter actual doing something to recognise it. I also noticed when testing that without a background image being present in IE8 the ClearType disable had little effect. So what this filter property does in effect is kill two birds with one stone. We add a filter which checks the required boxes for IE7 and 8 as well as adding a one by one transparent png image to satisfy IE8.

Looking at the zoom property

zoom:1;

This is solely for IE7. It fixes an issue with hasLayout. If you don’t know anything about hasLayout then not to worry. Essentially IE filters can’t be assigned to any element that doesn’t have ‘layout’ so the zoom:1 property gives our headers ‘layout’. hasLayout is only applicable to IE version 7 and lower as it was dropped from IE8 (thankfully). To learn more about hasLayout see here.

Done and dusted

So in future when embedding fonts using @font-face you can use two simple IE only CSS properties and a 1 by 1 transparent png to give your fonts that anti-alias effect in IE7/8. You can even place these two properties in a separate IE only stylesheet as we are doing nothing else apart from tweaking the styles.

Just to note that as with any workaround you’ll need to test this on a site by site basis to ensure the fix is giving you the results you want. Even with this tweak font rendering in IE can still be unpredictable so testing and constant tweaking is a must!

File Summary

• First Demo Page – Showing an untouched @font-face embedding example.
• Second Demo Page – Showing a @font-face embedding example including the CSS fix.
• ZIP package – Containing both example pages and source files.
• jQuery plugin – Quick and easy jQuery plugin to achieve this fix.

Your viewing this article on allcreatives.net – the web design focused blog.

Update : Follow up post on ClearType issues in Firefox and Safari.

So with that said what I am going to demonstrate here is a Javascript based work around for IE6 selector issues using jQuery’s powerful selector options.

First of all I should mention that a ‘do all’ script does already exist, authored by Dean Edwards the IE7 script includes a range of Javascript functions aiming to improve the experience of IE6 visitors viewing your site. The reason I tend to write a custom piece of Javascript rather than use Dean Edward’s script is simply down to control, I like to be in complete control rather than at the mercy of a third party script and the potential bugs that come along with third party scripts. I also find that the IE7 script contains I little bit more than I need and therefore adds excess weight to my pages.

The Setup

What you’ll need to implement this technique are three files, two you may have already if your site is already established. Firstly a copy of the jQuery framework, a IE6 specific stylesheet and an IE6 specific Javascript file. Of course the IE6 stylesheet and Javascript file will only be executed if the visitor’s browser is IE6. We achieve this using Microsoft lifesaving conditional browser comments.

An example of how this would look in your page head

<script type="text/javascript" src="/path/to/js/jquery.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="/path/to/js/ie6.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/js/ie6.css" />
<![endif]-->

Now what you’ll need is the selectors page of the jQuery documentation open and ready. It is almost identical to select an element in jQuery as it is in CSS but always check the documentation when in doubt.

Also take a look at some of the more advanced and 2.1 specification CSS selectors that are compatible with IE7. You’ll now able to use these and simply work around them in your ie6 Javascript/CSS technique.

In Practice

An nice piece of CSS that needs fixing in IE6

p:first-child { font-weight:bold; }
p > img { border:1px solid #CCC;float:right; }

So the above CSS will work in IE7, Firefox and any other browser you may care to mention. It uses the first-child selector as well as the parent > child selector. The problem is it doesn’t work at all in IE6, this is where the technique comes into play.

To work around this in IE6 you can use jQuery to select the CSS elements for IE6 that the stylesheet can’t.

As I mentioned early on the method of selecting an element in jQuery is almost identical to that of CSS so lets have a look at selecting the elements from the CSS snippet above. Once the elements have been selected they will need to be styled but doing this via Javascript is fairly messy so this script simply adds a new class that can be styled via the IE6 stylesheet on one line.

The IE6 Javascript file

$(document).ready( function(){

$("p:first-child").addClass("paragraphfirst");
$("p > img").addClass("imginp");

});

The Javascript above calls the jQuery document ready function to start. After this the jQuery selectors get the elements from the CSS code snippet further above and adds a new class to each instance.

So now in IE6 the first instance of a paragraph is accessible as well as any images contained directly in a paragraph using the class names assigned.

The beauty of this is that this file is only loaded in IE6 so does not affect the performance of your site for anyone wise enough to be using a browser other than IE6. As mentioned it also allows easy styling of these elements using one line of CSS code.

Once the classes have been added they are styled via the IE6 only stylesheet.

The IE6 stylesheet corresponding to the Javascript above

.paragraphfirst { font-weight:bold; }
.imginp { border:1px solid #CCC;float:right; }

Usage

Hopefully given this very simple demonstration of a very powerful technique you can see the benefits of using this technique over struggling with just an IE6 stylesheet on its own. As well as saving you time in IE6 hell it also sets you free to write cleaner, more forward thinking CSS in your regular stylesheets.

You can even get a little more advanced and use jQuery wraps and appends to fix more tricky bugs and add more dividers where necessary.

The key as mentioned earlier is to keep the selector page of the jQuery documents a click away and also do some research into CSS 2.1 selectors and beyond if you are not already familiar with them.

The process, thanks to fontsquirrel’s @font-face generator is now quite straight forward. If you are unsure of what @font-face actually is and what all the fuss is about then hop over the fonts category and take a look at my last two recent posts on the subject. Using the aforementioned generator we should be able to achieve @font-face perfection is two simple steps.

Step 1 : Get your @font-face kit

Font Squirrel have a great resource for prepackaged @font-face kits which are available here otherwise you can take a font you have already on your system and run it through the @font-face generator.  Just to note that you will have to check the license agreement for any font you use with this generator to make sure you are legally allowed to embed it.

Now following the steps on the generator page you should now be presented with download package. Take this, download, unzip and then re-upload the font files contained to your web hosting under a sub-directory such as fonts. Do this in the same way you would with a stylesheet. The files you have uploaded should be as follows for each font family you have ran through the generator:

• yourfont.eot – for Internet Explorer
• yourfont.woff – for Firefox 3.6+
• yourfont.svg – for Chrome and Opera
• yourfont.originalformat – whether it be .ttf of .otf for Safari and Firefox 3.5

Step 2 : Add the relevant CSS code to your stylesheet

Now we have our relevant font files uploaded all that’s left is todo is add the CSS code to our stylesheet the font(s) to be embedded and used. Within the package from Font Squirrel you should have an example CSS file that looks something like this :

/* * This CSS file has been generated by fontsquirrel.com and is based on the work of Paul Irish. * */ /* * * The fonts included are copyrighted by the vendor listed below. * * @vendor: West Wind Fonts * @licenseurl: http://www.fontsquirrel.com/license/Dearest * * */ @font-face { font-family: 'Dearest Regular'; src: url('Dearest.eot'); src: local('Dearest Regular'), local('Dearest'), url('Dearest.woff') format('woff'), url('Dearest.ttf') format('truetype'), url('Dearest.svg#Dearest') format('svg'); } @font-face { font-family: 'Dearest Open Regular'; src: url('Dearest_open.eot'); src: local('Dearest Open Regular'), local('DearestOpen'), url('Dearest_open.woff') format('woff'), url('Dearest_open.ttf') format('truetype'), url('Dearest_open.svg#DearestOpen') format('svg'); } @font-face { font-family: 'Dearest Outline Regular'; src: url('Dearest_outline.eot'); src: local('Dearest Outline Regular'), local('DearestOutline'), url('Dearest_outline.woff') format('woff'), url('Dearest_outline.ttf') format('truetype'), url('Dearest_outline.svg#DearestOutline') format('svg'); }

Copy this in its entirety and paste it into your stylesheet. Now look for the parts of the above code that precede an extension such as dearest.svg and change this to the correct path for your font files (uploaded earlier), keeping the font name and extension in place. Obviously the dearest font name in the above code with be replaced by your font file name.

After you have successfully changed the paths to point to the correct location of your font files you can use use the font name in the css ‘font-family’ property as you would with Arial or Verdana. Remember that if your font name has spaces in it you’ll need to enclose the name on the font-family line in single quotes.

Now if you go ahead and check your page in Firefox, Safari or heck even Internet Explorer you should now find beautifully replaced fonts.

Just a final note however to say that whilst @font-face rendering on Mac computers is near perfect it may be a little sketchy on Windows machines, a lot of this has to do with the quality of the font be used. Some fonts just seem to cope better with embedding than others at the moment and whilst Macs seem to mask this better you may find that it is indeed the font itself at fault as opposed to the operating system.

This function goes by the name of setInterval. The reason why you, me or any other designer may never heard of setInterval is quite simple. When using a framework such as jQuery its  a great deal easier to just use it for what you need it for or use plug-ins and never really get into the nitty-gritty of’ ‘old school Javascript’. The majority of the time anything not contained within the jQuery docs. will be not be of particular interest to the majority of designers. Said designers, many times myself included, are under demand from clients to get whatever needs doing completed as quickly as possible and simply do just that.

A quick introduction to setInterval

setInterval is a Javascript function that waits for a set amount of milliseconds, executes a function and then repeats again based on the original millisecond time parameter. clearInterval is the antidote to this if you like and stops the original setInterval function when you require.

A similar set of Javascript functions are setTimeout and clearTimeout which differ slightly in there execution and therefore won’t be used in this tutorial. You may see both functions mentioned in other tutorials but seen as we are concentrating on looping animations setInterval is naturally the best choice for this tutorial.

Setting up the CSS/HTML …

So first thing to is get the initial HTML and CSS setup. All we are going to do here is set a holder div and three floated divs within. These three floated divs are going to be the elements we will loop through using setInterval.

The initial CSS

.cbox { display:block;margin:5px;background:blue;opacity:0.3;width:50px;height:50px;float:left; }
.active { opacity:1; }

The initial HTML

<div id="divhold">
<div class="cbox active"></div>
<div class="cbox"></div>
<div class="cbox"></div>
</div>

As you can now see from the first demo page we have a very simple setup, three blue boxed divs. One at full opacity and the remaining two faded out. Note – For Internet Explorer you will need to use the following code to achieve opacity control via css. I’ve left it out of the example code to save space. As a side note jQuery takes this into consideration when performing animations.

Opacity Control for Internet Explorer (30 = 0.3, 60 = 0.6 etc.)

filter: alpha(opacity = 30);

Also in the initial html/css we have added a class of active to the very first div, this will help us later on and also lets the browser know which to show as active first.

Starting the loop …

We now have the html in place but what we want to do is shift between all three of these boxes, each fading to full opacity whilst the one before it fades to the original opacity of 0.3.

This is where setInterval comes in. Now I’m sure this effect is achievable using the jQuery animation function which in itself is extremely powerful. The problem with the animation function is it becomes extremely messy extremely quickly. I’ve also found the jQuery animation function to be jittery when attempting to do too much with it.

So lets add the javascript in full to the second demo page and I’ll break it down below. You can now see that the boxes are sliding between full opacity and partial opacity in order. The animation will stop after the final div in our holder has passed but this forms the next part of the tutorial, don’t worry about that for now. The Javascript thus far then :

Complete Javascript to start animation off

function swapem(){

 var getnext = $("#divhold .active").next();
 $("#divhold div").fadeTo("slow", "0.3", function(){ $("#divhold div").removeClass("active");getnext.fadeTo("slow", "1").addClass("active") });

}

$(document).ready(function(){

 var divswap = setInterval('swapem()', 5000);

});

To break this down and explain a bit more about what’s happening here I’ll start with the very first Javascript function we’ve written – ’swapem’ :

Just the initial ’swapem’ function from the animation code above

function swapem(){

 var getnext = $("#divhold .active").next();
 $("#divhold div").fadeTo("slow", "0.3", function(){ $("#divhold div").removeClass("active");getnext.fadeTo("slow", "1").addClass("active") });

}

This is the main crux of the animation. Firstly it gets the next div to be animated and places this information in the ‘getnext’ variable. It does this by simply selecting the div after the one we currently have set to active, which of course has the class ‘active’ we added earlier. The next line in this function is where the actual animation takes place. Firstly each div within our holder is faded to an opacity of 0.3, when this is done each div in the holder div has the class ‘active’ removed and finally we use the ‘getnext’ variable which has already been set to add full opacity to the div we want to show. To finish it all off the div captured in the ‘getnext’ variable has the class name active added to it. At the moment this function hasn’t been called and isn’t doing anything, the next lines of Javascript are what starts everything off.

The document ready function that contains our use of setInterval

$(document).ready(function(){
	var divswap = setInterval('swapem()', 5000);
});

The document ready function you should already be familiar with. When the document is ready we create a variable that will hold the information of our setInterval function. At the same time the setInterval function begins running. It is instructed to run the ’swapem’ function we first created every 5000 milliseconds. Both of these function parameters can be changed to whatever you would like them to be, for instance if our function went by a different name. Every 1000 milliseconds are equal to one whole second so our 5000 equals 5 seconds, 10000 would equal 10 seconds and so on.

Controlling the looping

So now in the second demo page we have a piece of Javascript working that starts a loop to animate the transition between opacity’s of 0.3 and 1 in order. At the moment however we have no genuine loop, once it gets to the last div in our holder it just stops. This is isn’t the fault of our setInterval, setInterval will just keep hitting the function every 5 seconds until we tell it to stop (which we’ll do later). The problem is with the ’swapem’ function. When the function reaches the third div under the holder div there is no next div to find because it doesn’t exist. What we now need our function to do is recognise when its at the end of child divs and start from the beginning at this point.

Take a look at the third demo page. This page contains a few additional lines of Javascript in our ’swapem’ function to get the currently active div, identified by having the class ‘active’. When the active div is identified we then check to see if it is the last element in the div holder, if it is we reset the ‘getnext’ variable to very first div in the holder. If it isn’t then the function carries on as normal looping through to the next div in line. This addition will now gives us animation looping continually.

Below is the revised ’swapem’ function, nothing else on the third demo page differs from the second apart from the additional lines of code from line 4 to 7. This is what gives you the information a describing above.

Revised Javascript to detect end of loop and start over

function swapem(){

	var getnext = $("#divhold .active").next();
	var current = $("#divhold .active");
	if(current.is(':last-child')){
	var getnext = $("#divhold div:first-child");
	}
	$("#divhold div").fadeTo("slow", "0.3", function(){ $("#divhold div").removeClass("active");getnext.fadeTo("slow", "1").addClass("active") });

}

Stopping and Starting the loop

Now we have the loop working just as we want it we need a way to stop it. clearInterval takes care of this for us. We can use the clearInterval function anywhere we want it such as separate button away from the holder div or when a visitor mouses over one of the blue boxes. Take a look at the fourth and final demo page to see a number of different options to stop our loop and start it again.

clearInterval function

clearInterval(divswap);

The clearInterval function takes in the variable name we assigned to setInterval earlier and stops it completely. You can use the function on hover or click or any other Javascript you like.

clearInterval on mouseenter

$(".cbox").mouseenter(function(){
		clearInterval(divswap);
	});

To start it again we simply use the same function we used in the first document ready instance.

Original setInterval start code

var divswap = setInterval('swapem()', 5000);

This too can be dropped inside of any Javascript event.

Starting the loop again onClick

$(".start").click(function(){
	var divswap = setInterval('swapem()', 5000);
			return false;
	});

Applying this to sites in the wild …

I’m hoping this basic tutorial has given you a good starting point for something more advanced. The ‘blue boxes’ used in the demo pages of this tutorial could potentially be any style you wanted and could contain any number of child elements. The beauty of creating something like this from barebone code as provided here is that you don’t get plug-ins packed full of features that you’ll never need and you’ll always know where you are in the code.

If there are any questions feel free to ask away in the comments.

Demo Pages Recap :

• Demo page one - Setting up the html and css
• Demo page two – Adding the animation and initial loop
• Demo page three – Adding continuous animation
• Demo page four – Adding animation controls
• Download all four demo pages