tag:blogger.com,1999:blog-39163978021133494502024-03-13T14:41:15.613-07:00Web development Tips and TricksUnknownnoreply@blogger.comBlogger7125tag:blogger.com,1999:blog-3916397802113349450.post-781409122112892452015-02-17T00:30:00.003-08:002015-02-17T03:29:08.657-08:00CSS-only triangles<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><br /></span>
<br />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">You can make a triangle with just CSS (just like the tiny triangle on Vimeo sidebar).</span><br />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><br /></span>
<br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"></pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nc" style="color: #0e84b5; font-weight: bold;">.triangle </span><span class="p">{</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="k" style="color: #007020; font-weight: bold;">width</span><span class="o" style="color: #666666;">: </span><span class="m" style="color: #40a070;">0</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="k" style="color: #007020; font-weight: bold;">height</span><span class="o" style="color: #666666;">: </span><span class="m" style="color: #40a070;">0</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="k" style="color: #007020; font-weight: bold;">border-top</span><span class="o" style="color: #666666;">: </span><span class="m" style="color: #40a070;">100px </span><span class="k" style="color: #007020; font-weight: bold;">solid </span><span class="m" style="color: #40a070;">#0099ff</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="k" style="color: #007020; font-weight: bold;">border-left</span><span class="o" style="color: #666666;">: </span><span class="m" style="color: #40a070;">100px </span><span class="k" style="color: #007020; font-weight: bold;">dashed transparent</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="k" style="color: #007020; font-weight: bold;">border-right</span><span class="o" style="color: #666666;">: </span><span class="m" style="color: #40a070;">100px </span><span class="k" style="color: #007020; font-weight: bold;">dashed transparent</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="k" style="color: #007020; font-weight: bold;">border-bottom</span><span class="o" style="color: #666666;">: </span><span class="m" style="color: #40a070;">0</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="err"> </span><span class="k" style="color: #007020; font-weight: bold;">display</span><span class="o" style="color: #666666;">: </span><span class="k" style="color: #007020; font-weight: bold;">block</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="err"> </span><span class="k" style="color: #007020; font-weight: bold;">overflow</span><span class="o" style="color: #666666;">: </span><span class="k" style="color: #007020; font-weight: bold;">hidden</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="p">}</span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">Demo: </span><span class="qlink_container" style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><a class="external_link" href="http://leplay.github.com/demo/triangle.html" style="background-attachment: initial; background-clip: initial; background-image: url(data:image/gif; background-origin: initial; background-position: 100% 5px; background-repeat: no-repeat; background-size: initial; color: #2b6dad; padding-right: 12px; text-decoration: none;" target="_blank">http://leplay.github.com/<wbr></wbr>demo/tr...</a></span><br />
<br />
<br />
<br />
<div class="clearfix" style="clear: both; float: left; font-size: 1px; height: 0px; margin: 20px; padding: 0px; width: 0px;">
</div>
<div class="b" style="border-left-color: transparent; border-left-width: 100px; border-right-color: transparent; border-right-width: 100px; border-style: solid dashed none; border-top-color: rgb(0, 153, 255); border-top-width: 100px; float: left; height: 0px; margin: 20px; overflow: hidden; padding: 0px; width: 0px;">
</div>
<div class="c" style="border-bottom-color: rgb(0, 153, 255); border-bottom-width: 100px; border-left-color: transparent; border-left-width: 100px; border-right-color: transparent; border-right-width: 100px; border-style: none dashed solid; float: left; height: 0px; margin: 20px; overflow: hidden; padding: 0px; width: 0px;">
</div>
<div class="d" style="border-bottom-color: transparent; border-bottom-width: 100px; border-left-color: rgb(0, 153, 255); border-left-width: 100px; border-style: dashed none dashed solid; border-top-color: transparent; border-top-width: 100px; float: left; height: 0px; margin: 20px; overflow: hidden; padding: 0px; width: 0px;">
</div>
<div class="e" style="border-bottom-color: transparent; border-bottom-width: 100px; border-right-color: rgb(0, 153, 255); border-right-width: 100px; border-style: dashed solid dashed none; border-top-color: transparent; border-top-width: 100px; float: left; height: 0px; margin: 20px; overflow: hidden; padding: 0px; width: 0px;">
</div>
<div class="clearfix" style="clear: both; float: left; font-size: 1px; height: 0px; margin: 20px; padding: 0px; width: 0px;">
</div>
<div class="f" style="border-left-color: transparent; border-left-width: 100px; border-style: solid none none dashed; border-top-color: rgb(102, 170, 0); border-top-width: 100px; float: left; height: 0px; margin: 20px; padding: 0px; width: 0px;">
</div>
<div class="g" style="border-right-color: transparent; border-right-width: 100px; border-style: solid dashed none none; border-top-color: rgb(102, 170, 0); border-top-width: 100px; float: left; height: 0px; margin: 20px; padding: 0px; width: 0px;">
</div>
<div class="h" style="border-bottom-color: rgb(102, 170, 0); border-bottom-width: 100px; border-right-color: transparent; border-right-width: 100px; border-style: none dashed solid none; float: left; height: 0px; margin: 20px; overflow: hidden; padding: 0px; width: 0px;">
</div>
<div class="i" style="border-bottom-color: rgb(102, 170, 0); border-bottom-width: 100px; border-left-color: transparent; border-left-width: 100px; border-style: none none solid dashed; float: left; height: 0px; margin: 20px; overflow: hidden; padding: 0px; width: 0px;">
</div>
<div class="clearfix" style="clear: both; float: left; font-size: 1px; height: 0px; margin: 20px; padding: 0px; width: 0px;">
</div>
<a class="github" href="https://github.com/leplay/demo/blob/gh-pages/triangle.html" target="_blank">View Source Code</a></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3916397802113349450.post-44828327518589510322015-02-17T00:25:00.000-08:002015-02-17T00:25:04.124-08:00Calculated values in modern browsers<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><br /></span>
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">This is one I came across recently, calc() allows you to do simple math and unit conversions in CSS. </span><br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" /><br />
<div class="codeblock inline_codeblock" style="background: rgb(244, 244, 244); color: #333333; display: inline; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; white-space: pre-wrap;">
<pre style="display: inline; font-family: monospace, monospace; overflow: auto; white-space: pre-wrap;"><span class="">background-position: calc(100% - 50px) calc(100% - 20px);</span></pre>
</div>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" /><br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" /><span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">Browser support is quite good! </span><span class="qlink_container" style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><a class="external_link" data-tooltip="attached" href="http://caniuse.com/#feat=calc" style="background-attachment: initial; background-clip: initial; background-image: url(data:image/gif; background-origin: initial; background-position: 100% 5px; background-repeat: no-repeat; background-size: initial; color: #2b6dad; padding-right: 12px; text-decoration: none;" target="_blank">Can I use... Support tables for HTML5, CSS3, etc</a></span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3916397802113349450.post-33820321107264033432015-02-17T00:21:00.002-08:002015-02-17T00:31:08.324-08:00Using vw and vh Measurements In Modern Site Design<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="entry-summary" style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 10px; margin: 0px; padding: 0px;">
<div style="box-sizing: border-box; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
<br />
Some <a href="http://demosthenes.info/blog/CSS" rel="tag" style="border-bottom-color: rgb(153, 153, 153); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: black; margin: 0px; padding: 0px; text-decoration: none;">CSS</a> properties and values don’t gain a lot of developer attention, either because a particular spec is not "sexy" enough or because use-cases don’t seem immediately obvious. Good examples of the latter include the <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">vw</code>, <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">vh</code>, <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">vmax</code> and <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">vmin</code> length measurements, which have been part of the <a href="http://dev.w3.org/csswg/css3-values" style="border-bottom-color: rgb(153, 153, 153); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: black; margin: 0px; padding: 0px; text-decoration: none;">CSS3 Values & Units Module</a> for some time but are just now finding support in modern browsers.</div>
<div style="box-sizing: border-box; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
As we’ll see in the <a href="http://demosthenes.info/blog/738/Create-Perfect-Responsive-Shapes-With-CSS-vw-Units" style="border-bottom-color: rgb(153, 153, 153); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: black; margin: 0px; padding: 0px; text-decoration: none;">next article</a>, these new measuring systems are natural fits for creating adaptive and responsive site designs; for now, let’s take at the general idea of the new units.</div>
</div>
<h2 style="-webkit-transition: font-size 0.7s linear; background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 2rem; font-weight: 100; line-height: 1.2; margin: 1rem 0px; padding: 0px; transition: font-size 0.7s linear;">
Why Do We Need Another Way Of Measuring Things In CSS?</h2>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
The principles behind <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">vw</code>, <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">vh</code> are simple: they represent percentages of the browser viewport’s width and height, respectively.</div>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
<kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">1vw</kbd> = 1/100 of the current viewport width, i.e. 1% of the width</div>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
<kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">15vh</kbd> = 15/100 of the viewport’s current height or 15% of the height</div>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
Both <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vw</kbd> and <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vh</kbd> can take any positive number: integers and floating point values are all valid.</div>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
At first glance, <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vw</kbd> and <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vh</kbd> would appear to be somewhat redundant, as we already <em style="box-sizing: border-box; margin: 0px; padding: 0px;">have</em> a measuring system that relates to the viewport width as a percentage. For example:</div>
<pre class=" language-css" style="background: rgb(245, 242, 240); box-sizing: border-box; color: #2a2a21; overflow: auto; padding: 0.1rem 0.5rem; white-space: normal;"><code class=" language-css" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0px; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;"><span class="token selector" style="box-sizing: border-box; color: #669900; margin: 0px; padding: 0px;">div </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">{</span> <span class="token property" style="box-sizing: border-box; color: #990055; margin: 0px; padding: 0px;">width</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">:</span> 50%<span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">;</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">}</span></code></pre>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; margin-top: 2rem; padding: 0px;">
Applied to almost any element, a percentage width correlates the size of an element to the size of its container, which may include the browser window: indeed, the concept and practice of <a href="http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design" style="border-bottom-color: rgb(153, 153, 153); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: black; margin: 0px; padding: 0px; text-decoration: none;">fluid images</a> relies entirely on this fact. But a little consideration shows that percentage measurements have some significant limitations:</div>
<ol style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem 2rem; padding: 0px;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;"><code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">body</code> width does not include the <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">margin</code></li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">viewport height has always been difficult to measure, as the height of the <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">body</code>depends on the amount of <em style="box-sizing: border-box; margin: 0px; padding: 0px;">content</em> on the page, not the dimensions of the browser window.</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">Most importantly, <em style="box-sizing: border-box; margin: 0px; padding: 0px;">percentage width of the body cannot be applied to the size of text</em>.<code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">font-size: 15%</code> sizes the font relative to its native or natural proportions, <em style="box-sizing: border-box; margin: 0px; padding: 0px;">not the dimensions of the viewport</em>.</li>
</ol>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
So the equivalent in <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">vw</code> units to the declaration above (ignoring any <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">margin</code> that may have influenced the <code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">div</code>) would be:</div>
<pre class=" language-css" style="background: rgb(245, 242, 240); box-sizing: border-box; color: #2a2a21; overflow: auto; padding: 0.1rem 0.5rem; white-space: normal;"><code class=" language-css" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0px; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;"><span class="token selector" style="box-sizing: border-box; color: #669900; margin: 0px; padding: 0px;">div </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">{</span> <span class="token property" style="box-sizing: border-box; color: #990055; margin: 0px; padding: 0px;">width</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">:</span> 50vw<span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">;</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">}</span></code></pre>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; margin-top: 2rem; padding: 0px;">
To scale a heading in relation to the width of the browser window, you could use:</div>
<pre class=" language-css" style="background: rgb(245, 242, 240); box-sizing: border-box; color: #2a2a21; overflow: auto; padding: 0.1rem 0.5rem; white-space: normal;"><code class=" language-css" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0px; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;"><span class="token selector" style="box-sizing: border-box; color: #669900; margin: 0px; padding: 0px;">h1 </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">{</span> <span class="token property" style="box-sizing: border-box; color: #990055; margin: 0px; padding: 0px;">font-size</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">:</span> 5vw<span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">;</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999; margin: 0px; padding: 0px;">}</span></code></pre>
<h2 style="-webkit-transition: font-size 0.7s linear; background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 2rem; font-weight: 100; line-height: 1.2; margin: 2rem 0px 1rem; padding: 0px; transition: font-size 0.7s linear;">
vmin & vmax</h2>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
<img alt="Diagram of vmin and vmax" class="right" src="http://demosthenes.info/assets/images/xvmin-vmax.jpg.pagespeed.ic.GRfkxOoQ-K.webp" style="box-sizing: border-box; clear: right; float: right; margin: 0px 0px 1rem 2rem; padding: 0px; width: 361px;" /><code class=" language-markup" style="background: rgb(245, 242, 240); border-radius: 0.3em; box-sizing: border-box; color: black; direction: ltr; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8rem; margin: 0px 0px 1rem; padding: 0.1em; tab-size: 4; text-shadow: white 0px 1px; word-break: break-word; word-spacing: normal;">vmin</code> is a measurement that relates directly to the width or height of the browser window in the same way that <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vw</kbd>and <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vh</kbd> do. The difference is that <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vmin</kbd>chooses which axis to measure itself against depending on whichever is<em style="box-sizing: border-box; margin: 0px; padding: 0px;">smallest</em>, while <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vmax</kbd> relates to whichever is <em style="box-sizing: border-box; margin: 0px; padding: 0px;">largest</em>. So if a browser is opened to the aspect ratio shown in the figure to the right, <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">10vmin</kbd> will be equivalent to 1/10<sup style="box-sizing: border-box; margin: 0px; padding: 0px;">th</sup>of the viewport’s width, while <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">25vmax</kbd> will be a quarter of the viewport’s height.</div>
<table class="browser-table" style="background-color: white; box-sizing: border-box; clear: both; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; margin: 0px; padding: 0px;"><caption style="box-sizing: border-box; font-size: 1rem; font-weight: 800; margin: 0px; padding: 0px;">Current browser support for viewport units</caption><tbody style="box-sizing: border-box; margin: 0px; padding: 0px;">
<tr style="box-sizing: border-box; margin: 0px; padding: 0px;"><th style="box-sizing: border-box; margin: 0px; padding: 12.71875px; width: 505px;">IE 9+</th></tr>
<tr style="box-sizing: border-box; margin: 0px; padding: 0px;"><th style="box-sizing: border-box; margin: 0px; padding: 12.71875px; width: 505px;">Firefox 19+</th></tr>
<tr style="box-sizing: border-box; margin: 0px; padding: 0px;"><th style="box-sizing: border-box; margin: 0px; padding: 12.71875px; width: 505px;">Chrome 20+</th></tr>
<tr style="box-sizing: border-box; margin: 0px; padding: 0px;"><th style="box-sizing: border-box; margin: 0px; padding: 12.71875px; width: 505px;">Safari 6+</th></tr>
<tr style="box-sizing: border-box; margin: 0px; padding: 0px;"><th style="box-sizing: border-box; margin: 0px; padding: 12.71875px; width: 505px;">Opera 15+</th></tr>
<tr style="box-sizing: border-box; margin: 0px; padding: 0px;"><th style="box-sizing: border-box; margin: 0px; padding: 12.71875px; width: 505px;">Android 4.4+</th></tr>
</tbody></table>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
It’s important to note that Safari support is <em style="box-sizing: border-box; margin: 0px; padding: 0px;">not</em> dynamic at the time of writing: resizing the browser window will not alter the size of elements measured in <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vw</kbd>, <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vh</kbd>, <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vmax</kbd> or <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vmin</kbd>. Instead, the elements will be scaled proportionally to the viewport’s <em style="box-sizing: border-box; margin: 0px; padding: 0px;">initial</em> size. In addition, IE does not currently recognize <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vmax</kbd>.</div>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
Polyfills will gain you greater browser support: JavaScript code has been created by <a href="http://gist.github.com/LeaVerou/1347501" style="border-bottom-color: rgb(153, 153, 153); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: black; margin: 0px; padding: 0px; text-decoration: none;">Lea Verou</a> and <a href="http://github.com/saabi/vminpoly" style="border-bottom-color: rgb(153, 153, 153); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: black; margin: 0px; padding: 0px; text-decoration: none;">Sebastian Ferreyra</a>.</div>
<h2 style="-webkit-transition: font-size 0.7s linear; background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 2rem; font-weight: 100; line-height: 1.2; margin: 1rem 0px; padding: 0px; transition: font-size 0.7s linear;">
Conclusion</h2>
<div style="background-color: white; box-sizing: border-box; color: #2a2a21; font-family: Avenir, 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; padding: 0px;">
The <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vw</kbd> and <kbd style="box-sizing: border-box; font-family: Inconsolata, Courier, monospace; font-size: 1.1rem; line-height: 1.8; margin: 0px 0px 1rem; padding: 0px;">vh</kbd> units have unique application to mobile development, and offer the only way to <a href="http://demosthenes.info/blog/739/Creating-Responsive-Hero-Text-With-vw-Units" style="border-bottom-color: rgb(153, 153, 153); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: black; margin: 0px; padding: 0px; text-decoration: none;">predictably scale text in response to viewport size</a>.</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3916397802113349450.post-40225582184828227642015-02-17T00:18:00.000-08:002015-02-17T00:31:15.651-08:00Few usefull tricks<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">An HTML element with an ID creates a JavaScript global with the same name</b><br />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">Surprising but true, and it's done by modern browsers as a means of backwards compatibility:</span><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">HTML: </span><br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"></pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nt" style="color: #062873; font-weight: bold;"><div </span><span class="na" style="color: #4070a0;">id=</span><span class="s" style="color: #4070a0;">"someInnocentDiv"</span><span class="nt" style="color: #062873; font-weight: bold;">></div></span></pre>
</div>
</td></tr>
</tbody></table>
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"> </span><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">JS:</span><br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"></pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">someInnocentDiv</span><span class="p">);</span><span class=""> </span><span class="c1" style="color: #60a0b0; font-style: italic;">// <div id="someInnocentDiv"></div></span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"> You can read the text at any XY coordinate on a webpage</b><br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;">
</pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="kd" style="color: #007020; font-weight: bold;">var </span><span class="nx">x </span><span class="o" style="color: #666666;">= </span><span class="mi" style="color: #40a070;">50</span><span class="p">, </span><span class="nx">y </span><span class="o" style="color: #666666;">= </span><span class="mi" style="color: #40a070;">100</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="kd" style="color: #007020; font-weight: bold;">var </span><span class="nx">range </span><span class="o" style="color: #666666;">= </span><span class="nb" style="color: #007020;">document</span><span class="p">.</span><span class="nx">caretRangeFromPoint</span><span class="p">(</span><span class="nx">x</span><span class="p">, </span><span class="nx">y</span><span class="p">);</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="k" style="color: #007020; font-weight: bold;">if</span><span class="p">(</span><span class="nx">range</span><span class="p">) {</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="nx">range</span><span class="p">.</span><span class="nx">expand</span><span class="p">(</span><span class="s1" style="color: #4070a0;">'word'</span><span class="p">);</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="kd" style="color: #007020; font-weight: bold;">var </span><span class="nx">word </span><span class="o" style="color: #666666;">= </span><span class="nx">range</span><span class="p">.</span><span class="nx">startContainer</span><span class="p">.</span><span class="nx">textContent</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">range</span><span class="p">.</span><span class="nx">startOffset</span><span class="p">, </span><span class="nx">range</span><span class="p">.</span><span class="nx">endOffset</span><span class="p">);</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">word</span><span class="p">);</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="p">}</span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">A cross-browser compatible way of doing this: </span><span class="qlink_container" style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><a class="external_link" href="http://jsfiddle.net/heZ4z/" style="background-attachment: initial; background-clip: initial; background-image: url(data:image/gif; background-origin: initial; background-position: 100% 5px; background-repeat: no-repeat; background-size: initial; color: #2b6dad; padding-right: 12px; text-decoration: none;" target="_blank">http://jsfiddle.net/heZ4z<wbr></wbr>/</a></span><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"> You can base64 encode files dropped onto the document from your desktop</b><br />
<br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"></pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nb" style="color: #007020;">document</span><span class="p">.</span><span class="nx">ondrop </span><span class="o" style="color: #666666;">= </span><span class="kd" style="color: #007020; font-weight: bold;">function </span><span class="p">(</span><span class="nx">e</span><span class="p">) {</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span><span class=""> </span><span class="c1" style="color: #60a0b0; font-style: italic;">// prevent browser from trying to run/display the file</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="kd" style="color: #007020; font-weight: bold;">var </span><span class="nx">reader </span><span class="o" style="color: #666666;">= </span><span class="k" style="color: #007020; font-weight: bold;">new </span><span class="nx">FileReader</span><span class="p">();</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="nx">reader</span><span class="p">.</span><span class="nx">onload </span><span class="o" style="color: #666666;">= </span><span class="kd" style="color: #007020; font-weight: bold;">function</span><span class="p">(</span><span class="nx">e</span><span class="p">) {</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</span><span class="p">);</span><span class=""> </span><span class="c1" style="color: #60a0b0; font-style: italic;">// base64 encoded file data!</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="p">};</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="nx">reader</span><span class="p">.</span><span class="nx">readAsDataURL</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">dataTransfer</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="mi" style="color: #40a070;">0</span><span class="p">]);</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="p">}</span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">This only works in recent browsers that support the new HTML5 File API:</span><span class="qlink_container" style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><a class="external_link" href="https://developer.mozilla.org/en/DOM/FileReader#Browser_compatibility" style="background-attachment: initial; background-clip: initial; background-image: url(data:image/gif; background-origin: initial; background-position: 100% 5px; background-repeat: no-repeat; background-size: initial; color: #2b6dad; padding-right: 12px; text-decoration: none;" target="_blank">https://developer.mozilla<wbr></wbr>.org/en...</a></span><br />
<br />
<br />
<br />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">You can </span><b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">quickly run HTML in the browser without creating a HTML file:</b><br />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">Enter this in the address bar: </span><br />
<div class="codeblock inline_codeblock" style="background: rgb(244, 244, 244); color: #333333; display: inline; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; white-space: pre-wrap;">
<pre style="display: inline; font-family: monospace, monospace; overflow: auto; white-space: pre-wrap;"><span class="">data:text/html,<h1>Hello, world!</h1></span></pre>
</div>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<i style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">(This won't work in IE)</i><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">You can </span><b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">make a page's CSS editable in the browser without using JS</b><span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">:</span><br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"></pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="cp" style="color: #007020;"><!DOCTYPE html></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nt" style="color: #062873; font-weight: bold;"><html></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nt" style="color: #062873; font-weight: bold;"><body></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nt" style="color: #062873; font-weight: bold;"><style </span><span class="na" style="color: #4070a0;">style=</span><span class="s" style="color: #4070a0;">"display:block" </span><span class="na" style="color: #4070a0;">contentEditable</span><span class="nt" style="color: #062873; font-weight: bold;">></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nt" style="color: #062873; font-weight: bold;">body </span><span class="p">{ </span><span class="k" style="color: #007020; font-weight: bold;">color</span><span class="o" style="color: #666666;">: </span><span class="nb" style="color: #007020;">blue </span><span class="p">}</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nt" style="color: #062873; font-weight: bold;"></style></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nt" style="color: #062873; font-weight: bold;"></body></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nt" style="color: #062873; font-weight: bold;"></html></span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<i style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">(This also won't work in IE)</i><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">You can </span><b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">have the browser parse a URL for you</b><span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"> like this:</span><br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"></pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="kd" style="color: #007020; font-weight: bold;">var </span><span class="nx">a </span><span class="o" style="color: #666666;">= </span><span class="nb" style="color: #007020;">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1" style="color: #4070a0;">'a'</span><span class="p">);</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nx">a</span><span class="p">.</span><span class="nx">href </span><span class="o" style="color: #666666;">= </span><span class="nx">url</span><span class="p">;</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">
</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="c1" style="color: #60a0b0; font-style: italic;">// any property of window.location works here:</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nb" style="color: #007020;">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1" style="color: #4070a0;">'The hostname of ' </span><span class="o" style="color: #666666;">+ </span><span class="nx">url </span><span class="o" style="color: #666666;">+ </span><span class="s1" style="color: #4070a0;">' is ' </span><span class="o" style="color: #666666;">+ </span><span class="nx">a</span><span class="p">.</span><span class="nx">hostname</span><span class="p">);</span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<i style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">(Works in all major browsers)</i><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">You can </span><b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">invalidate a URL in the browser's cache</b><span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"> by sending a PUT method xmlhttprequest to it:</span><br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"></pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="kd" style="color: #007020; font-weight: bold;">var </span><span class="nx">xhr </span><span class="o" style="color: #666666;">= </span><span class="nb" style="color: #007020;">window</span><span class="p">.</span><span class="nx">XMLHttpRequest </span><span class="o" style="color: #666666;">?</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="k" style="color: #007020; font-weight: bold;">new </span><span class="nx">XMLHttpRequest</span><span class="p">() </span><span class="o" style="color: #666666;">:</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="k" style="color: #007020; font-weight: bold;">new </span><span class="nx">ActiveXObject</span><span class="p">(</span><span class="s1" style="color: #4070a0;">'Microsoft.XMLHTTP'</span><span class="p">);</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s1" style="color: #4070a0;">'PUT'</span><span class="p">, </span><span class="nx">url</span><span class="p">);</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc" style="color: #007020; font-weight: bold;">null</span><span class="p">);</span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<i style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">(Works in all major browsers)</i><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">You can put</span><b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"> multiple statements in an </b><br />
<div class="codeblock inline_codeblock" style="background: rgb(244, 244, 244); display: inline; font-size: 13px; white-space: pre-wrap;">
<pre style="display: inline; font-family: monospace, monospace; overflow: auto; white-space: pre-wrap;"><span class="k" style="color: #007020; font-weight: bold;">if</span></pre>
</div>
<b style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"> block without using curly brackets</b><span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"> like this:</span><br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"></pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="k" style="color: #007020; font-weight: bold;">if </span><span class="p">(</span><span class="nx">confirm</span><span class="p">(</span><span class="s2" style="color: #4070a0;">"Do you wish to see two alerts?"</span><span class="p">))</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""> </span><span class="nx">alert</span><span class="p">(</span><span class="mi" style="color: #40a070;">1</span><span class="p">), </span><span class="nx">alert</span><span class="p">(</span><span class="mi" style="color: #40a070;">2</span><span class="p">);</span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<i style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">(Works in all major browsers)</i></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3916397802113349450.post-55962955999015023192015-02-17T00:07:00.004-08:002015-02-17T00:31:23.568-08:00Constant aspect ratio element<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><br /></span>
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">You can create containers that maintain a constant aspect ratio by using padding-bottom as a percentage. The CSS spec says that padding-bottom is defined relative to the *width*, not height, so if you want a 5:1 aspect ratio container you can do something like this:</span><br />
<br />
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;">
</pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""><div style="width: 100%; position: relative; padding-bottom: 20%;"></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""><div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;"></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">this content will have a constant aspect ratio that varies based on the width.</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""></div></span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class=""></div></span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">This is useful for responsive layouts where you want the width to adjust dynamically but want to keep, say, square photo thumbnails.</span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3916397802113349450.post-4419488060439444192015-02-17T00:04:00.001-08:002015-02-17T00:31:41.831-08:00Visual events viewer<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="border-bottom-color: rgb(164, 164, 164); border-bottom-style: solid; border-bottom-width: 1px; color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 1.1em; font-weight: normal; line-height: 18.5599994659424px; margin: 1em 0px 0.5em; padding: 0.3em 0px;">
<br /></h1>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
When working with events in Javascript, it is often easy to lose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be.</div>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
It is due to this I've put together a Javascript bookmarklet called <i>Visual Event</i> which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.</div>
<h1 style="border-bottom-color: rgb(164, 164, 164); border-bottom-style: solid; border-bottom-width: 1px; color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 1.1em; font-weight: normal; line-height: 18.5599994659424px; margin: 1em 0px 0.5em; padding: 0.3em 0px;">
<a href="https://www.blogger.com/null" name="usage"></a>Usage</h1>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
Using <i>Visual Event</i> on any web-page is extremely simple:</div>
<ul style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; list-style: none url(http://www.sprymedia.co.uk/media/images/arrow.jpg); margin: 0px 1.5em 1em; padding: 0px;">
<li style="margin: 0px; padding: 0px;">Drag the <i>Visual Event</i> link below to your bookmark bar:<br /><a href="https://www.blogger.com/null" style="color: #b82014;"><img alt="Visual Event" src="http://www.sprymedia.co.uk/design/event/reflection/button.jpg" style="border: 0px;" /></a></li>
<li style="margin: 0px; padding: 0px;">Load a web-page which uses one of the supported Javascript libraries</li>
<li style="margin: 0px; padding: 0px;">Click <i>Visual Event</i> in your bookmark bar</li>
<li style="margin: 0px; padding: 0px;">View the event handlers which are attached to the document elements.</li>
</ul>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
You can see a demo of this in action <a href="http://www.sprymedia.co.uk/dataTables/demo_events.html" style="color: #b82014; text-decoration: none;">showing the events</a> attached by my own DataTables jQuery plugin.</div>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
<i>Visual Event</i> is currently beta level software and as such there are a few important notes to make. This first of these is that <i>Visual Event</i> will <b>not</b> currently work in Internet Explorer. IE has it's own events model and I've concentrated initially on the W3C model. The second point is that only events added by libraries which <i>Visual Event</i> recognises will actually be shown (see later for why). The currently supported libraries are:</div>
<ul style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; list-style: none url(http://www.sprymedia.co.uk/media/images/arrow.jpg); margin: 0px 1.5em 1em; padding: 0px;">
<li style="margin: 0px; padding: 0px;">DOM 0 events</li>
<li style="margin: 0px; padding: 0px;">jQuery 1.2.x +</li>
<li style="margin: 0px; padding: 0px;">YUI 2.6.x (2.x might work!)</li>
<li style="margin: 0px; padding: 0px;">MooTools 1.2.x</li>
<li style="margin: 0px; padding: 0px;">Prototype 1.6.x</li>
<li style="margin: 0px; padding: 0px;">JAK (Events 2.2)</li>
<li style="margin: 0px; padding: 0px;">Glow</li>
</ul>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
When using <i>Visual Event</i> you will notice that I've used colour coding and icons to represent different actions in a concise and easy to view manner. The background colours which show that an element has an event attached to it follow the mapping shown below.</div>
<table border="0" cellpadding="3" cellspacing="0" class="display" style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin: 0px auto; width: 445px;"><thead>
<tr><th style="border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 3px 10px;" width="40%">Colour</th><th style="border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 3px 10px;" width="60%">Meaning</th></tr>
</thead><tbody>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;">Blue</td><td style="margin: 0px; padding: 3px 10px;">Mouse event</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;">Red</td><td style="margin: 0px; padding: 3px 10px;">UI event (keys etc)</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;">Yellow</td><td style="margin: 0px; padding: 3px 10px;">HTML event (select etc)</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;">Purple</td><td style="margin: 0px; padding: 3px 10px;">Mouse + UI events</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;">Orange</td><td style="margin: 0px; padding: 3px 10px;">UI + HTML events</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;">Green</td><td style="margin: 0px; padding: 3px 10px;">Mouse + HTML events</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;">Black</td><td style="margin: 0px; padding: 3px 10px;">Mouse + UI + HTML events</td></tr>
</tbody></table>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
The icons representing individual events also follow this colouring pattern, but also indicate what the attached event is pictorially. The follows the mapping shown below.</div>
<table border="0" cellpadding="3" cellspacing="0" class="display" style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin: 0px auto; width: 445px;"><thead>
<tr><th style="border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 3px 10px;" width="40%">Icon</th><th style="border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 3px 10px;" width="60%">Event</th></tr>
</thead><tbody>
<tr><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/click.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">click</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/dblclick.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">dblclick</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/mousedown.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">mousedown</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/mousemove.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">mousemove</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/mouseout.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">mouseout</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/mouseover.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">mouseover</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/mouseup.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">mouseup</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/change.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">change</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/focus.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">focus</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/blur.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">blur</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/select.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">select</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/submit.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">submit</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/keydown.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">keydown</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/keypress.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">keypress</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/keyup.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">keyup</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/load.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">load</td></tr>
<tr class="even" style="background-color: #eeeeee;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/unload.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">unload</td></tr>
<tr class="odd" style="background-color: #dddddd;"><td style="margin: 0px; padding: 3px 10px;"><img src="http://www.sprymedia.co.uk/design/event/media/images/custom.png" style="border: 0px;" /></td><td style="margin: 0px; padding: 3px 10px;">custom / unknown</td></tr>
</tbody></table>
<h1 style="border-bottom-color: rgb(164, 164, 164); border-bottom-style: solid; border-bottom-width: 1px; color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 1.1em; font-weight: normal; line-height: 18.5599994659424px; margin: 1em 0px 0.5em; padding: 0.3em 0px;">
<a href="https://www.blogger.com/null" name="tech"></a>Technical information</h1>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
It turns out that there is no standard method provided by the W3C recommended DOM interface to find out what event listeners are attached to a particular node. While this may appear to be an oversight, there was a proposal to include a property called 'eventListenerList' (<a href="http://www.w3.org/TR/2002/WD-DOM-Level-3-Events-20020208/changes.html" style="color: #b82014; text-decoration: none;">reference</a>) to the level 3 DOM specification, but this has unfortunately been removed in the latest drafts. As such we are forced to looked at the individual Javascript libraries, which typically maintain a cache of attached events (so they can later be removed and perform other useful abstractions).</div>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
In the current version of <i>Visual Event</i> I have included support for jQuery, YUI, MooTools, Prototype (many thanks to John Schulz for his advice in adding Prototype support) and JAK (with thanks to Michal Aichiner for providing an API function). I've investigated including information Dojo, however this library does not appear not to cache the information that is required by visual event. If anyone does know of a way - please get in touch!</div>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
I would strongly encourage developers who use some of the other libraries to <a href="http://www.sprymedia.co.uk/contact" style="color: #b82014; text-decoration: none;">get in touch</a> with me, and submit a function which can be used by <i>Visual Event</i> to parse a specific library's cache. The following structure must be returned by the function:</div>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin: 0px; padding: 0px;">
<div class="syntaxhighlighter js" id="highlighter_729249" style="font-size: 13px !important; margin: 1em 0px !important; overflow: auto !important; padding: 0px; position: relative !important; width: 636px;">
<div class="toolbar" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-sizing: content-box !important; color: white !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: auto !important; z-index: 10 !important;">
<a class="toolbar_item command_help help" href="http://www.sprymedia.co.uk/article/Visual+Event#" style="background: rgb(78, 108, 163) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; clear: both; color: white !important; display: block !important; float: right !important; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif !important; font-stretch: normal !important; height: auto !important; left: auto !important; line-height: 1.45em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 5px !important; position: static !important; right: auto !important; text-align: center !important; text-decoration: none !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">?</a></div>
<table border="0" cellpadding="0" cellspacing="0" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 659px;"><tbody style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
3</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
4</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
5</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
6</div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
7</div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
8</div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
9</div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
10</div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
11</div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
12</div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
13</div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
14</div>
<div class="line number15 index14 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
15</div>
<div class="line number16 index15 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
16</div>
<div class="line number17 index16 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
17</div>
<div class="line number18 index17 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
18</div>
<div class="line number19 index18 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
19</div>
<div class="line number20 index19 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
20</div>
<div class="line number21 index20 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
21</div>
<div class="line number22 index21 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
22</div>
<div class="line number23 index22 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
23</div>
<div class="line number24 index23 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
24</div>
<div class="line number25 index24 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
25</div>
<div class="line number26 index25 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
26</div>
</td><td class="code" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 618px;"><div class="container" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Return code from event cache parsing function</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">[</code></div>
<div class="line number3 index2 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">{</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Node which is in question</code></div>
<div class="line number5 index4 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"nNode"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: -,</code></div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number7 index6 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// The name of the library where the event comes from (e.g. 'YUI')</code></div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"sSource"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">''</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div>
<div class="line number9 index8 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number10 index9 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Array of the listeners attached to this node</code></div>
<div class="line number11 index10 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"aListeners"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: [</code></div>
<div class="line number12 index11 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">{</code></div>
<div class="line number13 index12 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Type of event (e.g. 'click')</code></div>
<div class="line number14 index13 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"sType"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">''</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div>
<div class="line number15 index14 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// String of the function to run (from Function.toString())</code></div>
<div class="line number17 index16 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"sFunction"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">''</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div>
<div class="line number18 index17 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number19 index18 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Indicate if the event has been removed by the library - typically false</code></div>
<div class="line number20 index19 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"bRemoved"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">''</code></div>
<div class="line number21 index20 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">},</code></div>
<div class="line number22 index21 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">...</code></div>
<div class="line number23 index22 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">]</code></div>
<div class="line number24 index23 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">},</code></div>
<div class="line number25 index24 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">...</code></div>
<div class="line number26 index25 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">]</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin-bottom: 1em; padding: 0px;">
Alternatively, you can make use of a global variable which <i>Visual Event</i> will recognise. This global variable is called <b>VisualEvents</b> which you can populate using either the structure given above, or the slightly simpler version below (ideal for putting into an event registration function) - or any combination of the two:</div>
<div style="color: #333333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12.8000001907349px; line-height: 18.5599994659424px; margin: 0px; padding: 0px;">
<div class="syntaxhighlighter js" id="highlighter_433528" style="font-size: 13px !important; margin: 1em 0px !important; overflow: auto !important; padding: 0px; position: relative !important; width: 636px;">
<div class="toolbar" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: none !important; bottom: auto !important; box-sizing: content-box !important; color: white !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 10px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: absolute !important; right: 1px !important; top: 1px !important; vertical-align: baseline !important; width: auto !important; z-index: 10 !important;">
<a class="toolbar_item command_help help" href="http://www.sprymedia.co.uk/article/Visual+Event#" style="background: rgb(78, 108, 163) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; clear: both; color: white !important; display: block !important; float: right !important; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif !important; font-stretch: normal !important; height: auto !important; left: auto !important; line-height: 1.45em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 5px !important; position: static !important; right: auto !important; text-align: center !important; text-decoration: none !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">?</a></div>
<table border="0" cellpadding="0" cellspacing="0" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 636px;"><tbody style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
3</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
4</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
5</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
6</div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
7</div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
8</div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
9</div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
10</div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
11</div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
12</div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
13</div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
14</div>
<div class="line number15 index14 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
15</div>
<div class="line number16 index15 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
16</div>
<div class="line number17 index16 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
17</div>
<div class="line number18 index17 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
18</div>
<div class="line number19 index18 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(78, 108, 163) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(92, 92, 92) !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 0.5em 2px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: 20px !important;">
19</div>
</td><td class="code" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 595px;"><div class="container" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">[</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">{</code></div>
<div class="line number3 index2 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Node which is in question</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"nNode"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: -,</code></div>
<div class="line number5 index4 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// The name of the library where the event comes from (e.g. 'YUI')</code></div>
<div class="line number7 index6 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"sSource"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">''</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number9 index8 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Type of event (e.g. 'click')</code></div>
<div class="line number10 index9 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"sType"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">''</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div>
<div class="line number11 index10 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number12 index11 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// String of the function to run (from Function.toString())</code></div>
<div class="line number13 index12 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"sFunction"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">''</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div>
<div class="line number14 index13 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number15 index14 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Indicate if the event has been removed by the library - typically false</code></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"bRemoved"</code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="js string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">''</code></div>
<div class="line number17 index16 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">},</code></div>
<div class="line number18 index17 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">...</code></div>
<div class="line number19 index18 alt2" style="background: none rgb(248, 248, 248) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 2px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">]</code></div>
<div>
<code class="js plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3916397802113349450.post-72157248870245394762015-02-16T23:54:00.002-08:002015-02-17T00:31:51.921-08:00Development background<div dir="ltr" style="text-align: left;" trbidi="on">
<table class="codeblocktable" style="border-collapse: collapse; border-spacing: 0px; border: 0px; color: #333333; display: block; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 13px; max-width: 520px; overflow: auto;"><tbody>
<tr><td class="linenos" style="color: #999999; line-height: 21px; padding: 0px 5px 0px 0px; vertical-align: top;"><pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;">
</pre>
</td><td class="code" style="padding: 0px;"><div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">
</span></pre>
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">* { background-color: rgba(255,0,0,.2); }</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">* * { background-color: rgba(0,255,0,.2); }</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">* * * { background-color: rgba(0,0,255,.2); }</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">* * * * { background-color: rgba(255,0,255,.2); }</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">* * * * * { background-color: rgba(0,255,255,.2); }</span></pre>
</div>
<div class="codeblock" style="background: rgb(244, 244, 244);">
<pre style="font-family: monospace, monospace; font-size: 1em; overflow: auto;"><span class="">* * * * * * { background-color: rgba(255,255,0,.2); }</span></pre>
</div>
</td></tr>
</tbody></table>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">This is one of my favorite inventions.</span><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">It is meant to be used when you are working with layout, e.g. take</span><span class="qlink_container" style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;"><a class="external_link" href="http://time.com/" style="background-attachment: initial; background-clip: initial; background-image: url(data:image/gif; background-origin: initial; background-position: 100% 5px; background-repeat: no-repeat; background-size: initial; color: #2b6dad; padding-right: 12px; text-decoration: none;" target="_blank">http://time.com</a></span><span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">.</span><br />
<br />
<div style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">
<img class="landscape qtext_image zoomable_in zoomable_in_feed" src="http://qph.is.quoracdn.net/main-qimg-9c359cbc341b1f22ea03300c0e2fe529?convert_to_webp=true" master_h="2204" master_src="http://qph.is.quoracdn.net/main-qimg-22220b34a31663bd57b824a56da56bca?convert_to_webp=true" master_w="2949" style="border: 0px; cursor: -webkit-zoom-in; display: block; max-width: 100%;" /></div>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">The problem is that unless the element on the page has a solid background or it is a picture, you do not see how does it fit into the layout, e.g. most of the text nodes, pictures with transparency, etc.</span><br />
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">With the above CSS, you will see something along the lines of:</span><br />
<br />
<div style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">
<img class="landscape qtext_image zoomable_in zoomable_in_feed" src="http://qph.is.quoracdn.net/main-qimg-5e440f5d3fe8eb6ac7786d5bb6bb125b?convert_to_webp=true" master_h="2204" master_src="http://qph.is.quoracdn.net/main-qimg-6e61004d1ef5903f0278e24b6736d193?convert_to_webp=true" master_w="2949" style="border: 0px; cursor: -webkit-zoom-in; display: block; max-width: 100%;" /></div>
<br style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;" />
<span style="color: #333333; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 15px; line-height: 21px;">Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies.</span></div>
Unknownnoreply@blogger.com0