<?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/"
		xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
	xmlns:media="http://search.yahoo.com/mrss/"
>

<channel>
	<title>RjCorrêa &#187; Javascript</title>
	<atom:link href="http://www.rjcorrea.com.br/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rjcorrea.com.br</link>
	<description>Diretor de Arte</description>
	<lastBuildDate>Wed, 28 Sep 2011 19:27:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<copyright>Copyright &#xA9; RjCorrêa 2010 </copyright>
	<managingEditor>rjcorrea@gmail.com (RjCorrêa)</managingEditor>
	<webMaster>rjcorrea@gmail.com (RjCorrêa)</webMaster>
	<image>
		<url>http://www.rjcorrea.com.br/wp-content/plugins/podpress/images/powered_by_podpress.jpg</url>
		<title>RjCorrêa</title>
		<link>http://www.rjcorrea.com.br</link>
		<width>144</width>
		<height>144</height>
	</image>
	<itunes:subtitle></itunes:subtitle>
	<itunes:summary>Diretor de Arte</itunes:summary>
	<itunes:keywords></itunes:keywords>
	<itunes:category text="Society &#38; Culture" />
	<itunes:author>RjCorrêa</itunes:author>
	<itunes:owner>
		<itunes:name>RjCorrêa</itunes:name>
		<itunes:email>rjcorrea@gmail.com</itunes:email>
	</itunes:owner>
	<itunes:block>no</itunes:block>
	<itunes:explicit>no</itunes:explicit>
	<itunes:image href="http://www.rjcorrea.com.br/wp-content/plugins/podpress/images/powered_by_podpress_large.jpg" />
		<item>
		<title>JQuery para Designers</title>
		<link>http://www.rjcorrea.com.br/jquery-para-designers/</link>
		<comments>http://www.rjcorrea.com.br/jquery-para-designers/#comments</comments>
		<pubDate>Wed, 04 Jun 2008 10:51:55 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=97</guid>
		<description><![CDATA[Essa vem lá do WebDesignerWall, aliás, tenho que tirar o chapéu para eles, site lindo e ótimo conteúdo. São 10 exemplos práticos de JQuery destinados à designers, e como eles mesmo dizem, e novatos. Para quem não sabe JQuery é uma biblioteca de JavaScript que tem o intuito de facilitar a vida do desenvolvedor, parafraseado [...]]]></description>
			<content:encoded><![CDATA[<p>Essa vem lá do <strong><a href="http://www.webdesignerwall.com" target="_blank">WebDesignerWall</a></strong>, aliás, tenho que tirar o chapéu para eles, site lindo e ótimo conteúdo.</p>
<p>São 10 exemplos práticos de JQuery destinados à designers, e como eles mesmo dizem, e novatos.</p>
<p>Para quem não sabe JQuery é uma biblioteca de JavaScript que tem o intuito de facilitar a vida do desenvolvedor, parafraseado o WebDesignerWall, é um <em>&#8220;escrever menos, fazer mais&#8221;</em>.</p>
<p>Você pode ler o <strong><a href="http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/" target="_blank">artigo</a></strong>, ver a <a href="http://www.webdesignerwall.com/demo/jquery/" target="_blank"><strong>página de demonstração</strong></a> ou <a href="http://www.webdesignerwall.com/file/jquery-tutorials.zip" target="_self"><strong>baixar o arquivo</strong></a> com tudo dentro.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/jquery-para-designers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JIT &#8211; JavaScript Information Visualization Toolkit (Ferramentas de visualização de informação)</title>
		<link>http://www.rjcorrea.com.br/jit-javascript-information-visualization-toolkit-ferramentas-de-visualizacao-de-informacao/</link>
		<comments>http://www.rjcorrea.com.br/jit-javascript-information-visualization-toolkit-ferramentas-de-visualizacao-de-informacao/#comments</comments>
		<pubDate>Sat, 24 May 2008 13:22:02 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=82</guid>
		<description><![CDATA[Ao ver o JIT (JavaScript Information Visualization Toolkit) pela primeira vez, uma palavra escapou da minha boca: UAU! Quando você colocar seus olhos na qualidade e na maneira como os dados são apresentados, vai entender a exclamação. Esse javascript é um kit avançado de ferramentas de visualização de informação apresentado em 4 formatos diferentes: RGraph [...]]]></description>
			<content:encoded><![CDATA[<p>Ao ver o <a title="JavaScript Information Visualization Toolkit" href="http://blog.thejit.org/javascript-information-visualization-toolkit-jit/" target="_blank"><strong>JIT</strong></a> (<strong>JavaScript Information Visualization Toolkit</strong>) pela primeira vez, uma palavra escapou da minha boca: <strong>UAU!</strong></p>
<p>Quando você colocar seus olhos na qualidade e na maneira como os dados são apresentados, vai entender a exclamação. Esse javascript é um <strong>kit avançado de ferramentas de visualização de informação</strong> apresentado em 4 formatos diferentes:<span id="more-82"></span></p>
<ul>
<li><a title="RGraph" href="http://blog.thejit.org/wp-content/jit-1.0a/examples/rgraph.html" target="_blank"><strong>RGraph</strong></a> &#8211; um gráfico radial que, partindo do &#8220;centro pai&#8221;, leva às &#8220;informações filhas&#8221;;</li>
<li><a title="Treemaps " href="http://blog.thejit.org/wp-content/jit-1.0a/examples/treemap.html" target="_blank"><strong>Treemaps</strong></a> &#8211; uma visualização adequada para quando você precisa passar muita informação em um curto espaço &#8211; mais ou menos o que os portais fazem para estruturar o seu conteúdo;</li>
<li><a title="Hyperbolic Trees" href="http://http://blog.thejit.org/wp-content/jit-1.0a/examples/hypertree.html" target="_blank"><strong>Hyperbolic Trees</strong></a> &#8211; uma forma de desdobrar informações conforme as idéias anteriores, minuciosa e exagerada &#8211; parece um mapa mental (depois faço um texto só para isso, vale a pena);</li>
<li><a title="Spacetree" href="http://blog.thejit.org/wp-content/jit-1.0a/examples/spacetree.html" target="_blank"><strong>ST</strong></a> (Spacetree) aqui o negócio é apresentar as informações amarradas infinitamente.</li>
</ul>
<p><strong>Entendeu? Nem eu! rs </strong>- só vendo na prática mesmo. <img src='http://www.rjcorrea.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> <strong><br />
</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/jit-javascript-information-visualization-toolkit-ferramentas-de-visualizacao-de-informacao/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Super Mario Kart: mate a saudade desse jogo pela internet</title>
		<link>http://www.rjcorrea.com.br/super-mario-kart-mate-a-saudade-desse-jogo-pela-internet/</link>
		<comments>http://www.rjcorrea.com.br/super-mario-kart-mate-a-saudade-desse-jogo-pela-internet/#comments</comments>
		<pubDate>Fri, 23 May 2008 13:24:33 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[Divertido]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=84</guid>
		<description><![CDATA[Se você não consegue desgrudar dos consoles de vídeo game e não vê a hora de voltar para casa quando está na escola ou no trabalho, só para poder jogar mais um pouquinho, a sua vez chegou! Super Mário Kart, o grande sucesso da Nintendo, ganhou uma versão online em javascript. Você pode curtir esse [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.rjcorrea.com.br/images/super-mario-kart.jpg" alt="" /></p>
<p>Se você não consegue desgrudar dos consoles de vídeo game e não vê a hora de voltar para casa quando está na escola ou no trabalho, só para poder jogar mais um pouquinho, a sua vez chegou!</p>
<p><a title="Super Mário Kart" href="http://blog.nihilogic.dk/2008/05/javascript-super-mario-kart.html" target="_blank"><strong>Super Mário Kart</strong></a>, o grande sucesso da Nintendo, ganhou uma versão online em javascript.</p>
<p>Você pode curtir esse jogo bacanão e matar a saudade sem precisar de mais nada além da internet.</p>
<p>Aprovado! <img src='http://www.rjcorrea.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/super-mario-kart-mate-a-saudade-desse-jogo-pela-internet/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>O Webmonkey voltou</title>
		<link>http://www.rjcorrea.com.br/o-webmonkey-voltou/</link>
		<comments>http://www.rjcorrea.com.br/o-webmonkey-voltou/#comments</comments>
		<pubDate>Tue, 20 May 2008 16:58:31 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Drops]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Utilitário]]></category>
		<category><![CDATA[Webmonkey]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=81</guid>
		<description><![CDATA[Depois de muito tempo fora do ar, o Webmonkey voltou. Quem é macaco velho (ops) na web, conhece bem esse excelente site de recursos Javascript, CSS, HTML e APis que, apesar de ainda conter pouquíssimos códigos (afinal de contas, as coisas mudaram bastante desde que saiu do ar), vai certamente se tornar um grande sucesso [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone" src="http://www.rjcorrea.com.br/images/o-webmonkey-voltou.jpg" alt="O Webmonkey voltou" /></p>
<p>Depois de muito tempo fora do ar, o <strong><a title="Webmonkey" href="http://www.webmonkey.com/" target="_blank">Webmonkey</a></strong> voltou.</p>
<p>Quem é macaco velho (ops) na web, conhece bem esse excelente site de recursos Javascript, CSS, HTML e APis que, apesar de ainda conter pouquíssimos códigos (afinal de contas, as coisas mudaram bastante desde que saiu do ar), vai certamente se tornar um grande sucesso &#8211; ainda mais se depender da boa reputação que ostenta entre os veteranos.</p>
<p>Além de tudo isso, o site está lindão.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/o-webmonkey-voltou/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Microformat: Hide / Show objects – div, ul etc.</title>
		<link>http://www.rjcorrea.com.br/microformat-hide-show-objects-div-ul-etc/</link>
		<comments>http://www.rjcorrea.com.br/microformat-hide-show-objects-div-ul-etc/#comments</comments>
		<pubDate>Mon, 12 May 2008 12:37:41 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Div]]></category>
		<category><![CDATA[Hide]]></category>
		<category><![CDATA[Microformat]]></category>
		<category><![CDATA[Microformato]]></category>
		<category><![CDATA[Show]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=66</guid>
		<description><![CDATA[Meu amigo Fábio Arantes desenvolveu um microformato muito interessante: o HideShow. Basta você inserir o arquivo hideshow.js em seu HTML e quando quiser fazer o sempre útil hide/show em um objeto (div, ul etc.), basta colocar um id no objeto e no link acrescentar rel=&#8221;hideShow&#124;nomeId&#8221;. Fácil, fácil. hideshow.js ////////////////////////////////////////////////////////////////////////// /////////////////////////Hide Show Microformat...///////////////////////// ///////////////////Created by Fábio [...]]]></description>
			<content:encoded><![CDATA[<p>Meu amigo <strong><a title="Site Fábio Arantes" href="http://www.fabioarantes.com" target="_blank">Fábio Arantes</a></strong> desenvolveu um microformato muito  interessante: o <strong>HideShow</strong>.</p>
<p>Basta você inserir o arquivo <strong>hideshow.js</strong> em seu HTML e quando quiser  fazer o sempre útil hide/show em um objeto (div, ul etc.), basta colocar um id no  objeto e no link acrescentar  <strong>rel=&#8221;hideShow|nomeId&#8221;</strong>.</p>
<p><strong>Fácil, fácil. <img src='http://www.rjcorrea.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </strong></p>
<p><strong>hideshow.js</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
<span style="color: #006600; font-style: italic;">/////////////////////////Hide Show Microformat.../////////////////////////</span>
<span style="color: #006600; font-style: italic;">///////////////////Created by Fábio Arantes dos Santos////////////////////</span>
<span style="color: #006600; font-style: italic;">////////////////////////http://www.fabioarantes.com///////////////////////</span>
<span style="color: #006600; font-style: italic;">////////////////Tested in Firefox and IE6 Works Perfectly/////////////////</span>
<span style="color: #006600; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
<span style="color: #006600; font-style: italic;">/////////////////////////////////EXAMPLE://///////////////////////////////</span>
<span style="color: #006600; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
<span style="color: #006600; font-style: italic;">/*
&lt;script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot; src=&quot;hideshow.js&quot;&gt;
&lt;/script&gt;
&nbsp;
&lt;h3&gt;&lt;a href=&quot;#&quot; rel=&quot;hideShow|DivIdName&quot;&gt;Div Title&lt;/a&gt;&lt;/h3&gt;
&lt;div id=&quot;DivIdName&quot;&gt;
Div Content
&lt;/div&gt;
&nbsp;
&lt;h3&gt;&lt;a href=&quot;#&quot; rel=&quot;hideShow|UlIdName&quot;&gt;Ul Title&lt;/a&gt;&lt;/h3&gt;
&lt;ul id=&quot;UlIdName&quot;&gt;
	&lt;li&gt;List Content 01&lt;/li&gt;
	&lt;li&gt;List Content 02&lt;/li&gt;
	&lt;li&gt;List Content 03&lt;/li&gt;
&lt;/ul&gt;
*/</span>
<span style="color: #006600; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
<span style="color: #006600; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
&nbsp;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> hideShow <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Object<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> listElement <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> active <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
hideShow.<span style="color: #660066;">show</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>active <span style="color: #339933;">==</span> arguments<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>arguments<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #339933;">;</span>
		active <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		hideShow.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>arguments.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>arguments<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;block&quot;</span><span style="color: #339933;">;</span>
			active <span style="color: #339933;">=</span> arguments<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
hideShow.<span style="color: #660066;">hide</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>listElement.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>listElement<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
hideShow.<span style="color: #660066;">initialize</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> links <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>links.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> str <span style="color: #339933;">=</span> links<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">rel</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'|'</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;hideShow&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			listElement.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			links<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;javascript: hideShow.show('&quot;</span><span style="color: #339933;">+</span>str<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;');&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	hideShow.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> StartApplets<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	hideShow.<span style="color: #660066;">initialize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>navigator.<span style="color: #660066;">appName</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;Microsoft Internet Explorer&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	document.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;DOMContentLoaded&quot;</span><span style="color: #339933;">,</span> StartApplets<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
	setTimeout<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;hideShow.initialize()&quot;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/microformat-hide-show-objects-div-ul-etc/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Capturar variável via método Get URL com Javascript</title>
		<link>http://www.rjcorrea.com.br/capturar-variavel-via-metodo-get-url-com-javascript/</link>
		<comments>http://www.rjcorrea.com.br/capturar-variavel-via-metodo-get-url-com-javascript/#comments</comments>
		<pubDate>Wed, 09 Apr 2008 17:46:47 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[Drops]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Get URL]]></category>
		<category><![CDATA[Programação]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=44</guid>
		<description><![CDATA[Esse script é uma ótima opção para quem precisa pegar as variáveis pelo método get, mas não tem como usar programação de servidor, tipo PHP. get-url-variables.js function getUrlVars&#40;&#41; &#123; var vars = &#91;&#93;, hash; var hashes = window.location.href.slice&#40;window.location.href.indexOf&#40;'?'&#41; + 1&#41;.split&#40;'&#38;'&#41;; &#160; for&#40;var i = 0; i &#60; hashes.length; i++&#41; &#123; hash = hashes&#91;i&#93;.split&#40;'='&#41;; hash&#91;1&#93; = [...]]]></description>
			<content:encoded><![CDATA[<p>Esse script é uma ótima opção para quem precisa pegar as variáveis pelo método get, mas não tem como usar programação de servidor, tipo PHP.</p>
<p><strong>get-url-variables.js</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> getUrlVars<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> vars <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> hash<span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> hashes <span style="color: #339933;">=</span> window.<span style="color: #660066;">location</span>.<span style="color: #660066;">href</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">location</span>.<span style="color: #660066;">href</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'?'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&amp;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> hashes.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        hash <span style="color: #339933;">=</span> hashes<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'='</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		hash<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> unescape<span style="color: #009900;">&#40;</span>hash<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		vars.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>hash<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        vars<span style="color: #009900;">&#91;</span>hash<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> hash<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">return</span> vars<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//Exemplo de URL get-url-variables.htm?variavel1=Primeira variavel&amp;variavel2=Segunda variavel</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> pedaco <span style="color: #339933;">=</span> getUrlVars<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>pedaco<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'variavel1'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Caixa de alerta resultara &quot;Primeira variavel&quot;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>pedaco<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'variavel2'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Caixa de alerta resultara &quot;Segunda variavel&quot;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/capturar-variavel-via-metodo-get-url-com-javascript/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Se inveja matasse, eu morreria num instant.js</title>
		<link>http://www.rjcorrea.com.br/se-inveja-matasse-eu-morreria-num-instantjs/</link>
		<comments>http://www.rjcorrea.com.br/se-inveja-matasse-eu-morreria-num-instantjs/#comments</comments>
		<pubDate>Fri, 22 Jun 2007 01:49:50 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=40</guid>
		<description><![CDATA[Alguns scripts são tão impressionantes que nos deixam morrendo de inveja de não ser o pai da criança. Esse é o caso do microformato instant.js, script que dá um efeito de Polaroid nas fotos (com sombra, reflexo e tudo que se tem direito). Para fazer uso deste achado, basta colocar a classe “instant” na foto [...]]]></description>
			<content:encoded><![CDATA[<p>Alguns scripts são tão impressionantes que nos deixam morrendo de inveja de  não ser o pai da criança.</p>
<p>Esse é o caso do microformato <em>instant.js</em>, script que dá um efeito de  Polaroid nas fotos (com sombra, reflexo e tudo que se tem direito).</p>
<p>Para fazer uso deste achado, basta colocar a classe “instant” na foto e <em>voilà</em>:</p>
<p style="text-align: center"><img src="http://www.rjcorrea.com.br/images/instant-fake.jpg" alt="" /></p>
<p><span id="more-40"></span> Simples e devastador.</p>
<p>No <a href="http://www.netzgesta.de/instant/" target="_blank">link oficial</a> você pode aprender a utilizar esse simples microformato. Mas aqui você recebe a receita de bandeja. Anote:</p>
<h3>Instalação:</h3>
<p>Faça o download do arquivo <a href="http://www.netzgesta.de/instant/instant.zip" target="_blank">instant.js</a> e inclua  dentro do seu site.</p>
<h3>Usando:</h3>
<p>Coloque na imagem a ser  usada a classe &#8220;instant&#8221;, de dimensões mínimas de <em>64&#215;64</em></p>
<h3>Classes:</h3>
<p><strong>O princípio:</strong> inicialize a  classe &#8220;instant&#8221;.</p>
<p><strong>A sombra:</strong> você pode variar  a opacidade da sombra controlando a classe &#8220;ishadow&#8221; &#8211; mínimo=0, máximo=100  e padrão=33.</p>
<p><strong>A borda:</strong> pode-se variar a  cor da borda alterando a classe &#8220;icolor&#8221; &#8211; mínimo=000000, máximo=ffffff  e padrão=f0f4ff.</p>
<p><strong>A inclinação:</strong> para alterar  a direção da inclinação basta escolher entre as seguintes opções, &#8220;itiltleft&#8221;,  &#8220;itiltnone&#8221; ou &#8220;itiltright&#8221;.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/se-inveja-matasse-eu-morreria-num-instantjs/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Popup para abrir imagem? Lightbox.</title>
		<link>http://www.rjcorrea.com.br/popup-para-abrir-imagem-lightbox/</link>
		<comments>http://www.rjcorrea.com.br/popup-para-abrir-imagem-lightbox/#comments</comments>
		<pubDate>Fri, 08 Jun 2007 18:53:41 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Drops]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Lightbox]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=38</guid>
		<description><![CDATA[Existe um microformato excelente para abrir imagens com um efeito tipo popup, mas todo em div, javascript, css e efeitos especiais. Sabe o que isso quer dizer? Chega de anti-popup quebrando o seu barato. Seu nome: Lightbox. Está na versão 2.0, não é obstrutivo e é lindo de se ver. Ah, se quiser ver um [...]]]></description>
			<content:encoded><![CDATA[<p>Existe um microformato excelente para abrir imagens com um efeito tipo popup, mas todo em div, javascript, css e efeitos especiais.</p>
<p>Sabe o que isso quer dizer? Chega de anti-popup quebrando o seu barato.</p>
<p>Seu nome:  <a href="http://www.huddletogether.com/projects/lightbox2/" target="_blank">Lightbox</a>. Está na versão 2.0, não é obstrutivo e é lindo de se ver.</p>
<p>Ah, se quiser ver um modelo que uso aqui mesmo neste blog, <a href="http://www.rjcorrea.com.br/a-trip-deu-antes/">clique aqui</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/popup-para-abrir-imagem-lightbox/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Simplesmente XOXO</title>
		<link>http://www.rjcorrea.com.br/simplismente-xoxo/</link>
		<comments>http://www.rjcorrea.com.br/simplismente-xoxo/#comments</comments>
		<pubDate>Wed, 28 Feb 2007 19:28:07 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Microformat]]></category>
		<category><![CDATA[Microformato]]></category>
		<category><![CDATA[Xoxo]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=31</guid>
		<description><![CDATA[Se você: não sabe o que é eXtensible Open XHTML Outlines; acha que microformato é uma nova sensação de biquínis das praias cariocas; nem mesmo faz idéia do que seja um javascript não obstrutivo, mas quer usar esse tal de XOXO. Você está no lugar certo! Neste artigo vou disponibilizar os arquivos necessários para começar [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Se você:</strong></p>
<ul>
<li>não sabe o que é <a title="XOXO" href="http://microformats.org/wiki/xoxo" target="_blank">e<span style="text-decoration: overline"><strong>X</strong>tensible </span><span style="text-decoration: underline;"><strong>O</strong>pen </span><span style="text-decoration: overline"><strong>X</strong>HTML </span><strong>O</strong>utlines</a>;</li>
<li>acha que <a title="Microformats" href="http://www.microformats.org/" target="_blank">microformato</a> é uma nova sensação de biquínis das praias cariocas;</li>
<li>nem  mesmo faz idéia do que seja um <a title="javascript não obstrutivo" href="http://www.imasters.com.br/artigo/4298/javascript/tudo_sobre_javascript_nao-obstrutivo_-_parte_01/" target="_blank">javascript não obstrutivo</a>, mas quer usar esse  tal de XOXO.</li>
</ul>
<p>Você está no lugar certo!</p>
<p>Neste artigo vou disponibilizar os  arquivos necessários para começar a usar, sem precisar entender muito bem, o misterioso XOXO.<span id="more-32"></span></p>
<p><strong>xoxo.js</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// JavaScript Document</span>
<span style="color: #006600; font-style: italic;">/*
Welcome to the CHOT:
Chris Holland Outline Toolbox
This is a work in progress
&nbsp;
For more info:
frenchy@gmail.com
http://chrisholland.blogspot.com/
&nbsp;
Copyright Chris Holland 2004-2005
Some rights reserved under a Creative Commons License:
Share-alike, with Attribution, do whatever you want with it beyond that :)
http://www.creativecommons.org/
&nbsp;
====================================================================================
Modified script in accordance with to validate the standards of the W3C (Strict 1.0)
Flavio Theruo Kaminisse
http://www.japs.etc.br
http://creativecommons.org/licenses/by-nc-sa/2.0/br/deed.en
http://creativecommons.org/licenses/by-nc-sa/2.0/br/
&nbsp;
*/</span>
&nbsp;
<span style="color: #009966; font-style: italic;">/* start basic stuff */</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> isWithinNode<span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span>i<span style="color: #339933;">,</span>c<span style="color: #339933;">,</span>t<span style="color: #339933;">,</span>obj<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
answer <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
te <span style="color: #339933;">=</span> e<span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>te <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #339933;">!</span>answer <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span>	<span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span>te.<span style="color: #660066;">id</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>te.<span style="color: #660066;">id</span> <span style="color: #339933;">==</span> i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>te.<span style="color: #660066;">className</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>te.<span style="color: #660066;">className</span> <span style="color: #339933;">==</span> i<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;Class&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>t <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> c <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> te.<span style="color: #660066;">className</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>te.<span style="color: #660066;">className</span> <span style="color: #339933;">==</span> c<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>t <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> c <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> te.<span style="color: #660066;">className</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>te.<span style="color: #660066;">className</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#41;</span> <span style="color: #339933;">!=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>t <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> te.<span style="color: #660066;">tagName</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>te.<span style="color: #660066;">tagName</span>.<span style="color: #660066;">toLowerCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> t<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>obj <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>te <span style="color: #339933;">==</span> obj<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
answer <span style="color: #339933;">=</span> te<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
te <span style="color: #339933;">=</span> te.<span style="color: #660066;">parentNode</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">return</span> te<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//isWithinNode</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> getEvent<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>event <span style="color: #339933;">?</span> event <span style="color: #339933;">:</span> window.<span style="color: #660066;">event</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//getEvent()</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> getEventElement<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">srcElement</span> <span style="color: #339933;">?</span> e.<span style="color: #660066;">srcElement</span><span style="color: #339933;">:</span> <span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">target</span> <span style="color: #339933;">?</span> e.<span style="color: #660066;">target</span> <span style="color: #339933;">:</span> e.<span style="color: #660066;">currentTarget</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//getEventElement()</span>
&nbsp;
<span style="color: #009966; font-style: italic;">/* end basic stuff */</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> handleClick<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
e <span style="color: #339933;">=</span> getEvent<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
eL <span style="color: #339933;">=</span> getEventElement<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> listItem <span style="color: #339933;">=</span> isWithinNode<span style="color: #009900;">&#40;</span>eL<span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;li&quot;</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
processListItem<span style="color: #009900;">&#40;</span>listItem<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//if we clicked on a list item</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//handleClick</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> processListItem<span style="color: #009900;">&#40;</span>liObj<span style="color: #339933;">,</span>isInitMode<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
childList <span style="color: #339933;">=</span> liObj.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ol&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>childList <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>childList.<span style="color: #660066;">length</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
childList <span style="color: #339933;">=</span> liObj.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;ul&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> childList <span style="color: #009900;">&#41;</span>
childList <span style="color: #339933;">=</span> childList<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> childList<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
currentDisplay <span style="color: #339933;">=</span> childList.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>currentDisplay <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>currentDisplay <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;block&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> isInitMode <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span>childList.<span style="color: #660066;">className</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;compact&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span>
showAsExpanded<span style="color: #009900;">&#40;</span>liObj<span style="color: #339933;">,</span>childList<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">else</span>
showAsCompact<span style="color: #009900;">&#40;</span>liObj<span style="color: #339933;">,</span>childList<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> isInitMode <span style="color: #009900;">&#41;</span>
showAsCompact<span style="color: #009900;">&#40;</span>liObj<span style="color: #339933;">,</span>childList<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">else</span>
showAsExpanded<span style="color: #009900;">&#40;</span>liObj<span style="color: #339933;">,</span>childList<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//processListItem</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> showAsCompact<span style="color: #009900;">&#40;</span>liObj<span style="color: #339933;">,</span> childList<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
childList.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;none&quot;</span>
childList.<span style="color: #660066;">setAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;class&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;compact&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//liObj.firstChild.className = &quot;chot_compactHeader&quot;;</span>
setClass<span style="color: #009900;">&#40;</span>liObj.<span style="color: #660066;">firstChild</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;chot_compactHeader&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
liObj.<span style="color: #660066;">className</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;chot_compact&quot;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//setClass(liObj,&quot;chot_compact&quot;);</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//showAsCompact</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> showAsExpanded<span style="color: #009900;">&#40;</span>liObj<span style="color: #339933;">,</span> childList<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
childList.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;block&quot;</span><span style="color: #339933;">;</span>
childList.<span style="color: #660066;">removeAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;class&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//liObj.firstChild.className = &quot;chot_expandedHeader&quot;;</span>
setClass<span style="color: #009900;">&#40;</span>liObj.<span style="color: #660066;">firstChild</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;chot_expandedHeader&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
liObj.<span style="color: #660066;">className</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;chot_expanded&quot;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//setClass(liObj,&quot;chot_expanded&quot;);</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//showAsExpanded</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> setClass<span style="color: #009900;">&#40;</span>o<span style="color: #339933;">,</span>v<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
c <span style="color: #339933;">=</span> o.<span style="color: #660066;">className</span><span style="color: #339933;">;</span>
&nbsp;
bc <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> j<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
c <span style="color: #339933;">=</span> c.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> c<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> c<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;chot_&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
bc<span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> c<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
j<span style="color: #339933;">++;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
bc <span style="color: #339933;">=</span> bc.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
o.<span style="color: #660066;">className</span> <span style="color: #339933;">=</span> bc <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot; &quot;</span> <span style="color: #339933;">+</span> v<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//class set on element</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//setClass</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> initOutlines<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
listItems <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;li&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> listItems<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
processListItem<span style="color: #009900;">&#40;</span>listItems<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">//initOutlines</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> document.<span style="color: #660066;">addEventListener</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
document.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;mouseup&quot;</span><span style="color: #339933;">,</span> handleClick<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
window.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;load&quot;</span><span style="color: #339933;">,</span> initOutlines<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
document.<span style="color: #660066;">onmouseup</span> <span style="color: #339933;">=</span> handleClick<span style="color: #339933;">;</span>
window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> initOutlines<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p><strong>index.htm</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script src=&quot;xoxo.js&quot;&gt;&lt;!--mce:0--&gt;&lt;/script&gt;
&lt;ul class=&quot;xoxo&quot;&gt;
	&lt;li class=&quot;chot_compact&quot;&gt;MENU
&lt;ul class=&quot;compact&quot;&gt;
	&lt;li&gt;Link 01&lt;/li&gt;
	&lt;li&gt;Link 02&lt;/li&gt;
	&lt;li&gt;Link 03&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/simplismente-xoxo/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Desabilita o(s) botão(ões) submit após o envio de formulário com Javascript</title>
		<link>http://www.rjcorrea.com.br/desabilita-os-botoes-submit-aos-envio-do-formulario-com-javascript/</link>
		<comments>http://www.rjcorrea.com.br/desabilita-os-botoes-submit-aos-envio-do-formulario-com-javascript/#comments</comments>
		<pubDate>Mon, 11 Dec 2006 17:48:48 +0000</pubDate>
		<dc:creator>Ricardo José Corrêa</dc:creator>
				<category><![CDATA[Drops]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Formulário]]></category>

		<guid isPermaLink="false">http://www.rjcorrea.com.br/?p=16</guid>
		<description><![CDATA[Quem nunca teve o problema de receber vários e-mail de um formulário web por que alguem ficou clicando, desesperadamente, no botão enviar. Fora que o servidor trabalhar de forma desnecessária. O javascript deste artigo tem a função de desabilitar todos os botões tipo submit. Basta colocar o .js na página. É muito simples de usar. [...]]]></description>
			<content:encoded><![CDATA[<p>Quem nunca teve o problema de receber vários e-mail de um formulário web por que alguem ficou clicando, desesperadamente, no botão enviar. Fora que o servidor trabalhar de forma desnecessária. O javascript deste artigo tem a função de desabilitar todos os botões tipo submit. Basta colocar o .js na página. É muito simples de usar.</p>
<p><strong>disable_after_submit.js</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">////////////////////////////////////////////////////////////////</span>
<span style="color: #006600; font-style: italic;">//////////////////////////// RjCorrêa //////////////////////////</span>
<span style="color: #006600; font-style: italic;">/////Desabilita os botões submit após o envio de formulário/////</span>
<span style="color: #006600; font-style: italic;">///////////////////////www.rjcorrea.com.br//////////////////////</span>
<span style="color: #006600; font-style: italic;">////////////////////////////////////////////////////////////////</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> disableAfterSubmit<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
inputs <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> inputs.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>inputs<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">getAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'type'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'submit'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
inputs<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">onclick</span> <span style="color: #339933;">=</span> disableSubmit<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> disableSubmit<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
inputs <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'input'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> inputs.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>inputs<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">getAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'type'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'submit'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
inputs<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">disabled</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> disableAfterSubmit<span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.rjcorrea.com.br/desabilita-os-botoes-submit-aos-envio-do-formulario-com-javascript/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

