CODEWITHSUNDEEP
jquerycss
MeltingDog
MeltingDog

Reputation: 15404

Way to increase font-size for entire site?

I can increase the font size on a single page using Jquery as such:

$(function(){
    $("#fontsizebtn").click(function() {
        $("#content").toggleClass("sizeincrease");
    });
});

That's fine. But the user will need to click the button again for each page they visit.

Is there a way to do this so it carries across to all pages? Would I need to alter a file server side, or is there another way of doing it? (Not expecting detailed answer, just point me in the right direction)

EDIT: for those saying that this question is a duplicate to: CSS - Increase Page Font Size this user seems to want to increase the text-size for a single page (which I can already achieve). I want to increase the text-size for all pages so a visitor only needs to click the increase size button once.

Upvotes: 1

Views: 444

Answers (3)

Miguel
Miguel

Reputation: 20633

In this example sessionStorage is used to retain the user's preference. sessionStorage is destroyed when the tab or browser window is closed. Use localStorage to persist after browser closed if you want.

var percent = restore() || 100;

$('#increase').click(function () {
    percent += 10;
    setFontSize(percent);
});

$('#decrease').click(function () {
    percent -= 10;
    setFontSize(percent);
});

function save(percent) {
    sessionStorage.setItem('fontSize', percent);
}

function restore() {
    percent = parseInt(sessionStorage.getItem('fontSize'));
    setFontSize(percent);
    return percent;
}

function setFontSize(percent) {
    $('body').css('fontSize', percent + '%');
    save(percent);
}

http://jsfiddle.net/tvbt0a3L/2/

Upvotes: 1

Max D
Max D

Reputation: 815

Add something like font-size:99px !important; into body in your css.

Upvotes: 0

renakre
renakre

Reputation: 8291

One idea:

You can use local-storage to store the user preference for the font-size and read their preference for each page loaded. However, their preference will be valid for the current computer only.

You can save the user preference like this:

localStorage.setItem('font-size','smallClass');

Later, you can do this:

var fontSizeClass = localStorage.getItem('font-size');
$("#content").addClass(fontSizeClass);

Upvotes: 2

Related Questions