jquery width()

**shyghar** · 18-12-2010, 20:54

Salve,
ho questo problema:

Nel mio html ho vari div con classe "wrapper". Dentro ogni wrapper c'è un'IMG.
Io voglio sapere qual'è la lunghezza di tutte le img messe una dietro l'altra.
Ho scritto questo:

codice:

var x = 0; 
var totalWidth = 0; 

$(".wrapper").each(function() { 
totalWidth = totalWidth + parseInt(this.width()); 
$("#debug").append("totalWidth = "+totalWidth+" x = "+x); 
}); 

$("#debug").append("totalWidth = "+totalWidth+" x = "+x);

Premettendo che la x è solo una variabile messa lì per "controllo" e che effettivamente non serve a nulla [come le stampe nel div con id "debug"..] x' la console degli errori mi dice:
Uncaught TypeError: Object http://localhost:8084/WebApplication1/ADV# has no method 'width'
??

La cosa stramba è che nel resto dello script uso già il parseInt($(qualcosa).width()) e solo quando ho scritto questo metodo la console ha pensato di ribbellarsi -___-"

Le ho provate tutte anche a mettere:

codice:

$(".wrapper img").each(function(){ ... }

o scriverlo in altre forme.. non ne esco..

come posso correggere la cosa?

**longilineo** · 18-12-2010, 21:32

Codice PHP:


var totalWidth = 0; 



$(".wrapper").each(

    function() { 

        totalWidth = totalWidth + parseInt($(this).width()); 

        /*oppure

        totalWidth = totalWidth + parseInt(this.width); 

        */

    }

);

così dovrebbe andare, in javascript penso si utilizzi la .width senza parentesi (come property).

Sarebbe buona norma scrivere il tutto in un solo linguaggio piuttosto che mischiare javascript classico e jquery.

**shyghar** · 19-12-2010, 11:54

Così ho tolto l'errore ma il codice cmq non funziona.
Credo che la questione sia: la width al div viene data dopo il caricamento dell'immagine e non prima.

Ho anche provato a scrivere:

codice:

 $(".wrapper img").each(function() {
                var img = new Image();
                img.src = $(this).attr("src");
                   alert(img.width+""+img.clientWidth+""+img.naturalWidth+""+img.offsetWidth+""+img.scrollWidth );
		//totalWidth = totalWidth + parseInt(this.width);
                //$("#debug").append("totalWidth = " + totalWidth + " x = " + x);
	});

ma nell'alert ci sono solo zeri..

Come faccio a far caricare lo script dopo che sia stato elaborato il DOM?

**longilineo** · 19-12-2010, 12:08

Codice PHP:


$(document).ready(

    function(){

         totale = 0;

         $(".wrapper img").each(

             function(){

                   totale += $(this).width();

             }

          )

          alert(totale);

     }

)

**shyghar** · 19-12-2010, 12:55

Sembra assurdo ma purtroppo non funziona.. mi da cmq valori 0..

Ci avevo pensato anche io a mandare lo script dopo la creazione del DOM ma per qualche motivo strambo non funziona...

ho anche provato a mettere

$(document).onload(function(){...});

ma nada.. non riesco proprio a capire x' non mi legge correttamente il DOM.
Dopo l'esecuzione dello script se controllo il DOM ci sono i valori giusti però -___-"

**longilineo** · 19-12-2010, 13:06

fa vedere la parte html

**shyghar** · 19-12-2010, 13:17

codice:

<div id="viewer" class="js-disabled"> 
    <a class="wrapper" href="#" title="Hangar">
        [img]style/img/adv1.png[/img]
    </a> 
    <a class="wrapper" href="#" title="Pannello di controllo">
        [img]style/img/adv2.png[/img]
    </a> 
    <a class="wrapper" href="#" title="Piper Pa 30 I-LUEL">
         [img]style/img/adv3.png[/img]
     </a> 
</div>

**longilineo** · 19-12-2010, 13:21

Codice PHP:


<html>

    <head>

        <script type='text/javascript' src='jq.js'></script>

        <script type='text/javascript'>

            $(document).ready(

                function(){

                    totale = 0;

                    $(".wrapperImg").each(

                        function(){

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

                            totale += $(this).width();

                        }

                    )

                    alert(totale);

                }

            )

        </script>

    </head>

    <body>

        <div id="viewer" class="js-disabled"> 

            <a class="wrapper" href="#" title="Hangar">

                [img]1.jpg[/img]

            </a> 

            <a class="wrapper" href="#" title="Pannello di controllo">

                [img]2.jpg[/img]

            </a> 

            <a class="wrapper" href="#" title="Piper Pa 30 I-LUEL">

                 [img]3.jpg[/img]

            </a> 

        </div>

    </body>

</html>

Così a me funziona.

**shyghar** · 19-12-2010, 13:33

Stesso codice a me da 0 per tutte le img..

Che browser hai?

**longilineo** · 19-12-2010, 13:42

ho appena testato sui seguenti browser:

firefox
ie 9 beta
opera
safari
chrome

solo per gli ultimi due mi da il tuo stesso problema.

Da una rapida ricerca su google mi pare di aver capito che è un bug di jquery, prova in javascript classico.

Codice PHP:




<html>

    <head>

        <script type='text/javascript' src='jq.js'></script>

        <script type='text/javascript'>

            /*$(document).ready(

                function(){

                    totale = 0;

                    $(".wrapperImg").each(

                        function(){

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

                            totale += $(this).width();

                        }

                    )

                    alert(totale);

                }

            )*/

            

            function main(){

                totale = 0;

                for(x=0; x<document.images.length; x++){

                    totale+=document.images[x].width;

                }

                alert(totale);

            }

        </script>

    </head>

    <body onload='main()'>

        <div id="viewer" class="js-disabled"> 

            <a class="wrapper" href="#" title="Hangar">

                [img]1.jpg[/img]

            </a> 

            <a class="wrapper" href="#" title="Pannello di controllo">

                [img]2.jpg[/img]

            </a> 

            <a class="wrapper" href="#" title="Piper Pa 30 I-LUEL">

                 [img]3.jpg[/img]

            </a> 

        </div>

    </body>

</html>

Discussione: jquery width()

Strumenti discussione

Ricerca discussione

Visualizza

jquery width()

Permessi di invio