CODEWITHSUNDEEP
javascripthtmlcss
Canna
Canna

Reputation: 3794

css or javascript option to limit sizing browser window size

This is the requirement i want.

if i click the enter button. starts a new popup window.

#room_iframe{
    border: 0; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    width:100%; 
    height:100%;
    min-width: 1024px;
    min-height: 800px;
}

as you can see, if the user sizes the browser window size, under 1024*800

it makes a scroll.

but my client wants this to be changed to stop sizing the window if it is minimum 1024*800.

or is there an option that the user can NEVER sizing the browser window size?

Upvotes: 0

Views: 7040

Answers (2)

Erik Vesteraas
Erik Vesteraas

Reputation: 4735

Hava a look at this question: Disable Browser Window Resize

To paraphrase:

If you have jQuery you can do something like this:

$(window).resize(function(){
  window.resizeTo(1024,800);
});

However, this will not always work(for example in Safari it only works if there are no other tabs, in Firefox it only works if it is a window launched by window.open or similar), and when it works, it will be super annoying. Add an if test testing width and/or height if you only want to set a min size.

Without jQuery, and testing for size(badly, it resizes the window and checks the document size...):

window.onresize = function() {
    if (window.innerWidth < 900 || window.innerHeight < 600) {
        window.resizeTo(1024,800);
    }
};

Upvotes: 2

Jack
Jack

Reputation: 9388

So, you want to be THAT site? You need a window that stays at a fixed width/height...or at least a minimum width/height. If your target browsers are IE, you might be able to get away with setting "resizable=0".

However, we're in the 21st century baby. We've got pesky browsers like Chrome and FireFox preventing us from auto opening windows or preventing resize.

BOO.

We won't let them rain on our parade! So, what shall we do?

Here's what:

window.open('', 'that site!', 'width=300, height=300, resizable=no')

That covers us for IE. But, how about those...ugh, modern browsers?

There are a couple ways: Listen to the onresize event. If the window dimensions get smaller than what you want, resize the new window. Here's a fiddle demonstrating that: http://jsfiddle.net/eqj3k/

Another way you can do it is by polling the window via setTimeout- Here's a fiddle for that: http://jsfiddle.net/5PAHP/

Both of those do not lock the site (it just prevents the browser from going below 500x500).

Have fun!
insert evil laugh here

Upvotes: 4

Related Questions