<?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>Pearl Tech &#187; bookmarklets</title>
	<atom:link href="http://blog.pearltechnology.com/tag/bookmarklets/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.pearltechnology.com</link>
	<description></description>
	<lastBuildDate>Thu, 05 Jan 2012 14:47:55 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Web Developer Bookmarklets</title>
		<link>http://blog.pearltechnology.com/web-developer-bookmarklets/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://blog.pearltechnology.com/web-developer-bookmarklets/#comments</comments>
		<pubDate>Wed, 09 Sep 2009 14:00:48 +0000</pubDate>
		<dc:creator>AaronH</dc:creator>
				<category><![CDATA[Application Development]]></category>
		<category><![CDATA[bookmarklets]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.pearltechnology.com/?p=144</guid>
		<description><![CDATA[Bookmarklets can be powerful aids for web development. With jQuery providing so much innovation in the browser landscape, many bookmarklets are pushing the bar. Here are some interesting ones that I&#8217;ve found incredibly useful and use in conjunction with (or absence of) the built-in browser developer tools.

jQuerify is a simple way to inject the jQuery [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://en.wikipedia.org/wiki/Bookmarklet">Bookmarklets</a> can be powerful aids for web development. With jQuery providing so much innovation in the browser landscape, many bookmarklets are pushing the bar. Here are some interesting ones that I&#8217;ve found incredibly useful and use in conjunction with (<em>or absence of</em>) the built-in browser developer tools.</p>
<ul>
<li><a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">jQuerify</a> is a simple way to inject the jQuery framework into any website and enable immediate DOM manipulation. To try it out, just drag <a href="javascript:%20(function(){var%20el=document.createElement('div'),b=document.getElementsByTagName('body')[0];otherlib=false,msg='';el.style.position='fixed';el.style.height='32px';el.style.width='220px';el.style.marginLeft='-110px';el.style.top='0';el.style.left='50%';el.style.padding='5px%2010px%205px%2010px';el.style.zIndex=1001;el.style.fontSize='12px';el.style.color='#222';el.style.backgroundColor='#f99';if(typeof%20jQuery!='undefined'){msg='This%20page%20already%20using%20jQuery%20v'+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$=='function'){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement('script');script.src=url;var%20head=document.getElementsByTagName('head')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;success();}};head.appendChild(script);}%20getScript('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',function(){if(typeof%20jQuery=='undefined'){msg='Sorry,%20but%20jQuery%20wasn\'t%20able%20to%20load';}else{msg='This%20page%20is%20now%20jQuerified%20with%20v'+jQuery.fn.jquery;if(otherlib){msg+='%20and%20noConflict().%20Use%20$jq(),%20not%20$().';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery=='undefined'){b.removeChild(el);}else{jQuery(el).fadeOut('slow',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">this link</a> to your bookmark list. Depending on the browser you&#8217;re using, you can then enter any javascript commands via the console window in Firebug, IE 8 Developer Tools, or Chrome Developer Tools.
<p><img class="alignnone size-full wp-image-151" title="jquerified" src="http://blog.pearltechnology.com/wp-content/uploads/2009/09/jquerified.PNG" alt="jquerified" width="239" height="31" /></p>
<p>If the website you are visiting already has jQuery installed, the bookmarklet will not inject the framework again.</p>
<p><img class="alignnone size-full wp-image-154" title="jquerified-ignored" src="http://blog.pearltechnology.com/wp-content/uploads/2009/09/jquerified-ignored.PNG" alt="jquerified-ignored" width="241" height="27" /></p>
<p>Here is some sample jQuery code which would highlight a post in red, the blog entry in blue, and perform some simple animation to the sidebar on this website. Click <a href="javascript:%20(function(){var%20el=document.createElement('div'),b=document.getElementsByTagName('body')[0];otherlib=false,msg='';el.style.position='fixed';el.style.height='32px';el.style.width='220px';el.style.marginLeft='-110px';el.style.top='0';el.style.left='50%';el.style.padding='5px%2010px%205px%2010px';el.style.zIndex=1001;el.style.fontSize='12px';el.style.color='#222';el.style.backgroundColor='#f99';if(typeof%20jQuery!='undefined'){msg='This%20page%20already%20using%20jQuery%20v'+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$=='function'){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement('script');script.src=url;var%20head=document.getElementsByTagName('head')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;success();}};head.appendChild(script);}%20getScript('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',function(){if(typeof%20jQuery=='undefined'){msg='Sorry,%20but%20jQuery%20wasn\'t%20able%20to%20load';}else{msg='This%20page%20is%20now%20jQuerified%20with%20v'+jQuery.fn.jquery;if(otherlib){msg+='%20and%20noConflict().%20Use%20$jq(),%20not%20$().';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery=='undefined'){b.removeChild(el);}else{jQuery(el).fadeOut('slow',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);$('div[class=post]:first').css('border','2px%20solid%20red');$('div[class=entry]:first').css('border','2px%20solid%20blue');$('div[class=sidebg]').slideToggle(4000).fadeIn('fast');}})();#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">here</a> to see it in action.</p>
<pre name="code" class="jscript">$("div[class=post]:first").css("border", "2px solid red");
$("div[class=entry]:first").css("border", "2px solid blue");
$("div[class=sidebg]").slideToggle(4000).fadeIn("fast");</pre>
</li>
<li><a href="http://getfirebug.com/lite.html">Firebug Lite</a> is another useful bookmarklet if you&#8217;re currently using a browser that doesn&#8217;t support plugins or have its own set of developer tools. It has support for both online and offline integration. Click <a href="javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">here</a> to see an example or simply drag and drop <a href="javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">this link</a> into your bookmarks.
<p><a href="http://blog.pearltechnology.com/wp-content/uploads/2009/09/firebug-lite.PNG#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed"><img class="alignnone size-medium wp-image-174" title="Firebug Lite" src="http://blog.pearltechnology.com/wp-content/uploads/2009/09/firebug-lite-300x111.PNG" alt="Firebug Lite" width="300" height="111" /></a></p>
<p>You can now enter commands into the console and manipulate the DOM just like you were using an assisted native browser extension. Enjoy!</li>
</ul>
<p>Do you have any great developer bookmarklets that you&#8217;d like to share? Please comment!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pearltechnology.com/web-developer-bookmarklets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

