Tutorial :Is there a best practice for handling browser resizing?



Question:

I feel like GMail is an excellent example of best practices in action, but I'm looking for a more theoretical code-based approach. CSS? JavaScript? jQuery? Let's hear it.


Solution:1

Most web application use proper document layout and CSS to make the flow work itself out naturally when the user resizes the browser window, without executing any script at all. This is exactly what the CSS properties display, position, float, clear, etc. are for.


Solution:2

Depends on what you have to do on window resize...

Usually most applications and websites use browser resize event for changing layout or increasing/decreasing font size when user changes browser window size.

Check this article out...


Solution:3

you could do something like this.

The idea is you make a large wrapper (#main,the lightest one) and you place 2 divs inside:#left and #right.

left is a fixed width div width:200px and floats left float:left.

right is liquid so no width, but to prevent #left from overlapping you give #right a margin of the width of #left -> margin:0 0 0 200px.

To prevent #right from being to small you give it a minimum width min-width:400px. Now when you resize the window #right will resize along until #right gets at 400px then the scrollbars will be visible


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »