<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Page Elements &#8211; Rotates.org V12</title>
	<atom:link href="https://www.rotates.org/tag/page-elements/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.rotates.org</link>
	<description>The personal blog of developer, photographer and designer Lewis &#039;SEPTiMUS&#039; Lane</description>
	<lastBuildDate>Fri, 04 Dec 2009 21:38:25 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://www.rotates.org/wp-content/uploads/2025/06/cropped-rotates-logo-32x32.png</url>
	<title>Page Elements &#8211; Rotates.org V12</title>
	<link>https://www.rotates.org</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">6964888</site>	<item>
		<title>ColorShift 0.6</title>
		<link>https://www.rotates.org/2009/11/28/colorshift-0-6/</link>
		
		<dc:creator><![CDATA[SEPTiMUS]]></dc:creator>
		<pubDate>Sat, 28 Nov 2009 20:12:38 +0000</pubDate>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Projects]]></category>
		<category><![CDATA[Releases]]></category>
		<category><![CDATA[Attributes]]></category>
		<category><![CDATA[Background Color]]></category>
		<category><![CDATA[Change]]></category>
		<category><![CDATA[Colors]]></category>
		<category><![CDATA[Colours]]></category>
		<category><![CDATA[Global Change]]></category>
		<category><![CDATA[Hue Saturation]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Offsets]]></category>
		<category><![CDATA[Page Elements]]></category>
		<category><![CDATA[Selectors]]></category>
		<category><![CDATA[Slider]]></category>
		<category><![CDATA[Struggle]]></category>
		<category><![CDATA[Style Element]]></category>
		<guid isPermaLink="false">http://www.rotates.org/?p=134</guid>

					<description><![CDATA[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: [ [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Sooner rather than later it seems, you can now <a title="Rotates ColorShift 0.6" href="https://rotates.org/wp-content/plugins/download-monitor/download.php?id=1">download Rotates ColorShift 0.6</a> and bask in its amazingness.</p>
<p>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:</p>
<pre name="code" class="javascript">[
	{
		selector: "a, h2, h3, h4, h5",
		styles: [
			"color"
		]
	},
	{
		selector: "#header, #searchsubmit",
		styles: [
			"background-color"
		]
	}
]</pre>
<p>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 &#8216;Lew hacking pants&#8217; with the following solution:</p>
<pre name="code" class="javascript">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);
}</pre>
<p>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 <em>all</em> elements on the page (even generated ones)  just like CSS should be. Enjoy!</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">134</post-id>	</item>
	</channel>
</rss>
