Slider con Javascript + contenidos por AJAX

By
nmda
– January 3, 2011Posted in: Código

Un simple código para hacer que un botón abra una caja de contenido de forma animada. Si apretamos en el link 1 se abre la caja, pero si cambiamos al link 2 no se vuelve a abrir, pero si apretamos en el link que apretamos ultimo se cierra.

El .js:

function init() {
	document.getElementById("contenido").style.height=0+"px";
	document.getElementById("contenido").title="0";
}
window.onload = init;

function mover(size,target) {
	document.getElementById(target).style.height=size+"px";
}
function movimiento(totalSize,target,id) {
	var startSize = 0;
	var startTime = 0;
	var select = document.getElementById(target);
	if ((select.style.height<totalSize+"px") || (select.title!=id)) {
		//mostrar(id);
			if (select.style.height<totalSize+"px") {
				for (i=0;i<=totalSize;i++){
					var size = startSize+i;
					var time = startTime+i;
					var int=setTimeout("mover("+size+",'"+target+"')",time);
					}
			}
		} else {
			select.innerHTML="";
			for (i=0;i<=totalSize;i++){
				var size = totalSize-i;
				var time = startTime+i;
				var int=setTimeout("mover("+size+",'"+target+"')",time);
		}
	}
	select.title=id;
}

En //mostrar(id); llaman a una función AJAX para mostrar el contenido.

El HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider</title>
<script type="text/javascript" src="general.js"></script>
<link rel="stylesheet" type="text/css" href="general.css" />
</head>

<body>
<div id="top"><h2>SLIDER CON JAVASCRIPT + CONTENIDOS POR AJAX</h2></div>
<div class="menu" onclick="movimiento(300,'contenido',11)">Apretar aca</div>
<div class="menu" onclick="movimiento(300,'contenido',52)">Apretar aca</div>
<div class="menu" onclick="movimiento(300,'contenido',34)">Apretar aca</div>
<div class="menu" onclick="movimiento(300,'contenido',73)">Apretar aca</div>
<div id="contenido"></div>
<div id="fondo">FOOTER</div>

</body>
</html>



Acá un pequeño ejemplo.
Share

Posts Relacionados:

  1. Insertar texto en HTML usando Javascript Cuando quize hacerlo busque por todos lados y no encontre un tutorial facil para hacerlo. Asi que hay va. La...
  2. Fancybox, un lightbox de imágenes con JQUERY Este para mi es el mejor plug in de JQUERY para lograr el efecto de lightbox en las imágenes. Ese efecto...
  3. Mod_Rewrite fácil y rápido Mod_Rewrite es un modelo de Apache que viene instalado por defecto pero a veces no prendido por defecto. Para eso...
  4. Random de imágenes con PHP+CSS Me habían pedido, que cuando entras a un sitio haya una pagina de introducción con fotos full screen que cambien cada vez que entras,...
  5. Diseñadores VS Desarrolladores Web Genial genial ilustración de las diferencias entre el diseñador y el desarrollador web, dos caras de una misma moneda. Yo me veo...
Tags: , ,