[jQuery] Por que no funciona este código

[SoutlinK]

Código javascript:

// JavaScript Document
$(document).ready(
    function()
    {
        resize_images();
    }
);
 
function resize_images()
{
    var MAX_WIDTH = 640;
    var MAX_HEIGHT = 480;
    
    $("#pagecontent img").each(
        function()
        {
            var IMAGE_WIDTH = $(this).width();
            var IMAGE_HEIGHT = $(this).height();
            
            if (IMAGE_WIDTH > MAX_WIDTH)
            {
                $(this).width(MAX_WIDTH);
            }
        }
    );
}
 

Funciona perfectamente con Mozilla Firefox, pero no con Internet Explorer ni con Google Chorme

[SoutlinK]

Con este codigo si funciona perfectamente.

Código PHP:

  // JavaScript Document
$(document).ready(
    function()
    {
        resize_images();
    }
);
 
function resize_images()
{
    var MAX_WIDTH = 640;
    var MAX_HEIGHT = 480;
    
    $("#pagecontent img").each(
        function()
        {
            var IMAGE_WIDTH = $(this).width();
            var IMAGE_HEIGHT = $(this).height();
            
            if (IMAGE_WIDTH > MAX_WIDTH)
            {
                $(this).width(MAX_WIDTH);
            }
            else
            {
                alert('Inferior');
            }
        }
    );
} 
   

Pero no quiero me salga el alert('inferior');
Y si lo saco no funciona.

Es lo mas raro que e visto en mi vida.

Algun moderador, puesto que no es problema de jquery, podias mover esto a javascript??

Gracias

[venkman]

Cuando pongas un width, tienes que poner unas unidades. 640 qué? 640px, por supuesto. Así que prueba con esto:

Código javascript:

$(this).width(MAX_WIDTH+"px");
 

Si no se soluciona dilo.

[SoutlinK]

Sigue sin funcionar.

El problema no esta en el width, sino en el condicional IF.

Funciona si en el else pongo un alert, sino no funciona

[venkman]

Espera. Si pones el else, ¿sale el alert siempre? ¿Has probado a hacer esto?:

Código javascript:

function resize_images() {
    var MAX_WIDTH = 640;
    $("#pagecontent img").each( function() {
            alert($(this).width() > MAX_WIDTH);
    });
}
 

[SoutlinK]

Vale e encontrado el error, y es la cosa mas extraña que me a sucedido nunca.

Resulta que tengo este coódigo

Código javascript:

function resize_images()
{
    var MAX_WIDTH = 640;
    
    $(".postbody img").each
    (
        function()
        {
            alert($(this).attr("src"));
            alert($(this).width());
        }
    );
}
 

Esto me retorna los siguientes valores:

src: http://img113.imageshack.us/img113/604/omfgom0.jpg
width: 700

Excepto en google chorme que me retorna 0 en width.

Pero que pasa si hago esta modificación:

Código javascript:

function resize_images()
{
    var MAX_WIDTH = 640;
    
    $(".postbody img").each
    (
        function()
        {
            var IMAGE_SRC = $(this).attr("src");
            var IMAGE_WIDTH = $(this).width();
            alert(IMAGE_SRC);
            alert(IMAGE_WIDTH);
        }
    );
}
 

Resultado:

En firefox:
src: http://img113.imageshack.us/img113/604/omfgom0.jpg
width: 700

En Internet Explorer:
src: http://img113.imageshack.us/img113/604/omfgom0.jpg
width: 70

En Google Chorme
src: http://img113.imageshack.us/img113/604/omfgom0.jpg
width: 0

Y no se por que!!!!

Alguna ayuda??? Por favor??

[venkman]

¿Podemos ver el código HTML donde está esa imagen? Ah, y por cierto, no tendrá esa imagen un display:none o alguna cosa similar, no?

[SoutlinK]

No la imagen esta normal

Código HTML:

<img alt="Imagen" src="http://img113.imageshack.us/img113/604/omfgom0.jpg"/> 

Es que no puedo subirlo por que el es un foro, y tendria que volver a subir todo otra vez.

Pero no tiene ninguna propiedad exptrña ni nada por el estilo

[venkman]

Pues no sé... ¿El código es HTML, XHTML? ¿Valida correctamente?

[SoutlinK]

Iniciado por venkman

Pues no sé... ¿El código es HTML, XHTML? ¿Valida correctamente?

HTML, pero no se si validad correctamente ya que estoy en local.

Pero es algo extraño, por que si hago esto:

alert($(this).width());
alert($(this).width());

Los valores son 70 y 700 respectivamente, y sigue siendo el mismo elemento ;S

Mira sigo haciendo pruebas.

Código PHP:

  <script type="text/javascript">
$(document).ready(
    function ()
    {
        resize_images()
    }
);

function resize_images()
{
    $(".postbody img").each(
        function ()
        {
            alert('Primero: ' + $(this).attr("src") + ', ' + $(this).width()); 
// Resultado: Primero: http://img113.imageshack.us/img113/604/omfgom0.jpg, 70
            alert('Segundo: ' + $(this).attr("src") + ', ' + $(this).width()); 
// Resultado: Segundo: http://img113.imageshack.us/img113/604/omfgom0.jpg, 700
        }
    );
}
</script> 
  

[venkman]

¿Ein?? ¿Podrías poner el código completo?

[stock]

sucede por que el explorador no ha rendereado completamente la imagen ;) es decir, estas queriendo manipular imagenes cuando no estan disponibles!! lo que tienes que hacer es esperar a que se cargue por completo la imagen para poder manipularla, es por eso que al poner un alert te funciona, pues al aparecer el alert le da tiempo al explorador de "cargar" la imagen :o

te digo que es esto, porque me pasó cuando hice una galería y no tomaba las dimensiones correctas, entonces lo que hice para solucionarlo fué ponerle un listener a la imagen que se disparaba cuando la imagen esta cargada por completo!! esto que te cuento requiere un poco de labor, la manera más rápida de solucionarlo sería en lugar de ahcer esto:

Código:

$(document).ready(
    function ()
    {
        resize_images()
    }
);

hacer esto:

Código:

$(window).load(function () {
     resize_images()
);

saludos

[SoutlinK]

Solucionado!!!

Gracias Stock ;)

[Proguri]

Hi !

La solución por la que te funciono es una simple diferencia... Cuando en Jquery haces:
$(document).ready, lo unico que cargas es todo el DOM por lo tanto las imagenes aún no van a estar cargadas.

Cuando haces el onLoad carga la pagina completa antes de proceder.
Supongo que lo sabian pero es cuestion de aclarar un poco más :)

-ByE-