←

Hot on the heels of 0.6, now you can set offsets on a per-selector basis. This means you can alter multi-coloured websites in a relative way! Yay! Download it here.

Note the ‘styles’ item is now (correctly) called ‘attributes’.

Update: 0.71 quick bugfix release! Fixed not working in IE7 (boo!)

Sooner rather than later it seems, you can now download Rotates ColorShift 0.6 and bask in its amazingness.

The main change is how you set your selectors; instead of writing your own jQuery to target the elements you want to change, you feed rotColShiftOpts.cssTransforms with an array of objects. This is what Rotates.org uses:

[
	{
		selector: "a, h2, h3, h4, h5",
		styles: [
			"color"
		]
	},
	{
		selector: "#header, #searchsubmit",
		styles: [
			"background-color"
		]
	}
]

Actually it was a bit of a struggle, as I wanted to abandon the DOM-based approach to changing the CSS of every individual element, and go for a global stylesheet change. Easy you say? Just .append/.text a style element. Well, yes, in all decent browsers. Sadly, the IE family seems unwilling to let you tamper with the style element so easily, and jQuery (at the moment) has no elegant way around it. So out came the ‘Lew hacking pants’ with the following solution:

ieStyle = document.createStyleSheet();

$.each(rotColShiftOpts.cssTransforms, function(i, ttrans) {
	newColor = getColorWithOffsets(hue, saturation, brightness, ttrans.offsets);
	var tstyles = "";
	$.each(ttrans.attributes, function(i, ts) {
		tstyles += ts + ": " + newColor + ";";
	});
	tmpTransforms += ttrans.selector + "{ " + tstyles + " } ";
});

if ($.browser.msie) { // *sigh*
	ieStyle.cssText = tmpTransforms;
}
else {
	$("style[title='colshift']").text(tmpTransforms);
}

Anyway the result is that you a) get a better, easier to use syntax for applying the changes to page elements, and b) can be safe in the knowledge the styles will be applied to all elements on the page (even generated ones)  just like CSS should be. Enjoy!

I’ve been playing with various Twitter widgets for WordPress, none of which have been quite ‘right’, so I’ll be creating my own. This has also spurred me to update ColorShift, as the fail is now showing in the code, and it needs a more robust way of applying colours to all elements, including ones added after page load.

Look out for a new version of ColorShift in the next few days, along with possibly a new mini-project in the form of my own Twitter widget for WordPress – jQuery driven (of course), semantic, configurable, and with optional caching and API limit safety features.

As promised, I’ve added the slightly fettled version of ColorShift (as it’s now known – yes I’m English, no I won’t spell it ‘colour’ because I’m a webdev) to the site. Currently it’s in a pretty sorry state and only just works via the crutches of pure hackery that keep it standing…

… okay a bit melodramatic but you get the gist. Go get it!