<?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>trickeries! &#187; toy</title>
	<atom:link href="http://trickeries.com/tag/toy/feed/" rel="self" type="application/rss+xml" />
	<link>http://trickeries.com</link>
	<description>it's tricky to rock a style thats liked online</description>
	<lastBuildDate>Tue, 02 Mar 2010 06:01:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>MooTools Tips extension: Tips.Glossary</title>
		<link>http://trickeries.com/480/mootools-tips-extension-tipsglossary/</link>
		<comments>http://trickeries.com/480/mootools-tips-extension-tipsglossary/#comments</comments>
		<pubDate>Mon, 11 May 2009 01:25:29 +0000</pubDate>
		<dc:creator>atom</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[toy]]></category>

		<guid isPermaLink="false">http://trickeries.com/?p=480</guid>
		<description><![CDATA[This is just a little something I whipped up because I found it useful.  Tips.Glossary is used for helpful tool-tips that gracefully degrade when JavaScript is not available for whatever reason.  The basic idea is that you include an HTML glossary in the page, and if Tips.Glossary is available, the tips will come [...]]]></description>
			<content:encoded><![CDATA[<p>This is just a little something I whipped up because I found it useful.  Tips.Glossary is used for helpful tool-tips that gracefully degrade when JavaScript is not available for whatever reason.  The basic idea is that you include an HTML glossary in the page, and if Tips.Glossary is available, the tips will come up however you specify, if not, they are simply anchors to their entries in the HTML.</p>
<p>This probably works with most MooTools stuff post 1.2, you are smart and will figure it out.</p>
<h2><a href="/demo/Tips.Glossary/">Check it out here</a>.</p>
<h2><a href="/demo/Tips.Glossary/Tips.Glossary.Example.zip">Download the example</a>.</p>
<h3>or have a look at the code:</h3>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Selectors.<span style="color: #0066FF;">Pseudo</span>.<span style="color: #0066FF;">hash</span> <span style="color: #339933;">=</span> <span style="color: #FF00FF; font-weight: bold;">function</span><span style="color: #99FF00;">&#40;</span>hash<span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
	<span style="color: #00FF00; font-weight: bold;">if</span><span style="color: #99FF00;">&#40;</span><span style="color: #339933;">!</span>$chk<span style="color: #99FF00;">&#40;</span>hash<span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span>
		<span style="color: #00FF00; font-weight: bold;">return</span> <span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">get</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #99FF00;">&#41;</span>.<span style="color: #0066FF;">contains</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #FF00FF; font-weight: bold;">var</span> currentHash <span style="color: #339933;">=</span> <span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">get</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #99FF00;">&#41;</span>.<span style="color: #0066FF;">split</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#91;</span><span style="color: #FFFF00;">1</span><span style="color: #99FF00;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #00FF00; font-weight: bold;">return</span> currentHash <span style="color: #339933;">===</span> hash<span style="color: #339933;">;</span>
<span style="color: #99FF00;">&#125;</span>
&nbsp;
&nbsp;
Tips.<span style="color: #0066FF;">Glossary</span> <span style="color: #339933;">=</span> <span style="color: #FF00FF; font-weight: bold;">new</span> <span style="color: #FF00FF; font-weight: bold;">Class</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#123;</span>
&nbsp;
	<span style="color: #FF00FF; font-weight: bold;">Extends</span><span style="color: #339933;">:</span> Tips<span style="color: #339933;">,</span>
&nbsp;
	options<span style="color: #339933;">:</span> <span style="color: #99FF00;">&#123;</span>
		<span style="color: #3366CC;">'anchorClass'</span><span style="color: #339933;">:</span>	<span style="color: #FF00FF; font-weight: bold;">false</span><span style="color: #339933;">,</span>
		<span style="color: #3366CC;">'hideGlossary'</span><span style="color: #339933;">:</span>	<span style="color: #FF00FF; font-weight: bold;">true</span>
	<span style="color: #99FF00;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	initialize<span style="color: #339933;">:</span> <span style="color: #FF00FF; font-weight: bold;">function</span><span style="color: #99FF00;">&#40;</span>glossary<span style="color: #339933;">,</span> options<span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
		<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">parent</span><span style="color: #99FF00;">&#40;</span>options<span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">glossary</span> <span style="color: #339933;">=</span> $<span style="color: #99FF00;">&#40;</span>glossary<span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">if</span><span style="color: #99FF00;">&#40;</span><span style="color: #339933;">!</span>$chk<span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">glossary</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span>
			<span style="color: #00FF00; font-weight: bold;">throw</span> <span style="color: #3366CC;">&quot;Glossary not found / defined, quitting&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">if</span><span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">options</span>.<span style="color: #0066FF;">hideGlossary</span><span style="color: #99FF00;">&#41;</span>
			<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">glossary</span>.<span style="color: #0066FF;">setStyle</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'none'</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">indexGlossary</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">return</span> <span style="color: #00FF00; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #99FF00;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	indexGlossary<span style="color: #339933;">:</span> <span style="color: #FF00FF; font-weight: bold;">function</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
		<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">items</span> <span style="color: #339933;">=</span> <span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">glossary</span>.<span style="color: #0066FF;">getElements</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'*[id]'</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">anchors</span> <span style="color: #339933;">=</span> <span style="color: #FF00FF; font-weight: bold;">new</span> Elements<span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">items</span>.<span style="color: #0066FF;">each</span><span style="color: #99FF00;">&#40;</span><span style="color: #FF00FF; font-weight: bold;">function</span><span style="color: #99FF00;">&#40;</span>e<span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
			<span style="color: #FF00FF; font-weight: bold;">var</span> anchor <span style="color: #339933;">=</span> $<span style="color: #99FF00;">&#40;</span>document.<span style="color: #0066FF;">body</span><span style="color: #99FF00;">&#41;</span>.<span style="color: #0066FF;">getElement</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'a:hash('</span><span style="color: #339933;">+</span>e.<span style="color: #0066FF;">get</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">')'</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #00FF00; font-weight: bold;">if</span><span style="color: #99FF00;">&#40;</span>$chk<span style="color: #99FF00;">&#40;</span>anchor<span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
				<span style="color: #00FF00; font-weight: bold;">if</span><span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">options</span>.<span style="color: #0066FF;">hideGlossary</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
				anchor.<span style="color: #0066FF;">addEvent</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #FF00FF; font-weight: bold;">function</span><span style="color: #99FF00;">&#40;</span>event<span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
					<span style="color: #FF00FF; font-weight: bold;">new</span> Event<span style="color: #99FF00;">&#40;</span>event<span style="color: #99FF00;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #99FF00;">&#125;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">setTipContent</span><span style="color: #99FF00;">&#40;</span>anchor<span style="color: #339933;">,</span> e<span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">anchors</span>.<span style="color: #0066FF;">push</span><span style="color: #99FF00;">&#40;</span>anchor<span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #99FF00;">&#125;</span>
			<span style="color: #00FF00; font-weight: bold;">if</span><span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">options</span>.<span style="color: #0066FF;">anchorClass</span><span style="color: #99FF00;">&#41;</span>
				<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">anchors</span>.<span style="color: #0066FF;">addClass</span><span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">options</span>.<span style="color: #0066FF;">anchorClass</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">attach</span><span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">anchors</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #99FF00;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #00FF00; font-weight: bold;">this</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #99FF00;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	setTipContent<span style="color: #339933;">:</span> <span style="color: #FF00FF; font-weight: bold;">function</span><span style="color: #99FF00;">&#40;</span>anchor<span style="color: #339933;">,</span> target<span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
		anchor.<span style="color: #0066FF;">store</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'tip:title'</span><span style="color: #339933;">,</span> target.<span style="color: #0066FF;">get</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'title'</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		anchor.<span style="color: #0066FF;">store</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'tip:text'</span><span style="color: #339933;">,</span> target.<span style="color: #0066FF;">get</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'html'</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">fireEvent</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'settingContent'</span><span style="color: #339933;">,</span> <span style="color: #99FF00;">&#91;</span>anchor<span style="color: #339933;">,</span> target<span style="color: #99FF00;">&#93;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #99FF00;">&#125;</span>
&nbsp;
<span style="color: #99FF00;">&#125;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>On a side note, notice the psuedo selector being added.  This has been added because for whatever reason, the following CSS3 selector is goofy:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #99FF00;">&#40;</span>document.<span style="color: #0066FF;">body</span><span style="color: #99FF00;">&#41;</span>.<span style="color: #0066FF;">getElements</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'a[href=&quot;http://trickeries.com&quot;]'</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// works</span>
$<span style="color: #99FF00;">&#40;</span>document.<span style="color: #0066FF;">body</span><span style="color: #99FF00;">&#41;</span>.<span style="color: #0066FF;">getElements</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'a[href=&quot;#glossary-username&quot;]'</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>    <span style="color: #006600; font-style: italic;">// does not work</span></pre></div></div>

<p>Anyone have any idea why?</p>
]]></content:encoded>
			<wfw:commentRss>http://trickeries.com/480/mootools-tips-extension-tipsglossary/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Pixler: a transparent PNG pixel generator</title>
		<link>http://trickeries.com/252/pixler-a-transparent-png-pixel-generator/</link>
		<comments>http://trickeries.com/252/pixler-a-transparent-png-pixel-generator/#comments</comments>
		<pubDate>Sun, 16 Nov 2008 10:40:13 +0000</pubDate>
		<dc:creator>atom</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[pixler]]></category>
		<category><![CDATA[png]]></category>
		<category><![CDATA[toy]]></category>

		<guid isPermaLink="false">http://trickeries.com/?p=252</guid>
		<description><![CDATA[I made a weensy little script for the theme I recently made (which I still have not named or prepared for distribution) which will generate single pixel transparent pngs to use as tiled background images in css.
demonstration toy

&#60;?php    
&#160;
	$p = imagecreatetruecolor&#40;1, 1&#41;;
	imagesavealpha&#40;$p, true&#41;;
	$o = &#40;100 - &#40;int&#41; $_GET&#91;'o'&#93;&#41; * 1.27;
	$c = imagecolorallocatealpha&#40;$p, [...]]]></description>
			<content:encoded><![CDATA[<p>I made a weensy little script for the theme I recently made (which I still have not named or prepared for distribution) which will generate single pixel transparent pngs to use as tiled background images in css.</p>
<h2><a href="http://trickeries.com/demo/pixler/">demonstration toy</a></h2>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #FF00FF; font-weight: bold;">&lt;?php</span>    
&nbsp;
	<span style="color: #00FF00;">$p</span> <span style="color: #339933;">=</span> <span style="color: #0066FF;">imagecreatetruecolor</span><span style="color: #FF6600;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #FF6600;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #0066FF;">imagesavealpha</span><span style="color: #FF6600;">&#40;</span><span style="color: #00FF00;">$p</span><span style="color: #339933;">,</span> <span style="color: #FF6600; font-weight: bold;">true</span><span style="color: #FF6600;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #00FF00;">$o</span> <span style="color: #339933;">=</span> <span style="color: #FF6600;">&#40;</span><span style="color: #cc66cc;">100</span> <span style="color: #339933;">-</span> <span style="color: #FF6600;">&#40;</span>int<span style="color: #FF6600;">&#41;</span> <span style="color: #00FF00;">$_GET</span><span style="color: #FF6600;">&#91;</span><span style="color: #0000ff;">'o'</span><span style="color: #FF6600;">&#93;</span><span style="color: #FF6600;">&#41;</span> <span style="color: #339933;">*</span> <span style="color:#800080;">1.27</span><span style="color: #339933;">;</span>
	<span style="color: #00FF00;">$c</span> <span style="color: #339933;">=</span> <span style="color: #0066FF;">imagecolorallocatealpha</span><span style="color: #FF6600;">&#40;</span><span style="color: #00FF00;">$p</span><span style="color: #339933;">,</span> <span style="color: #FF6600;">&#40;</span>int<span style="color: #FF6600;">&#41;</span> <span style="color: #00FF00;">$_GET</span><span style="color: #FF6600;">&#91;</span><span style="color: #0000ff;">'r'</span><span style="color: #FF6600;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #FF6600;">&#40;</span>int<span style="color: #FF6600;">&#41;</span> <span style="color: #00FF00;">$_GET</span><span style="color: #FF6600;">&#91;</span><span style="color: #0000ff;">'g'</span><span style="color: #FF6600;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #FF6600;">&#40;</span>int<span style="color: #FF6600;">&#41;</span> <span style="color: #00FF00;">$_GET</span><span style="color: #FF6600;">&#91;</span><span style="color: #0000ff;">'b'</span><span style="color: #FF6600;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #00FF00;">$o</span><span style="color: #FF6600;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #0066FF;">imagefill</span><span style="color: #FF6600;">&#40;</span><span style="color: #00FF00;">$p</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #00FF00;">$c</span><span style="color: #FF6600;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #0066FF;">header</span><span style="color: #FF6600;">&#40;</span><span style="color: #FF0000;">&quot;Content-type: image/png&quot;</span><span style="color: #FF6600;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #0066FF;">imagepng</span><span style="color: #FF6600;">&#40;</span><span style="color: #00FF00;">$p</span><span style="color: #FF6600;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<h2>usage / parameters:</h2>
<dl>
<dt>r</dt>
<dd>how much red to include: r=[0-255]</dd>
<dt>g</dt>
<dd>how much green to include: g=[0-255]</dd>
<dt>b</dt>
<dd>how much blue to include: b=[0-255]</dd>
<dt>o</dt>
<dd>how opaque the pixel should be: o=[0(fully transparent)-100(fully opaque)]</dd>
</dl>
<h2>so&#8230;</h2>
<dl>
<dt>pixler.php?r=255&amp;g=255&amp;b=255&amp;o=50</dt>
<dd>will make a white pixel that is 50% visible.</dd>
<dt>pixler.php?r=255&amp;o=100</dt>
<dd>will make a red pixel that is fully visible.</dd>
<dt>pixler.php</dt>
<dd>calling the script with no parameters will create an invisible black pixel (&#8230;).</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://trickeries.com/252/pixler-a-transparent-png-pixel-generator/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Queuing ajax requests with MooTools 1.2</title>
		<link>http://trickeries.com/189/queuing-ajax-requests-with-mootools-12/</link>
		<comments>http://trickeries.com/189/queuing-ajax-requests-with-mootools-12/#comments</comments>
		<pubDate>Wed, 30 Jul 2008 05:24:03 +0000</pubDate>
		<dc:creator>atom</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[downloads]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[implement]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[request.queue]]></category>
		<category><![CDATA[toy]]></category>

		<guid isPermaLink="false">http://trickeries.com/?p=189</guid>
		<description><![CDATA[UPDATE: This might be sorta useless.  Please see this comment.
There have been a variety of occasions where I only want one instance of the Request object, but want to make sure that every request I attempt gets run without canceling another, or screwing around with onCompletes.  The following is a rather simple implement that [...]]]></description>
			<content:encoded><![CDATA[<h2><strong title="updated 08/06/2008 4:06 AM">UPDATE</strong>: This might be sorta useless.  Please see <a href="http://trickeries.com/189/queuing-ajax-requests-with-mootools-12/#comment-1825">this comment</a>.</h2>
<p>There have been a variety of occasions where I only want one instance of the Request object, but want to make sure that every request I attempt gets run without canceling another, or screwing around with onCompletes.  The following is a rather simple implement that takes care of this problem:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Request.<span style="color: #0066FF;">implement</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#123;</span>
    queue<span style="color: #339933;">:</span> <span style="color: #FF00FF; font-weight: bold;">function</span><span style="color: #99FF00;">&#40;</span>sendArg<span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
        <span style="color: #00FF00; font-weight: bold;">if</span><span style="color: #99FF00;">&#40;</span><span style="color: #339933;">!</span>$defined<span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">queued</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span>
            <span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">queued</span> <span style="color: #339933;">=</span> <span style="color: #99FF00;">&#91;</span><span style="color: #99FF00;">&#93;</span><span style="color: #339933;">;</span>
        <span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">queued</span>.<span style="color: #0066FF;">push</span><span style="color: #99FF00;">&#40;</span>sendArg<span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">processQueue</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #99FF00;">&#125;</span><span style="color: #339933;">,</span>
    processQueue<span style="color: #339933;">:</span> <span style="color: #FF00FF; font-weight: bold;">function</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#123;</span>
		<span style="color: #00FF00; font-weight: bold;">if</span><span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">timer</span><span style="color: #99FF00;">&#41;</span>
			$clear<span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">timer</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">if</span> <span style="color: #99FF00;">&#40;</span><span style="color: #339933;">!</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">check</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span>
			<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">timer</span> <span style="color: #339933;">=</span> <span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">processQueue</span>.<span style="color: #0066FF;">delay</span><span style="color: #99FF00;">&#40;</span><span style="color: #FFFF00;">250</span><span style="color: #339933;">,</span> <span style="color: #00FF00; font-weight: bold;">this</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #00FF00; font-weight: bold;">else</span> <span style="color: #99FF00;">&#123;</span>
			<span style="color: #00FF00; font-weight: bold;">if</span> <span style="color: #99FF00;">&#40;</span>$defined<span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">queued</span><span style="color: #99FF00;">&#91;</span><span style="color: #FFFF00;">0</span><span style="color: #99FF00;">&#93;</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span> <span style="color: #99FF00;">&#123;</span>
				<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">send</span><span style="color: #99FF00;">&#40;</span><span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">queued</span>.<span style="color: #0066FF;">shift</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">processQueue</span><span style="color: #99FF00;">&#40;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #99FF00;">&#125;</span>
			<span style="color: #00FF00; font-weight: bold;">else</span>
				<span style="color: #00FF00; font-weight: bold;">this</span>.<span style="color: #0066FF;">fireEvent</span><span style="color: #99FF00;">&#40;</span><span style="color: #3366CC;">'onQueueEmpty'</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #99FF00;">&#125;</span>
    <span style="color: #99FF00;">&#125;</span>
<span style="color: #99FF00;">&#125;</span><span style="color: #99FF00;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This will basically stack requests and send them in the order received.  If there is no stack, the request will be sent immediately.</p>
<p>The usage is the same as the normal <a title="MooTools request send method" href="http://docs.mootools.net/Request/Request#Request:send">Request send method</a>, however there is now an onQueueEmpty event to tell when all requests in the queue have been sent.</p>
<h2><a title="Request.queue() example usage / demonstration" href="http://trickeries.com/demo/Request.queue/">example</a></h2>
<h2><a title="Download the example for Request.queue()" href="http://trickeries.com/wp-content/uploads/2008/07/requestqueue.zip">download w/the example</a></h2>
]]></content:encoded>
			<wfw:commentRss>http://trickeries.com/189/queuing-ajax-requests-with-mootools-12/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Sortable Slideable Saveable &#8211; a Mootools 1.2 class</title>
		<link>http://trickeries.com/186/sortable-slideable-saveable-a-mootools-12-class/</link>
		<comments>http://trickeries.com/186/sortable-slideable-saveable-a-mootools-12-class/#comments</comments>
		<pubDate>Mon, 28 Jul 2008 09:11:53 +0000</pubDate>
		<dc:creator>atom</dc:creator>
				<category><![CDATA[downloads]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[sortable slideable saveable]]></category>
		<category><![CDATA[toy]]></category>

		<guid isPermaLink="false">http://trickeries.com/?p=186</guid>
		<description><![CDATA[Sortable Slideable Saveable (sss) is a class I wrote up that allows you to have a list of elements that can be sorted, toggled, and the state of each will be saved each time a change is made, either using a cookie or a couple of ajax / json calls.
It can be seen in action [...]]]></description>
			<content:encoded><![CDATA[<p>Sortable Slideable Saveable (sss) is a class I wrote up that allows you to have a list of elements that can be sorted, toggled, and the state of each will be saved each time a change is made, either using a cookie or a couple of ajax / json calls.</p>
<p>It can be seen in action in my sidebar to the right.  You can drag / sort them by dragging the icons, and you can toggle them by clicking on the title of each.  Any changes you make will be stored in a cookie, you can reload the page and they should be in the state you left them in.</p>
<p>I will probably update this and provide some detailed documentation shortly. If anyone has any questions, let me know.  Also if anyone has any input on how to make it better, let me know.</p>
<h2><a href="http://trickeries.com/demo/sss/">another example</a></h2>
<h2><a title="sortable slideable saveable" href="http://trickeries.com/wp-content/uploads/2008/07/sss.zip">download w/the example</a></h2>
]]></content:encoded>
			<wfw:commentRss>http://trickeries.com/186/sortable-slideable-saveable-a-mootools-12-class/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>dancing kirby javascript bookmarklet</title>
		<link>http://trickeries.com/183/dancing-kirby-javascript-bookmarklet/</link>
		<comments>http://trickeries.com/183/dancing-kirby-javascript-bookmarklet/#comments</comments>
		<pubDate>Sat, 26 Jul 2008 03:26:55 +0000</pubDate>
		<dc:creator>atom</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[kirby]]></category>
		<category><![CDATA[quick]]></category>
		<category><![CDATA[toy]]></category>

		<guid isPermaLink="false">http://trickeries.com/?p=183</guid>
		<description><![CDATA[I made this because i figured it was just what everyone needed (because everyone is grumpy all the time).  It is a simple javascript function you can store in a bookmark that will add a sweet dancing kirby to any page you are on.
(&#62;^ &#8211; ^)&#62; fire him up &#60;(^ &#8211; ^&#60;)
]]></description>
			<content:encoded><![CDATA[<p>I made this because i figured it was just what everyone needed (because everyone is grumpy all the time).  It is a simple javascript function you can store in a bookmark that will add a sweet dancing kirby to any page you are on.</p>
<h2><a href="javascript:(function(){var k = ['&lt;(^_^)&gt;','&lt;(^_^&lt;)','--(^_^\\)','\\(^_^\\)','|(^_^)|','(/^_^)/','(/^_^)--','(&gt;^_^)&gt;','(/^_^)--','(/^_^)/','|(^_^)|','\\(^_^\\)','--(^_^\\)','(&gt;_&lt;)','&lt;(^_^)&gt;','(&gt;_&lt;)','&lt;(^_^)&gt;','(&gt;^_^)/','\\(^_^&lt;)','(&gt;^_^)/','\\(^_^&lt;)','\\(^_^)/','/(-_-)\\','/(-_-)\\','/(-_-)\\','/(-_o)\\','/(-_-)\\','/(o_-)\\','/(-_-)\\','/(o_o)\\','/(-_-)\\','\\(^o^)/','\\(^o^)/','\\(^o^)/','\\(^o^)/'];var i=0;function d(){if(document.getElementById('k') == null){e=document.createElement('h1');e.setAttribute('id','k');e.setAttribute('style','font-size:60px;position:fixed;top:0');document.body.appendChild(e)}e.innerHTML = k[i];i++;if(i == k.length)i = 0;setTimeout(d, 250)}d()})()">(&gt;^ &#8211; ^)&gt; fire him up &lt;(^ &#8211; ^&lt;)</a></h2>
]]></content:encoded>
			<wfw:commentRss>http://trickeries.com/183/dancing-kirby-javascript-bookmarklet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>mootools rainbow toy: the trickeries! technicolor dream machine</title>
		<link>http://trickeries.com/112/mootools-rainbow-toy-the-trickeries-technicolor-dream-machine/</link>
		<comments>http://trickeries.com/112/mootools-rainbow-toy-the-trickeries-technicolor-dream-machine/#comments</comments>
		<pubDate>Tue, 20 May 2008 05:47:09 +0000</pubDate>
		<dc:creator>atom</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[rainbow]]></category>
		<category><![CDATA[toy]]></category>

		<guid isPermaLink="false">http://trickeries.com/?p=112</guid>
		<description><![CDATA[
I got a little bored this weekend, and decided to make myself a toy to play with rainbows, and give it a stupid name.
There is actually some pretty cool stuff going on, it is written in javascript(w/some sweet sweet mootools), and a little bit of php for automagic.
I wrote a class to make the rainbow, [...]]]></description>
			<content:encoded><![CDATA[<p class="image"><a title="the trickeries! technicolor dream machine" href="http://trickeries.com/demo/technicolorDreamMachine/"><img title="the trickeries! technicolor dream machine" src="http://trickeries.com/wp-content/uploads/2008/05/technicolordreammachine.png" alt="the treickeries! technicolor dream machine" width="434" height="315" /></a></p>
<p>I got a little bored this weekend, and decided to make myself a toy to play with rainbows, and give it a stupid name.</p>
<p>There is actually some pretty cool stuff going on, it is written in javascript(w/some sweet sweet mootools), and a little bit of php for automagic.</p>
<p>I wrote a class to make the rainbow, and one for the sliders you see.  If you think either would be useful, they are included in the head.</p>
]]></content:encoded>
			<wfw:commentRss>http://trickeries.com/112/mootools-rainbow-toy-the-trickeries-technicolor-dream-machine/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
