I'd like to let the user select what font size they would like, and it increases the font size of only #text. Now I tried a few different things but nothing seemed to work. I just want it so the can click up or down arrow and it makes it larger by 1px each time they click. However only a range from 10-80 otherwise it will give an error.
I will post the code below for the html and js. Gonna keep working on it since I got the colors, font family, and bold/italic buttons to work already.
Thank you
HTML/JS
**<select id="font">
<h2>Font Size</h2>
<input type="text" name="font" value="15" id="font" /> px
<br /><span id="sizeWarning"></span>
</select>**
$(document).ready(function() {
$('#buttonup').click(function(){
curSize= parseInt($('#text').css('font-size')) + 2; if(curSize<=20)
$('#text').css('font-size', curSize);
});
$('#buttondown').click(function(){
curSize= parseInt($('#text').css('font-size')) - 2;
if(curSize>=12)
$('#text').css('font-size', curSize);
});
});
Made a simple example (updated, added some checking that font-size only 10-80):
Demo: http://jsfiddle.net/XfHR7/2/
JS:
$("#up").click(function () {
var currentSize = $("#text").css("font-size");
currentSize = currentSize.replace(/[^\d.]/g, "");
currentSize++;
if(currentSize < 10 || currentSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + currentSize + "px");
}
});
$("#down").click(function () {
var currentSize = $("#text").css("font-size");
currentSize = currentSize.replace(/[^\d.]/g, "");
currentSize--;
if(currentSize < 10 || currentSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + currentSize + "px");
}
});
$("input#inputSize").on("keyup change", function () {
var newSize = $(this).val();
if(newSize < 10 || newSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + newSize + "px");
}
});
HTML:
<p id="text">Text, yay!</p>
<span id="up">Up</span><br />
<span id="down">Down</span><br />
change size via input: <input id="inputSize" type="number" step="1" value="20" max="80" min="10" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.