<?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>James Boelen &#187; Javascript</title>
	<atom:link href="http://james.boelen.ca/category/programming/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://james.boelen.ca</link>
	<description>Software Developer</description>
	<lastBuildDate>Thu, 09 May 2013 22:02:35 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5</generator>
		<item>
		<title>Visual Event 2</title>
		<link>http://james.boelen.ca/programming/visual-event-2/</link>
		<comments>http://james.boelen.ca/programming/visual-event-2/#comments</comments>
		<pubDate>Tue, 22 Jan 2013 15:10:29 +0000</pubDate>
		<dc:creator>James Boelen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[GitHub]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[visual event 2]]></category>

		<guid isPermaLink="false">http://james.boelen.ca/?p=1366</guid>
		<description><![CDATA[This could possibly one of my greatest finds recently. The other day I was going through some code that someone else had written and was having trouble finding the script that was being fired when a DOM element was being clicked. I do my development in chrome, so the first place I looked was their [...]]]></description>
				<content:encoded><![CDATA[<p>This could possibly one of my greatest finds recently. The other day I was going through some code that someone else had written and was having trouble finding the script that was being fired when a DOM element was being clicked. I do my development in chrome, so the first place I looked was their Extensions library. The only plug-in I could find, unfortunately, only showed the jquery scripts that were being called when events occurred. This clearly wasn&#8217;t helping.</p>
<p>I then stumbled upon a <a title="StackOverflow" href="http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node">stackoverflow</a> question in which someone was having a similar issue.</p>
<p>Enter Visual Event 2. VE2 is an open source bookmarklet that, when loaded, will highlight all of the objects with events on a page and show you what scripts will be called when they are clicked. This thing is absolutely brilliant. I was instantly able to see what script was being called and found it in seconds. Better still, since it&#8217;s a bookmarklet, it should work in most modern browsers too!</p>
<p>This thing will permanently live in my developer toolbox. I highly suggest it for developers working on sites that are js intense.</p>
<p><a title="Visual Event 2 Website" href="http://www.sprymedia.co.uk/article/Visual+Event+2" target="_blank">Visual Event 2 Website</a></p>
]]></content:encoded>
			<wfw:commentRss>http://james.boelen.ca/programming/visual-event-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Bringing Thickbox Into The Present</title>
		<link>http://james.boelen.ca/open_source/bringing-thickbox-into-the-present/</link>
		<comments>http://james.boelen.ca/open_source/bringing-thickbox-into-the-present/#comments</comments>
		<pubDate>Fri, 11 May 2012 13:21:33 +0000</pubDate>
		<dc:creator>James Boelen</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[bind]]></category>
		<category><![CDATA[each]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[onclick]]></category>
		<category><![CDATA[row]]></category>
		<category><![CDATA[thickbox]]></category>

		<guid isPermaLink="false">http://james.boelen.ca/?p=224</guid>
		<description><![CDATA[Yesterday I had to work with the Thickbox jquery plugin that has not been updated since 2007.]]></description>
				<content:encoded><![CDATA[<p>Yesterday I had to work with the <a title="Thickbox" href="http://jquery.com/demo/thickbox/" target="_blank">Thickbox</a> jquery plugin that has not been updated since 2007. Much to my dismay, the format and usage of the plugin was not what I&#8217;m used to or in the standard jQuery plugin form of $(element).plugin. Thickbox, in its original form, scours your page for special anchor tags and allows them to open a lightbox. The code that this was to be used in already had usage of this for links, but I wanted to add it to a table row, so I had to update the plugin without breaking existing functionality. What follows is a quick and dirty little snippet that can be dropped into the thickbox.js file to allow proper jQuery usage.</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  $.<span style="color: #660066;">fn</span>.<span style="color: #660066;">thickbox</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> options <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>  
	  <span style="color: #000066; font-weight: bold;">var</span> settings <span style="color: #339933;">=</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#123;</span>
		  <span style="color: #3366CC;">'title'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span>
		  <span style="color: #3366CC;">'href'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span>
		  <span style="color: #3366CC;">'group'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'hasThickbox'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">var</span> $elem <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            $elem.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">var</span> t <span style="color: #339933;">=</span> settings.<span style="color: #660066;">title</span>
                <span style="color: #000066; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> settings.<span style="color: #660066;">href</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">var</span> g <span style="color: #339933;">=</span> settings.<span style="color: #660066;">group</span><span style="color: #339933;">;</span>
                tb_show<span style="color: #009900;">&#40;</span>t<span style="color: #339933;">,</span> a<span style="color: #339933;">,</span> g<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            $elem.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'hasThickbox'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span> jQuery <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>I&#8217;ve kept it largely the same as it was in its original form so that others can easily see how it works and so that there aren&#8217;t too many modifications to the original logic. The function expects the options: Title, href, and group. All 3 work the same way as they did with the original plugin, and the options for Thickbox are still supplied as a query string through the href option value (see <a title="Thickbox" href="http://jquery.com/demo/thickbox/" target="_blank">here</a>for an explanation of the query string options).</p>
<p>There are still many things that I&#8217;m not particularly fond of with Thickbox, but if you&#8217;re being forced to use it, this will at least provide you with a little bit less of a hassle.</p>
]]></content:encoded>
			<wfw:commentRss>http://james.boelen.ca/open_source/bringing-thickbox-into-the-present/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
