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 font-size to resize proportionally for both views when they are resized. I am using jQuery as my javascript framework. Is there a way of getting this to work in either CSS or jQuery?
Add a comment
|
2 Answers
I know I am answering my own question, but the answer above was helpful but not enough to suffice as one. So this is how I ended up doing it.
First I set up this function which calculates a suitable font size based on a given width.
function getFontSize(width){
sizew = width / 100;
size = sizew * 1.5;
return size;
};
Then I got the function to run on load and on re size of the window then modify the body font size accordingly.
$(window).resize(function(){
size = getFontSize($(this).width());
$("body").css("font-size", size + "px");
}).resize();
All you have to do from there is set up any element to have its font-size re-sizable by giving it an "em" or percentage font size.
1 Comment
MLister
had to get rid of the space in
" px" in the code above to make it workSure, 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);
}
});
