Contenido

Cambia el tamaño de la fuente dependiendo del tamaño del párrafo

26 Ene

aNieto2k hace 5421 días en: javascript, Programacion, webdev

+ 4

En CSS-Tricks nos muestran como cambiar el tamaño de la fuente de nuestros parrafos dependiendo del número de palabras que estos contengan.

bigandsmallquote

// Código para MooTools
window.addEvent('domready',function() {

	$quote = $$('.post p')[0];

        var $numWords = $quote.get('text').split(' ').length; 

        if (($numWords >= 1) && ($numWords < 10)) {
                $quote.setStyle('font-size','36px');
        }
        else if (($numWords >= 10) && ($numWords < 20)) {
                $quote.setStyle('font-size','32px');
        }
        else if (($numWords >= 20) && ($numWords < 30)) {
                $quote.setStyle('font-size','28px');
        }
        else if (($numWords >= 30) && ($numWords < 40)) {
                $quote.setStyle('font-size','24px');
            }
        else {
                $quote.setStyle('font-size','20px');
        };
});
// Código para jQuery
$(function(){

    var $quote = $(".post p:first");

    var $numWords = $quote.text().split(" ").length;

    if (($numWords >= 1) && ($numWords < 10)) {
        $quote.css("font-size", "36px");
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
        $quote.css("font-size", "32px");
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
        $quote.css("font-size", "28px");
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
        $quote.css("font-size", "24px");
    }
    else {
        $quote.css("font-size", "20px");
    }    

});

Una idea muy interesante pare tener presente….

Enlace permanente: Cambia el tamaño de la fuente dependiendo del tamaño del párrafo

Comentar

↑

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.

wordpress. themes wordpress.plugins wordpress.hacks Wordpress webkit usabilidad tweet themes Safari prototype plugins plugin PHP optimización Opera navegadores MooTools lightbox jquery.plugin jquery javascript itouch iphone internet explorer imagenes IE8 IE6 HTML5 HTML hack google.chrome google framework flash firefox3 firefox firebug estandares CSS3 CSS canvas ajax Accesibilidad 2.7 2.6