I am pretty new to using Javascript. I have been reading around and now seem to have a script which would allow my user to click a button to increase the font size across the page whether the text is in a table or not as long as it is in <p> </p>.
What I would like to do is use the same button to let the user increase the size of the font and also the size of an image. Basically I want a page that allows the user to increase the size of everything on the page through the click of a button.
Any suggestions welcome and thanks for reading!
<script>
var min=12;
var max=20;
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}
}
<p>Click on the buttons below to select a font size!</p>
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p>testing 123</p></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Thanks very much for the reply and what a great picture you chose! ha!
How would I combine the script so that the same button increased the size of the text and the size of all pictures I have on the page rather than a seperate button for each?
I really appreciate the code and your help. Hopefully when I become a little more experienced I will be able to offer the same help to someone else!
this is driving me crazy! Is it possible to have a script which will allow a + and - button on a page to increase or decrease the size of all text and images with just one click?
Yes, it possible, but not desirable when it comes about images. Web displays' space is a bit-mapped space, not a vectorial one, so that any forced change of the size of an image (without using a compression algorithm) will end in a disgraceful distortion.
thanks for your response but it is something I need to be able to provide my visitors the option to do.
I will have a page with text and images. When the page first loads everything will be optimum sized. I then want two buttons. One that when clicked it changes the font size of the text from 12 to 16 and also then changes all my images to a big image I will have on my web server.
So IMAGE1.JPG will change to IMAGE1_big.jpg, IMAGE2.jpg will change to IMAGE2_big.jpg and so on and all text on the page will goto font size 16 when the + button is clicked.
When the - button is clicked IMAGE1.JPG will change to IMAGE1_small.jpg and so on and so on
Can anyone suggest any javascript that might allow me to do this?
Make it clear: do you need only 2 values: size 12 and size 16? Or do you have a continuous range from 12 to 16? In the later case, do you have similar ranges for all the images, as well?
Hi I hope the following clarifies what I am trying to do
I want a standard webpage where the user has 3 options for size of everything on that webpage controlled by 3 buttons (1 will make everything bigger, 1 will make everything smaller and 1 will reset). The images will be a variety of sizes on a standard webpage, some will be in tables some are just floating. I effectively want to produce 3 sizes of my webpages which can be accessed by a click of a button.
Size 1 will be normal and will be loaded when the user first goes to the site
Size 2 will appear when a + button is clicked and will be a larger webpage where the font size will go from size 12 to size 16 and images will be replaced by a bigger image which will be appended with with _big.jpg
Size 3 will be actived by a - button where the font size will goto size 8 and all images will be replaced with a smaller image that has _small.jpg at the end of the standard file name
I hope that makes a bit more sense and thanks for your time and help
some changes done to the script above. i hope you easily fit it to what you want
Code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
*{font-size:12px;font-family:Georgia,Verdana,Arial;}
td{text-align:center;}
input{margin-left:5px;margin-right:5px;}
#gear{position:fixed;top:30px;right:30px;border:1px dashed #ccc;padding:10px;}
#indicator{margin-top:3px;margin-bottom:3px;}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type="text/javascript">
/* for best results let's use JQuery
first we define tags where we are going to change the text-size
(some tags we may decide not to change - buttons or smth else)
*/
var tags=['span','td','th','b','i','img'];
function changeAllSize(tags_arr,textMin,textMax,direction,img_step){
if(!tags_arr){
// if we leave the first argument empty the function will try to change all the elements
$('*').each(function(){
try{
// ELEMENTS
var s=($(this).css('font-size'))?(parseInt($(this).css('font-size').replace("px",""))):textMin;
if(direction=='down'&&s!=textMin){s-=1;}
if(direction=='up'&&s!=textMax){s+=1;}
$(this).css('font-size',s+'px');
// remove the line below later
$('#indicator').html('<b>'+s+'</b> px');
// IMAGES
if($(this).is('img')){
// let's prevent resizing images if the font-size is min or max
if(s!=textMin && s!=textMax){
var w=$(this).width();if(direction=='down'){w-=img_step;}if(direction=='up'){w+=img_step;}$(this).attr('width',w);
// remove the line below later
$(this).attr('title','width = '+$(this).width()+'; height = '+$(this).height()+'; ratio = '+($(this).width()/$(this).height()).toFixed(2));
}
}
}
catch(e){}
});
}
else{
// now if the first argument is defined the function will try to change only the elements from the tags array
// this part may have some bugs i haven't tested it good enough
// so you can just delete this ELSE statement
for(var i=0;i<tags.length;i++){
$('*').each(function(){
if($(this).is(tags[i])){
try{
// ELEMENTS
var s=($(this).css('font-size'))?(parseInt($(this).css('font-size').replace("px",""))):textMin;
if(direction=='down'&&s!=textMin){s-=1;}
if(direction=='up'&&s!=textMax){s+=1;}
$(this).css('font-size',s+'px');
// IMAGES
if('img'==tags[i]){var w=$(this).width();if(direction=='down'){w-=img_step;}if(direction=='up'){w+=img_step;}$(this).attr('width',w);}
}
catch(e){}
}
});
}
}
}
</script>
</head>
<body>
<center>
<span>some text in SPAN</span>
<div id="gear">
<input type="button" value="Decrease all" onclick="javascript:changeAllSize('',12,24,'down',10);" /><input type="button" value="Increase all" onclick="javascript:changeAllSize('',12,24,'up',10);" />
<div id="indicator"></div>
<input type="button" value="Decrease certain tags" onclick="javascript:changeAllSize('tags',12,24,'down',10);" /><input type="button" value="Increase certain tags" onclick="javascript:changeAllSize('tags',12,24,'up',10);" />
</div>
<table align="center" width="900" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr><td><p>some text in P</p></td></tr>
<tr><td><div>some text in DIV</div></td></tr>
<tr><td>some text in TD</td></tr>
<tr><td><img src="http://www.celebrus.ru/uploads/posts/2009-10/adrianne-curry-bikini-boobs-01.jpg" alt="boobs" /></td></tr>
</tbody>
</table>
</center>
</body>
</html>
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
The script provided padonak is almost perfect. I could do with a little more help though if possible as I can't quite get it to behave as I need.
So on my webpage I will have images of different size and sections of text with different font sizes.
What I would like to do is have 3 buttons for a user which can be labelled 1, 2, 3
If 1 is the standard size of all the images and fonts as the page has designed and is as displayed when the page is first loaded.
I would then like the user to be able to click the button labelled 2 and everything increases in size (images, tables, text in paragraphs, text in divs, text in spans). When the 2 button is clicked I would like the text to increase by 4 font size points from the original size and the images to also increase with the same scale.
When the button labelled 3 is clicked then I would like everything to increase with the text increasing by 8 font points from the original text size (so text that was originally size 12 would become size 20 and text that was size 24 would become size 32). Again I would also need everything else to increase within the same scale.
I would also like the user to be able to jump from size 3 back down to size 1 and all the other possible combinations
An example of the behaviour I am trying to get can be seen on the following site
script to increase text and image size
Reply With Quote
Bookmarks