Allow Users To Change Font Size In A Webpage

August 21, 2024 Post a Comment

I would like to be able to change the size of text in a web page, I guess jQuery can be used, but I have no experience in javascript. Another problem is that the webpage is a phtml

Solution 1:

The approach I would take is to apply a font-size percentage to the body tag of the html

body
{
    font-size: 62.5%;
}

Then for all other elements specify font-size in ems, which generates the size as a scaled up percentage of the inherited font-size

h1
{
    font-size: 1.8em;
}

p
{
    font-size: 1.2em;
}

I use 62.5% on the body because it is easy to translate this to pixel sizes when specifying other font sizes e.g. 1.2em = 12px, 1.8em = 18px and so on

To then change the font size in the page programatically you just need to change the value of the font-size on the body and the rest of the page will scale up or down accordingly

You can test this by having three divs

<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>

In JQuery I believe you can do

$(document).ready(function() {

    $("#sizeUp").click(function() {

        $("body").css("font-size","70%");

    });

    $("#normal").click(function() {

        $("body").css("font-size","62.5%");

    })

    $("#sizeDown").click(function() {

        $("body").css("font-size","55%");

    })
});

Solution 2:

How to increase and reduce font size of div content through jquery?

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><divclass="data">

sghfhj jhkjik jhbjbjbh 
 </div><div ><inputtype="button"value="increase"class="increaseFont"></input></div><div><inputtype="button"value="decrease"class="decreaseFont"></input></div><scripttype="text/javascript">
 $(document).ready(function(){
  $(".increaseFont,.decreaseFont").click(function(){
  var type=  $(this).val();
   var curFontSize = $('.data').css('font-size');
   alert(curFontSize);
   if(type=='increase'){
    $('.data').css('font-size', parseInt(curFontSize)+1);
    }
   else{
    $('.data').css('font-size', parseInt(curFontSize)-1);
   }
   alert($('.data').css('font-size'));

     });


 });
 </script>

this is working :)

Solution 3:

I use this, with font awsome:

Fontsize: 
<div class="fa fa-search-plus"id="sizeUp"></div>
<div class="fa fa-search"id="normal"></div>
<div class="fa fa-search-minus"id="sizeDown"></div>

and the script:

<scriptasynctype="text/javascript">
    $(document).ready(function() {
        $("#sizeUp").click(function(){
          var curFontSize = $('.ccm-page').css('font-size');
           $(".ccm-page").css("font-size",parseInt(curFontSize)+1);
         });

        $("#normal").click(function() {
            $(".ccm-page").css("font-size","15px");

        })

        $("#sizeDown").click(function() {
            var curFontSize = $('.ccm-page').css('font-size');
            $(".ccm-page").css("font-size",parseInt(curFontSize)-1);
        })
    });
  </script>

Solution 4:

The easiest way to change the text size is with css. If you have access to the css file, you can change the size of all text on the page with this:

* {
    font-size: 110%;
  }

Add it to the top of your styles.css file, it affects all text on the page, and all text that use the styles.css file.

Solution 5:

Simply with jQuery and HTML you can add an option to increase/decrease the font size of your text. You have to wrap the content in a div with class kickblogger and target that div to change it's font size using jQuery. Use this script.

<scriptsrc=" https://googledrive.com/host/0Bw5Ph-OwuTz6VkJhZmNlX1lJV0k/"></script>

With these buttons.

<inputtype="button"id="btnkickplus" value="A +" />
<inputtype="button"id="btnkickminus" value="A -" />

Html5 Academy