Witam.
Na wielu stronach (np https://www.gdynia.pl ) są ikonki do powiększania i pomniejszania czcionki na stronie oraz zmieniania stylu strony na czarno-biały (w "żałobie").
W jaki sposób jest to zrobione? Jak to mogę zrobić u siebie na stronie?:) Są to jakieś gotowe rozwiązania?
Tutaj masz:
https://codepen.io/jamesbarnett/pen/LChqb
https://www.aspsnippets.com/Articles/Allow-site-visitors-to-change-Increase-and-decrease-font-size-using-JavaScript-or-jQuery.aspx
https://stackoverflow.com/questions/27172963/easy-way-to-change-the-fontsize-of-the-whole-html-document
https://stackoverflow.com/questions/14799291/using-buttons-for-changing-font-size-for-the-whole-website-using-javascript
Zrobiłem na szybko przykład ilustrujący, jak można zrobić mechanizm zwiększania czcionki na stronie.
Rzuć okiem i powiedz, czy rozumiesz jak to działa - https://jsfiddle.net/4kzbhy9o/
Tak, dziękuje. Czyli generalnie wszystkie czcionki na stronie muszą mieć określoną klasę żebym mógł je powiększać?
Możesz zmienić rozmiar fontu tylko na body
jeśli we wszystkich pozostałych miejscach używasz relatywnych rozmiarów (rem
lub procentów).
To zależy od tego, co chcesz osiągnąć. Czy chcesz wszystkie elementy powiększyć, czy tylko część.
Mój przykład miał na celu pokazać, jak możesz sobie pobrać określony element i go powiększyć.
To, co podesłał @czysteskarpety bardziej dotyczy całości strony. W szczególności zwróć uwagę na 2 ostatnie linki. Masz tam m.in fragment
function myFunction() {
var arr = document.getElementsByTagName('p');
for (var i = 0; i < arr.length; i++) {
arr[i].style.fontSize = "1.5em";
}
}
Musisz się sam zastanowić, co i jak chcesz powiększać/zmniejszać. Możliwości masz pełno - możesz działać tylko na wybranych ID, możesz na klasach, możesz też na określonych tagach (jak w podanym powyżej przykładzie - na elementach <p>
).
Dziękuję bardzo za pomoc :)
W jaki sposób "zapamiętać" że stronka ma być powiększona przy przejściach pomiędzy podstronami?
Jak osiągnąć ten efekt "żałoby"?
Przychodzą mi do głowy dwie rzeczy:
- sesje
- cookies