jQuery – Rotates.org V12

ColorShift 0.7 (eek!)

SEPTiMUS — Sat, 28 Nov 2009 22:16:03 +0000

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!)

ColorShift 0.6

SEPTiMUS — Sat, 28 Nov 2009 20:12:38 +0000

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!

ColorShift update coming soon

SEPTiMUS — Sat, 28 Nov 2009 15:11:52 +0000

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.

ColorShift initial release

SEPTiMUS — Tue, 17 Mar 2009 19:40:18 +0000

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!

Acid rain

SEPTiMUS — Mon, 16 Mar 2009 00:27:30 +0000

Appropriately, I’ve decided to add some Flash to the header (which is likely to become more and more resource intensive as I meddle inexorably with its source) which is also appropriately melded in with CSS and Javascript via the nifty new colour changer…

Yes that’s right, you can now change the colour of my blog! Far be it for me as a designer to impose my will upon you and make you put up with my dodgy colours – choose your own dodgy colours instead!*

I’ll include the jQuery (and jQueryUI) source for the colour changer soon when I’ve cleaned up the selectors and made them a bit more portable.

* For the love of god, don’t make it pink though.