Comunidad de diseño web y desarrollo en internet online

Problema con slide en IE 8

Citar            
MensajeEscrito el 07 Mar 2011 02:34 pm
Que ondon... Ando buscando un poco de ayuda coneste código:

JAVASCRIPT

Código :

   posActual = 0;
   running = false;
   function slide(id){
      number = (parseInt(id,10)*550)*-1;
      if(running == true){
         clearInterval(interval);
      }
      if(number > posActual){
         running = true;
         interval = setInterval(moverFotogaleriaIzquierda,20,number);
      }else if(number < posActual){
         running = true;
         interval = setInterval(moverFotogaleriaDerecha,20,number);
      }   
   }
   
   function moverFotogaleriaDerecha(posFinal){
      pos = Math.floor((posFinal-posActual)/5);
      posActual+=pos;
      if(posActual <= posFinal){
         clearInterval(interval);
         posActual = posFinal;
         running = false;
      }
      document.getElementById('fotos').style.left = posActual+'px';
   }
   function moverFotogaleriaIzquierda(posFinal){
      pos = Math.ceil((posFinal-posActual)/5);
      posActual+=pos;
      if(posActual >= posFinal){
         clearInterval(interval);
         posActual = posFinal;
         running = false;
      }
      document.getElementById('fotos').style.left = posActual+'px';
   }


El código funciona super bien en FF y en Chrome pero IE 8 (para variar) no jala y me marca un error en la línea: document.getElementById('fotos').style.left = posActual+'px';

El CSS es:

Código :

#fotogaleria #indiceFotos{
   width:550px;
   height:10px;
   margin:0 auto 0 auto;
   padding:10px 0 10px 0;
}
#fotogaleria #indiceFotos img{
   background-image:url(images/iconFotogaleriaOff.gif);
   background-repeat:no-repeat;
   cursor:pointer;
}
#fotogaleria #indiceFotos img.selected, #fotogaleria #indiceFotos img:hover{
   background-image:url(images/iconFotogaleria.gif);
   background-repeat:no-repeat;
}

#fotogaleria #maskFotogaleria{
   width:550px;
   height:375px;
   margin:0 auto 0 auto;
   overflow:hidden;
}

#fotogaleria #fotos{
   width:5500px;
   height:375px;
   position:relative;
   left:0;
}
#fotogaleria #fotos .foto{
   width:550px;
   height:375px;
   float:left;
   color:#FFF;
   overflow:hidden;
}
#fotogaleria #fotos .foto img{
   display:block;
   margin:0 auto 0 auto;
}
#fotogaleria #fotos .foto h2{
   color:#FFF;
   font-size:24px;
   font-weight:normal;
   padding:5px 0 5px 0;
}
#fotogaleria #fotos .foto .excerpt p{
   width:550px;
   color:#FFF;
}


y el HTML es:

Código :

                <div id="fotogaleria">
                    <div id="indiceFotos">
                        <? for($i=0;$i<10;$i++){ ?>
                            <img onclick="slide('<? print $i; ?>');" src="/images/px.png" width="10" height="10" />
                  <? } ?>
                    </div>
                    <div id="maskFotogaleria">
                        <div id="fotos">
                            <? $myposts = get_posts('numberposts=10&category_name=fotogaleria');
                            foreach($myposts as $post):
                                setup_postdata($post);
                            ?>
                                <div class="foto">
                                    <h2><? the_title(); ?></h2>
                                    <? $imagen = get_post_custom_values('imagen', $post->ID);?>
                                    <img src="<? print $imagen[0]; ?>" width="472" height="276" />
                                    <div class="excerpt"><? the_excerpt(); ?></div>
                                </div>
                            <? endforeach; ?>
                        </div>
                    </div>
                </div>




Alguien tiene una idea??? La vdd ya no sé que hacer...

Por Stockman

Claber

145 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Mar 2011 02:36 pm
Por cierto, el error de IE dice que "se esperaba un objeto"

Por Stockman

Claber

145 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Mar 2011 11:23 pm
De entrada te diré que la IE "no le gusta" que declares las variables sin la palabra reservada "var". Sugiero que hagas las cosas de esa manera:

Código Javascript :

var identificador = valor;

Usa el depurador de IE presionando F12 y estableciendo puntos de control en el código. También tiene una consola de errores que te puede ayudar a determinar dónde está el error.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 07 Mar 2011 11:37 pm
Ya lo pude resolver, resulta que la función setInterval no registra, en IE, los parámetros adicionales para pasárselos a la función que estas ejecutando.

Lo que hay que hacer es utilizar una función anónima y el código quedaría así

Código :

         interval = setInterval(function(){ moverFotogaleriaIzquierda(number) },20);


Así IE identifica de manera correcta todos los parámetros y la animación FUNCIONA !!!! MUAHAHAHAHAH!!! ESTA VVVIIIVVVOOO!!! ... ejem... perdón... flashback con Frankenstein...

Por Stockman

Claber

145 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Mar 2011 02:16 pm
Lindo monologo de 9 horas.....

felicitaciones (y)

Por jpcw

Claber

1715 de clabLevel

1 tutorial

Genero:Masculino  

AlgoritmicBrainDesigner

chrome
Citar            
MensajeEscrito el 08 Mar 2011 02:31 pm
:D Mil gracias a ambos :D

Por Stockman

Claber

145 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.