Zwiększanie/zmniejszanie rozmiaru czcionki na stronie za pomocą guzika

squeet · 4 Sierpień 2014 09:27

Szanowni,

Mam problem z pewnym elementem na stronie. Staram się stworzyć serwis za pomocą Joomla! i napotkałem na problem. Mianowicie mam na pasku kawałek grafiki, która wygląda tak:

Mogę kliknąć minus i plus. Problem w tym, że czcionka nie zmienia rozmiaru. Dotarłem do kodu i widzę, że po prostu nic nie jest zaprogramowane. W jaki sposób mogę zmodyfikować kod, żeby móc dać Użytkownikom możliwość zmiany czcionki? Oto kod z pliku w Joomla!, który odpowiada za wyświetlanie tego kawałka:

div class="itemToolbar"
    ul
    !-- Font Resizer --
         li
         span class="itemTextResizerTitle"wielkość czcionki/span
         a href="#" id="fontDecrease"
                spanZmniejsz czcionkę/span
                img src="/dev/joomla/kickoff/components/com_k2/images/system/blank.gif" alt="Zmniejsz czcionkę"
         /a 
         a href="#" id="fontIncrease"
                spanPowiększ czcionkę/span
                img src="/dev/joomla/kickoff/components/com_k2/images/system/blank.gif" alt="Powiększ czcionkę"
         /a
         /li
    /ul     
/div

W CSS klasa itemTextResizerTitle ma taki wpis:

div.itemToolbar ul li span.itemTextResizerTitle {}

Jakby ktoś z Was mógłby mnie pokierować, jak rozwiązać tę sytuację, byłbym wdzięczny.

Pozdrawiam serdecznie.

grzelix · 5 Sierpień 2014 05:44

Kod wygląda poprawnie. Tego typu funkcjonalność najczęściej działa po stronie klienta i jest oprogramowana w javascripcie.

Czy to jest element joomla czy dodatek który doinstalowałeś?
Sprawdź javascript pod kątem wyrażeń: fontDecrease, fontIncrease to zapewne znajdziesz kod odpowiedzialny za tą funkcjonalność.

squeet · 5 Sierpień 2014 07:08

To jest rozszerzenie K2. Jest tam opcja w opcji widoku artykułu „przełącznik rozmiaru czcionki” tak/nie.

Jak ustawię TAK, wyświetla mi się ten panel z tym guzikiem, natomiast po kliknięciu nic się nie dzieje.

Żeby odnaleźć się w plikach Joomla! to jest jakiś koszmar, elementy są rozsiane w wielu miejscach.

Szukałem, ale nie udało mi się odnaleźć nic, co mógłbym edytować, żeby to działało.

grzelix · 5 Sierpień 2014 08:43

Skoro jest to plugin to kod masz w pluginie.

I tak js: k2.js

// Text Resizer
	$K2('#fontDecrease').click(function(event){
		event.preventDefault();
		$K2('.itemFullText').removeClass('largerFontSize');
		$K2('.itemFullText').addClass('smallerFontSize');
	});
	$K2('#fontIncrease').click(function(event){
		event.preventDefault();
		$K2('.itemFullText').removeClass('smallerFontSize');
		$K2('.itemFullText').addClass('largerFontSize');
	});

css: k2.css

/* --- CSS added with Javascript --- */
.smallerFontSize {font-size:100%;line-height:inherit;}
.largerFontSize {font-size:150%;line-height:140%;}

Masz gdzieś wystawioną tę stronkę żeby można sprawdzić czy te style nie są nadpisane. Może jakieś inne rozszerzenie albo js psuje to zachowanie.

a może js nie działa dobrze bo K2 ma jakiś swój obiekt

squeet · 5 Sierpień 2014 09:46

Znalazłem te pliki. Faktycznie mam w nich ten kod. Tylko to nic nie zmienia.

Zastanawiam się nad tym, jak wygląda łącze po najechaniu na te guziki.

To tytuł newsa z haszem na końcu (np. 20-testowy-tytul#). Tak ma być?

Podglądam na innych stronach, tam to jest inaczej, np. tutaj.

Niestety stronę mam na wewnętrznym serwerze i nie widać jej na świecie,

więc nie mam jak podać linka, żeby sprawdzić. Masz może pomysł,

co mógłbym sprawdzić, odnośnie tego, czy K2 ma jakiś swój obiekt?

Jeśli chodzi o to, czy inne rozszerzenie nie blokuje efektu, to trochę jak

igła w stogu siana. Chociaż nie mam ich zbyt dużo, K2 było wgrane

automatycznie w szablon, z którego korzystam.

grzelix · 5 Sierpień 2014 10:03

Mogę dać kolejne porady, tylko nie wiem czy nie przestraszę cię branżowym żargonem.

Uruchom stronę i włącz developer tools (masz chyba w każdej przeglądarce F12 lub Ctr+Shift+I (w Operze) albo poszukaj w menu narzędzia).

Znajdź javascripty i włącz debugowanie ustawiając breakpoint w kodzie o którym mówiliśmy powyżej. Jeśli to miejsce jest dostępne - po kliknieciu debuger zatrzyma się w tym kawałku kodu tzn że javascrpty są poprawnie zaczytane.

Przeglądając DOM możesz sprawdzić czy zmienia się klasa smallerFontSize na largerFontSize i odwrotnie ma selectorze itemFullText

Sprawdź czy jaki są parametry font-size i line-height kiedy wybierzesz sobie jakiś element z tekstem wewnątrz itemFullText. Należy sprawdzić czy te parametry nie są nadpisane przez jakiś kolejne selectory o większej mocy.

squeet · 5 Sierpień 2014 11:27

Wszystko idzie ok do momentu, kiedy mam ustawić „breakpoint” w kodzie i włączyć debugowanie. Nie umiem tego zrobić.

W ogóle w Developer Tools nie widać kodu js, tego, o którym rozmawiamy. Zauważyłem, że przy klasie CSS związanej z tekstem, który chciałbym powiększać i pomniejszać był użyty parametr !important. Został usunięty,

na chwilę zadziałało (piszę tu o podglądzie w przeglądarce). Zmieniłem więc w plikach, ale okazało się, że nadal jest problem. W podglądzie w przeglądarce zauważyłem, że kod z pliku k2.css jest obecny, zmienia się, ale jest przekreślony. Szukam po plikach, gdzie mogę coś jeszcze zmienić, ale ciężko mi to idzie szczerze mówiąc.

grzelix · 5 Sierpień 2014 11:36

Powiem, że jesteś na dobrej drodzie. Jeśli w stylach widzisz przekreśloną wartść z selector k2.css to znaczy że niżej masz taką samą właściwość ale o większej sile. Musisz zobaczyć przy jakim selectorze jest nie przekroślona wartość i ustalić co z nią zrobić. (Pewnie usunąć).

squeet · 5 Sierpień 2014 12:56

Udało mi się. Trzeba było wprost w klasie, która zawierała instrukcje CSS dla tekstu usunąć font-size: 100%;

Nawet bez parametru !important widocznie nie chciał wpuścić.

Dziękuję za pomoc.

k2userjoomla · 28 Styczeń 2017 12:39

sorki za kotleta, ale mam też z tym problem.

Joomla 365.
Komponent K2 i tam ta opcja zmniejszania czcionki.

Jeżeli piszę artykuł np z <h3>Zapraszamy</h3>

gdzie w css mam:

.css-postcontent h3



{



  color: #FFD400;



  margin-top: 18px;



  margin-bottom: 12px;



 font-size: 28px;



  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;



  font-weight: bold;



  font-style: normal;



  text-align: left;



}

to wtedy powiększanie, pomniejszanie nie działa, ale ruchy jakieś nad tekstem sa.
a jak usunę z css font-size:28 px to wtedy powiększanie i pomniejszanie działa, ale za to domyślnie czcionka jest mała, jak to zrobić, żeby przy wybraniu h3 była jednak ustawiona jakaś wielkość czcionki, i dopiero wtedy jej powiększanie i pomniejszanie ?

rozwiązałem problem, nie wiem czy fachowo, ale efekt zamierzony póki co jest.

w pliku components/com_k2/css/k2.css

w linijce ~ 67

/* — CSS added with JavaScript — */

wykasowałem tamto co było i dopisałem .css-postcontent przed .smallerfrontsize i po tym jeszcze h1, h2… itd
i na koncu dopisałem jeszcze .css-layout-cell

czyli ogolnie tak jak idzie:

.css-postcontent .smallerFontSize h1 {font-size:100% ;line-height:inherit;}
.css-postcontent .largerFontSize h1 {font-size:200% ;line-height:140%;}
.css-postcontent .smallerFontSize h2 {font-size:100% ;line-height:inherit;}
.css-postcontent .largerFontSize h2 {font-size:200% ;line-height:140%;}
.css-postcontent .smallerFontSize h3 {font-size:100% ;line-height:inherit;}
.css-postcontent .largerFontSize h3 {font-size:200% ;line-height:140%;}
.css-postcontent .smallerFontSize h4 {font-size:100% ;line-height:inherit;}
.css-postcontent .largerFontSize h4 {font-size:200% ;line-height:140%;}
.css-postcontent .smallerFontSize h5 {font-size:100% ;line-height:inherit;}
.css-postcontent .largerFontSize h5 {font-size:200% ;line-height:140%;}
.css-postcontent .smallerFontSize h6 {font-size:100% ;line-height:inherit;}
.css-postcontent .largerFontSize h6 {font-size:200% ;line-height:140%;}
.css-postcontent .smallerFontSize p {font-size:100% ;line-height:inherit;}
.css-postcontent .largerFontSize p {font-size:200% ;line-height:140%;}
.css-postcontent .smallerFontSize pre {font-size:100% ;line-height:inherit;}
.css-postcontent .largerFontSize pre {font-size:200% ;line-height:140%;}

.css-layout-cell .smallerFontSize {font-size:100% ;line-height:inherit;}
.css-layout-cell .largerFontSize {font-size:200% ;line-height:140%;}

Fizyda · 28 Styczeń 2017 13:21

Nie ustawiaj font-size na sztywno bo w tedy nie reaguje zapewne na powiększanie/pomniejszanie tekstu przez skrypt (ta sama funkcja w przeglądarce będzie działała). Ustaw to w jednostkach dynamicznych np em, w tedy powinno wszystko działać.