Size changing paragraphs in web page - html

Question

I'm a bit new to web dev, I want to have a box with text in it that can change sizes with an + or - without reloading the page it's in. How could I do that?

Answer 1

Using javascript you can change properties of some elements, like the font-size.
look this example : http://net.tutsplus.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/

Answer 2

For simplicity, you can use jQuery for this.
A simple line like this, can achieve what you want:
$(function() {
size = 10;
$('#bigger').live('click', function() {
size++;
$('p').css('font-size', size + "px");
});
$('#smaller').live('click', function() {
size--;
$('p').css('font-size', size + "px");
});
});​
See live demo here

Answer 3

Try something like this (try it out here: http://jsfiddle.net/Czauu/):
HTML:
<div id="textdiv">This is the text that will change size</div>
+ <!-- link to increase size -->
- <!-- link to decrease size -->
CSS:
#textdiv{ font-size:1em;} <!-- You MUST set initial font-size -->
JQuery:
$(document).ready(function(){ //code is only executed when page is fully loaded
$("#increase").click(function(){ // triggered when the #increase link is clicked
size = parseFloat($('#textdiv').css('font-size'), 10); //get current size
$('#textdiv').css('font-size', size*1.2); // increase size
return false; // prevent the link action
});
$("#decrease").click(function(){ // #decrease link is clicked
size = parseFloat($('#textdiv').css('font-size'), 10); //get current size
$('#textdiv').css('font-size', size*0.8); //decrease size
return false;
});
});

Answer 4

You can use Javascript to implement it.
Basically, you need to do something like this:
var plus_btn = $("#increase"),
minus_btn = $("#decrease"),
contents = $("#box > p"),
size;
size = parseInt(contents.css("font-size")); //current font-size
plus_btn.click("click",function(e){
size++;
contents.css("font-size",size+"px");
});
minus_btn.click("click",function(e){
size--;
contents.css("font-size",size+"px");
});
I wrote a small smaple in jsfiddle, you can check out this