I'm trying to get font size to adjust to fill a container. This alone obviously is not an issue. However, the container is also not a static size, it's size is set to a % of the browser window and I would like the font size to dynamically update on browser resizing, along with the container.
I had been using a modified script that I found which adjusts the font size by a % of the browser height and width.
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleFactor = 0.0001,
scaleSource = $(window).height(),
scaleSource2 = $(window).width(),
maxScale = 200,
minScale = 10;
var fontSize = (scaleSource * scaleSource2) * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
I wasnt getting the desired result from this, so then tried changing this so that the scale sources were the container rather than the window. This somewhat worked however it didnt dynamically update, it would require a refresh of the page.
In short I cannot find a way to resize font size, to fill a container that's size is determined by a % of the browser window, on the fly.
Why invent something that already exists? There's already a great jQuery tool out there: http://fittextjs.com/
This isn't a real-world answer, yet, but viewport dependent font sizes are on the horizon:
http://css-tricks.com/viewport-sized-typography/
Currently it's only supported in Chrome Canary, but it's good to know it's coming.
Related
I have a website that i'm working on locally, and it will be displayed through a projector for a presentation. Is there a way for me to scale it to the full size of the projection or if it were to be displayed on bigger screens without having to use all the media queries! I tried adding:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
But i don't think it will do the trick! Any input from you is welcomed
Edit:
Just thought i'd add that the website is in a 1000*800 container on the original size, i just want it to grow a bit whenever a screen gets bigger
if using Bootstrap then wrapping all content in a container-fluid div will use the full screen width (and therefore projection width).
<div class="container-fluid">
...// content
</div>
I'd try getting the browser window resolution and setting the width and height accordingly if the resolution goes beyond a specific one.
<script>
function setContentSize(){
var ww = window.innderWidth;
var wh = window.innderHeight;
ID.style.width = 1000 +"px";
ID.style.width = 800 +"px"; //ID must be set in HTML
if(ww > what you want ){
ID.style.width = what you want +"px";
}
}
</script>
etc. You probably can work it out
And you can load it up with window.addEventListener("resize", setContentSize);
To auto-zoom the whole page, one solution is using transform: scale(). The page needs to sit inside a container for this to work. First set the origin in css for the container:
div#page-container {
transform-origin: 0 0;
}
Then change the scale factor with javascript (in my case jQuery):
$(function() {
var ratio = $('div#page-container').width() / $(document).width();
$('div#page-container').css('transform', 'scale(' + (1.0 / ratio) + ')');
});
Here is a Fiddle.
I have been trying to figure out how to make a ticker like facebook.
the ticker automatically hides when you zoom past 110% and thats because the ticker would start to cover the whole layout.
I was wondering how they have done this? how does it detect when to hide the ticker? does it grab the resolution in javascript?
Whatever they are doing, it is done through Javascript. You can get the width and height of the browser window and also any element in the DOM.
You can use pure Javascript, but jQuery makes this a doddle:
// Get the pixel width and height of the window
var window_height = $(window).height(); // not required, but for clarity
var window_width = $(window).width();
var ticker_width = $('div#ticker_wrapper').width();
// ON rezise, do something
$(window).resize(function() {
// Do a caculation
var new_width = (window_width/100)*10; // 10% width
// Adjust the width of the ticker to suit
$('div#ticker_width').css('width', new_height);
});
I'm dealing with some modals that are opened up in an iframe (same domain, so no xss issues). One of the modals I have either hides or shows options based on things you do which grows or shrinks the form. Anyway, long story short I have the code that handles resizing the iframe based on the current height/width of the body on the inital load. The problem is that I'm not sure what event to tap into to determine that the body's actual size has changed after the initial load.
Why not add a setInterval()? Something like:
var originalWidth = {set original width}
var originalHeight = {set original height};
setInterval(function(){
var currentWidth = {grab new values};
var currentHeight = {grab new values};
if(originalWidth !== currentWidth){
//Change the width now...
//Next, set originalWidth to be the same as current for future checks
originalWidth = currentWidth;
}
//Now, do the same for original and current height
},100)
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?
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.
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);
}
});
Is there any way to set the minimum size of a popup window through JavaScript?
My problem is that when someone makes it as small as he can the content just looks stupid.
When creating pop-ups, you can only set width and height. But since the pop-up was created, it means you can change the height and width of the window when the pop-up loads.
Simply place an onload event inside your pop-up window:
window.onload = function() {
if (document.body.scrollHeight) {
var winWidth = document.body.scrollWidth;
var winHeight = document.body.scrollHeight;
} else if (document.documentElement.scrollHeight) {
var winHeight = document.documentElement.scrollHeight;
var winWidth = document.documentElement.scrollWidth;
} else {
var winHeight = document.documentElement.offsetHeight;
var winWidth = document.documentElement.offsetWidth;
}
window.resizeTo(winWidth, winHeight);
}
edit: Tested in IE7,8, Chrome, Safari 4, Firefox 3. Working, but you might need to take into account the size of menu+address bars and such, as the window size will be the outer size, and this function will find the size of the content. So to be safe you should probably add a couple of pixels, and also turn off scrollbars in the popup to make sure they won't take up any space.
I do not believe that you can set a minimum using the Javascript new window. I know you can set the size and disable the scroll bars and prevent resizing, but that would answer the minimum, but also impose a maximum as well, which you may not be wanting.
Most browsers have a minimum width and height.
Internet Explorer 7
minimum width > 250px
minimum height > 150px
When using windows.open, you can specify the height and width of the window like this:
window.open ("http://www.stackoverflow.com",
"mywindow","menubar=1,resizable=1,width=350,height=250");
It is not the minimum size though, as the window will not be bigger when there is more room. You would have to check screen space yourself for that.
http://www.htmlgoodies.com/beyond/javascript/article.php/3471221
As seen in the link, you can set the minimum size. If you want to scale it so it gets bigger you must to that from within the popupwindow.