<?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>dixso.net &#187; Ajax</title>
	<atom:link href="http://dixso.net/category/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://dixso.net</link>
	<description>Desarrollo web</description>
	<lastBuildDate>Fri, 05 Feb 2010 08:09:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>CSS PopUp jQuery &amp; Ajax</title>
		<link>http://dixso.net/jquery/css-popup-jquery-ajax/</link>
		<comments>http://dixso.net/jquery/css-popup-jquery-ajax/#comments</comments>
		<pubDate>Fri, 19 Jun 2009 13:00:13 +0000</pubDate>
		<dc:creator>Julio</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://dixso.net/?p=340</guid>
		<description><![CDATA[Este post es la segunda parte del primer post, ya que se ha mejorado el script. Mejoras implementadas: - El script añade automáticamente las capas, no hace falta insertar el código en cada página. - Se carga el contenido por Ajax. - Podemos pasarle parámetros de anchura de la capa. La hoja de estilos quedaría [...]]]></description>
			<content:encoded><![CDATA[<p>Este post es la segunda parte del <a href="http://dixso.net/jquery/css-popup-con-jquery/">primer post</a>, ya que se ha mejorado el script.</p>
<p><strong>Mejoras implementadas:</strong><br />
- El script añade automáticamente las capas, no hace falta insertar el código en cada página.<br />
- Se carga el contenido por Ajax.<br />
- Podemos pasarle parámetros de anchura de la capa.</p>
<pre class="brush: jscript; title: ; notranslate">
//Variable que almacena la posición del scroll, por defecto tiene valor 0.
scrollCachePosition = 0;
function popupCssShow (URL, width, height) { //Parámetros: URL (URL, Anchura de la capa, Altura de la capa)
	if (typeof document.body.style.maxHeight === &quot;undefined&quot;) {//Añade la propiedad maxHeight para IE6.
		$(&quot;body&quot;,&quot;html&quot;).css({height: &quot;100%&quot;, width: &quot;100%&quot;});
	}
	//La capa 'cssBackground' ocupa toda la pantalla para darle una opacidad.
	//La capa 'cssPopupContainer' es la capa madre del PopUp.
	if (!$(&quot;#cssBackground&quot;).length&gt;0) {
		$(&quot;body&quot;).append(&quot;&lt;div id=\&quot;cssBackground\&quot;&gt;&lt;/div&gt;&lt;div id=\&quot;cssPopupContainer\&quot;&gt;&lt;div id=\&quot;cssPopup\&quot;&gt;&lt;/div&gt;&lt;/div&gt;&quot;); //Añade las capas en la página.
	}
	if (width!=undefined) {
		$(&quot;#cssPopup&quot;).css(&quot;width&quot;,width);
	}
	if (height!=undefined) {
		$(&quot;#cssPopup&quot;).css(&quot;height&quot;,height);
		$(&quot;#cssPopup&quot;).css(&quot;overflow&quot;,&quot;auto&quot;);
	}
	$(&quot;#cssBackground&quot;).slideDown(&quot;slow&quot;); //Efecto jQuery
	scrollCachePosition = $(window).scrollTop();
	window.top.scroll(0,0);
	$(&quot;#cssPopup&quot;).load(URL,function(){
		//$(&quot;#cssPopupContainer&quot;).center(); //Si activamos esta línea y desactivamos la de abajo nos centrará el PopUp en el medio de la pantalla.
		$(&quot;#cssPopupContainer&quot;).css(&quot;top&quot;,50);
		ancho=$(window).width();
		$(&quot;#cssPopupContainer&quot;).slideDown(&quot;fast&quot;, function () {
			anchopopup=$(&quot;#cssPopup&quot;).width();
			$(&quot;#cssPopupContainer&quot;).css(&quot;width&quot;,ancho);
		});
	});
}

function popupCssHide () {
	$(&quot;#cssPopupContainer&quot;).slideUp(&quot;fast&quot;, function () {
		$(&quot;#cssBackground&quot;).fadeOut(&quot;fast&quot;,function () {
			$(&quot;#cssBackground&quot;).remove(); //Elimina la capa 'cssBackground'.
			$(&quot;#cssPopupContainer&quot;).remove(); //Elimina la capa 'cssPopupContainer'.
		});
	});
	if (scrollCachePosition &gt; 0) {
		window.top.scroll(0,scrollCachePosition); //Vuelve a la posición donde estaba el scroll.
		//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces como sea necesario.
		scrollCachePosition = 0;
	}
}
</pre>
<p>La hoja de estilos quedaría de la siguiente manera:</p>
<pre class="brush: css; title: ; notranslate">
#cssBackground 		{height:100%; width:100%; background-color:#000; display:none; position:fixed; top:0; left:0; z-index:100; float:left; opacity:0.65;}
#cssPopup 			{margin:0 auto;}
#cssPopupContainer 	{position:absolute; display:none; z-index:101; width:100%;}
</pre>
<p>Para que IE6 haga la opacidad y la posición fija tendremos que insertar álgún hack en un condicional en el ‘head’:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!--[if lt IE 7]&gt;
&lt;style type=&quot;text/css&quot; media=&quot;all&quot;&gt;
	#cssBackground {_position:absolute !important; filter:alpha(opacity=65);}
&lt;/style&gt;
&lt;![endif]--&gt;
</pre>
<p>Para que IE7 haga la opacidad insertamos lo siguiente con un condicional en el ‘head’:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!--[if IE 7]&gt;
&lt;style type=&quot;text/css&quot; media=&quot;all&quot;&gt;
	#cssBackground {filter:alpha(opacity=65);}
&lt;/style&gt;
&lt;![endif]--&gt;
</pre>
<p>Según la URL que venga añadirá un fichero u otro:<br />
Estructura del PopUp:</p>
<pre class="brush: php; title: ; notranslate">
&lt;?
if ($_GET['page']==&quot;pagina-1&quot;) {
	include (&quot;includes/pagina-1.php&quot;);
}elseif ($_GET['page']==&quot;pagina-2&quot;) {
	include (&quot;includes/pagina-2.php&quot;);
	}
?&gt;
</pre>
<p>Si le pasamos page=pagina-1 incluirá el fichero pagina-1.php tal y como lo pongo en la condición de arriba.</p>
<p>Para llamar al popup sería de la siguiente forma:</p>
<pre class="brush: xml; title: ; notranslate">&lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;popupCssShow('popup.php?page=pagina-1', 460);&quot; title=&quot;Abrir PopUp&quot;&gt;Abrir PopUp&lt;/a&gt;</pre>
<p>También le pasamos el parámetro &#8217;460&#8242; para que nos habrá la ventana a &#8217;460px&#8217;.</p>
<p>Podéis ver un ejemplo <a target="_blank" href="http://dixso.net/wp-content/examples/jquery/css-popup-ajax">aquí</a>.<br />
Descarga del ejemplo <a href="http://dixso.net/wp-content/examples/jquery/css-popup-ajax/download/css-popup-ajax.rar">aquí</a>.</p>
<p>Nota:<br />
Para que os funcione tenéis que alojar el directorio en vuestro servidor o en local, ya que el ejemplo utilizo php para abrir un fichero u otro.</p>
]]></content:encoded>
			<wfw:commentRss>http://dixso.net/jquery/css-popup-jquery-ajax/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>20 Efectos Ajax</title>
		<link>http://dixso.net/ajax/20-efectos-ajax/</link>
		<comments>http://dixso.net/ajax/20-efectos-ajax/#comments</comments>
		<pubDate>Tue, 28 Apr 2009 08:22:04 +0000</pubDate>
		<dc:creator>Julio</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://dixso.net/?p=353</guid>
		<description><![CDATA[Colección de 20 fabulosos efectos en Ajax. Realmente son bastantes interesantes, además, muchos de esos efectos utiliza la librería jQuery.]]></description>
			<content:encoded><![CDATA[<p>Colección de <a target="_blank" href="http://net.tutsplus.com/articles/web-roundups/20-more-excellent-ajax-effects-you-should-know/">20 fabulosos efectos</a> en Ajax. Realmente son bastantes interesantes, además, muchos de esos efectos utiliza la librería jQuery.</p>
]]></content:encoded>
			<wfw:commentRss>http://dixso.net/ajax/20-efectos-ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

