www.webdeveloper.com
Results 1 to 11 of 11

Thread: script to increase text and image size

  1. #1
    Join Date
    Apr 2012
    Posts
    10

    Smile script to increase text and image size

    Hi Guys

    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"
    }
    }

    <body>
    <input type="button" value="-" onClick="javascript:decreaseFontSize();"/>
    <input type="button" value="+" onClick="javascript:increaseFontSize();"/>

    <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>&nbsp;</td>
    </tr>
    </table>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    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;}
    #indicator{display:inline;padding:5px;}
    </style>
    <script type="text/javascript">
    var min=12,max=20;
    function changeSize(){
    var elems=changeSize.arguments[0],
    direction=changeSize.arguments[1],
    // we can define scaling step, if skipped it will be 1
    step=(typeof(changeSize.arguments[2])!='undefined')?changeSize.arguments[2]:1,
    arr=eval("document.getElementsByTagName('"+elems+"')");
    if(elems!='img'){
    for(var i=0;i<arr.length;i++){
    var s=(arr[i].style.fontSize)?(parseInt(arr[i].style.fontSize.replace("px",""))):min;
    if(direction=='down'&&s!=min){s-=1;}
    if(direction=='up'&&s!=max){s+=1;}
    arr[i].style.fontSize=s+"px";
    document.getElementById('indicator').innerHTML='<b>'+s+'</b> px';
    }
    }
    else{
    for(var i=0;i<arr.length;i++){
    var w=(arr[i].width)?(arr[i].width):(arr[i].offsetWidth),
    h=(arr[i].height)?(arr[i].height):(arr[i].offsetHeight);
    if(direction=='down'){h-=step;w-=step;}
    if(direction=='up'){h+=step;w+=step;}
    arr[i].width=w;arr[i].height=h;
    }
    }
    }
    </script>
    </head>
    <body>
    <center>
    <p>Click on the buttons below to select a font size!</p>
    <div><input type="button" value="-" onclick="javascript:changeSize('p','down');" /><div id="indicator"></div><input type="button" value="+" onclick="javascript:changeSize('p','up');" /></div>
    <table align="center" width="900" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr><td><p>testing 123</p></td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td><img src="http://www.celebrus.ru/uploads/posts/2009-10/adrianne-curry-bikini-boobs-01.jpg" alt="boobs" /></td></tr>
    <tr><td>
    <input type="button" value="-" onclick="javascript:changeSize('img','down');" /><input type="button" value="+" onclick="javascript:changeSize('img','up');" />
    <br /><br />
    <input type="button" value="-" onclick="javascript:changeSize('img','down',10);" title="Step 10" /><input type="button" value="+" onclick="javascript:changeSize('img','up',10);" title="Step 10" />
    </td></tr>
    </tbody>
    </table>
    </center>
    </body>
    </html>
    Last edited by Padonak; 04-21-2012 at 02:22 PM.

  3. #3
    Join Date
    Apr 2012
    Posts
    10
    Hi Padonak

    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!

    thanks again in advance

  4. #4
    Join Date
    Apr 2012
    Posts
    10

    Question

    Hi all

    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?

    Any help would be great

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  6. #6
    Join Date
    Apr 2012
    Posts
    10
    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?

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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?

  8. #8
    Join Date
    Apr 2012
    Posts
    10

    Red face

    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

  9. #9
    Join Date
    Apr 2012
    Posts
    10
    I am hoping that the buttons will effectively work as a zoom in and a zoom out of my main page for the user

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    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>

  11. #11
    Join Date
    Apr 2012
    Posts
    10
    Thanks for everyones help so far.

    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

    http://www.contact-associates.co.uk/...ntres/taunton/

    any help would be massively appreciated!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles