<?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>Bufa Webmaster &#187; contador</title>
	<atom:link href="http://www.bufa.es/tag/contador/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bufa.es</link>
	<description>Recursos web en español</description>
	<lastBuildDate>Tue, 31 Jan 2012 23:47: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>
		<item>
		<title>jQuery: cuenta atrás 3,2,1</title>
		<link>http://www.bufa.es/jquery-cuenta-atras/</link>
		<comments>http://www.bufa.es/jquery-cuenta-atras/#comments</comments>
		<pubDate>Mon, 18 Oct 2010 21:55:10 +0000</pubDate>
		<dc:creator>Jorge Maiden</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[contador]]></category>

		<guid isPermaLink="false">http://www.bufa.es/?p=712</guid>
		<description><![CDATA[Cuenta atrás con jQuery creada por David Walsh hace ya un par de años y que os comparto aquí. Conseguiremos un efecto de película 3, 2, 1&#8230; acción!!! $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; &#160; &#160; $.fn.delay = function&#40;time,func&#41;&#123; &#160; &#160; &#160; &#160; return ...]]></description>
			<content:encoded><![CDATA[<p>Cuenta atrás con jQuery creada por <a href="http://davidwalsh.name">David Walsh</a> hace ya un par de años y que os comparto aquí.</p>
<p>Conseguiremos un efecto de película 3, 2, 1&#8230; acción!!!</p>
<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:300px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</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><br />
<br />
&nbsp; &nbsp; $.<span style="color: #660066;">fn</span>.<span style="color: #660066;">delay</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>time<span style="color: #339933;">,</span>func<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout<span style="color: #009900;">&#40;</span>func<span style="color: #339933;">,</span>time<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; $.<span style="color: #660066;">fn</span>.<span style="color: #660066;">cuentaAtras</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>settings<span style="color: #339933;">,</span>to<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; settings <span style="color: #339933;">=</span> $.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize1<span style="color: #339933;">:</span> <span style="color: #3366CC;">'36px'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize2<span style="color: #339933;">:</span> <span style="color: #3366CC;">'12px'</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duraccion<span style="color: #339933;">:</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; numero_incio<span style="color: #339933;">:</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; numero_final<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callBack<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: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> settings<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>to <span style="color: #339933;">&amp;&amp;</span> to <span style="color: #339933;">!=</span> settings.<span style="color: #660066;">numero_final</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> to <span style="color: #339933;">=</span> settings.<span style="color: #660066;">numero_incio</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span>to<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fontSize'</span><span style="color: #339933;">,</span>settings.<span style="color: #660066;">fontSize1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">'fontSize'</span><span style="color: #339933;">:</span> settings.<span style="color: #660066;">fontSize2</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>settings.<span style="color: #660066;">duraccion</span><span style="color: #339933;">,</span><span style="color: #3366CC;">''</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><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>to <span style="color: #339933;">&gt;</span> settings.<span style="color: #660066;">numero_final</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fontSize'</span><span style="color: #339933;">,</span>settings.<span style="color: #660066;">fontSize1</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span>to <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">cuentaAtras</span><span style="color: #009900;">&#40;</span>settings<span style="color: #339933;">,</span>to <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; settings.<span style="color: #660066;">callBack</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// Modo de uso:</span><br />
&nbsp; &nbsp; $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#cuentaAtras'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">cuentaAtras</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; numero_incio<span style="color: #339933;">:</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; callBack<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>me<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #009900;">&#40;</span>me<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Bien! Cuenta atrás finalizada'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <br />
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p>Para lograr este efecto hay en la red varios plugins con efectos también muy logrados.</p>
<p><a href="http://www.bufa.es/demos/cuenta-atras/" target="_blank" class="boton demo">DEMO</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.bufa.es/jquery-cuenta-atras/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Maxlength en textarea con jquery</title>
		<link>http://www.bufa.es/maxlength-textarea-jquery/</link>
		<comments>http://www.bufa.es/maxlength-textarea-jquery/#comments</comments>
		<pubDate>Tue, 09 Jun 2009 18:46:08 +0000</pubDate>
		<dc:creator>Jorge Maiden</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[contador]]></category>
		<category><![CDATA[textarea]]></category>

		<guid isPermaLink="false">http://www.bufa.es/?p=20</guid>
		<description><![CDATA[Este plugin jquery hace que sea fácil de aplicar un  &#8221;maxlength&#8221; personalizado a los elementos textarea, con un contador de caracteres que nos van indicando automaticamente cuantos caracteres nos faltan. DEMO Una alternativa sin plugins y más casera es el script jQuery ...]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-thumbnail wp-image-21" title="maxlength" src="http://www.bufa.es/wp-content/uploads/2009/06/maxlength-200x150.jpg" alt="" width="200" height="150" />Este plugin jquery hace que sea fácil de aplicar un  &#8221;maxlength&#8221; personalizado a los elementos <strong>textarea</strong>, con un <strong>contador de caracteres</strong> que nos van indicando automaticamente cuantos caracteres nos faltan.</p>
<p><a href="http://www.anon-design.se/demo/maxlength-jquery" class="botton demo">DEMO</a></p>
<p>Una alternativa sin plugins y más casera es el script jQuery para<a href="http://www.bufa.es/limitar-numero-caracteres-textarea/"> limitar el nº de caracteres de un textarea</a> con contador&#8230; que he creado el 27 de octubre.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bufa.es/maxlength-textarea-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

