javascript responsive - Ridimensiona dinamicamente il testo in base alla larghezza del contenitore





text jquery (4)


Potresti provare questo

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    //fontSize should be enclosed in quotes
    $('.container h3').css('fontSize', textEms+"em");
})
.resize();//Triggers the resize on page load to set the font size

Sto lavorando a un design reattivo e ho alcuni tag <h3> visualizzazione che vorrei ridimensionare quando la larghezza della finestra del browser è ridotta.

La configurazione iniziale, basata su una larghezza di 960px:

  1. La dimensione del carattere del corpo è impostata su 14px
  2. La dimensione del carattere del tag h3 è 40px
  3. La larghezza del div contenente è di 230 px

Quindi ecco cosa ho elaborato per javascript / jQuery:

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    $('.container h3').css(fontSize,textEms+"em");
});

Le mie abilità di javscript sono ovviamente piuttosto limitate, quindi speravo che potessi aiutarmi a ottenere tutto questo puramente e funzionando correttamente. Penso che la funzione $(window).resize sia l'evento sbagliato da usare, dal momento che il testo dovrebbe ridimensionarsi automaticamente al caricamento della pagina, non solo per ridimensionare le finestre.

Grazie in anticipo per l'aiuto!

Nota: non voglio che il testo si estenda ai bordi dei contenitori, motivo per cui non sto utilizzando FitText.js o BigText.js.




Per le persone che lo trovano cercando su google come "dimensione dei caratteri reattiva", questo potrebbe essere d'aiuto:

https://github.com/davatron5000/FitText.js

È un plugin jQuery che imposta una dimensione del font in base alla larghezza del contenitore. Ha anche alcune opzioni per ottenere i risultati desiderati.

PS: Ovviamente ridimensiona anche il testo quando la finestra viene ridimensionata.




window.resize è l'evento corretto ma non si attiva al caricamento della pagina. Puoi comunque aggiungere .trigger('resize') al tuo codice per .trigger('resize') al caricamento della pagina:

$(window).bind('resize', function(){
    var containerSize  = $('.container').width(),
        textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
        textRatio      = containerSize * textPercentage,
        textEms        = textRatio / 14;

    $('.container h3').css(fontSize, textEms+"em");
}).trigger('resize');

Dovrai eseguire questo codice dopo document.ready per assicurarti che la larghezza che stai ricevendo per il contenitore sia corretta. Puoi anche inserire questo codice nella parte inferiore del documento HTML (che dovresti fare con o senza il gestore di eventi document.ready ) che assicurerà che gli elementi siano disponibili quando esegui questo codice:

//wait for `document.ready` to fire
$(function () {

    //cache the .container and H3 elements
    var $container = $('.container'),
        $h3        = $container.find('h3');

    //bind event handler to `window.resize`
    $(window).bind('resize', function(){

        //get the width of the container
        var containerSize  = $container.width(),
            textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
            textRatio      = containerSize * textPercentage,
            textEms        = textRatio / 14;

        $h3.css('fontSize', textEms+"em");
    }).trigger('resize');
});

Si noti che ho memorizzato nella cache gli elementi H3 modo che non sia necessario selezionarli ogni evento di resize , perché quando si ridimensiona effettivamente il browser ci sono un sacco di questi eventi che si attivano.




Devi chiamare indexOf con una "O" maiuscola come accennato. Va anche notato che nella classe JavaScript è una parola riservata, è necessario utilizzare className per ottenere questo attributo di dati. Il motivo per cui probabilmente non funziona è perché restituisce un valore nullo. Puoi fare quanto segue per ottenere il valore della tua classe ...

var test = elm.getAttribute("className");
//or
var test = elm.className






javascript jquery font-size responsive-design