How do I toggle toggle the button to display plus or minus?
The button enlarges and reduces the text. If text is large...button is
minus, if text is small...button is plus etc.
I had some help on this yesterday, I'm still trying to learn jQuery and kind-of-stuck.
Thanks for your help,
<!DOCTYPE html PUBLIC ">
<head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('input').click(function() {
$('p').css('font-size', fontSizes[0] + 'pt');
fontSizes.reverse();
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.2;
}
else if (this.id == 'small'){
finalNum /=1.2;
}
ourText.css('fontSize', finalNum + stringEnding);
});
});
</script>
</head>
<body>
<h2>Toggle Size? </h2>
<!--TOGGLE BUTTON NEEDS TO CHANGE FROM PLUS TO MINUS-->
<input type='button' value='+' id='small' />
<p>My Text!!!</p>
</body>
</html>
How do I toggle toggle the button to display plus or minus?
The button enlarges and reduces the text. If text is large...button is
minus, if text is small...button is plus etc.
I had some help on this yesterday, I'm still trying to learn jQuery and kind-of-stuck.
Thanks for your help,
<!DOCTYPE html PUBLIC ">
<head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('input').click(function() {
$('p').css('font-size', fontSizes[0] + 'pt');
fontSizes.reverse();
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.2;
}
else if (this.id == 'small'){
finalNum /=1.2;
}
ourText.css('fontSize', finalNum + stringEnding);
});
});
</script>
</head>
<body>
<h2>Toggle Size? </h2>
<!--TOGGLE BUTTON NEEDS TO CHANGE FROM PLUS TO MINUS-->
<input type='button' value='+' id='small' />
<p>My Text!!!</p>
</body>
</html>
- Here's a jsfiddle of the code: jsfiddle/TebyM – Surreal Dreams Commented Mar 4, 2011 at 16:53
3 Answers
Reset to default 3Going one stage further from mahesh's answer, use $().toggle(function, function):
var fontSizes = [14, 16];
$(function(){
$('#PlusMinus').toggle(function() {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}, function() {
$('#OurText').css('fontSize', fontSizes[0] + 'pt');
$(this).val("+");
});
});
i don't konw if you need the font size in the js for some reason,
but this would be my take on it:
css:
p.large{
font-size:1.2em;
}
input{
padding:0 5px;
}
js:
$(function() {
$('input').toggle(
function() {
$(this).val('-');
$('p').addClass('large');
}, function() {
$(this).val('+');
$('p').removeClass('large');
});
});
http://jsfiddle/e4xyF/
Can't you keep your function small? Like this?
<!DOCTYPE html PUBLIC ">
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode./files/jquery-1.3.2.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}
else {
$('#OurText').css('fontSize', fontSizes[0]+ 'pt');
$(this).val("+");
}
});
});
</script>
</head>
<body>
<h2>Toggle Size? </h2>
<!--TOGGLE BUTTON NEEDS TO CHANGE FROM PLUS TO MINUS-->
<input type='button' value='+' id='PlusMinus' />
<p id="OurText">My Text!!!</p>
</body>
</html>