Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][jQuery], Powiększanie/zmniejszanie tekstu na stronie
dg2001
post
Post #1





Grupa: Zarejestrowani
Postów: 71
Pomógł: 12
Dołączył: 9.01.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----


Mam taki problem, znalazłem sobie na necie funkcje do jQuery która ładnie mi powiększa i zmniejsza tekst na stronie www. Jednak pojawia się problem jeżeli w arkuszu CSS mam przy danym elemencie zadeklarowane font-size.

Nie znam się dokładnie na jQuery, dopiero zaczynam się w to bawić, lecz może tutaj znajdę jakąś pomoc na mój problem.

Oto skrypt:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function () {
  2. var min=10;
  3. var max=18;
  4. var reset = $('#content').css('fontSize');
  5. var elm = $('#content');
  6. var size = str_replace(reset, 'px', '');
  7.  
  8. $('a.fontSizePlus').click(function() {
  9. if (size<=max) {
  10. size++;
  11. elm.css({'fontSize' : size});
  12. }
  13. return false;
  14. });
  15.  
  16. $('a.fontSizeMinus').click(function() {
  17. if (size>=min) {
  18. size--;
  19. elm.css({'fontSize' : size});
  20. }
  21. return false;
  22. });
  23.  
  24. $('a.fontReset').click(function () {
  25. elm.css({'fontSize' : reset});
  26. });
  27. });
  28.  
  29. function str_replace(haystack, needle, replacement) {
  30. var temp = haystack.split(needle);
  31. return temp.join(replacement);
  32. }
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
dg2001
post
Post #2





Grupa: Zarejestrowani
Postów: 71
Pomógł: 12
Dołączył: 9.01.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----


Pokaże to na przykładzie:

Mam taki kod na stronie:
  1. <div class="topic">Jakiś topic</div>
  2. <div class="text">Jakiś tekst</div>

Oraz CSS:
  1. .topic { color: #fff; font-size: 14px;}
  2. .text {color: #001572; padding: 10px;}


Przyciski akcji:
  1. Powiększ tekst na stronie<br /><br />
  2. <a href="#" class="fontSizePlus">Powiększ tekst</a>
  3. <a href="#" class="fontReset">Domyślna wielkość tekstu</a>
  4. <a href="#" class="fontSizeMinus">Zmniejsz tekst</a>

Oraz trzy przyciski do powiększania tekstu, resetowania do normalnej wartości i pomniejszanie tekstu.
I teraz gdy naciskam na powiększanie czy pomniejszanie tekstu, to wszytko ładnie działa tylko wyłącznie dla DIV-a text, a DIV topic się nie zmienia z powodu zadeklarowanej w CSS font-size.

Nie wiem czy jasno to wyjaśniłem ale taki mam problem

Ten post edytował dg2001 26.07.2010, 09:50:05
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 2.10.2025 - 16:35