[JS][jQuery] Zmiana rozmiaru tekstu

Awatar użytkownika
Natasha
Użytkownik
Użytkownik
Posty: 986
Rejestracja: 9 lis 2008, o 15:08
Płeć: Kobieta
Podziękował: 97 razy
Pomógł: 167 razy

[JS][jQuery] Zmiana rozmiaru tekstu

Post autor: Natasha »

Hej :)
Potrzebuję zrobić przyciski, które zmniejszają i powiększają tekst, np za pomocą jquery.
Kod znalazłam w necie i wygląda tak:

Kod: Zaznacz cały

<script type="text/javascript">
$(document).ready(function () {

	//min font size
	var min=9; 	

	//max font size
	var max=16;	
	
	//grab the default font size
	var reset = $('p').css('fontSize'); 
	
	//font resize these elements
	var elm = $('p.intro, p.ending');  
	
	//set the default font size and remove px from the value
	var size = str_replace(reset, 'px', ''); 
	
	//Increase font size
	$('a.fontSizePlus').click(function() {
		
		//if the font size is lower or equal than the max value
		if (size<=max) {
			
			//increase the size
			size++;
			
			//set the font size
			elm.css({'fontSize' : size});
		}
		
		//cancel a click event
		return false;	
		
	});

	$('a.fontSizeMinus').click(function() {

		//if the font size is greater or equal than min value
		if (size>=min) {
			
			//decrease the size
			size--;
			
			//set the font size
			elm.css({'fontSize' : size});
		}
		
		//cancel a click event
		return false;	
		
	});
	
	//Reset the font size
	$('a.fontReset').click(function () {
		
		//set the default font size	
		 elm.css({'fontSize' : reset});		
	});
		
});

//A string replace function
function str_replace(haystack, needle, replacement) {
	var temp = haystack.split(needle);
	return temp.join(replacement);
}
</script>
Ten kod działa tak, jak chcę z wyjątkiem tego, że jak się kliknie za pierwszym razem na ikonkę powiększenia, to tekst się zmniejsza, a potem dopiero się zwiększa. To samo z pomniejszeniem.
Czy ktoś potrafiłby zmodyfikować ten kod, aby działał poprawnie? podpowiedzi pod artem nie działają.
demo
Ostatnio zmieniony 8 lut 2015, o 08:44 przez Afish, łącznie zmieniany 1 raz.
Powód: Staraj się lepiej dobierać nazwy tematów, tak by wskazywały o czym jest treść zadania.
Gouranga
Użytkownik
Użytkownik
Posty: 1565
Rejestracja: 16 maja 2013, o 17:56
Płeć: Mężczyzna
Lokalizacja: Trójmiasto
Podziękował: 11 razy
Pomógł: 243 razy

[JS][jQuery] Zmiana rozmiaru tekstu

Post autor: Gouranga »

pierwsze co mi się rzuca w oczy to to miejsce:

Kod: Zaznacz cały

//increase the size
         size++;
         
         //set the font size
         elm.css({'fontSize' : size});
size przechowuje liczbę bez dopisku "px" (usunięto go przez str_replace)
przed wdrożeniem go do css wypadałoby te px dopisać z powrotem

inna sprawa co jeśli początkowa wielkość fontu jest poza zadanym zakresem 9-16 określonym jako min/max
ODPOWIEDZ