I have a pretty simple question, but with an answer that I am unable to find. I was wondering if it is possible to lock a web browser (sticking with IE for now is fine) from being resized under (or past or smaller than) a certain set of dimensions.
For example, a new pop up window that starts at 500px by 500px, but can be enlarged to any size, but cannot shrink below 400px by 400px. So, when the user tries to go below these boundaries, the browser simply locks, not allowing the user to go any further.
A javascript/css/html solution would be preferred.
Thanks!
Jaime
You may find this link to be useful. Essentially, he describes his issues with doing exactly what you're wanting to do. It SHOULD be simple; simply (within Javascript) trap the resize event, and check the size; if below the minimum size, force a resize to your minimum size. Sadly, it appears to not be that simple, but he describes a reasonable workaround.
Never tried it, but this site gives a pretty good overview of the technique.
Short answer: Not reliably.
Long answer: You might be able to, under certain circumstances, but many users will disable JavaScript window resizing and similar functionality.
What you require is not very user friendly but here is how you achieve this easily:
add the following function to your script tag :
function DonchaResizeThatThing() {
window.resizeTo(550, 450);
}
and then add the following event handler to your body tag
<body onresize="DonchaResizeThatThing();">
I hope this helps.
Related
This is a one page scrolling site for kids. The content is best viewed at 1200 pixels wide. Is there a way I can make the window default to that size when the site is visited?
No, but you can have a landing page with a button on it that opens your desired page using window.open, and you can tell window.open how big you want the window it opens to be.
Details here, but basically (inside a click handler or similar):
window.open("http://example.com", "width=1200");
This is a suggestion to the browser, which it can ignore if it likes, but a value in that range is likely to be fine. (Whereas browsers tend to disallow very small windows.) You can also specify height, whether it has various window features, etc.
Of course, if you can make the page work well in any width, that would be better. Some of us are positively irritated by sites that try to tell us how wide our browser windows should be. :-)
You can open a new window of specific size on a click of a link/button using window.open like :
<a href="some url"
onclick="window.open(this.href,'targetWindow',
'width=700px,
height=700px');
return false;">Popup link</a>
There are two ways you can do this:
Using a div, iframe, or other element to contain everything on your page and specify the size on it. This won't change the actual size of the browser window.
Open a new window (popup) and specify a size on that. Note that if it's not done as part of the user clicking on something, it will likely be blocked by the browser's popup blocker. More info can be found here
Both of those are ignoring any issues with trying to force a size on the user. Things like:
What if their screen isn't large enough?
Will this be annoying to my users?
What if my user resizes the window?
Will all browsers support the resizing I'm after?
Will trying to resize cause horizontal scroll bars?
In general you should aim for something that can work across multiple sizes, but have a more reasonable minimum size. 1024x768 is usually a good resolution to aim for. This will much around with mobile browsers, but I presume you're not worried about those.
Ive Googled and stackoverflowed since earlier on today and i just cant find a solution. I'm looking for a way using JQuery/JS to open up a webpage ive created with a maximized window. So on the page loading whichever browser the user is using, my webpage will be displayed as though the user has hit the maximise button on their browser, but automatically on load.
I need to make an interactive website which is best displayed maximised, any ideas? Btw im very new to building websites so any solution JS fiddle based or properly explained would be so much appreciated.
THANKS :)
For security reasons, JavaScript cannot change the window's size (including minimizing or maximizing it).
You can, however, open a new window set to a certain size - but not automatically - only in response to user interaction, like a click on the page (again, for security reasons).
I don't know what your site's content is - but if it isn't flexible enough to fit different screen sizes (like a game, maybe?) then your best bet from a user experience perspective may be to just put some text up somewhere on the page that says something like "Site best viewed in fullscreen". Or, if it is something like a game, maybe a nice big button on the homepage that says "Launch Game"?
Your best bet, however, is to have your content fit any screen size/shape. This is often called things like "responsive webdesign", and there's tons of info out there on how to design a website responsively, as well as how to implement said design.
Good luck!
window.innerHeight and window.innerWidth
http://www.w3schools.com/jsref/prop_win_innerheight.asp
I have a web page with a fixed-size layout, it's fine in its current implementation even if it's far from "state of art", but a little too high for a mobile device screen.
Since the "header" part doesn't really matter to anyone, everyone wants to immediately pan / scroll down a little when viewing the page on a mobile device (or, broadly speaking, on a viewport shorter than the page fixed height).
Is there some HTML or JS magic I can do to tell the browser to start displaying the page already-scrolled-down X pixels?
You can try something like links and anchors.
http://www.yourdomain.com/main.html#bottom
If you're using jQuery, you could try scrollTo. You'll need to work out where on the page your target is, though...
Anchors is one solution, but the way I find really nice is to use http://archive.plugins.jquery.com/project/LocalScroll. So use can detect User Agent in Javascript and scroll down in proper place using this plugin.
Cheers!
Not sure anchors would work if you are trying to implement this on the homepage.
If the header is completely pointless in mobile browser this you could use html to detect that a mobile browser is being used then from this load CSS with the header hidden, or load it at the bottom perhaps. If this sounds like a viable option I can post examples.
How I can capture browser restore/maximize event in jQuery or javascript? We can use window.onresize but that only tells that the browser is resized. thanks!
There is no way to determine this on script level.
You could - as a very unreliable workaround - compare the window.width and document.clientWidth properties after a resize event and see whether they match, or almost match. If they do, it's possible a maximize action has taken place.
I think it won't get any better than that, and even this method is subject to many, many factors. If there is a vertical toolbar, preventing the browser from resizing to the screen's full width, the values will differ, making it harder and harder to determine a resize event.
I am working on a site that must be designed with mobile accessibility in mind. As part of our brainstorming, we wondered whether it's possible to detect, for a mobile browser (i.e. Mobile Safari or the Android browser), when the viewing device has changed orientation, and to use that as a trigger to change page content? As the title of this question implies, our best-case scenario is the ability to detect the orientation change and use it to alter the CSS on the fly so as to present a slightly different page for landscape versus portrait.
Of course we can just design for a page that looks good one way and make it obvious that it's supposed to be viewed that way, but the cool-stuff factor of a page that looks good either way is pretty appealing.
Is this idea implementable? Practical?
Yes, this is answered in a more general question.
To summarize, you would listen with Javascript to the orientationchange event, and switch the styling in the event handler, depending on the value of window.orientation.
You can also use media queries to do this without any JS at all - see http://davidbcalhoun.com/2010/dealing-with-device-orientation
Make a fluid style that would adjust in any case..
You would have to give a more detailed description of issues you want to solve so we can suggest more detailed answers..