CONTATTACI

Guide per aspiranti programmatori

Sviluppatore dall'aria dubbiosa che si interroga su che cos'è jquery
Lezione 20 / 36

Calcolo delle dimensioni e posizioni con jQuery

La gestione delle dimensioni e delle posizioni degli elementi è un aspetto cruciale nella creazione di layout responsivi e interfacce utente dinamiche nel web design. jQuery, una libreria JavaScript versatile, fornisce metodi semplici ma potenti per calcolare e manipolare queste proprietà. 

 

Metodi jQuery per Dimensioni e Posizioni

    • `.width()` e `.height()`: Questi metodi ottengono o impostano la larghezza e l’altezza di un elemento, escludendo margini, bordi e padding.
      let larghezza = $("#elemento").width(); let altezza = $("#elemento").height();

       Dimensioni degli Elementi

    • `.innerWidth()` e `.innerHeight()`: Ottengono la larghezza e l’altezza di un elemento, inclusi i padding ma esclusi i bordi e i margini.
        let larghezzaConPadding = $("#elemento").innerWidth();
          let altezzaConPadding = $("#elemento").innerHeight();
    • `.outerWidth()` e `.outerHeight()`:  Includono padding, bordi e, opzionalmente, margini nell’ottenimento delle dimensioni dell’elemento.
          let larghezzaTotale = $("#elemento").outerWidth(true); // Include i margini
          let altezzaTotale = $("#elemento").outerHeight(true); // Include i margini
  1.  Posizionamento degli Elementi

    • `.offset()`: Restituisce le coordinate (top e left) di un elemento rispetto al documento.

      let posizione = $("#elemento").offset();
          let top = posizione.top;
          let left = posizione.left;
    • `.position()`: Fornisce le coordinate dell’elemento rispetto al suo elemento padre posizionato
        let posizioneRelativa = $("#elemento").position();
          Let topRelativo = posizioneRelativa.top;
          let leftRelativo = posizioneRelativa.left;
    • `.scrollTop()` e `.scrollLeft()`:  Restituiscono o impostano la posizione dello scroll verticale o orizzontale di un elemento.

        let scrollVerticale = $(window).scrollTop();
          let scrollOrizzontale = $(window).scrollLeft();

Esempi Pratici

Supponiamo di avere il seguente elemento HTML:

<div id="elemento" style="margin: 10px; border: 5px solid; padding: 20px; width: 200px; height: 150px;"></div>

Calcolare le Dimensioni

// Dimensioni base
let larghezza = $("#elemento").width(); // 200px
let altezza = $("#elemento").height(); // 150px

// Dimensioni con padding
let larghezzaConPadding = $("#elemento").innerWidth(); // Più padding
let altezzaConPadding = $("#elemento").innerHeight(); // Più padding

// Dimensioni totali (inclusi margini, se specificato)
let larghezzaTotale = $("#elemento").outerWidth(true); // Include margini
let altezzaTotale = $("#elemento").outerHeight(true); // Include margini

Ottenere la Posizione

// Posizione rispetto al documento
let posizione = $("#elemento").offset();
let topDocumento = posizione.top;
let leftDocumento = posizione.left;

// Posizione rispetto all'elemento padre
let posizioneRelativa = $("#elemento").position();
let topRelativo = posizioneRelativa.top;
let leftRelativo = posizioneRelativa.left;

Il calcolo delle dimensioni e delle posizioni degli elementi è fondamentale per creare layout responsivi e interfacce utente precise. jQuery facilita notevolmente queste operazioni con i suoi metodi intuitivi, permettendo agli sviluppatori di accedere e manipolare queste proprietà in modo efficiente.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.