<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Battisti - Blog &#187; Javascript</title>
	<atom:link href="http://battisti.etc.br/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://battisti.etc.br</link>
	<description>Tecnologia, Web e um pouco de cultura inútil</description>
	<lastBuildDate>Fri, 27 Jan 2012 11:49:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Botão para o Firefox que recarrega os CSS de uma página sem dar reload</title>
		<link>http://battisti.etc.br/2010/11/16/botao-para-o-firefox-que-recarrega-os-css-de-uma-pagina-sem-dar-reload/</link>
		<comments>http://battisti.etc.br/2010/11/16/botao-para-o-firefox-que-recarrega-os-css-de-uma-pagina-sem-dar-reload/#comments</comments>
		<pubDate>Tue, 16 Nov 2010 17:54:06 +0000</pubDate>
		<dc:creator>Battisti</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://battisti.etc.br/?p=1026</guid>
		<description><![CDATA[Saudações Para montar layout com CSS tem que ficar testando para ver o que fica legal com o que, um problema sério aparece quando você está formatando uma sessão do site / sistema que é exibida apenas depois de uma sequência de passos, ou seja, tem que  ficar repetindo os mesmos cliques até chegar no [...]]]></description>
			<content:encoded><![CDATA[<div class="mwordstext"><p>Saudações</p>
<p>Para montar layout com CSS tem que ficar testando para ver o que fica legal com o que, um problema sério aparece quando você está formatando uma sessão do site / sistema que é exibida apenas depois de uma sequência de passos, ou seja, tem que  ficar repetindo os mesmos cliques até chegar no ponto específico que você quer testar. Uma forma de resolve isso é criando um botão de favoritos que recarrega todos os CSS de uma página.</p>
<p>Para isso:</p>
<p>1 &#8211; Adicione um favoritos no firefox</p>
<p>2 &#8211; Na opção endereço digite:</p>
<pre>

javascript:void(function(){var%20%20i,a,s;a=document.getElementsByTagName('link');for(i=0;i=0&amp;&amp;s.href)%20%20{var%20%20h=s.href.replace(/(&amp;|%5C?)forceReload=\d+/,'');s.href=h+(h.indexOf('?')&gt;=0?'&amp;':'?')+'forceReload='+(new%20%20Date().valueOf())}}})();
</pre>
</div><!-- fim mwordstext -->]]></content:encoded>
			<wfw:commentRss>http://battisti.etc.br/2010/11/16/botao-para-o-firefox-que-recarrega-os-css-de-uma-pagina-sem-dar-reload/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google API Translate Portugues Para Inglês Javascript</title>
		<link>http://battisti.etc.br/2010/04/09/google-api-translate-portugues-para-ingles-javascript/</link>
		<comments>http://battisti.etc.br/2010/04/09/google-api-translate-portugues-para-ingles-javascript/#comments</comments>
		<pubDate>Fri, 09 Apr 2010 01:29:03 +0000</pubDate>
		<dc:creator>battisti</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://battisti.etc.br/?p=895</guid>
		<description><![CDATA[Precisava fazer um esquema para traduzir o texto que o meu usuário digitava do português para o inglês, este texto estava em um campo de busca pois a APP externa que utilizei não entendia muito bem o português, sendo assim o negócio era mandar tudo em inglês para ela. O google, só pra variar um [...]]]></description>
			<content:encoded><![CDATA[<div class="mwordstext"><p>Precisava fazer um esquema para traduzir o texto que o meu usuário digitava do português para o inglês, este texto estava em um campo de busca pois a APP externa que utilizei não entendia muito bem o português, sendo assim o negócio era mandar tudo em inglês para ela.</p>
<p>O google, só pra variar um pouco, fornece uma <a class="bbli" href="http://sledge.boo-box.com/list/page/QVBJXyMjX2JveF8jI190YWdnaW5nLXRvb2wtd3BfIyNfMTkxMTQ=-52">API<img class="bbic" src="http://boo-box.com/bbli" alt="[bb]" /></a> chamada <a href="http://code.google.com/apis/ajaxlanguage/documentation/reference.html">translate API</a> que pode ser facilmente acoplada nas aplicações web.</p>
<p>Segue abaixo um exemplo de como utilizar a <a class="bbli" href="http://sledge.boo-box.com/list/page/QVBJXyMjX2JveF8jI190YWdnaW5nLXRvb2wtd3BfIyNfMTkxMTQ=-52">API<img class="bbic" src="http://boo-box.com/bbli" alt="[bb]" /></a>:</p>
<p><script src="http://gist.github.com/360765.js?file=sample_googletranslate_api.js"></script></p>
</div><!-- fim mwordstext -->]]></content:encoded>
			<wfw:commentRss>http://battisti.etc.br/2010/04/09/google-api-translate-portugues-para-ingles-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Replace Javascript Várias Ocorrências</title>
		<link>http://battisti.etc.br/2010/04/08/replace-javascript-varias-ocorrencias/</link>
		<comments>http://battisti.etc.br/2010/04/08/replace-javascript-varias-ocorrencias/#comments</comments>
		<pubDate>Thu, 08 Apr 2010 00:23:30 +0000</pubDate>
		<dc:creator>battisti</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://battisti.etc.br/?p=890</guid>
		<description><![CDATA[Estava eu aqui com um Javascript onde eu precisava substituir várias ocorrências de uma string dentro de outra, usei o replace mas para minha surpresa ele apenas substituiu a primeira o ocorrência! E agora, como faço para substituir todas as ocorrências? Como Faz? var a = "teste teste teset"; console.log(a.replace('e','')); // substitui apenas a primeira [...]]]></description>
			<content:encoded><![CDATA[<div class="mwordstext"><p>
  Estava eu aqui com um <i>Javascript</i> onde eu precisava substituir várias ocorrências de uma string dentro de outra, usei o replace mas para minha surpresa ele apenas substituiu a primeira o ocorrência! E agora, como faço para substituir todas as ocorrências?
</p>
<h1>Como Faz? </h1>
<p><span id="more-890"></span></p>
<pre>
var a = "teste teste teset";
console.log(a.replace('e','')); // substitui apenas a primeira ocorrência
console.log(a.replace(/e/g,'')); // substitui todas as ocorrências
</pre>
<p>Grande Abraço</p>
</div><!-- fim mwordstext -->]]></content:encoded>
			<wfw:commentRss>http://battisti.etc.br/2010/04/08/replace-javascript-varias-ocorrencias/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Alterar a Cor da Linha via CSS usando JQuery</title>
		<link>http://battisti.etc.br/2009/07/23/alterar-a-cor-da-linha-via-css-usando-jquery/</link>
		<comments>http://battisti.etc.br/2009/07/23/alterar-a-cor-da-linha-via-css-usando-jquery/#comments</comments>
		<pubDate>Thu, 23 Jul 2009 23:41:05 +0000</pubDate>
		<dc:creator>battisti</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://battisti.etc.br/?p=588</guid>
		<description><![CDATA[Introdução Fazer com que a cor do fundo de uma linha mude de cor quando se passa o mouse por sobre ela. Exemplo $&#40;document&#41;.ready&#40; function&#40;&#41; &#123; $&#40;&#34;.gray_grid tbody tr td table tbody tr&#34;&#41;.mouseover&#40;function&#40;&#41; &#123; $&#40;this&#41;.css&#40;&#34;background-color&#34;,&#34;#b7ffcc&#34;&#41;; &#125;&#41;.mouseout&#40;function&#40;&#41; &#123; $&#40;this&#41;.css&#40;&#34;background-color&#34;,&#34;#fff&#34;&#41;; &#125;&#41; &#125;&#41;]]></description>
			<content:encoded><![CDATA[<div class="mwordstext"><h1>Introdução</h1>
<p>Fazer com que a cor do fundo de uma linha mude de cor quando se passa o mouse por sobre ela.<span id="more-588"></span></p>
<h1>Exemplo</h1>

<div class="wp_syntax"><div class="code"><pre class="javascript">    $<span class="br0">&#40;</span>document<span class="br0">&#41;</span>.<span class="me1">ready</span><span class="br0">&#40;</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
     	$<span class="br0">&#40;</span><span class="st0">&quot;.gray_grid tbody tr td table tbody tr&quot;</span><span class="br0">&#41;</span>.<span class="me1">mouseover</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
     		$<span class="br0">&#40;</span><span class="kw1">this</span><span class="br0">&#41;</span>.<span class="me1">css</span><span class="br0">&#40;</span><span class="st0">&quot;background-color&quot;</span><span class="sy0">,</span><span class="st0">&quot;#b7ffcc&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
     	<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">mouseout</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
 		$<span class="br0">&#40;</span><span class="kw1">this</span><span class="br0">&#41;</span>.<span class="me1">css</span><span class="br0">&#40;</span><span class="st0">&quot;background-color&quot;</span><span class="sy0">,</span><span class="st0">&quot;#fff&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
     	<span class="br0">&#125;</span><span class="br0">&#41;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span></pre></div></div>

</div><!-- fim mwordstext -->]]></content:encoded>
			<wfw:commentRss>http://battisti.etc.br/2009/07/23/alterar-a-cor-da-linha-via-css-usando-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Teclas de Atalho com Javascript</title>
		<link>http://battisti.etc.br/2009/07/19/teclas-de-atalho-com-javascript/</link>
		<comments>http://battisti.etc.br/2009/07/19/teclas-de-atalho-com-javascript/#comments</comments>
		<pubDate>Sun, 19 Jul 2009 18:59:23 +0000</pubDate>
		<dc:creator>battisti</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://battisti.etc.br/?p=579</guid>
		<description><![CDATA[Introdução O uso de teclas de atalho em geral não é muito utilizado em aplicativos Web porém está é um falta grave pois atalhos podem aumentar  signifiicativamente a usabilidade. Mas como criar atalhos em aplicações Web? Biblioteca Existe uma biblioteca muito boa, chamada shortcuts, bem sugestivo não, abaixo eu compilei ela em um exemplo simples [...]]]></description>
			<content:encoded><![CDATA[<div class="mwordstext"><h1>Introdução</h1>
<p>O uso de teclas de atalho em geral não é muito utilizado em aplicativos Web porém está é um falta grave pois atalhos podem aumentar  signifiicativamente a usabilidade. Mas como criar atalhos em aplicações Web?</p>
<p><span id="more-579"></span></p>
<h1>Biblioteca</h1>
<p>Existe uma biblioteca muito boa, chamada <a href="http://www.openjs.com/scripts/events/keyboard_shortcuts/"><em>shortcuts</em></a>, bem sugestivo não, abaixo eu compilei ela em um exemplo simples de ser usado:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript"><span class="coMULTI">/**********************/</span>
<span class="co1">//==UserScript==</span>
<span class="co1">//@name           shortcuts</span>
<span class="co1">//@namespace      hack</span>
<span class="co1">//@description    add shortcuts to call functions</span>
<span class="co1">//@include        *</span>
<span class="co1">//==/UserScript==</span>
&nbsp;
<span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> <span class="co1">// intro</span>
&nbsp;
<span class="kw2">function</span> run<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
	shortcut.<span class="me1">add</span><span class="br0">&#40;</span><span class="st0">&quot;ESC&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">'ESC'</span><span class="br0">&#41;</span><span class="br0">&#125;</span> <span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">//--------------------------------------------------------------------------------</span>
&nbsp;
<span class="coMULTI">/**
* http://www.openjs.com/scripts/events/keyboard_shortcuts/
* Version : 2.01.A
* By Binny V A
* License : BSD
*/</span>
shortcut <span class="sy0">=</span> <span class="br0">&#123;</span>
	<span class="st0">'all_shortcuts'</span><span class="sy0">:</span><span class="br0">&#123;</span><span class="br0">&#125;</span><span class="sy0">,</span><span class="co1">//All the shortcuts are stored in this array</span>
	<span class="st0">'add'</span><span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>shortcut_combination<span class="sy0">,</span>callback<span class="sy0">,</span>opt<span class="br0">&#41;</span> <span class="br0">&#123;</span>
		<span class="co1">//Provide a set of default options</span>
		<span class="kw2">var</span> default_options <span class="sy0">=</span> <span class="br0">&#123;</span>
			<span class="st0">'type'</span><span class="sy0">:</span><span class="st0">'keydown'</span><span class="sy0">,</span>
			<span class="st0">'propagate'</span><span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span>
			<span class="st0">'disable_in_input'</span><span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span>
			<span class="st0">'target'</span><span class="sy0">:</span>document<span class="sy0">,</span>
			<span class="st0">'keycode'</span><span class="sy0">:</span><span class="kw2">false</span>
		<span class="br0">&#125;</span>
		<span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>opt<span class="br0">&#41;</span> opt <span class="sy0">=</span> default_options<span class="sy0">;</span>
		<span class="kw1">else</span> <span class="br0">&#123;</span>
			<span class="kw1">for</span><span class="br0">&#40;</span><span class="kw2">var</span> dfo <span class="kw1">in</span> default_options<span class="br0">&#41;</span> <span class="br0">&#123;</span>
				<span class="kw1">if</span><span class="br0">&#40;</span><span class="kw1">typeof</span> opt<span class="br0">&#91;</span>dfo<span class="br0">&#93;</span> <span class="sy0">==</span> <span class="st0">'undefined'</span><span class="br0">&#41;</span> opt<span class="br0">&#91;</span>dfo<span class="br0">&#93;</span> <span class="sy0">=</span> default_options<span class="br0">&#91;</span>dfo<span class="br0">&#93;</span><span class="sy0">;</span>
			<span class="br0">&#125;</span>
		<span class="br0">&#125;</span>
&nbsp;
		<span class="kw2">var</span> ele <span class="sy0">=</span> opt.<span class="me1">target</span>
		<span class="kw1">if</span><span class="br0">&#40;</span><span class="kw1">typeof</span> opt.<span class="me1">target</span> <span class="sy0">==</span> <span class="st0">'string'</span><span class="br0">&#41;</span> ele <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">&#40;</span>opt.<span class="me1">target</span><span class="br0">&#41;</span><span class="sy0">;</span>
		<span class="kw2">var</span> ths <span class="sy0">=</span> <span class="kw1">this</span><span class="sy0">;</span>
		shortcut_combination <span class="sy0">=</span> shortcut_combination.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
		<span class="co1">//The function to be called at keypress</span>
		<span class="kw2">var</span> func <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
			e <span class="sy0">=</span> e <span class="sy0">||</span> window.<span class="me1">event</span><span class="sy0">;</span>
&nbsp;
			<span class="kw1">if</span><span class="br0">&#40;</span>opt<span class="br0">&#91;</span><span class="st0">'disable_in_input'</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> <span class="co1">//Don't enable shortcut keys in Input, Textarea fields</span>
				<span class="kw2">var</span> element<span class="sy0">;</span>
				<span class="kw1">if</span><span class="br0">&#40;</span>e.<span class="me1">target</span><span class="br0">&#41;</span> element<span class="sy0">=</span>e.<span class="me1">target</span><span class="sy0">;</span>
				<span class="kw1">else</span> <span class="kw1">if</span><span class="br0">&#40;</span>e.<span class="me1">srcElement</span><span class="br0">&#41;</span> element<span class="sy0">=</span>e.<span class="me1">srcElement</span><span class="sy0">;</span>
				<span class="kw1">if</span><span class="br0">&#40;</span>element.<span class="me1">nodeType</span><span class="sy0">==</span><span class="nu0">3</span><span class="br0">&#41;</span> element<span class="sy0">=</span>element.<span class="me1">parentNode</span><span class="sy0">;</span>
&nbsp;
				<span class="kw1">if</span><span class="br0">&#40;</span>element.<span class="me1">tagName</span> <span class="sy0">==</span> <span class="st0">'INPUT'</span> <span class="sy0">||</span> element.<span class="me1">tagName</span> <span class="sy0">==</span> <span class="st0">'TEXTAREA'</span><span class="br0">&#41;</span> <span class="kw1">return</span><span class="sy0">;</span>
			<span class="br0">&#125;</span>
&nbsp;
			<span class="co1">//Find Which key is pressed</span>
			<span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">keyCode</span><span class="br0">&#41;</span> code <span class="sy0">=</span> e.<span class="me1">keyCode</span><span class="sy0">;</span>
			<span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">which</span><span class="br0">&#41;</span> code <span class="sy0">=</span> e.<span class="me1">which</span><span class="sy0">;</span>
			<span class="kw2">var</span> character <span class="sy0">=</span> String.<span class="me1">fromCharCode</span><span class="br0">&#40;</span>code<span class="br0">&#41;</span>.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
			<span class="kw1">if</span><span class="br0">&#40;</span>code <span class="sy0">==</span> <span class="nu0">188</span><span class="br0">&#41;</span> character<span class="sy0">=</span><span class="st0">&quot;,&quot;</span><span class="sy0">;</span> <span class="co1">//If the user presses , when the type is onkeydown</span>
			<span class="kw1">if</span><span class="br0">&#40;</span>code <span class="sy0">==</span> <span class="nu0">190</span><span class="br0">&#41;</span> character<span class="sy0">=</span><span class="st0">&quot;.&quot;</span><span class="sy0">;</span> <span class="co1">//If the user presses , when the type is onkeydown</span>
&nbsp;
			<span class="kw2">var</span> keys <span class="sy0">=</span> shortcut_combination.<span class="me1">split</span><span class="br0">&#40;</span><span class="st0">&quot;+&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
			<span class="co1">//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked</span>
			<span class="kw2">var</span> kp <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span>
&nbsp;
			<span class="co1">//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken</span>
			<span class="kw2">var</span> shift_nums <span class="sy0">=</span> <span class="br0">&#123;</span>
				<span class="st0">&quot;`&quot;</span><span class="sy0">:</span><span class="st0">&quot;~&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;1&quot;</span><span class="sy0">:</span><span class="st0">&quot;!&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;2&quot;</span><span class="sy0">:</span><span class="st0">&quot;@&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;3&quot;</span><span class="sy0">:</span><span class="st0">&quot;#&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;4&quot;</span><span class="sy0">:</span><span class="st0">&quot;$&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;5&quot;</span><span class="sy0">:</span><span class="st0">&quot;%&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;6&quot;</span><span class="sy0">:</span><span class="st0">&quot;^&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;7&quot;</span><span class="sy0">:</span><span class="st0">&quot;&amp;amp;&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;8&quot;</span><span class="sy0">:</span><span class="st0">&quot;*&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;9&quot;</span><span class="sy0">:</span><span class="st0">&quot;(&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;0&quot;</span><span class="sy0">:</span><span class="st0">&quot;)&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;-&quot;</span><span class="sy0">:</span><span class="st0">&quot;_&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;=&quot;</span><span class="sy0">:</span><span class="st0">&quot;+&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;;&quot;</span><span class="sy0">:</span><span class="st0">&quot;:&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;'&quot;</span><span class="sy0">:</span><span class="st0">&quot;<span class="es0">\&quot;</span>&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;,&quot;</span><span class="sy0">:</span><span class="st0">&quot;&amp;lt;&quot;</span><span class="sy0">,</span> 				<span class="st0">&quot;.&quot;</span><span class="sy0">:</span><span class="st0">&quot;&amp;gt;&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;/&quot;</span><span class="sy0">:</span><span class="st0">&quot;?&quot;</span><span class="sy0">,</span>
				<span class="st0">&quot;<span class="es0">\\</span>&quot;</span><span class="sy0">:</span><span class="st0">&quot;|&quot;</span>
			<span class="br0">&#125;</span>
			<span class="co1">//Special Keys - and their codes</span>
			<span class="kw2">var</span> special_keys <span class="sy0">=</span> <span class="br0">&#123;</span>
				<span class="st0">'esc'</span><span class="sy0">:</span><span class="nu0">27</span><span class="sy0">,</span>
				<span class="st0">'escape'</span><span class="sy0">:</span><span class="nu0">27</span><span class="sy0">,</span>
				<span class="st0">'tab'</span><span class="sy0">:</span><span class="nu0">9</span><span class="sy0">,</span>
				<span class="st0">'space'</span><span class="sy0">:</span><span class="nu0">32</span><span class="sy0">,</span>
				<span class="st0">'return'</span><span class="sy0">:</span><span class="nu0">13</span><span class="sy0">,</span>
				<span class="st0">'enter'</span><span class="sy0">:</span><span class="nu0">13</span><span class="sy0">,</span>
				<span class="st0">'backspace'</span><span class="sy0">:</span><span class="nu0">8</span><span class="sy0">,</span>
&nbsp;
				<span class="st0">'scrolllock'</span><span class="sy0">:</span><span class="nu0">145</span><span class="sy0">,</span>
				<span class="st0">'scroll_lock'</span><span class="sy0">:</span><span class="nu0">145</span><span class="sy0">,</span>
				<span class="st0">'scroll'</span><span class="sy0">:</span><span class="nu0">145</span><span class="sy0">,</span>
				<span class="st0">'capslock'</span><span class="sy0">:</span><span class="nu0">20</span><span class="sy0">,</span>
				<span class="st0">'caps_lock'</span><span class="sy0">:</span><span class="nu0">20</span><span class="sy0">,</span>
				<span class="st0">'caps'</span><span class="sy0">:</span><span class="nu0">20</span><span class="sy0">,</span>
				<span class="st0">'numlock'</span><span class="sy0">:</span><span class="nu0">144</span><span class="sy0">,</span>
				<span class="st0">'num_lock'</span><span class="sy0">:</span><span class="nu0">144</span><span class="sy0">,</span>
				<span class="st0">'num'</span><span class="sy0">:</span><span class="nu0">144</span><span class="sy0">,</span>
&nbsp;
				<span class="st0">'pause'</span><span class="sy0">:</span><span class="nu0">19</span><span class="sy0">,</span>
				<span class="st0">'break'</span><span class="sy0">:</span><span class="nu0">19</span><span class="sy0">,</span>
&nbsp;
				<span class="st0">'insert'</span><span class="sy0">:</span><span class="nu0">45</span><span class="sy0">,</span>
				<span class="st0">'home'</span><span class="sy0">:</span><span class="nu0">36</span><span class="sy0">,</span>
				<span class="st0">'delete'</span><span class="sy0">:</span><span class="nu0">46</span><span class="sy0">,</span>
				<span class="st0">'end'</span><span class="sy0">:</span><span class="nu0">35</span><span class="sy0">,</span>
&nbsp;
				<span class="st0">'pageup'</span><span class="sy0">:</span><span class="nu0">33</span><span class="sy0">,</span>
				<span class="st0">'page_up'</span><span class="sy0">:</span><span class="nu0">33</span><span class="sy0">,</span>
				<span class="st0">'pu'</span><span class="sy0">:</span><span class="nu0">33</span><span class="sy0">,</span>
&nbsp;
				<span class="st0">'pagedown'</span><span class="sy0">:</span><span class="nu0">34</span><span class="sy0">,</span>
				<span class="st0">'page_down'</span><span class="sy0">:</span><span class="nu0">34</span><span class="sy0">,</span>
				<span class="st0">'pd'</span><span class="sy0">:</span><span class="nu0">34</span><span class="sy0">,</span>
&nbsp;
				<span class="st0">'left'</span><span class="sy0">:</span><span class="nu0">37</span><span class="sy0">,</span>
				<span class="st0">'up'</span><span class="sy0">:</span><span class="nu0">38</span><span class="sy0">,</span>
				<span class="st0">'right'</span><span class="sy0">:</span><span class="nu0">39</span><span class="sy0">,</span>
				<span class="st0">'down'</span><span class="sy0">:</span><span class="nu0">40</span><span class="sy0">,</span>
&nbsp;
				<span class="st0">'f1'</span><span class="sy0">:</span><span class="nu0">112</span><span class="sy0">,</span>
				<span class="st0">'f2'</span><span class="sy0">:</span><span class="nu0">113</span><span class="sy0">,</span>
				<span class="st0">'f3'</span><span class="sy0">:</span><span class="nu0">114</span><span class="sy0">,</span>
				<span class="st0">'f4'</span><span class="sy0">:</span><span class="nu0">115</span><span class="sy0">,</span>
				<span class="st0">'f5'</span><span class="sy0">:</span><span class="nu0">116</span><span class="sy0">,</span>
				<span class="st0">'f6'</span><span class="sy0">:</span><span class="nu0">117</span><span class="sy0">,</span>
				<span class="st0">'f7'</span><span class="sy0">:</span><span class="nu0">118</span><span class="sy0">,</span>
				<span class="st0">'f8'</span><span class="sy0">:</span><span class="nu0">119</span><span class="sy0">,</span>
				<span class="st0">'f9'</span><span class="sy0">:</span><span class="nu0">120</span><span class="sy0">,</span>
				<span class="st0">'f10'</span><span class="sy0">:</span><span class="nu0">121</span><span class="sy0">,</span>
				<span class="st0">'f11'</span><span class="sy0">:</span><span class="nu0">122</span><span class="sy0">,</span>
				<span class="st0">'f12'</span><span class="sy0">:</span><span class="nu0">123</span>
			<span class="br0">&#125;</span>
&nbsp;
			<span class="kw2">var</span> modifiers <span class="sy0">=</span> <span class="br0">&#123;</span>
				shift<span class="sy0">:</span> <span class="br0">&#123;</span> wanted<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span> pressed<span class="sy0">:</span><span class="kw2">false</span><span class="br0">&#125;</span><span class="sy0">,</span>
				ctrl <span class="sy0">:</span> <span class="br0">&#123;</span> wanted<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span> pressed<span class="sy0">:</span><span class="kw2">false</span><span class="br0">&#125;</span><span class="sy0">,</span>
				alt  <span class="sy0">:</span> <span class="br0">&#123;</span> wanted<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span> pressed<span class="sy0">:</span><span class="kw2">false</span><span class="br0">&#125;</span><span class="sy0">,</span>
				meta <span class="sy0">:</span> <span class="br0">&#123;</span> wanted<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span> pressed<span class="sy0">:</span><span class="kw2">false</span><span class="br0">&#125;</span>	<span class="co1">//Meta is Mac specific</span>
			<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
			<span class="kw1">if</span><span class="br0">&#40;</span>e.<span class="me1">ctrlKey</span><span class="br0">&#41;</span>	modifiers.<span class="me1">ctrl</span>.<span class="me1">pressed</span> <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
			<span class="kw1">if</span><span class="br0">&#40;</span>e.<span class="me1">shiftKey</span><span class="br0">&#41;</span>	modifiers.<span class="me1">shift</span>.<span class="me1">pressed</span> <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
			<span class="kw1">if</span><span class="br0">&#40;</span>e.<span class="me1">altKey</span><span class="br0">&#41;</span>	modifiers.<span class="me1">alt</span>.<span class="me1">pressed</span> <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
			<span class="kw1">if</span><span class="br0">&#40;</span>e.<span class="me1">metaKey</span><span class="br0">&#41;</span>   modifiers.<span class="me1">meta</span>.<span class="me1">pressed</span> <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
&nbsp;
			<span class="kw1">for</span><span class="br0">&#40;</span><span class="kw2">var</span> i<span class="sy0">=</span><span class="nu0">0</span><span class="sy0">;</span> k<span class="sy0">=</span>keys<span class="br0">&#91;</span>i<span class="br0">&#93;</span><span class="sy0">,</span>i <span class="nu0">1</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> <span class="co1">//If it is a special key</span>
					<span class="kw1">if</span><span class="br0">&#40;</span>special_keys<span class="br0">&#91;</span>k<span class="br0">&#93;</span> <span class="sy0">==</span> code<span class="br0">&#41;</span> kp<span class="sy0">++;</span>
&nbsp;
				<span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span><span class="br0">&#40;</span>opt<span class="br0">&#91;</span><span class="st0">'keycode'</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
					<span class="kw1">if</span><span class="br0">&#40;</span>opt<span class="br0">&#91;</span><span class="st0">'keycode'</span><span class="br0">&#93;</span> <span class="sy0">==</span> code<span class="br0">&#41;</span> kp<span class="sy0">++;</span>
&nbsp;
				<span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span> <span class="co1">//The special keys did not match</span>
					<span class="kw1">if</span><span class="br0">&#40;</span>character <span class="sy0">==</span> k<span class="br0">&#41;</span> kp<span class="sy0">++;</span>
					<span class="kw1">else</span> <span class="br0">&#123;</span>
						<span class="kw1">if</span><span class="br0">&#40;</span>shift_nums<span class="br0">&#91;</span>character<span class="br0">&#93;</span> <span class="sy0">&amp;</span>amp<span class="sy0">;&amp;</span>amp<span class="sy0">;</span> e.<span class="me1">shiftKey</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> <span class="co1">//Stupid Shift key bug created by using lowercase</span>
							character <span class="sy0">=</span> shift_nums<span class="br0">&#91;</span>character<span class="br0">&#93;</span><span class="sy0">;</span>
							<span class="kw1">if</span><span class="br0">&#40;</span>character <span class="sy0">==</span> k<span class="br0">&#41;</span> kp<span class="sy0">++;</span>
						<span class="br0">&#125;</span>
					<span class="br0">&#125;</span>
				<span class="br0">&#125;</span>
			<span class="br0">&#125;</span>
&nbsp;
			<span class="kw1">if</span><span class="br0">&#40;</span>kp <span class="sy0">==</span> keys.<span class="me1">length</span> <span class="sy0">&amp;</span>amp<span class="sy0">;&amp;</span>amp<span class="sy0">;</span>
						modifiers.<span class="me1">ctrl</span>.<span class="me1">pressed</span> <span class="sy0">==</span> modifiers.<span class="me1">ctrl</span>.<span class="me1">wanted</span> <span class="sy0">&amp;</span>amp<span class="sy0">;&amp;</span>amp<span class="sy0">;</span>
						modifiers.<span class="me1">shift</span>.<span class="me1">pressed</span> <span class="sy0">==</span> modifiers.<span class="me1">shift</span>.<span class="me1">wanted</span> <span class="sy0">&amp;</span>amp<span class="sy0">;&amp;</span>amp<span class="sy0">;</span>
						modifiers.<span class="me1">alt</span>.<span class="me1">pressed</span> <span class="sy0">==</span> modifiers.<span class="me1">alt</span>.<span class="me1">wanted</span> <span class="sy0">&amp;</span>amp<span class="sy0">;&amp;</span>amp<span class="sy0">;</span>
						modifiers.<span class="me1">meta</span>.<span class="me1">pressed</span> <span class="sy0">==</span> modifiers.<span class="me1">meta</span>.<span class="me1">wanted</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
				callback<span class="br0">&#40;</span>e<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
				<span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>opt<span class="br0">&#91;</span><span class="st0">'propagate'</span><span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> <span class="co1">//Stop the event</span>
					<span class="co1">//e.cancelBubble is supported by IE - this will kill the bubbling process.</span>
					e.<span class="me1">cancelBubble</span> <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
					e.<span class="me1">returnValue</span> <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
&nbsp;
					<span class="co1">//e.stopPropagation works in Firefox.</span>
					<span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">stopPropagation</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
						e.<span class="me1">stopPropagation</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
						e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
					<span class="br0">&#125;</span>
					<span class="kw1">return</span> <span class="kw2">false</span><span class="sy0">;</span>
				<span class="br0">&#125;</span>
			<span class="br0">&#125;</span>
		<span class="br0">&#125;</span>
		<span class="kw1">this</span>.<span class="me1">all_shortcuts</span><span class="br0">&#91;</span>shortcut_combination<span class="br0">&#93;</span> <span class="sy0">=</span> <span class="br0">&#123;</span>
			<span class="st0">'callback'</span><span class="sy0">:</span>func<span class="sy0">,</span>
			<span class="st0">'target'</span><span class="sy0">:</span>ele<span class="sy0">,</span>
			<span class="st0">'event'</span><span class="sy0">:</span> opt<span class="br0">&#91;</span><span class="st0">'type'</span><span class="br0">&#93;</span>
		<span class="br0">&#125;</span><span class="sy0">;</span>
		<span class="co1">//Attach the function with the event</span>
		<span class="kw1">if</span><span class="br0">&#40;</span>ele.<span class="me1">addEventListener</span><span class="br0">&#41;</span> ele.<span class="me1">addEventListener</span><span class="br0">&#40;</span>opt<span class="br0">&#91;</span><span class="st0">'type'</span><span class="br0">&#93;</span><span class="sy0">,</span> func<span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span>
		<span class="kw1">else</span> <span class="kw1">if</span><span class="br0">&#40;</span>ele.<span class="me1">attachEvent</span><span class="br0">&#41;</span> ele.<span class="me1">attachEvent</span><span class="br0">&#40;</span><span class="st0">'on'</span><span class="sy0">+</span>opt<span class="br0">&#91;</span><span class="st0">'type'</span><span class="br0">&#93;</span><span class="sy0">,</span> func<span class="br0">&#41;</span><span class="sy0">;</span>
		<span class="kw1">else</span> ele<span class="br0">&#91;</span><span class="st0">'on'</span><span class="sy0">+</span>opt<span class="br0">&#91;</span><span class="st0">'type'</span><span class="br0">&#93;</span><span class="br0">&#93;</span> <span class="sy0">=</span> func<span class="sy0">;</span>
	<span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
	<span class="co1">//Remove the shortcut - just specify the shortcut and I will remove the binding</span>
	<span class="st0">'remove'</span><span class="sy0">:</span><span class="kw2">function</span><span class="br0">&#40;</span>shortcut_combination<span class="br0">&#41;</span> <span class="br0">&#123;</span>
		shortcut_combination <span class="sy0">=</span> shortcut_combination.<span class="me1">toLowerCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
		<span class="kw2">var</span> binding <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">all_shortcuts</span><span class="br0">&#91;</span>shortcut_combination<span class="br0">&#93;</span><span class="sy0">;</span>
		<span class="kw1">delete</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">all_shortcuts</span><span class="br0">&#91;</span>shortcut_combination<span class="br0">&#93;</span><span class="br0">&#41;</span>
		<span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>binding<span class="br0">&#41;</span> <span class="kw1">return</span><span class="sy0">;</span>
		<span class="kw2">var</span> type <span class="sy0">=</span> binding<span class="br0">&#91;</span><span class="st0">'event'</span><span class="br0">&#93;</span><span class="sy0">;</span>
		<span class="kw2">var</span> ele <span class="sy0">=</span> binding<span class="br0">&#91;</span><span class="st0">'target'</span><span class="br0">&#93;</span><span class="sy0">;</span>
		<span class="kw2">var</span> callback <span class="sy0">=</span> binding<span class="br0">&#91;</span><span class="st0">'callback'</span><span class="br0">&#93;</span><span class="sy0">;</span>
&nbsp;
		<span class="kw1">if</span><span class="br0">&#40;</span>ele.<span class="me1">detachEvent</span><span class="br0">&#41;</span> ele.<span class="me1">detachEvent</span><span class="br0">&#40;</span><span class="st0">'on'</span><span class="sy0">+</span>type<span class="sy0">,</span> callback<span class="br0">&#41;</span><span class="sy0">;</span>
		<span class="kw1">else</span> <span class="kw1">if</span><span class="br0">&#40;</span>ele.<span class="me1">removeEventListener</span><span class="br0">&#41;</span> ele.<span class="me1">removeEventListener</span><span class="br0">&#40;</span>type<span class="sy0">,</span> callback<span class="sy0">,</span> <span class="kw2">false</span><span class="br0">&#41;</span><span class="sy0">;</span>
		<span class="kw1">else</span> ele<span class="br0">&#91;</span><span class="st0">'on'</span><span class="sy0">+</span>type<span class="br0">&#93;</span> <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span>
	<span class="br0">&#125;</span>
<span class="br0">&#125;</span>
&nbsp;
run<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">// outro</span></pre></div></div>

</div><!-- fim mwordstext -->]]></content:encoded>
			<wfw:commentRss>http://battisti.etc.br/2009/07/19/teclas-de-atalho-com-javascript/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Botão Direito do Mouse Javascript</title>
		<link>http://battisti.etc.br/2009/06/11/botao-direito-do-mouse-javascript/</link>
		<comments>http://battisti.etc.br/2009/06/11/botao-direito-do-mouse-javascript/#comments</comments>
		<pubDate>Thu, 11 Jun 2009 19:29:26 +0000</pubDate>
		<dc:creator>battisti</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://battisti.etc.br/?p=502</guid>
		<description><![CDATA[O Problema Executar uma determinada ação quando o botão direito do mouse é pressionado sobre um elemento HTML da página. A Solução function teste&#40;event&#41; &#123; if&#40;event.which == 1&#41;&#123; alert&#40;&#34;Esquerdo&#34;&#41;; &#125; &#160; if&#40;event.which == 2&#41;&#123; alert&#40;&#34;Meio&#34;&#41;; &#125; &#160; if&#40;event.which == 3&#41;&#123; alert&#40;&#34;Direito&#34;&#41;; &#125; &#125; &#60;input onmousedown=&#34;teste(event)&#34; type=&#34;button&#34; value=&#34;clique&#34; /&#62; Veja aqui a demonstração Conclusão Esse pequeno [...]]]></description>
			<content:encoded><![CDATA[<div class="mwordstext"><h1>O Problema</h1>
<p>Executar uma determinada ação quando o botão direito do mouse é pressionado sobre um elemento HTML da página.<span id="more-502"></span></p>
<h1>A Solução</h1>

<div class="wp_syntax"><div class="code"><pre class="javascript"><span class="kw2">function</span> teste<span class="br0">&#40;</span>event<span class="br0">&#41;</span>
<span class="br0">&#123;</span>
   <span class="kw1">if</span><span class="br0">&#40;</span>event.<span class="me1">which</span> <span class="sy0">==</span> <span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
       <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Esquerdo&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
   <span class="br0">&#125;</span>
&nbsp;
   <span class="kw1">if</span><span class="br0">&#40;</span>event.<span class="me1">which</span> <span class="sy0">==</span> <span class="nu0">2</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
       <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Meio&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
   <span class="br0">&#125;</span>
&nbsp;
   <span class="kw1">if</span><span class="br0">&#40;</span>event.<span class="me1">which</span> <span class="sy0">==</span> <span class="nu0">3</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
       <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Direito&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
   <span class="br0">&#125;</span>
<span class="br0">&#125;</span>
<span class="sy0">&lt;</span>input onmousedown<span class="sy0">=</span><span class="st0">&quot;teste(event)&quot;</span> type<span class="sy0">=</span><span class="st0">&quot;button&quot;</span> value<span class="sy0">=</span><span class="st0">&quot;clique&quot;</span> <span class="sy0">/&gt;</span></pre></div></div>

<p>Veja aqui a <a href="http://battisti.etc.br/scripts/botaodireito/botao.html" target="_self">demonstração</a></p>
<h1>Conclusão</h1>
<p>Esse pequeno exemplo só foi testado no Firefox, cada navegador possui um tratador de eventos específicos, se alguem conhecer uma biblioteca que abstraia estas coisas posta ai.</p>
<p>Para atalhos do teclado eu uso essa <a href="http://www.openjs.com/scripts/events/keyboard_shortcuts/">lib aqui</a>, muito boa e flexível.</p>
</div><!-- fim mwordstext -->]]></content:encoded>
			<wfw:commentRss>http://battisti.etc.br/2009/06/11/botao-direito-do-mouse-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

