Resize web page

[november_boy]

How does one use the onResize() event to dynamically resize a web page according to the size of the user's viewport?

Thanks!!!

[rnd me]

here is an example for standards compliance mode:

var App=({}), IE=false;   //@cc_on; IE=true; 

onresize=function(){
 	if(IE){ window.innerHeight = parseInt((document.documentElement.clientHeight || document.body.clientHeight) * 0.9); }
	if(IE){ window.innerWidth = parseInt((document.documentElement.clientWidth || document.body.clientWidth) * 0.9); }

	App.width = parseInt(innerWidth * 0.98);
	App.height = parseInt(innerHeight * 0.9);
	App.top= parseInt(innerHeight * 0.03);
	App.left=  innerWidth * 0.03;
	App.ratio = App.height / App.width //the viewport ratio
}

of course. what you do with the settings depends entirely on your goals.

[november_boy]

thanks!!!

Quick questions:

var App=({}), IE=false; //@cc_on; IE=true;

is the above an Legend or a part of the function?

does the same apply to other browsers, or is this a special function for IE...

Thanks

[rnd me]

thanks!!!

Quick questions:

var App=({}), IE=false; //@cc_on; IE=true;

is the above an Legend or a part of the function?

does the same apply to other browsers, or is this a special function for IE...

Thanks

those variables are outisde the function, so that they will be globals.
IE is outside so it only has to eval once. it simply adjusts the way the measurements are made.

the function code works in all browsers.

App is outside so that you can use it's properties in any function in your code.

the resize function adjusts properties in App.
i have given it some padding (the multipliers)

just refer to eg; App.width from anywhere, and it should have the correct dimensions. you can kill the padding inside if you don;'t need it.

you also probably want to add "onresize()" to your onload event to size everything up upon boot.

[slaughters]

How does one use the onResize() event to dynamically resize a web page according to the size of the user's viewport?

Thanks!!!

I'm not sure I understand your question.

What do you mean by "viewport" ? (computer screen ?)
What do you mean by "web page" ? (browser window ?)

What is wrong with designing a page using a liquid layout so things automatically resize to fit, regardless of the browsers dimensions ?

[rnd me]

What is wrong with designing a page using a liquid layout so things automatically resize to fit, regardless of the browsers dimensions ?

can you elaborate on a CSS-only way to make an image take up 80% of the screen's width without losing its aspect ratio?

[slaughters]

I'm sorry rnd_me, but that sounded a little rude. Did I miss a post by "november_boy" where he said this was what he was attempting to do ?

I've not tried it, but I can't see why simple HTML would have a problem with doing what you requested. State the width and height as percentages and keep the width the height ratio to the same as the original images.

If your image is 350px by 200px (Width x Height), then the ratio of height to width is 200/350, This simplifies to 4/7 (or 0.57), so if you want the width stretched to 80% then set the height to 80% * 0.57, or 45.6%

<img src="someimage.jpg" width="350" height="200">

becomes

<img src="someimage.jpg" width="80%" height="45.6%">

Of course I don't have the faintest idea if this is what "november_boy" was asking about.

[rnd me]

slaughters: didn't mean to be gruff.
i just didn't see what a "liquid layout" has to do with the question.

i agree it depends upon what the intent is, but for anything other than basic documents, javascript provides far more layout possibilities than CSS.

Take your image example.
if my parent container changed size, that 45.6&#37; of the parent's height could be very very wrong.
furthermore, i would have to hand-code each fragile ratio.
If i had a folder of images, that could take quite a while, and each one would have to be mentioned in the HTML.


with javascript, i can find the dimensions or the real estate i am working with, and optimize the images for each user's viewport. I don't need to know anything about the image to create a layout engine that correctly handles it. I can even keep the scale factor to a single digit integer, to avoid blurring that comes with resizing images. CSS could never do that. Firefox3 also "zooms" everything, making it that much harder to fit everything using percents.


i think the biggest heel of a liquid layout is when including content. For better or worse, many things like flash objects, images, and movies have a fixed size. Indeed the attributes used in their tags are expecting pixels. Javascript can easily convert viewport size in pixels and percent.

all in all, javascript itself is very stable and predictable. 1+1=2 in all browsers.
CSS implementations vary a great degree in capability, applicability, and reliability.


While you may be able to eventually get somewhere using CSS and a bunch of stylesheets and testing, you can usually get there faster and simpler with javascript.

[moses5407]

wow..this is an old thread but gets at what I need to know..probably that's a message of my ignorance. ;-) BUT .. how do I USE this function to resize the page? I guess I'm confused by the APP variable. Can someone post an exact code example of where to include this javascript function and how to call it to resize a webpage when it loads? Thanks!

[rnd me]

wow..this is an old thread but gets at what I need to know..probably that's a message of my ignorance. ;-) BUT .. how do I USE this function to resize the page? I guess I'm confused by the APP variable. Can someone post an exact code example of where to include this javascript function and how to call it to resize a webpage when it loads? Thanks!

the App var is simple a container to hole the width/height/etc in a uniforma way among all browsers. you can use it in a resize event, or anywhwere for that matter.


i guess you would load it before other code, but i don't think it matters a whole lot.

if you wanted to launch it upon load, call it directly at the bottom of the page in a script tag or external script, say "window.onload=onresize" after loading the code i posted, or call onresize() in a ready() or load() event...

[amitshah02]

In my website there is a Image banner. so when user come to my website with zoom condition like 120% in google chrome, than that window shows only banner and my product is not coming in that view, so my question is, is there any method to re-size my webpage during zoom. or is there any script to do that.


thanks in advance.