Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Change size of font with window or screen size

Edrol97

Bronze Coder
Hi all, I have this code that I have found through searching the web. I am by no means a JavaScript wiz, and wonder how to manipulate it to allow me to change the font size on a particular page when expanded or contracted and for mobile.


JavaScript:
/*global jQuery */
/*!
* FitText.js 1.2
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

  $.fn.fitText = function( kompressor, options ) {

    
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY
        }, options);

    return this.each(function(){

 
      var $this = $(this);

      var resizer = function () {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', resizer);

    });

  };

})( jQuery );
 
While Dave Rupert is well known in the dev world and this code is fine, it's a bit old and has accessibility implications as I recall.

I suggest using a modern method to control font size, such as this tool:
 
Hi all, I have this code that I have found through searching the web. I am by no means a JavaScript wiz, and wonder how to manipulate it to allow me to change the font size on a particular page when expanded or contracted and for mobile.


JavaScript:
/*global jQuery */
/*!
* FitText.js 1.2
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

  $.fn.fitText = function( kompressor, options ) {

   
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY
        }, options);

    return this.each(function(){

 
      var $this = $(this);

      var resizer = function () {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', resizer);

    });

  };

})( jQuery );
Hi there.

Oh boy, been while since i last time used jquery. For the record, i cant test this code now due i am at work trip, but i think you should get some clues how you could move on with your issue.

JavaScript:
/*global jQuery */
/*!
blah blah blah
*/

(function( $ ){

  $.fn.fitText = function( kompressor, options ) {

    // default compression
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY,
          'mobileBreakpoint' : 480, // mobile breakpoint
          'mobileFontSize' : 12 // default for mobile
        }, options);

    return this.each(function(){

      var $this = $(this);

      var resizer = function () {
        var currentWidth = $(window).width();
        
        if (currentWidth <= settings.mobileBreakpoint) {
          $this.css('font-size', settings.mobileFontSize + 'px');
        } else {
          $this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px');
        }
      };

      // call once to init
      resizer();

      // call when resize.
      $(window).on('resize.fittext orientationchange.fittext', resizer);

    });

  };

})( jQuery );

Here is example used with "<h1>" element

JavaScript:
$(document).ready(function() {
  $('h1').fitText(1.2, {
    minFontSize: '20px',
    maxFontSize: '40px',
    mobileBreakpoint: 600,
    mobileFontSize: 14
  });
});

The font size inside <h1> will be adjusted between 20px and 40px for "unmobile" devices.
If the screen width <= 600px, theb font size will be set to 14px.

Let me know if you get this gummy working, im curious myself too.
 

New Threads

Buy us a coffee!

Back
Top Bottom