Zmiana rozmiaru czcionki na stronie w jQuery

0

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:

  1. gdynia.pl
  2. 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

2

Ja tak w kwestii formalnej: nie baw się w manipulowanie rozmiarem fontu w poszczególnych klasach, tylko manipuluj rozmiarem czcionki w BODY, a tym, które mają się dostosowywać, ustaw w CSS rozmiar relatywny. Skrypt będzie prostszy i nie będziesz go musiał przerabiać, jak przyjdzie ci do głowy dopisać kolejną klasę ze zmieniającym się rozmiarem.

0

tzn dlaczego przez Body, a nie klasy? Pomogłabyś mi z tym moim kodem?

0
baracadus napisał(a):

tzn dlaczego przez Body, a nie klasy?

Bo łatwiej coś nosić w worku, niż każdą rzecz z osobna.

Pomogłabyś mi z tym moim kodem?

Mogę coś napisać w czystym JS.

0
Freja Draco napisał(a):
baracadus napisał(a):

tzn dlaczego przez Body, a nie klasy?

Bo łatwiej coś nosić w worku, niż każdą rzecz z osobna.

Pomogłabyś mi z tym moim kodem?

Mogę coś napisać w czystym JS.

Jeśli to nie problem, to poproszę :)

0

Proszę:

<!DOCTYPE html>
<html>
<head>
  <title>tytuł</title>

<script>
function czcionka_zmien_rozmiar(punktow) {
  var e = document.getElementsByTagName("BODY")[0];  // łapie element BODY  
  var style = window.getComputedStyle(e);            // czyta CSS BODY
  var rozmiar = style.getPropertyValue('font-size'); // wydobywa rozmiar z CSS
  rozmiar = rozmiar.replace("px", "");               // obcina końcowe px
  rozmiar = rozmiar * 1;                             // wymusza format liczbowy zmiennej
  rozmiar = rozmiar + punktow;                       // powiększa / pomniejsza  
  e.style.fontSize = rozmiar + "px";                 // przypisuje BODY nowy rozmiar
  localStorage.setItem("rozmiar", rozmiar);          // zapisuje nowy rozmiar w magazynie
}  

function czcionka_ustaw_zapisany_rozmiar() {
  var rozmiar = localStorage.getItem("rozmiar");       // odczytuje z magazynu zapisany rozmiar
  if (rozmiar!==null) {
    var e = document.getElementsByTagName("BODY")[0];  // łapie element BODY  
    e.style.fontSize = rozmiar + "px";                 // przypisuje BODY odczytany z magazynu rozmiar
  }
}

// uruchom funkcję "czcionka_ustaw_zapisany_rozmiar" po załadowaniu drzewa dokumentu
document.addEventListener("DOMContentLoaded", czcionka_ustaw_zapisany_rozmiar);
</script>


<style>
  H1 {font-size:2em;}
  p.niezmienny {font-size:14px;}
</style>

</head>
<body>

<h1>Jestem nagłówkiem H1 o rozmiarze 2em</h1>
Jestem tekstem.<br><br>
<p class="niezmienny">A ja jestem wredny akapit, co się nie zmienia</p><br>

<button onclick="czcionka_zmien_rozmiar(1);">powiększ</button>
<button onclick="czcionka_zmien_rozmiar(-1);">pomniejsz</button>
  
</body>
</html>
0
Freja Draco napisał(a):

Proszę:

<!DOCTYPE html>
<html>
<head>
  <title>tytuł</title>

<script>
function czcionka_zmien_rozmiar(punktow) {
  var e = document.getElementsByTagName("BODY")[0];  // łapie element BODY  
  var style = window.getComputedStyle(e);            // czyta CSS BODY
  var rozmiar = style.getPropertyValue('font-size'); // wydobywa rozmiar z CSS
  rozmiar = rozmiar.replace("px", "");               // obcina końcowe px
  rozmiar = rozmiar * 1;                             // wymusza format liczbowy zmiennej
  rozmiar = rozmiar + punktow;                       // powiększa / pomniejsza  
  e.style.fontSize = rozmiar + "px";                 // przypisuje BODY nowy rozmiar
  localStorage.setItem("rozmiar", rozmiar);          // zapisuje nowy rozmiar w magazynie
}  

function czcionka_ustaw_zapisany_rozmiar() {
  var rozmiar = localStorage.getItem("rozmiar");       // odczytuje z magazynu zapisany rozmiar
  if (rozmiar!==null) {
    var e = document.getElementsByTagName("BODY")[0];  // łapie element BODY  
    e.style.fontSize = rozmiar + "px";                 // przypisuje BODY odczytany z magazynu rozmiar
  }
}

// uruchom funkcję "czcionka_ustaw_zapisany_rozmiar" po załadowaniu drzewa dokumentu
document.addEventListener("DOMContentLoaded", czcionka_ustaw_zapisany_rozmiar);
</script>


<style>
  H1 {font-size:2em;}
  p.niezmienny {font-size:14px;}
</style>

</head>
<body>

<h1>Jestem nagłówkiem H1 o rozmiarze 2em</h1>
Jestem tekstem.<br><br>
<p class="niezmienny">A ja jestem wredny akapit, co się nie zmienia</p><br>

<button onclick="czcionka_zmien_rozmiar(1);">powiększ</button>
<button onclick="czcionka_zmien_rozmiar(-1);">pomniejsz</button>
  
</body>
</html>

Dziękuję bardzo :) A gdybym chciał powiększać tylko wybrane elementy na stronie? Np. treści (klasa .tresc, .tytul, .menu)?

0

Generalnie na stronie chciałbym powięszyć menu + tytuły, opisy itp. Wybrane elementy.
W tej chwili jak dodałem Twój kod do swojej strony - to powiększają mi się Twoje elementy, a nie np. cała strona. Dlaczego tak jest?:)

0
baracadus napisał(a):

W tej chwili jak dodałem Twój kod do swojej strony - to powiększają mi się Twoje elementy, a nie np. cała strona. Dlaczego tak jest?:)

 H1 {font-size:2em;}

em - Relative to the font-size of the element (2em means 2 times the size of the current font)

https://www.w3schools.com/cssref/css_units.asp

0
Freja Draco napisał(a):
baracadus napisał(a):

W tej chwili jak dodałem Twój kod do swojej strony - to powiększają mi się Twoje elementy, a nie np. cała strona. Dlaczego tak jest?:)

 H1 {font-size:2em;}

em - Relative to the font-size of the element (2em means 2 times the size of the current font)

https://www.w3schools.com/cssref/css_units.asp

Ok. W chwili obecnej mam gotową stronę i na niej są PX. Czy da się to jakoś zrobić na PXach?

0
baracadus napisał(a):

Ok. W chwili obecnej mam gotową stronę i na niej są PX. Czy da się to jakoś zrobić na PXach?

Da się, jeśli chce ci się bawić w manipulowanie font-size osobno dla każdej klasy.

0

Dzięki :) Generalnie działa tak, jakbym chciał :) Potrzebuję jeszcze jedną rzecz, albo ustalenie maksymalnej wielkości powiększenia na +10 lub opcję przywrócenia domyślnych wartości. Jak to zrobić?:)

0

Pomyśl.
Kod jest prosty i łopatologicznie opisany :)

1

Na prośbę autora wersja z resetem o ograniczeniem zakresu zmian rozmiaru:

<!DOCTYPE html>
<html>
<head>
  <title>tytuł</title>

<script>
function czcionka_zmien_rozmiar(punktow) {
  var rozmiar_pierwotny=14;
  var rozmiar_min = 10;
  var rozmiar_maks = 20;
  
  var e = document.getElementsByTagName("BODY")[0];  // łapie element BODY  
  var style = window.getComputedStyle(e);            // czyta CSS BODY
  var rozmiar = style.getPropertyValue('font-size'); // wydobywa rozmiar z CSS
  rozmiar = rozmiar.replace("px", "");               // obcina końcowe px
  rozmiar = rozmiar * 1;                             // wymusza format liczbowy zmiennej
  rozmiar = rozmiar + punktow;                       // powiększa / pomniejsza  
  
  if (punktow==0) rozmiar = rozmiar_pierwotny;       // przywróć pierwotny rozmiar
  if (rozmiar<rozmiar_min) rozmiar = rozmiar_min;    // dolne ograniczenie rozmiaru
  if (rozmiar>rozmiar_maks) rozmiar = rozmiar_maks;  // górne ograniczenie rozmiaru
  
  e.style.fontSize = rozmiar + "px";                 // przypisuje BODY nowy rozmiar
  localStorage.setItem("rozmiar", rozmiar);          // zapisuje nowy rozmiar w magazynie
}  

function czcionka_ustaw_zapisany_rozmiar() {
  var rozmiar = localStorage.getItem("rozmiar");       // odczytuje z magazynu zapisany rozmiar
  if (rozmiar!==null) {
    var e = document.getElementsByTagName("BODY")[0];  // łapie element BODY  
    e.style.fontSize = rozmiar + "px";                 // przypisuje BODY odczytany z magazynu rozmiar
  }
}

// uruchom funkcję "czcionka_ustaw_zapisany_rozmiar" po załadowaniu drzewa dokumentu
document.addEventListener("DOMContentLoaded", czcionka_ustaw_zapisany_rozmiar);
</script>

<style>
  H1 {font-size:2em;}
  p.niezmienny {font-size:14px;}
</style>

</head>
<body>

<h1>Jestem nagłówkiem H1 o rozmiarze 2em</h1>
Jestem tekstem.<br><br>
<p class="niezmienny">A ja jestem wredny akapit, co się nie zmienia</p><br>

<button onclick="czcionka_zmien_rozmiar(+1);">powiększ</button>
<button onclick="czcionka_zmien_rozmiar(-1);">pomniejsz</button>
<button onclick="czcionka_zmien_rozmiar(0);">resetuj</button>

</body>
</html>
0

dziękuję bardzo :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1