plugin jquery no funciona en IE7

AndresMtti · #1 (**permalink**) 23/04/2010, 11:32

Hola a todos.

He realizado un plugin jquery para hacer mas vistosa -con cierto efecto- la aparición de imágenes en una página, y funciona bien en IE8 y FF, pero no funciona en IE7.

En este navegador en cuestión, de todas las imágenes que tiene que mostrar, solo me muestra una, la primera y nada mas.

La página es la siguiente: http://www.ferremundo.com.ar/fxmarcas.php

Para hacer el efecto me he "inspirado" en este sitio http://webmuch.com/image-flip-using-jquery/

Desde ya agradezco si me pueden ayudar a solucionar este inconveniente.

Saludos

Andres

mayid · #2 (**permalink**) 23/04/2010, 14:42

Muy lindo efecto.

En IE8 se ve bien.

En ie7 no.

Pero es dificil comentar la pagina. Te animas a publicar aquí directamente el codigo? Así lo analizamos.

AndresMtti · #3 (**permalink**) 23/04/2010, 16:31

Cita:

Iniciado por mayid

Muy lindo efecto.

En IE8 se ve bien.

En ie7 no.

Pero es dificil comentar la pagina. Te animas a publicar aquí directamente el codigo? Así lo analizamos.

Aqui pongo el código del javascript

Código Javascript:

Ver originaljQuery.fn.aparece = function(vel,dur) {
    this.each(function(i){
        var $this = jQuery(this); //Convertimos a jQuery
        $this.hide();
        var margin = $this.width()/2; //92
        var width  = $this.width(); //184
        var height = $this.height(); //184
        j = (i+1)*vel;
        setTimeout(function(){
            $this.stop().css({width:'0px', height:''+height+'px', marginLeft:''+margin+'px', opacity:'0.5'});
            $this.stop().animate({width:''+width+'px', height:''+height+'px', marginLeft:'0px', opacity:'1'},{duration:dur});
        },j);
    });
}
 
$(document).ready(function(){
        $("img#loslog").aparece(100,300); // velocidad, duracion
});

En el html esta es una parte del ejemplo

Código HTML:

Ver original<li><img id="loslog" src="marcas/3m.gif"></li>

mayid · #4 (**permalink**) 24/04/2010, 09:46

... :) Todavía no se me ocurre nada.

juaniquillo · #5 (**permalink**) 25/04/2010, 08:50

¿Te da algún error en IE8? Eso me ha pasado a veces. No se si el problema es que IE8 es más estricto o defectuoso. Una forma de rápida (y sucia) de resolver es poner un metatag en el HTML que le diga a IE8 que se comporte como IE7:

Código HTML:

Ver original<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Pero la mejor manera es tratar de resolver el javascript. Casi siempre es algún objeto o alguna variable que no ha sido definida antes de usarse.

mayid · #6 (**permalink**) 25/04/2010, 09:39

Yo no vi que diera ningun error.

Tengo mis dudas sobre tu uso de this:

var $this = jQuery(this); //Convertimos a jQuery

Ahí comentas que convertis a jquery. Pero es todo lo contrario. jQuery se entiende mejor con el $(this) entre parentesis.

Mucho no se sobre crear funciones de la manera en que lo hacès. Sí entiendo que aquí el uso del this es correcto:
this.each(function(i){

Pero ya luego... tengo mis dudas.

mayid · #7 (**permalink**) 25/04/2010, 09:41

Otra cosa: para el css y el animate, hay un problema de comillas:

width:''+width+'px'

Deberían quedar el numero y el px entre comillas. Aunque no se bien como hacerlo :D

AndresMtti · #8 (**permalink**) 26/04/2010, 11:54

Cita:

Iniciado por juaniquillo

¿Te da algún error en IE8? Eso me ha pasado a veces. No se si el problema es que IE8 es más estricto o defectuoso. Una forma de rápida (y sucia) de resolver es poner un metatag en el HTML que le diga a IE8 que se comporte como IE7:

Código HTML:

Ver original<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Pero la mejor manera es tratar de resolver el javascript. Casi siempre es algún objeto o alguna variable que no ha sido definida antes de usarse.

En IE8 funciona perfecto, ni hablar del FF.
El problema es justamente con el Internet Explorer 7. En esta versión del navegador, realiza el efecto pero solo lo hace con la primera imagen. El problema puntualmente es que no hace la iteración de todas las imágenes.

De todas maneras, muchas gracias por la información.

AndresMtti · #9 (**permalink**) 29/04/2010, 08:30

Bueno, todavía sigo sin solucionar mi problema...

Hice el código más sencillo y a modo de ejemplo, y lo que a mi entender no funciona es el jquery en IE7, mas precisamente la iteración de los objetos.

Aquí está el ejemplo: http://www.ferremundo.com.ar/fxm.php

En IE8 funciona bien y muestra todas las imágenes, pero en IE7 solo muestra la primera y nada mas.

Les dejo la inquietud. Muchas gracias

Código Javascript:

Ver original$(document).ready(function(){
        $("img#loslog").show(); 
});

Código CSS:

Ver original#loslog{Z-INDEX: 3; POSITION: absolute; border: solid 1px #cccccc; display: none } // 
#marcas ul{list-style:none; margin:0; padding:0; }
#marcas li{ height:60px; width:152px; margin: 0px 14px 28px 14px;  padding:0; float:left; }

Código HTML:

Ver original<ul id="marcas">
    <li><img id="loslog" src="marcas/3m.gif"></li>
    <li><img id="loslog" src="marcas/atomlux.gif"></li>
    <li><img id="loslog" src="marcas/biassoni.jpg"></li>
    <li><img id="loslog" src="marcas/blackdecker.gif"></li>
    <li><img id="loslog" src="marcas/bremen.gif"></li>
    <li><img id="loslog" src="marcas/dayton.gif"></li>
</ul>

chichote · #10 (**permalink**) 29/04/2010, 09:41

Cita:

Iniciado por AndresMtti

Bueno, todavía sigo sin solucionar mi problema...

Es simple, tienes un error de concepto, bebes tener claro que los id son unicos, es decir que no puedes tener las imagenes con el mismo id, cambialo a class

quedaria asi

cambia esto

Código HTML:

$(document).ready(function()
	{
	$("img#loslog").aparece(100,300); // velocidad, duracion
	});

por esto

Código HTML:

$(document).ready(function()
	{
	$("img.loslog").aparece(100,300); // velocidad, duracion
	});

en el estilo cambia

Código HTML:

#loslog{Z-INDEX: 3; POSITION: absolute; border: solid 1px #cccccc; display:none  }

por

Código HTML:

.loslog{Z-INDEX: 3; POSITION: absolute; border: solid 1px #cccccc; display:none  }

y a tus imagenes cambia el ide por class

esto
<li><img id="loslog" src="marcas/3m.gif"></li>

por esto
<li><img class="loslog" src="marcas/3m.gif"></li>

saludos.

me funcion perfect en IE7 IE8, FF y hasta en IE6

saludos

mayid · #11 (**permalink**) 29/04/2010, 10:07

Tal cual! Es un problema de id. Al menos en tu ultimo ejemplo.

AndresMtti · #12 (**permalink**) 29/04/2010, 10:24

Muchas gracias Cherivera! Funciona de maravilla.

http://www.ferremundo.com.ar/marcas.php

Comparto el efecto que dicho sea de paso, modestamente me salió espectacular.

Código Javascript:

Ver originaljQuery.fn.aparece = function(vel,dur) {
    this.each(function(i){
        var $this = jQuery(this); //Convertimos a jQuery
        $this.hide();
        var margin = $this.width()/2; //92
        var width  = $this.width(); //184
        var height = $this.height(); //184
        j = (i+1)*vel;
        setTimeout(function(){
            $this.stop().css({width:'0px', height:''+height+'px', marginLeft:''+margin+'px', opacity:'0.5'});
            $this.stop().animate({width:''+width+'px', height:''+height+'px', marginLeft:'0px', opacity:'1'},{duration:dur});
        },j);
    });
}
 
 
$(document).ready(function(){
        $("img.loslog").aparece(100,300); // velocidad, duracion
});

Código CSS:

Ver original.loslog{Z-INDEX: 3; POSITION: absolute; border: solid 1px #cccccc; display:none }
#marcas ul{list-style:none; margin:0; padding:0; }
#marcas li{ height:60px; width:152px; margin: 0px 14px 28px 14px;  padding:0; float:left; }

Código HTML:

Ver original<img class="loslog" src="marcas/osram.gif" >

chichote · #13 (**permalink**) 29/04/2010, 11:09

de nada AndresMtti :D

galarina73 · #14 (**permalink**) 23/06/2010, 09:53

hola yo estoy tratando de cargar html en div dentro de la web y en firefox genial , pero en IE directamente se ve el html en blanco TOTAL no se ve nada de nada denada- que será?
el código que uso es

<script>
$(document).ready(function(){
var emi = "#menu1 a";
var rec = "#contenedor";
var src = "images/loading.gif";
var iid = "loading";
var pre = '<img src="'+src+'"id="'+iid+'"/>';
var spe = "slow";
$(emi).each(function(){
var href = $(this).attr("href");
$(this).click(function(){
$(rec).hide().after(pre).load(href, function() {$("#"+iid).remove();$(this).fadeIn(spe)});
return false;
});
});
});

</script>

y en cada link (que en realidad es una lista) ésto:

<li id="item"><a href="2007ultimo.html">2004-2008 </a></li>

en el div "contenedor " carga un html que, a su vez, tiene imágenes que se amplian en el mismo div" contenedor" pero en IE 7 ni me muetra web alguna. alguna ounta de qué podria estar pasando

en todos los html vinculo el archivo jquery y pongo en las etiquetas <script> el mismo código con la función.
alguin me puede ayudar? estoy por suicidarme je

mayid · #15 (**permalink**) 23/06/2010, 12:47

A mi parecer, no deberías declarar las variables antes de usar los selectores jquery:

Cita:

var emi = "#menu1 a";
var rec = "#contenedor";
var src = "images/loading.gif";
var iid = "loading";
var pre = '<img src="'+src+'"id="'+iid+'"/>';
var spe = "slow";

Dudo de que eso funcione. Aunque si lo hace, y queres usarlo, dale.

REspecto al problema, quizas tengas un problema de jerarquia? Me gustaría ver el html completo para evaluarlo. Pero se me hace que esto debe ir así:

var emi = "#menu1 li a";

es decir, con un li intermedio.

galarina73 · #16 (**permalink**) 23/06/2010, 13:07

cambie el script por este:
<script>
$(document).ready(function(){
$("#menu1 a").each(function(){
var href = $(this).attr("href");
$(this).click(function(){
$("#contenedor").hide().load(href).fadeIn("slow" ); //Le damos efecto
$(this).attr({ href: "#"});
});
});
});

</script>

funciona perfectamente en firefox pero en IE 7 no abre nada, no aparecece ni error. nada.
eso es lo que me parece raro. funcionar funciona re bien, no tengo IE8 para testear.
alguna otra sugerencia?? realmente no tengo idea que puede ser
gracioas por la ayuda :)