Problemas con Ajaxupload

[rjulio21]

Buenaas tardes amigos, tiempo sin consultar por aqui.
En estos momentos tengo una duda, que debido a lo extraña no estaba del todo seguro de en donde postearla. sin embargo decidi hacerlo aqui.

La cosa es la siguiente: Estoy intentando implementar el plugin "ajaxupload" en un sistema que estoy haciendo, quienes lo hayan usado sabran que este esta realizado en jquery, y pues, la cuestion es que tenia el problema de que no me funcionaba, y le consegui la solución pero no entiendo cual es la razon y me gustaria saber si a alguien le ha pasado.


el codigo es el siguiente:

Código Javascript:

new AjaxUpload(button, {
            
            action: 'form2Producto.php', 
            name: 'myfile',
            onSubmit : function(file, ext){
                // change button text, when user selects file           
                button.text('Uploading');
                                
                // If you want to allow uploading only 1 file at time,
                // you can disable upload button
                this.disable();
                
                // Uploding -> Uploading. -> Uploading...
                interval = window.setInterval(function(){
                    var text = button.text();
                    if (text.length < 13){
                        button.text(text + '.');                    
                    } else {
                        button.text('Uploading');               
                    }
                }, 200);
            },
            onComplete: function(file, response){
                button.text('Upload');
                            
                window.clearInterval(interval);
                            
                // enable upload button
                this.enable();
                
                // add file to the list
                $('<li></li>').appendTo('#example1 .files').text(file);                     
            }
        });
 

donde button es el botton,div o etiqueta al que uno le hace click, ajaxupload se encarga de convertirlo en un file-input y realiza su trabajo, sumamente sencillo y util, la cuestion es que a mi no me estaba funcionando, despues de verificar casi dos dias decidi ponerme a probar cada cosa que tengo en el proyecto, quitando los demas archivos js,css etc. a ver xq no me funcionaba. Hasta que llegue a mi archivo css en el que tengo este comando:

Código CSS:

width:1024px;
 

Si lo comento. TODO funciona. si lo descomento deba de funcionarme el plug. Alguien tendra una idea de como o porque sucede esto y en caso de, como se soluciona?


jajajaja, es una locura, espero me entiendan. muchas gracias

[emprear]

Sin ver el conjunto es dificil ver la relación, en principio no la encuentro, además no vemos tu html. Ese width: 1024px; a que elemento se lo estabas aplicando?

Saludos

[rjulio21]

OK. perdon por la tardanza. jejeje. tienes razon emprear. te muestro:
El tag al qque le aplico el estilo es al body. esta de la siguiente manera:

Código CSS:

html{
    background: url(../imagenes/fondo.png) no-repeat center top #f5f5f5;
    font-size:12px;
    font-family:Verdana,Helvetica, sans-serif;
    color:#404040;
    
}
#cuerpo{
    margin-top:5px;
    position:relative;
    min-height: 500px;
    width: 1024px;
    background:#fff;
}
body{
    
    margin: 30px auto;
    background:#fff;
    #width:1024px;
    margin:auto;
}
 

Ahora se encuentra comentado para que me funcione el ajaxupload. la razon por la que se la puse es poruna imagen que coloco en el HTML para que quede de fondo.
El HTML si esta un poco complejo porque es php. sin embargo te lo coloco:

Código PHP:

include('../base.php');
    include('../panelI.php');
    $idproducto=$producto->insertarProd($_REQUEST);
    echo $producto->formularioImagen($idproducto);
    echo "<div id=\"panelAdmin\">"; 
    $datosProd=$producto->datosProducto($idproducto);
    
    echo"<div class=\"botonCarga\" id=\"upload\">Subir Foto</div>
            
        <ul id=\"gallery\">
                <!-- Cargar Fotos -->
        </ul>
    </div>";
    
    
    include(dirRoot."cierre.php");
 

Aqui esta linea "echo $producto->formularioImagen($idproducto);" me llama la funcion colocada al principio. sin embargo vuelvo a colocarla:

Código PHP:

$texto= "
    <SCRIPT>
        $(document).ready(function(){
                var button = $('#upload'), interval;
                new AjaxUpload(button, {
                
                action: 'form2Producto.php', 
                name: 'image',
                onSubmit : function(file, ext){
                // Validar Formato de la imagen
                if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
                    button.text('Cargando');
                    this.disable();
                    this.setData({
                        'idproducto': '$idproducto'
                    }); 
                    interval = window.setInterval(function(){
                        var text = button.text();
                        if (text.length < 13){
                            button.text(text + '.');                    
                        } else {
                            button.text('Cargando Imagen');
                        }
                    }, 200);
                    
                }else{
                    //En caso de no tener un formato valido
                    alert(\"no es una imagen\")
                    return false;
                }
                },
                onComplete: function(file, response){
                    button.text('Cargar Otra');
                                
                    window.clearInterval(interval);
                                
                    // enable upload button
                    this.enable();
 
                    if($('#gallery li').length == 0){
                        $('#gallery').html(response).fadeIn(\"fast\");
                        $('#gallery li').eq(0).hide().show(\"slow\");
                    }else{
                        $('#gallery').prepend(response);
                        $('#gallery li').eq(0).hide().show(\"slow\");
                    }               
 
                     $(\"#gallery\").load(\"form2Producto.php?carga=listFotos&idprod=$idproducto\");
                     //$('<li></li>').appendTo('#gallery').text(file);      
                }//final onComplete
            });
        });
    </SCRIPT>
    ";
 

Esta colocado asi ahora, porque estoy trabajando con algunas clases, sin embargo haciendolo estructurado directamente con el javascript presentaba el mismo problema, por tanto no tiene nada que ver con que tenga la funcion javascript impresa desde php. Precisamente por eso es mi duda. PORQUE no le consigo ni pies ni cabeza a como un valor CSS puede evitar que funcione esto. De repente quien lo haya usado antes tendra idea. MUCHAS GRACIAS.