<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Aaha Creative: Web Developer</title>
	
	<link>http://aahacreative.com</link>
	<description>How long before you say AaHa?</description>
	<lastBuildDate>Fri, 12 Apr 2013 14:59:52 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/AahaCreative" /><feedburner:info uri="aahacreative" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Sublime Text 3: Open File’s Parent Folder in Linux</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/fiHFJGAyU-Y/</link>
		<comments>http://aahacreative.com/2013/04/12/sublime-text-3-open-files-parent-folder-linux/#comments</comments>
		<pubDate>Fri, 12 Apr 2013 14:59:23 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[python]]></category>
		<category><![CDATA[sublime text 3]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=862</guid>
		<description><![CDATA[Here is a very quick script for Sublime Text 3 to open the current file&#8217;s parent folder in nautilus for Ubuntu. Installation is simple: edit the keybind files and save the python script below to the ~/.config/sublime-text-3/Packages/User/ folder. If you<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2013/04/12/sublime-text-3-open-files-parent-folder-linux/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>Here is a very quick <a href="https://gist.github.com/Aaron3/5372437">script</a> for <a href="http://www.sublimetext.com/3" title="Sublime text 3">Sublime Text 3</a> to open the current file&#8217;s parent folder in nautilus for Ubuntu.</p>

<p>Installation is simple: edit the keybind files and save the python script below to the ~/.config/sublime-text-3/Packages/User/ folder. If you are using sublime-text-2 or a different Linux distro, you may need to change your config folder url.</p>

<p>Obviously, you can change Nautilus to be another file manager such as Dolphin or Thunar if you prefer.</p>

<span class="post_thumbnail "><img width="590" height="150" src="http://aaha.a-cdn.info/files/2013/04/sublime-text-3-script.png" class="attachment-post-hero wp-post-image" alt="Sublime Text 3 Open in File Manager" /></span>

<h3>In your keybindings file: </h3>

<p>You can change the key combination to anything you want.</p>

<p><pre><code>[
    { &quot;keys&quot;: [&quot;ctrl+shift+e&quot;], &quot;command&quot;: &quot;open_folder_in_nautilus&quot; }
]</code></pre></p>

<h3>Save the following Sublime Text 3 script in a .py file</h3>

<p><pre><code>import sublime, sublime_plugin, os, subprocess

class OpenFolderInNautilusCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        if self.view.file_name():
            folder_name, file_name = os.path.split(self.view.file_name())
            self.view.window().run_command(&#039;exec&#039;, {&#039;cmd&#039;: [&#039;nautilus &#039; + folder_name], &#039;shell&#039;:True}</code></pre></p>

<p>And the embedded gist:
<script src="http://gist.github.com/Aaron3/5372437.js?googlechromeisweird"></script></p>

<p>This script is based entirely on <a href="https://gist.github.com/hoffstein/1089794">this one for Windows</a>.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/fiHFJGAyU-Y" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2013/04/12/sublime-text-3-open-files-parent-folder-linux/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2013/04/12/sublime-text-3-open-files-parent-folder-linux/</feedburner:origLink></item>
		<item>
		<title>PHP Syntax Highlighting For Prism.js</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/ALqmS5MxBFw/</link>
		<comments>http://aahacreative.com/2012/07/31/php-syntax-highlighting-prism/#comments</comments>
		<pubDate>Tue, 31 Jul 2012 14:18:19 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[syntax-highlighter]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=800</guid>
		<description><![CDATA[I wanted to test the newly-released Prism.js since it promised clean markup and easy plugin development, but I found it was lacking a major feature for my own use: PHP Syntax Highlighting. So, letting the code be my guide, I<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2012/07/31/php-syntax-highlighting-prism/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>I wanted to test the newly-released <a href="http://prismjs.com/" title="Prism Syntax Highlighter">Prism.js</a> since it promised clean markup and easy plugin development, but I found it was lacking a major feature for my own use: PHP Syntax Highlighting.</p>

<p>So, letting the code be my guide, I present an add-on to Prism.js less than 10 hours after it was released into the wild <a href="http://lea.verou.me/2012/07/introducing-prism-an-awesome-new-syntax-highlighter/">publicly</a>.</p>

<p><strong>Update:</strong> Instead of using the below code-blocks, you can just grab it from my <a href="https://github.com/Aaron3/prism/tree/php">forked repository</a>. The repository has a few other updates and fixes.</p>

<span class="post_thumbnail "><img width="590" height="150" src="http://aaha.a-cdn.info/files/2012/07/Prism.png" class="attachment-post-hero wp-post-image" alt="Prism" /></span>

<p>The following code snippets can be added into an external .js file or the main prism.js file. The modifications are mainly for testing (read: kinda buggy) and released under the same license Prism itself is.</p>

<h3>Add PHP Syntax Highlighting </h3>

<p><pre class="language-javascript"><code class="language-javascript">Prism.languages.php = {
	&#039;comment&#039;: {
		pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
		lookbehind: true
	},
	&#039;deliminator&#039;: /(\?&gt;|\?&amp;gt;|&amp;lt;\?php|&lt;\?php)/ig,
	&#039;variable&#039;: /(\$\w+)\b/ig,
	&#039;string&#039;: /(&quot;|&#039;)(\\?.)*?\1/g,
	&#039;regex&#039;: {
		pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,
		lookbehind: true
	},
	&#039;keyword&#039;: /\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|extends|private|protected|throw)\b/g,
	&#039;function&#039;: /\b(abs|acos|acosh|addcslashes|addslashes|array_change_key_case|array_chunk|array_combine|array_count_values|array_diff|array_diff_assoc|array_diff_key|array_diff_uassoc|array_diff_ukey|array_fill|array_filter|array_flip|array_intersect|array_intersect_assoc|array_intersect_key|array_intersect_uassoc|array_intersect_ukey|array_key_exists|array_keys|array_map|array_merge|array_merge_recursive|array_multisort|array_pad|array_pop|array_product|array_push|array_rand|array_reduce|array_reverse|array_search|array_shift|array_slice|array_splice|array_sum|array_udiff|array_udiff_assoc|array_udiff_uassoc|array_uintersect|array_uintersect_assoc|array_uintersect_uassoc|array_unique|array_unshift|array_values|array_walk|array_walk_recursive|atan|atan2|atanh|base64_decode|base64_encode|base_convert|basename|bcadd|bccomp|bcdiv|bcmod|bcmul|bindec|bindtextdomain|bzclose|bzcompress|bzdecompress|bzerrno|bzerror|bzerrstr|bzflush|bzopen|bzread|bzwrite|ceil|chdir|checkdate|checkdnsrr|chgrp|chmod|chop|chown|chr|chroot|chunk_split|class_exists|closedir|closelog|copy|cos|cosh|count|count_chars|date|decbin|dechex|decoct|deg2rad|delete|ebcdic2ascii|echo|empty|end|ereg|ereg_replace|eregi|eregi_replace|error_log|error_reporting|escapeshellarg|escapeshellcmd|eval|exec|exit|exp|explode|extension_loaded|feof|fflush|fgetc|fgetcsv|fgets|fgetss|file_exists|file_get_contents|file_put_contents|fileatime|filectime|filegroup|fileinode|filemtime|fileowner|fileperms|filesize|filetype|floatval|flock|floor|flush|fmod|fnmatch|fopen|fpassthru|fprintf|fputcsv|fputs|fread|fscanf|fseek|fsockopen|fstat|ftell|ftok|getallheaders|getcwd|getdate|getenv|gethostbyaddr|gethostbyname|gethostbynamel|getimagesize|getlastmod|getmxrr|getmygid|getmyinode|getmypid|getmyuid|getopt|getprotobyname|getprotobynumber|getrandmax|getrusage|getservbyname|getservbyport|gettext|gettimeofday|gettype|glob|gmdate|gmmktime|ini_alter|ini_get|ini_get_all|ini_restore|ini_set|interface_exists|intval|ip2long|is_a|is_array|is_bool|is_callable|is_dir|is_double|is_executable|is_file|is_finite|is_float|is_infinite|is_int|is_integer|is_link|is_long|is_nan|is_null|is_numeric|is_object|is_readable|is_real|is_resource|is_scalar|is_soap_fault|is_string|is_subclass_of|is_uploaded_file|is_writable|is_writeable|mkdir|mktime|nl2br|parse_ini_file|parse_str|parse_url|passthru|pathinfo|readlink|realpath|rewind|rewinddir|rmdir|round|str_ireplace|str_pad|str_repeat|str_replace|str_rot13|str_shuffle|str_split|str_word_count|strcasecmp|strchr|strcmp|strcoll|strcspn|strftime|strip_tags|stripcslashes|stripos|stripslashes|stristr|strlen|strnatcasecmp|strnatcmp|strncasecmp|strncmp|strpbrk|strpos|strptime|strrchr|strrev|strripos|strrpos|strspn|strstr|strtok|strtolower|strtotime|strtoupper|strtr|strval|substr|substr_compare)\b/g,
	&#039;constant&#039;: /\b(__FILE__|__LINE__|__METHOD__|__FUNCTION__|__CLASS__)\b/g,
	&#039;boolean&#039;: /\b(true|false)\b/g,
	&#039;number&#039;: /\b-?(0x)?\d*\.?\d+\b/g,
	&#039;operator&#039;: /[-+]{1,2}|!|=?\&lt;|=?\&gt;;|={1,2}(?!&gt;)|(\&amp;){1,2}|\|?\||\?|\*|\//g,
	&#039;punctuation&#039;: /[{}[\];(),.:]/g
};</code></pre></p>

<h3>Allow embedded HTML in PHP</h3>

<p><pre class="language-javascript"><code class="language-javascript">if (Prism.languages.markup) {
	Prism.languages.insertBefore(&#039;php&#039;, &#039;comment&#039;, {
		&#039;markup&#039;: {
			pattern: /(\?&gt;|\?&amp;gt;)[\w\W]*?(?=(&amp;lt;\?php|&lt;\?php))/ig,
			lookbehind : true,
			inside: {
				&#039;markup&#039;: {
					pattern: /&amp;lt;\/?[\w:-]+\s*[\w\W]*?&amp;gt;/gi,
					inside: Prism.languages.markup.tag.inside
				},
				rest: Prism.languages.php
			}
		}
	});
}</code></pre></p>

<h3>NOTES / Warnings </h3>

<p>This code adds several new language elements named: function, <del datetime="2012-07-31T22:22:06+00:00">keyword,</del> variable and constant that have no CSS attributed to them, so use this CSS somewhere.</p>

<p><pre class="language-css"><code class="language-css">.token.function, .token.constant {
	color: #07a;
}
.token.variable {
	color: #e90;
}

.token.deliminator {
	font-weight:bold;
}</code></pre></p>

<p>This code has NOT been heavily tested, but has been run successfully against the following block of code:</p>

<p><pre class="language-php"><code class="language-php">/**
			Sample Block. 
			Author: Aaron Harun
			URL: http://aaron.md, http://aahacreative.com
		**/
    if(__FILE__){
        $explicitive = ($happyandyouknowit == false) ? &#039;:(&#039; : &#039;! =D&#039;;
        // Stick in some HTML. 
        ?&amp;gt;
        	&amp;ltstrong&gt;Why,&amp;lt/strong&gt;
        &amp;lt?php
        echo &#039;hello &#039; . &quot;world&quot; . addslashes($explicitive);
    }</code></pre></p>

<p><del datetime="2012-07-31T22:22:06+00:00">It doesn&#8217;t cover PHP embedded in HTML yet, but it seems very easy to do. </del> The Repository version has it.</p>

<p><del datetime="2012-08-02T13:54:09+00:00">And finally, Prism.js is not running on this site, yet. I&#8217;ll have to integrate it into WP before that&#8217;s possible.</del> Integrated with WP. Booyah.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/ALqmS5MxBFw" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2012/07/31/php-syntax-highlighting-prism/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2012/07/31/php-syntax-highlighting-prism/</feedburner:origLink></item>
		<item>
		<title>Add Ext2,  Ext3 and Ext4 partitions to Picasa 3 under Windows.</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/NuUI_7anLbc/</link>
		<comments>http://aahacreative.com/2012/06/13/add-ext2-ext3-ext4-partitions-picasa-3/#comments</comments>
		<pubDate>Wed, 13 Jun 2012 11:10:46 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=755</guid>
		<description><![CDATA[When dual-booting Linux with Windows 7, Picasa will not recognize mounted EXT2, EXT3 or EXT4 partitions under Windows. (First of course, you need to get windows to recognise the partitions with the EXT2Fsd drivers.) To add EXT4 (etc) partitions to<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2012/06/13/add-ext2-ext3-ext4-partitions-picasa-3/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>When dual-booting Linux with Windows 7, Picasa will not recognize mounted EXT2, EXT3 or EXT4 partitions under Windows. (First of course, you need to get windows to recognise the partitions with the <a href="http://www.ext2fsd.com/" title="Open source ext3/4 file system driver for Windows">EXT2Fsd</a> drivers.)</p>

<span class="post_thumbnail "><img width="590" height="150" src="http://aaha.a-cdn.info/files/2012/06/picasa.png" class="attachment-post-hero wp-post-image" alt="picasa" /></span>

<p>To add EXT4 (etc) partitions to Picasa under windows:</p>

<p>1) Mount your EXT2, EXT3 or Ext 4 partition under windows.</p>

<p>2) Network share the partition.</p>

<p>3) Browse your network shares and Map a drive letter to the shared partition.</p>

<p>4) Add the Network Share to Picasa.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/NuUI_7anLbc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2012/06/13/add-ext2-ext3-ext4-partitions-picasa-3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2012/06/13/add-ext2-ext3-ext4-partitions-picasa-3/</feedburner:origLink></item>
		<item>
		<title>Dynamically Resizing Text with jQuery</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/Te1K_1_GEWg/</link>
		<comments>http://aahacreative.com/2012/02/27/dynamically-resizing-text-jquery/#comments</comments>
		<pubDate>Mon, 27 Feb 2012 12:50:25 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[Demo]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=631</guid>
		<description><![CDATA[Dynamically resized text ensures that when necessary, text can fit to a pixel-perfect width in any browser and any operating system. While fonts are similar enough across most browsers and OS, in headlines or other locations where overflow text would<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2012/02/27/dynamically-resizing-text-jquery/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>Dynamically resized text ensures that when necessary, text can fit to a pixel-perfect width in any browser and any operating system. While fonts are similar enough across most browsers and OS, in headlines or other locations where overflow text would break layout, occasionally, one browser will have issues where otheres don&#8217;t. In this case, we can ensure that all browsers work at once with a little jQuery.</p>

<span class="post_thumbnail "><img width="586" height="150" src="http://aaha.a-cdn.info/files/2012/02/dynamically-resized-text.png" class="attachment-post-hero wp-post-image" alt="dynamically-resized-text" /></span>

<p><a href="http://aahacreative.com/demos/dynamically-resize-text-js/">See the Demo </a></p>

<p>The demo is made of three snippets:</p>

<p>The HTML:
<pre class="language-markup"><code class="language-markup">&lt;div id=&quot;demo&quot;&gt;
&lt;p&gt;All of these lines will have different font sizes.&lt;/p&gt;
&lt;p&gt;This is because we have set the white-space property of the p tags to &quot;pre.&quot;&lt;/p&gt;
&lt;p&gt;This means that these lines won&#039;t wrap, and because they won&#039;t ever wrap, when the page loads,&lt;/p&gt;
&lt;p&gt;The JS will attempt to fit the spans inside the p tags. Of course, this could be done with p tags inside of divs.&lt;/p&gt;
&lt;/div&gt;</code></pre></p>

<p>The CSS:</p>

<p><pre class="language-css"><code class="language-css">#demo p{
white-space:pre;
}
#demo {
width:600px;
}</code></pre></p>

<p>And the JS magic that fits a span into every <abbr>p</abbr> tag and then scales the font by percents.</p>

<p><pre class="language-javascript"><code class="language-javascript">&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(&quot;#demo p&quot;)
    .contents()
    .filter(
        function(){
            return this.nodeType != 1; 
        })
    .wrap(&quot;&lt;span/&gt;&quot;).parent().each(
	function(){
		var size = 100;
		while(jQuery(this).parent().width() &lt; jQuery(this).width() &amp;&amp; size &gt; 5){
			size -= 1;
			jQuery(this).css({&#039;font-size&#039; : size+&#039;%&#039;});
		}
	}
);

&lt;/script&gt;</code></pre></p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/Te1K_1_GEWg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2012/02/27/dynamically-resizing-text-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2012/02/27/dynamically-resizing-text-jquery/</feedburner:origLink></item>
		<item>
		<title>Executing inline JavaScript when using AJAX</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/v8GQ2k_vmhI/</link>
		<comments>http://aahacreative.com/2011/11/27/executing-inline-javascript-ajax/#comments</comments>
		<pubDate>Sun, 27 Nov 2011 12:11:38 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[functions]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=258</guid>
		<description><![CDATA[AJAX is full of stumbling blocks. From browser support to user expectations, it can cause more problems than it solves when used at the CMS level. In AJAXed WordPress, I had to find a way to enable javascript processing on<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2011/11/27/executing-inline-javascript-ajax/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>AJAX is full of stumbling blocks. From browser support to user expectations, it can cause more problems than it solves when used at the CMS level. In <a href="http://ajaxedwp.com">AJAXed WordPress</a>, I had to find a way to enable javascript processing on arbitrary scripts from other plugins loaded with AJAX. Typically, this is impossible because most inline JS uses the <a href="http://www.mediacollege.com/internet/javascript/basic/document-write.html">document.write</a> function to output content. Once the page is written with the updated content, <span class="inline-code"><code>document.write</code></span> is dangerous and can overwrite the entire page.</p>

<span class="post_thumbnail "><img width="590" height="150" src="http://aahacreative.com/files/2011/11/javascript-document1.png" class="attachment-post-hero wp-post-image" alt="javascript document" /></span>

<p>Even more importantly, inline JS is never run when embedded &lt;script> tags are used with the innerHTML command. The following JavaScript function fixes both problems by eval&#8217;ing the content of the &lt;script> tags and replacing the default document.write with a new function that replaces the inline JS with the output of the document.write function.</p>

<h3> The Code</h3>

<p><pre class="language-javascript"><code class="language-javascript">function executeJS(i){ // Pass an element ID to the function.

	var e = document.getElementById(i); 
	var Reg = &#039;(?:&lt;script.*?&gt;)((\n|.)*?)(?:&lt;/script&gt;)&#039;; //Regex for all content between &lt;script&gt; tags.
	var match    = new RegExp(Reg, &#039;img&#039;);
	var scripts  = e.innerHTML.match(match);

	var doc = document.write; // Store the functionality of document.write temporarily.
	//Overwrite document.write with a new function that takes the innerHTML of the passed element
	//then replaces the &lt;script&gt; tag with the output of the passed content.
	document.write = function(p){ e.innerHTML = e.innerHTML.replace(scripts[s],p)};

	if(scripts) { //if matches
		for(var s = 0; s &lt; scripts.length; s++) { //loop through matches
			var js = &#039;&#039;;
			var match = new RegExp(Reg, &#039;im&#039;); //find first match
			js = scripts[s].match(match)[1]; //inner content of the first match
			eval(&#039;try{&#039;+js+&#039;}catch(e){}&#039;); //evaluate the inline JS.
		}

	}

	document.write = doc; //Reset document.write back to its original functionality

}</code></pre></p>

<p>This example function only outputs the first document.write in a script block, so if you require more than one in your embedded JS, it is trivial to store the output content as a variable.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/v8GQ2k_vmhI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2011/11/27/executing-inline-javascript-ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2011/11/27/executing-inline-javascript-ajax/</feedburner:origLink></item>
		<item>
		<title>Stripslashes all values in an array with PHP.</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/l0hKhrAw5f0/</link>
		<comments>http://aahacreative.com/2010/07/26/stripslashes-all-values-in-an-array-with-php/#comments</comments>
		<pubDate>Mon, 26 Jul 2010 13:27:28 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[arrays]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=256</guid>
		<description><![CDATA[Here is a very simple function to run stripslashes on an array and all of its child arrays. The function below is for PHP 5 and takes a single argument which should consist of an array. It loops through all<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2010/07/26/stripslashes-all-values-in-an-array-with-php/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>Here is a very simple function to run stripslashes on an array and all of its child arrays. The function below is for PHP 5 and takes a single argument which should consist of an array. It loops through all elements of the array, and if an element is an array, it calls itself on the child array to an infinite depth. Of course this can cause memory problems if your arrays are dynamically created with an excessively large depth, but for most uses, it will function perfectly.</p>

<h3>The Code</h3>

<p><pre class="language-php"><code class="language-php">function unstrip_array($array){
	foreach($array as &amp;$val){
		if(is_array($val)){
			$val = unstrip_array($val);
		}else{
			$val = stripslashes($val);
		}
	}
return $array;
}</code></pre></p>

<h3>Why would I need to unstrip an entire array?</h3>

<p>It&#8217;s useful for WordPress Plugin developers or anyone whose scripts might be run on a server with magic quotes enabled. It is also excellent to strip any slashes from <span class="inline-code"><code class="backtick-code">$_POST</code></span> inputs that might confuse your attempts to escape the strings later. Running an array of post data through this will make it easier to ensure that you don&#8217;t have hacking attempts.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/l0hKhrAw5f0" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2010/07/26/stripslashes-all-values-in-an-array-with-php/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2010/07/26/stripslashes-all-values-in-an-array-with-php/</feedburner:origLink></item>
		<item>
		<title>Another look at jQuery Performance: combining elements and IDs</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/x3hXwuqMu9s/</link>
		<comments>http://aahacreative.com/2010/07/23/jquery-performance-combining-elements-ids/#comments</comments>
		<pubDate>Fri, 23 Jul 2010 15:57:03 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=595</guid>
		<description><![CDATA[A question that came up in regards to jQuery Performance was: is it faster to define the type of element before you set the ID. Basically, is jQuery(&#039;textarea#content_box&#039;) better than jQuery(&#039;#content_box&#039;)? The thinking is that because the latter is more<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2010/07/23/jquery-performance-combining-elements-ids/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>A question that came up in regards to <a href="http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/">jQuery Performance</a> was: is it faster to define the type of element before you set the ID. Basically, is <span class="inline-code"><code class="backtick-code">jQuery(&#039;textarea#content_box&#039;)</code></span> better than <span class="inline-code"><code class="backtick-code">jQuery(&#039;#content_box&#039;)</code></span>? The thinking is that because the latter is more specific, the parser has to do less work to find the element. But this is wrong and ignores what actually happens in the jQuery code. If you were writing CSS, then yes, it would be faster to define the element type first, but for JavaScript, defining the element type just adds more work for jQuery.</p>

<p><span class="post_thumbnail"><img width="590" height="150" title="jquery" alt="jquery" class="attachment-post-hero wp-post-image" src="http://aahacreative.com/wp-content/uploads/2010/07/jquery.jpg"/></span></p>

<h3>Why shouldn&#8217;t you define the element type?</h3>

<p>So even though popular opinion says yes, the real answer is an emphatic no. You should never supply parent elements or element types when defining the ID of an element. Why? The ID of an element is supposed to be unique. While sometimes bad programing styles or unfriendly widgets can cause problems, the ID should always be unique, so there is only one <span class="inline-code"><code class="backtick-code">#content_box</code></span> and it is always going to be a textarea.</p>

<h3>What&#8217;s the difference?</h3>

<p>If you have read the longer post on <a href="http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/">profiling jQuery</a>, you&#8217;ll notice that the fastest method to find any element is to call the #ID of the element directly. Any other call requires jQuery calling Sizzle and parsing the string.</p>

<p>If you use just the ID of an element, it won&#8217;t need to load sizzle and can grab it immediately using the built in JS function <span class="inline-code"><code class="backtick-code">getElementById(&#039;content_box&#039;);</code></span>. The difference of these two expressions is staggering and as my post on profiling JavaScript demonstrated, the difference is an order of magnitude.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/x3hXwuqMu9s" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2010/07/23/jquery-performance-combining-elements-ids/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2010/07/23/jquery-performance-combining-elements-ids/</feedburner:origLink></item>
		<item>
		<title>jQuery: Fastest method to find Descendents</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/Eqyfu73DP2I/</link>
		<comments>http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/#comments</comments>
		<pubDate>Tue, 20 Jul 2010 03:50:47 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[profiling]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=541</guid>
		<description><![CDATA[In jQuery, there are 5 different selectors that can find an element&#8217;s descendants. One of these methods, will grab only first-level children but it is included with the other four to demonstrate the differences. By profiling these 5 selectors, we<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>In jQuery, there are 5 different selectors that can find an element&#8217;s descendants. One of these methods, will grab only first-level children but it is included with the other four to demonstrate the differences. By profiling these 5 selectors, we can get a basic idea of which selector is the fastest, but, as you will see from the graphs, the speed of the different browsers heavily influences the speed of the selector. However, looking into the <a href="http://code.jquery.com/jquery-latest.js">jQuery source itself</a> will demonstrate <em>why</em> certain selectors are faster.</p>

<span class="post_thumbnail "><img width="590" height="150" src="http://aahacreative.com/files/2010/07/jquery.jpg" class="attachment-post-hero wp-post-image" alt="jquery" /></span>

<p>I answered this basic question on <a href="http://stackoverflow.com/">StackOverflow</a> just from my experience without reading the jQuery source or performing benchmarks. I was actually surprised that not only was my order correct, but also that jQuery functioned much as I expected it to under the hood. The images and explanations are directly from my answer on <a href="http://stackoverflow.com/users/365695/aaron-harun">StackOverflow</a>. All of the benchmark tests can be run from <a href=" http://jsfiddle.net/QLV9y/1/">jsFiddle</a>, but wait a bit before you try it out.</p>

<h3>All Descendant Selectors in jQuery</h3>

<p>Our methods:</p>

<ol>
    <li><span class="inline-code"><code class="backtick-code">$(&quot;.child&quot;, $(&quot;#parent&quot;));</code></span> (by using a scope)</li>
    <li><span class="inline-code"><code class="backtick-code"> $(&quot;#parent&quot;).find(&quot;.child&quot;);</code></span> (the find() method)</li>
    <li><span class="inline-code"><code class="backtick-code">$(&quot;#parent&quot;).children(&quot;.child&quot;);</code></span> (For immediate children, I use this a lot)</li>
    <li><span class="inline-code"><code class="backtick-code">$(&quot;#parent &gt; .child&quot;);</code></span> (via CSS selector)</li>
    <li><span class="inline-code"><code class="backtick-code"> $(&quot;#parent .child&quot;);</code></span></li>
</ol>

<h3>Ranking the jQuery Selectors</h3>

<h4>Using a Scope and Find</h4>

<p><strong><span class="inline-code"><code class="backtick-code">$(&quot;.child&quot;, $(&quot;#parent&quot;))</code></span></strong> and <strong><span class="inline-code"><code class="backtick-code">$(&quot;#parent&quot;).find(&quot;.child&quot;)</code></span></strong> are identical with the only difference is that <strong>method 1</strong> needs to parse the scope passed and translate it to a call to <span class="inline-code"><code class="backtick-code">$parent.find(&quot;.child&quot;).show();</code></span>.</p>

<p>Let&#8217;s take a look into the source to see why this is,
<pre class="language-javascript"><code class="language-javascript">jQuery.fn = jQuery.prototype = {
	init: function( selector, context ) {
	// Handle HTML strings
		if ( typeof selector === &quot;string&quot; ) {
			if ( match &amp;&amp; (match[1] || !context) ) {
			[...]
			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return jQuery( context ).find( selector );
			}</code></pre></p>

<p>The jQuery source tells us two things:</p>

<p>1) <strong>method 1</strong> and <strong>method 2</strong> are exactly equivalent. If anything, method 2 will be slightly faster.</p>

<p>2) Any other method will be slower because of the large block of <span class="inline-code"><code class="backtick-code">if...else</code></span> statements I removed. Parts of the code will show up later,  but basically, if the passed element isn&#8217;t an ID and there is no context passed, jQuery has to use regex to try and understand it.</p>

<h4>Why you should never use CSS text selectors</h4>

<p><strong><span class="inline-code"><code class="backtick-code">$(&quot;#parent &gt; .child&quot;);</code></span></strong> and <strong><span class="inline-code"><code class="backtick-code">$(&quot;#parent .child&quot;);</code></span></strong> both need to parse the selector and then just call: <span class="inline-code"><code class="backtick-code">$(&#039;#parent&#039;).children().filter(&#039;.child&#039;)</code></span> and <span class="inline-code"><code class="backtick-code">$(&#039;#parent&#039;).filter(&#039;.child&#039;)</code></span> respectively.</p>

<p>I never researched it, so didn&#8217;t know exactly why this was, but I recently saw <a href="http://vimeo.com/12529436">this video</a> by <a href="http://paulirish.com">Paul Irish</a> where he explains <em>why</em> it takes longer to process this. The answer is long and technical, but the lines I clipped from the jQuery source above basically just look to see if an #id is passed and then grabs that element directly.</p>

<p>When you have a longer CSS selector like <span class="inline-code"><code class="backtick-code">$(&quot;#parent &gt; .child&quot;)</code></span> jQuery has to load &#8220;<a href="http://sizzlejs.com/">Sizzle</a>&#8221; which is a large and fairly slow CSS-based selectors library. A separate download of Sizzle is only 4KB, but it starts with this beautiful REGEX:</p>

<p><pre class="language-javascript"><code class="language-javascript">var chunker = 
/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|[&#039;&quot;][^&#039;&quot;]*[&#039;&quot;]|[^\[\]&#039;&quot;]+)+\]|\\.|[^ &gt;+~,(\[\\]+)+|[&gt;+~])(\s*,\s*)?((?:.|\r|\n)*)/g</code></pre></p>

<p>Yipes! Chunker is a bit more like clunker if you ask me.</p>

<h4> A Quick Note on Using <span class="inline-code"><code class="backtick-code">.children()</code></span> versus <span class="inline-code"><code class="backtick-code">.find()</code></span></h4>

<p>Finally, <strong>method 3</strong> will always be the fastest because it uses <span class="inline-code"><code class="backtick-code">.children()</code></span> to do the least amount of work and uses the most direct method to get first-level children.</p>

<h3>Profiling the  Selectors, Speed test</h3>

<p>The difference in perforamnce in the different browsers is staggering. The calculations are in computations per second, so the higher the number, the faster the selector is.</p>

<p>On <strong>Chrome</strong>, Method 3 is the best then method 1/2 and then 4/5</p>

<p><img src="http://tinyurl.com/2clyrbz" alt="jQuery selector performance in Chrome" /></p>

<p>On <strong>Firefox</strong>, Method 3 is still best then method 1/2 and then 4/5</p>

<p><img src="http://tinyurl.com/2e89tp5" alt="jQuery selector performance in Firefox 3.6" /></p>

<p>On <strong>Opera</strong>, Method 3 is still best then method 4/5 and then 1/2</p>

<p><img src="http://tinyurl.com/2a9r9r8" alt="jQuery selector performance in Opera" /></p>

<p>On <strong>IE 8</strong>, while slower overall than other browsers, it still follows the Method 3, 1,2,4,5 ordering.</p>

<p><img src="http://tinyurl.com/2a8ag59" alt="jQuery selector performance on IE8" /></p>

<p>Overall, <strong>method 3</strong> is the overall best method to use as it is called directly and it doesn&#8217;t need to traverse more than one level of child elements unlike method 1/2 and it doesn&#8217;t need to be parsed like method 4/5</p>

<p>Though, keep in mind that in some of these we are comparing apples to oranges as Method 5 looks at all children instead of first-level ones.</p>

<p>Finally, if you want to read all about profiling and perfomance in jQuery check out <a href="http://paulirish.com/2009/perf/">this slideshow</a> by Paul Irish. It&#8217;s a very useful read if you are just starting to learn how to optimize your jQuery.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/Eqyfu73DP2I" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2010/07/19/jquery-fastest-method-find-descendents/</feedburner:origLink></item>
		<item>
		<title>Escaping regular expressions in PHP</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/p4FQjJrrZ8M/</link>
		<comments>http://aahacreative.com/2010/07/10/escaping-regular-expressions-php/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 21:11:18 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[hacks]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[regex]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=254</guid>
		<description><![CDATA[Escaping dynamic regex strings automatically in PHP is a lot harder than you would think. You can&#8217;t just use a string like&#34;\$myregex&#34; because PHP will try to escape the $. You can&#8217;t even double slash it like \\$myregex because this<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2010/07/10/escaping-regular-expressions-php/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p>Escaping dynamic regex strings automatically in PHP is a lot harder than you would think. You can&#8217;t just use a string like<span class="inline-code"><code class="backtick-code">&quot;\$myregex&quot;</code></span> because PHP will try to escape the <span class="inline-code"><code class="backtick-code">$</code></span>. You can&#8217;t even double slash it like <span class="inline-code"><code>\\$myregex</code></span> because this doesn&#8217;t work in the regex engine. To get both the PHP and the regular expressions to work correctly together, you have to combine <strong>quadruple</strong> slashes with <em>stripslashes</em>.</p>

<span class="post_thumbnail "><img width="583" height="150" src="http://aahacreative.com/files/2010/07/really-long-regex-to-validate-emails-583x150.png" class="attachment-post-hero wp-post-image" alt="really-long-regex-to-validate-emails" /></span>

<h3>The Code</h3>

<p><pre><code>$escapes = array(&#039;.&#039;,&#039;$&#039;,&#039;^&#039;,&#039;[&#039;,&#039;]&#039;,&#039;?&#039;,&#039;+&#039;,&#039;(&#039;,&#039;)&#039;,&#039;*&#039;,&#039;|&#039;,&#039;\\&#039;);

foreach($escapes as $s){
	$r = &quot;\\\\$s&quot;;
	$myregexbase = str_replace($s, stripslashes($r), $myregexbase);
}</code></pre></p>

<h3>It&#8217;s usage</h3>

<p>So what sort of time would you need this script you ask? Suppose, for example, you have a dynamic list of words that need to be replaced in a block of text. Now, you don&#8217;t want to replace partial matches (&#8220;cat&#8221; should not be replaced in the word &#8220;catch&#8221;), so you need to merge the list of <span class="inline-code"><code class="backtick-code">$words</code></span> with the compete regex.</p>

<p><pre><code>$escapes = array(&#039;.&#039;,&#039;$&#039;,&#039;^&#039;,&#039;[&#039;,&#039;]&#039;,&#039;?&#039;,&#039;+&#039;,&#039;(&#039;,&#039;)&#039;,&#039;*&#039;,&#039;|&#039;,&#039;\\&#039;);

foreach($escapes as $s){
	$r = stripslashes(&quot;\\\\$s&quot;);
	$name = str_replace($s, $r, $name);
} 
$needle = &#039;@([^a-zA-Z0-9])(&#039;.$name.&#039;)([^&amp;a-zA-Z0-9])@&#039;;</code></pre></p>

<h3>Why can&#8217;t you use a single slash?</h3>

<p>The problem is that if you use a single slash it will escape the quote is it wrapped in the problem is with the line <span class="inline-code"><code class="backtick-code">$r = &quot;\\\\$s&quot;;</code></span>. If you try to use single quotes around the string, <span class="inline-code"><code class="backtick-code">$s</code></span> is not parsed correctly. If you use <span class="inline-code"><code class="backtick-code">$r = &#039;\\\\&#039;.$s;</code></span> it works fine, but there is no real benefit.</p>

<p>Why the <span class="inline-code"><code class="backtick-code">stripslashes</code></span>? Why not just use <span class="inline-code"><code class="backtick-code">$r = &#039;\\&#039;.$s;</code></span>? Again, it&#8217;s a problem with a collision between the generated regular expression and PHP. When you replace the character, the <span class="inline-code"><code class="backtick-code">\\</code></span> will be taken as a literal <span class="inline-code"><code class="backtick-code">\\</code></span> rather than an escaped <span class="inline-code"><code class="backtick-code">\</code></span>, so the outputs in the regular expression will interpret the backslash escaped rather than the character that was supposed to be escaped.</p>

<h3> Why not use a different hack?</h3>

<p>Sure you could use <span class="inline-code"><code class="backtick-code">$r = trim(&#039;\ &#039;).$s;</code></span>, but it still just a hack, and it is even less understandable. The one benefit of using <span class="inline-code"><code class="backtick-code">\\\\</code></span> with <span class="inline-code"><code class="backtick-code">stripslashes</code></span> is that it is easy to understand what is happening. Extra backslashes have been added. They are going to be stripped away. While the actual output might not be entirely clear, the solution is understandable in that the extra slashes are being removed. Overall, the problem is kinda crazy, and the solution is even crazier and makes no sense but it works.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/p4FQjJrrZ8M" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2010/07/10/escaping-regular-expressions-php/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2010/07/10/escaping-regular-expressions-php/</feedburner:origLink></item>
		<item>
		<title>FireFox Leading the Pack: Gradients on Buttons</title>
		<link>http://feedproxy.google.com/~r/AahaCreative/~3/DNpS8FYx2cU/</link>
		<comments>http://aahacreative.com/2010/07/03/firefox-leading-the-pack-gradients-on-buttons/#comments</comments>
		<pubDate>Sat, 03 Jul 2010 20:43:55 +0000</pubDate>
		<dc:creator>aaron</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[css sprites]]></category>
		<category><![CDATA[firefox]]></category>

		<guid isPermaLink="false">http://aahacreative.com/?p=234</guid>
		<description><![CDATA[See those wonderfully beautiful article and comment toggle buttons at the top of every post? (Or in the post image for those reading in a feed reader.) Those are images, but they weren&#8217;t created in Photoshop: they are screenshots of<span class="ellipsis">&#8230;</span> <a href="http://aahacreative.com/2010/07/03/firefox-leading-the-pack-gradients-on-buttons/"><div class="read-more">Read more &#8250;</div><!-- end of .read-more --></a>]]></description>
				<content:encoded><![CDATA[<p><img src="http://aahacreative.com/wp-content/uploads/2010/06/button.toggle.png" alt="" title="button.toggle" class="alignleft size-full wp-image-238 post_image" /> See those wonderfully beautiful article and comment toggle buttons at the top of every post? (Or in the post image for those reading in a feed reader.) Those are images, but they weren&#8217;t created in Photoshop: they are screenshots of buttons designed with Firefox gradients. That&#8217;s right, when I was working on them, I wanted buttons done entirely in CSS, but none of the other browsers support both gradients on the button and the gradient borders needed to give the button a feeling of depth without images.</p>

<p>However, the code that was used to create these in firefox is as such.</p>

<p><pre class="language-css"><code class="language-css">background: -moz-linear-gradient(bottom, #999, #ccc);
	-moz-border-radius:8px;
	-moz-border-bottom-colors: #ccc #999 #6666;
	-moz-border-top-colors:  #ccc #999 #666;
	-moz-border-left-colors: #ccc #999 #666;
	-moz-border-right-colors: #ccc #999 #666;</code></pre></p>

<p>The first line creates the gradient inside the button, the second creates the curved borders and the final 4 lines create a border gradient 3px wide. The CSS above won&#8217;t work exactly as expected because you need to separately define a border that has the same width as the number of colors, so the entire .toggle class looks like:</p>

<p><pre class="language-css"><code class="language-css">.toggle{
	color:#333;
	font-size:1.1em;
	height:31px;
	width:86px;
	border:3px solid #ccc;
	/*//mozilla*/
	background: -moz-linear-gradient(bottom, #999, #ccc);
	-moz-border-radius:8px 8px 8px 8px;
	-moz-border-bottom-colors: #ccc #999 #6666;
	-moz-border-top-colors:  #ccc #999 #666;
	-moz-border-left-colors: #ccc #999 #666;
	-moz-border-right-colors: #ccc #999 #666;
}</code></pre></p>

<p>The .toggled class is:</p>

<p><pre class="language-css"><code class="language-css">.toggled{
	border:2px solid #333;
	background: -moz-linear-gradient(bottom, #AAA,#999);
	-moz-border-bottom-colors: #333 #999;
	-moz-border-top-colors:  #333 #999 ;
	-moz-border-left-colors: #333 #999 ;
	-moz-border-right-colors: #333 #999;
}</code></pre></p>

<p>And since a hover class increases usability:</p>

<p><pre class="language-css"><code class="language-css">.toggle:hover{
	background: -moz-linear-gradient(bottom, #AAA, #EEE);
	-moz-border-bottom-colors: #aaa #ccc #999;
	-moz-border-top-colors:  #aaa #ccc #999 ;
	-moz-border-left-colors: #aaa #ccc #999 ;
	-moz-border-right-colors: #aaa #ccc #999 ;
}</code></pre></p>

<p>This is not a Google Chrome or IE bashing post, instead of leaving it entirely in CSS and having it degrade in all other browsers to some extent, I took a screenshot and replaced all the CSS with a CSS sprite.</p>

<p><pre class="language-css"><code class="language-css">.toggle{
	
	color:#333;
	font-size:1.1em;
	background: url(&#039;./style/images/button.toggle.png&#039;) no-repeat 0 0;
	height:31px;
	width:86px;
	border:0;
}

.toggled{
	background-position:0 -31px;
}</code></pre></p>

<p>It was actually easier to design the button in Firefox than in something like photoshop especially since I used the <a href="https://addons.mozilla.org/en-US/firefox/addon/60/">WebDeveloper toolbar</a> to write the CSS in the browser itself.</p>
<img src="http://feeds.feedburner.com/~r/AahaCreative/~4/DNpS8FYx2cU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://aahacreative.com/2010/07/03/firefox-leading-the-pack-gradients-on-buttons/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://aahacreative.com/2010/07/03/firefox-leading-the-pack-gradients-on-buttons/</feedburner:origLink></item>
	</channel>
</rss>
