<?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>Sentido Web &#187; scroll</title>
	<atom:link href="http://sentidoweb.com/tag/scroll/feed" rel="self" type="application/rss+xml" />
	<link>http://sentidoweb.com</link>
	<description>Desarrollo web, HTML, CSS, Javascript, PHP, MySQL</description>
	<lastBuildDate>Mon, 16 Jan 2012 10:16:20 +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>Cargar contenido con el scroll mediante jQuery</title>
		<link>http://sentidoweb.com/2009/07/22/cargar-contenido-con-el-scroll-mediante-jquery.php</link>
		<comments>http://sentidoweb.com/2009/07/22/cargar-contenido-con-el-scroll-mediante-jquery.php#comments</comments>
		<pubDate>Thu, 23 Jul 2009 02:15:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[scroll]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/07/22/cargar-contenido-con-el-scroll-mediante-jquery.php</guid>
		<description><![CDATA[Interesante script que carga el contenido en una capa según se va utilizando el scroll y se va llegando al final, algo similar a lo que ocurre en Google Reader. El autor nos explica paso a paso, incluida la parte PHP, cómo realizar esta funcionalidad. Load Data while Scrolling Page Down with jQuery and PHP [...]]]></description>
			<content:encoded><![CDATA[Interesante script que carga el contenido en una capa según se va utilizando el scroll y se va llegando al final, algo similar a lo que ocurre en Google Reader.
El autor nos explica paso a paso, incluida la parte PHP, cómo realizar esta funcionalidad.
<a href="http://9lessons.blogspot.com/2009/07/load-data-while-scroll-with-jquery-php.html">Load Data while Scrolling Page Down with jQuery and PHP</a>
Vía / <a href="http://www.dzone.com/links/rss/load_data_while_scrolling_page_down_with_jquery_a.html">DZone</a>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/07/22/cargar-contenido-con-el-scroll-mediante-jquery.php/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Laboratorio: evitar el scroll en los textarea con jQuery</title>
		<link>http://sentidoweb.com/2009/07/20/laboratorio-evitar-el-scroll-en-los-textarea-con-jquery.php</link>
		<comments>http://sentidoweb.com/2009/07/20/laboratorio-evitar-el-scroll-en-los-textarea-con-jquery.php#comments</comments>
		<pubDate>Mon, 20 Jul 2009 21:15:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[scroll]]></category>
		<category><![CDATA[textarea]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/07/20/laboratorio-evitar-el-scroll-en-los-textarea-con-jquery.php</guid>
		<description><![CDATA[Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical. En plan rapidito he hecho un script jQuery que realizaría esta función: $&#40;document&#41;.ready&#40;function &#40;&#41; &#123; $&#40;'textarea'&#41;.keypress&#40;function&#40;&#41; &#123; var ta = [...]]]></description>
			<content:encoded><![CDATA[<p>Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.</p>
<p>En plan rapidito he hecho un script jQuery que realizaría esta función:</p>
<pre><code><pre class="javascript">$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'textarea'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">keypress</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> ta = $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> fontSize = ta.<span style="color: #006600;">css</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'font-size'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">replace</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'px'</span>, <span style="color: #3366CC;">''</span><span style="color: #66cc66;">&#41;</span>*<span style="color: #CC0000;">1</span>.<span style="color: #CC0000;">3</span>; <span style="color: #009900; font-style: italic;">// Le a&Atilde;&plusmn;ado un ratio para que sea m&Atilde;&iexcl;s eficiente</span>
<span style="color: #003366; font-weight: bold;">var</span> taWidth = ta.<span style="color: #006600;">width</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> taHeight = ta.<span style="color: #006600;">height</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> content = ta.<span style="color: #006600;">attr</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">split</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\n</span>'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> lines = content.<span style="color: #006600;">length</span>;
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i=<span style="color: #CC0000;">0</span>; i&amp;lt;content.<span style="color: #006600;">length</span>; i++<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>content<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">length</span> * fontSize &amp;gt; taWidth<span style="color: #66cc66;">&#41;</span> lines += parseInt<span style="color: #66cc66;">&#40;</span>content<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">length</span> * fontSize / taWidth<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> ratioHeight = taHeight / fontSize;
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>lines * fontSize &amp;gt; taHeight<span style="color: #66cc66;">&#41;</span> ta.<span style="color: #006600;">height</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>lines * fontSize<span style="color: #66cc66;">&#41;</span>+<span style="color: #CC0000;">150</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #009900; font-style: italic;">// Le sumo 150 para darle un margen y que no se agrande constantemente</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</pre></code></pre>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/07/20/laboratorio-evitar-el-scroll-en-los-textarea-con-jquery.php/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Sincronicar scrolls entre capas con jQuery</title>
		<link>http://sentidoweb.com/2009/03/25/sincronicar-scrolls-entre-capas-con-jquery.php</link>
		<comments>http://sentidoweb.com/2009/03/25/sincronicar-scrolls-entre-capas-con-jquery.php#comments</comments>
		<pubDate>Thu, 26 Mar 2009 02:00:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[scroll]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/03/25/sincronicar-scrolls-entre-capas-con-jquery.php</guid>
		<description><![CDATA[Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan jQuery.fn.synchronizeScroll = function&#40;&#41; &#123; var elements = this; if &#40;elements.length &#60;= 1&#41; return; elements.scroll&#40; function&#40;&#41; &#123; var left = $&#40;this&#41;.scrollLeft&#40;&#41;; var top = $&#40;this&#41;.scrollTop&#40;&#41;; elements.each&#40; function&#40;&#41; &#123; if &#40;$&#40;this&#41;.scrollLeft&#40;&#41; != left&#41; $&#40;this&#41;.scrollLeft&#40;left&#41;; if &#40;$&#40;this&#41;.scrollTop&#40;&#41; != top&#41; [...]]]></description>
			<content:encoded><![CDATA[<p>Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan</p>
<pre><code><pre class="javascript">jQuery.<span style="color: #006600;">fn</span>.<span style="color: #006600;">synchronizeScroll</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> elements = <span style="color: #000066; font-weight: bold;">this</span>;
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>elements.<span style="color: #006600;">length</span> &lt;= <span style="color: #CC0000;">1</span><span style="color: #66cc66;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span>;
elements.<span style="color: #006600;">scroll</span><span style="color: #66cc66;">&#40;</span>
<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> left = $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">scrollLeft</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">var</span> top = $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">scrollTop</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
elements.<span style="color: #006600;">each</span><span style="color: #66cc66;">&#40;</span>
<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">scrollLeft</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> != left<span style="color: #66cc66;">&#41;</span> $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">scrollLeft</span><span style="color: #66cc66;">&#40;</span>left<span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">scrollTop</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> != top<span style="color: #66cc66;">&#41;</span> $<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">scrollTop</span><span style="color: #66cc66;">&#40;</span>top<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></code></pre>
<p><a href="http://blogs.msdn.com/matt/archive/2009/03/19/synchronizing-scrollbars-using-jquery.aspx">Synchronizing Scrollbars using JQuery</a></p>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/03/25/sincronicar-scrolls-entre-capas-con-jquery.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cargar contenido mediante el scroll usando jQuery</title>
		<link>http://sentidoweb.com/2008/06/05/cargar-contenido-mediante-el-scroll-usando-jquery.php</link>
		<comments>http://sentidoweb.com/2008/06/05/cargar-contenido-mediante-el-scroll-usando-jquery.php#comments</comments>
		<pubDate>Fri, 06 Jun 2008 00:00:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[scroll]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2008/06/05/cargar-contenido-mediante-el-scroll-usando-jquery.php</guid>
		<description><![CDATA[Un sencillo script realizado con jQuery que nos permite cargar contenido cuando llegamos al final del contenido mediante el scroll. Algo parecido os presenté hace ya tiempo, pero sin uso de librerías. En este caso, jQuery reduce el código para implementarlo. Es importante recordar que el contenido importante no se debería cargar mediante Ajax, y [...]]]></description>
			<content:encoded><![CDATA[Un sencillo script realizado con jQuery que nos permite cargar contenido cuando llegamos al final del contenido mediante el scroll. <a href="http://sentidoweb.com/2007/02/06/laboratorio-paginacion-ajax-estilo-google-reader.php">Algo parecido</a> os presenté hace ya tiempo, pero sin uso de librerías. En este caso, jQuery reduce el código para implementarlo.
Es importante recordar que el contenido importante no se debería cargar mediante Ajax, y si se hace así es necesario ofrecer una alternativa clásica.
<a href="http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/">Load Content While Scrolling With jQuery</a>
Vía / <a href="http://www.ajaxline.com/load-content-while-scrolling-with-jquery">Ajaxline</a>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2008/06/05/cargar-contenido-mediante-el-scroll-usando-jquery.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

