CODEWITHSUNDEEP
jquerycssdynamicless
RichieMN
RichieMN

Reputation: 955

Modifying CSS on the fly using jquery

I've read a bunch of the answers to similar requests for dynamic styling, but I still have a few questions.

My final result is to have 2 buttons on my page that allows a user to increase or decrease the font size. I've seen this around, and it doesn't seem that it should be that complicated...

My C# project is using .less, and jquery 1.10.1.

var items = $('[class]').css('font-size');

$(items).each(function(index){        
    alert('Text:' + $(this).text());        
    $(this).css('font-size') =($(this).css('font-size').val() * 6) ;         
});

I expect the items collection will contain DOM elements that have font-size CSS property. I'd like to take the current size and apply some multiplier to it. In this case, to make it really obvious I was multiplying the current value by 6. This code is within a function that's called from a button click. With a simply alert box within this function the click works. This code doesn't work.

Do I want to use '[class]' to create my collection or is there a slicker way to pull css classes that contain font-size?

Is this something that is going to have to be done on each page, or does the css value get cached somewhere?

Is there an easier way to do this? I don't want to have 3 different style sheets, if it's not needed. Thanks for your help!

Upvotes: 4

Views: 1821

Answers (4)

Josh Beam
Josh Beam

Reputation: 19792

Here's a potential solution (and here's the jsfiddle):

<button class="up">+</button>
<button class="down">-</button>

<div>Some text</div>
<div>Some more text</div>
<div>Even more text</div>


$('button.up').on('click',function() {
    changeFontSize('up',38,'div');
});

$('button.down').on('click',function() {
    changeFontSize('down',16,'div');
});


//using so many parameters for the sake of being able to potentially use this function on multiple elements with different min and max sizes

//the limit variable is either a lower or upper limit of size

function changeFontSize(x,lim,el) {
    var direction = x,
        limit = lim,
        currentSize = parseInt($(el).css('font-size'));

        if(direction === "up") {
            if(currentSize<limit) {
                 $(el).css({
                     'font-size':(currentSize+6)+'px'
                 })
            }
        } else if (direction === "down") {
            if(currentSize>limit) {
                 $(el).css({
                     'font-size':(currentSize-6)+'px'
                 }) 
            }
        }

}

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49054

html:

<p style="font-size: 6px">test</p>
<p style="font-size: 6em">test</p>
<button id="resize">resize</button>

javascript:

$('#resize').click(
function(){
var fonts = $('[style*="font-size"]').each(function() {
    $(this).css('font-size',(parseFloat($(this).css('font-size'))*6)+'px');
});

Note 1 if you could use classes as suggested by @kasper-taeymans consider to make small and big classes and apply jQuery's addClass() and removeClass() to change your classes on the click events.

Note 2 cause you mention using LESS, if you compile your LESS code client side (by including less.js), which you shouldn't do, also read: Changing variable dynamically (at runtime) via LESS and CSS?

Upvotes: 3

kasper Taeymans
kasper Taeymans

Reputation: 7026

There is no need to loop explicit through the items. Its enough to (re)set the class' font-size value. For example you could do something like this...

http://jsfiddle.net/kasperfish/5bdbQ/5/

var maxsize=24;
var minsize=6;

$('#sizeup').on('click', function(){
    var el=$('.adjustablefontsize');
    var currentsize=parseInt(el.css('font-size'));
    if(currentsize<maxsize){
        el.css('font-size',currentsize+4);
    }


});

$('#sizedown').on('click', function(){
    var el=$('.adjustablefontsize');
    var currentsize=parseInt(el.css('font-size'));
    if(currentsize>minsize){
        el.css('font-size',currentsize-4);
    }

});

edit: updated my answer (set minimum and maximum allowed font-size)

Upvotes: 2

Talysson
Talysson

Reputation: 1403

Use it like this:

$(this).css('font-size', ($(this).css('font-size') * 6) + 'px'));

Upvotes: 0

Related Questions