este "slider" no me funciona

jor_0203 · #1 (**permalink**) 25/11/2011, 17:12

este "slider" no me funciona isabel
porque

Código Javascript:

Ver original<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
#cont {
width: 198px;
height: 198px;
}
#capa1 {
width: 198px;
height: 198px;
background: yellow;
overflow: hidden;
}
#capa2 {
width: 198px; /* ha de ser multiplo de 3, puesto que la "iteración" es de 3 en 3 */
height: 197px;
background: red;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function() {
var contenedor = document.getElementById('cont');
if(contenedor.addEventListener) {
contenedor.addEventListener('mouseover', function() {
creaIntervalo(document.defaultView.getComputedStyl e(document.getElementById('capa2'), null).getPropertyValue('width'), document.defaultView.getComputedStyle(document.get ElementById('capa2'), null).getPropertyValue('height'), 0)},false);
 
contenedor.addEventListener('mouseout', function() {
creaIntervalo(document.defaultView.getComputedStyl e(document.getElementById('capa2'), null).getPropertyValue('width'), document.defaultView.getComputedStyle(document.get ElementById('capa2'), null).getPropertyValue('height'), 1)},false);
} else { ie8-
contenedor.attachEvent('onmouseover', function() {
creaIntervalo(document.styleSheets[0].rules[2].style['width'], document.styleSheets[0].rules[2].style['height'], 0)
}
);
contenedor.attachEvent('onmouseout', function() {
creaIntervalo(document.styleSheets[0].rules[2].style['width'], document.styleSheets[0].rules[2].style['height'], 1)
}
);
}
}
var intervalo;
function creaIntervalo(w_bloque, h_bloque, evento) {
var bloque = document.getElementById('capa2');
var w_bloque = w_bloque;
var h_bloque = h_bloque;
if (evento == 1) {
clearTimeout(intervalo);
despliega(bloque, w_bloque, h_bloque);
} else {
clearTimeout(intervalo);
repliega(bloque, w_bloque, h_bloque);
}
}
function despliega(bloque, w, h) {
var ancho = parseInt(w);
var alto = parseInt(h);
if (ancho <= 198) {
ancho += 3;
bloque.style.width = ancho + 'px';
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[2].style['width'] = ancho + 'px';
}
intervalo = setTimeout(function(){despliega(bloque, ancho, alto)}, 8);
} else if (alto <= 197) {
alto += 3;
bloque.style.height = alto + 'px';
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[2].style['height'] = alto + 'px';
}
intervalo = setTimeout(function(){despliega(bloque, ancho, alto)}, 8);
} else {
clearTimeout(intervalo);
}
}
function repliega(bloque, w, h) {
var ancho = parseInt(w);
var alto = parseInt(h);
if (alto >= 30) {
alto -= 3;
bloque.style.height = alto + 'px';
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[2].style['height'] = alto + 'px';
}
intervalo = setTimeout(function(){repliega(bloque, ancho, alto)}, 8);
} else if (ancho >= 3) {
ancho -= 3;
bloque.style.width = ancho + 'px';
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[2].style['width'] = ancho + 'px';
}
intervalo = setTimeout(function(){repliega(bloque, ancho, alto)}, 8);
} else {
clearTimeout(intervalo);
}
}
</script>
</head>
<body>
<div id="cont">
<div id="capa1">
<div id="capa2"></div>
<br /><br /><br /><br />Este texto no lo habías visto<br /><br />
</div>
</div>
</body>
</html>

IsaBelM · #2 (**permalink**) 25/11/2011, 17:36

el problema está en que se han creado unos espacios

Cita:

if(contenedor.addEventListener) {
contenedor.addEventListener('mouseover', function() {
creaIntervalo(document.defaultView.getComputedStyl e(document.getElementById('capa2'), null).getPropertyValue('width'), document.defaultView.getComputedStyle(document.get ElementById('capa2'), null).getPropertyValue('height'), 0)},false);

contenedor.addEventListener('mouseout', function() {
creaIntervalo(document.defaultView.getComputedStyl e(document.getElementById('capa2'), null).getPropertyValue('width'), document.defaultView.getComputedStyle(document.get ElementById('capa2'), null).getPropertyValue('height'), 1)},false);
} else { ie8-

necesitas una consola de errores, ya!!

si persiste el problema, busca mas espacios que se hayan creado

jor_0203 · #3 (**permalink**) 25/11/2011, 18:39

estoy checando el código
pero estoy impresionado
este tipo de código es un ejemplo de dinamismo en javascript, aunque me asusta
véanlo
ya que les puede dar muchas ideas
ojala que con el tiempo pueda llegar a ser como isabelm