Witam serdecznie.
Chciałbym zrobić na swojej stronie zmianę rozmiaru czcionki. Tzn. 2 guziczki (powiększ i pomniejsz) po kliknięciu których czcionka w wybranych klasach zostanie powiększona.
Klasy które chciałbym powiększyć to: .tytul, .tresc, .zajawka. Każda klasa ma inny rozmiar.
Aktualnie mam taki kod:
$(document).ready(function ($) {
if (typeof localStorage.font === 'undefined') {
localStorage.font = 0;
}
loadSettings();
$(".fontSizeChanger1").click(function (e) {
if (localStorage.font < 3) {
addValues();
}
});
$(".fontSizeChanger2").click(function (e) {
if (localStorage.font > 0) {
removeValues();
}
});
function loadSettings() {
if (localStorage.font != 0 ) {
$(".tytul *").css('font-size', '+=' + localStorage.font);
$(".tresc *").css('font-size', '+=' + localStorage.font);
$(".zajawka *").css('font-size', '+=' + localStorage.font);
}
}
function removeValues() {
localStorage.font = parseInt(localStorage.font) - 1;
loadSettings();
}
function addValues() {
localStorage.font = parseInt(localStorage.font) + 1;
loadSettings();
}
});
Rozwiązanie o którym mówię znajduje się np tutaj:
- gdynia.pl
- http://bip.zawiercie.powiat.finn.pl
Mógłbym prosić o pomoc z tym kodem?
Aktualnie nie powiększa i pomniejsza :( Chciałbym zwiększać i pomniejszać czcionki w wybranych klasach o 1px.
Czyli domyślnie mam 0 (oryginalny rozmiar czcionki z CSS) - i po kliknięciu powiększam o 1px - max 3 px.
Bardzo proszę o pomoc :)
Strona docelowa jest wykonana na Bootstrapie