CSS/Javascript fluid font size

Question

My application has two views, a live mode and a preview mode. Both of these have windows which can be resized. They are the same html file. I am looking for a way to get the fon

Answer 1

Sure, define a javascript object which has a function that takes in a width and height parameter. It should return your desired font size based on that width and height. Then, attach a resize event handler to your window, which calls that function you just defined and sets the font-size css property on the document body of the window.

You must use this plugin to get a resize event on an html element that is not the window: http://benalman.com/projects/jquery-resize-plugin/

var fontsize = function FontSizeBasedOnDimensions{
      var that = {};
      that.GetFontSize = function(height, width){
             //Make some decisions here
      }    
      return that;
}();

$('#yourwindow').resize(function(){
     var size = fontsize.GetFontSize($(this).css('height'), $(this).css('width'));
     var currentsize = parseInt($(this).css('font-size'),10);
     if(size != currentsize){
           $(this).css('font-size', size);
     }
});