I'm looking for a way to resize the Chrome browser's width with a button. Preferentially using JQuery. My goal is to show the mobile version of the website to desktop users.
I know I can do this by just resizing the BODY tag (which is definitely easier) but I got curious.
I haven't found reliable answers to this question and sorry if it has already been asked.
Other ideas are always welcome.
Thanks. :)
Recent browsers (since FF7) aren't going to support window.resizeTo(x,y) unless it's a window you created that doesn't have any other tabs. This is to prevent abusive website code.
Check the notes on this MDN Window.resizeTo() help:
Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
Like you mentioned, you can launch a new window with a specified size to preview a mobile experience. Alternatively, you could create an IFrame with a specified size:
<iframe src="/mobile" width="200" height="200">
As Pranspach mentioned you can't resize the actual chrome window, but if your site is responsive on resize you could wrap the whole site in a wrapper div and shrink that instead of body.
Related
I use the last firefox release (45.02) on windows 7.
I want to prevent user to resize manually the windows. I have a non responsive GUI, and I want to fix the browser interface.
I can't use the javascript resizeTo(...) function because of MDN docs
You can't reasonably do this. Which is a Good Thing. The user is in control of their browser, not you.
You can control the size of a popup (including whether it can be resized), within reason, so temporarily while you sort out the responsive thing, you could provide users a link to open a window in the size you want:
Open window in XxY for best experience of this site.
then
document.getElementById("open-window").addEventListener("click", function() {
window.open("http://example.com", "", "width=640,height=480,resizable=no");
}, false);
Note that some browsers may still allow resizing, either in the normal way or via a small "grippy" (as the Firefox folks call it).
I have a JavaScript to re-size all my popup windows:
function resize()
{
window.resizeTo(240,230);
}
But now it is not resizing in Mozilla Firefox, but it was doing earlier, also
or if the popup window is opened in a new tab, it is not resizing, also in some browsers it is not also. Is there any piece of JavaScript code which works in all scenarios and all browsers?
Firefox comes with a preference for user to allow/disallow resizing of
window using Javascript. It's in Tools - Options - Content - Enable
Javascript -> [Advanced].
I am not sure if resizing is disabled by default, but you might want
to check your own Firefox installation first.
If it's disabled by default, then unfortunately there is nothing you
could do to resize the window after it has been opened. An ugly
workaround would be to open itself once again using window.open() with
the preferred size though.
Source: timdream (here)
I'll also add that:
You can't be assured that any browser will let you control the size of
windows you create. You can't even be sure you'll get a window at all
- people can instruct their browsers to open all new windows as browser tabs
Source: Pointy (same source as timdream)
I am currently setting a scrollbar to show as scrolled to the bottom upon page load by using this jquery code -
$(document).ready(function() {
$('.mydiv').scrollTop($('.mydiv')[0].scrollHeight);
});
Is there a way to do this using only css? So that this scrollbar is automatically scrolled to the bottom when the user visits the page?
You can do this without javascript by using anchors in the URL and in the document, with you placing the target anchor at the bottom of the page. Though this is not really very elegant.
There is browser based extension that can help you with that.
Different browsers use different extensions:
Chrome, Safari: WebKit, IE: Trident, FF: Gecko.
Each one can have different ways to do that.
I don't know specific features of webkits, but try to google for example
::-webkit-scrollbar-track-piece:start
I know it is not a straigtforward answer, but I hope it will help you in your research.
I'm trying to create a bookmarklet to do some very specific resizing to do browser size testing, and I can't seem to get the web browser to resize using window.resizeTo.
Overly simplified example that doesn't work:
javascript:window.resizeTo(1024,600);
I can understand that browsers might have disabled this feature, but here's a screenshot of my JavaScript Settings in Firefox:
Am I missing something obvious or should I file a bug report?
According to this bug report, this is a new feature, not a bug. Specifically:
Two rules:
Can't resize a window/tab that hasn't been created by window.open.
Can't resize a tab if the tab is in a window with more than one tab.
If I understand this "fix" correctly, you can resize only your own popup windows, not the main window.
I am working on a Flash app that is 900x700 pixels. When viewed in misc. browsers at 1024x768, the browser chrome causes robs too much of the vertical space and the app appears in a window with a vertical scrollbar. Unacceptable.
The flash app will be launched via a link emailed to the viewers.
I'd like to avoid resizing the flash app and am wondering if there's a way to do the following via javascript, with no clicks involved:
maximize the current browser window
remove current window address bar and tabs / switch browser to full screen view (equivalent to pressing F11).
An alternative would be to resize the flash app vertically to match the browser canvas height to avoid scrolling. This may cause the app to become unreadable, so not the best approach in my case.
Thank you!
UPDATE: Seems that browser resizing and autoswitch to full screen won't work and neither will the flash app auto resize. What is the best approach then? And, some users may have browsers with toolbars or open a small browser window.
The only idea I have is to use javascript and display a message to users with small browser windows to pres F11 manually. The audience is executes and some may not even know what an F11 means...
There is no way to maximize the browser window to full screen with JavaScript. While this is unfortunate for your genuine requirement, it is considered a security restriction.
Sources:
Stack Overflow - To view the silverlight app in fullscreen mode(F11)
SitePoint Forums - Trigger F11 using javascript
Webmaster World - F11 Fullscreen using Javascript
The window size can be altered by using:
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
To answer the question in the comment you made to your own post. Yes. You can have a button whose click handler does this
stage.displayState = StageDisplayState.FULL_SCREEN;
You can use JavaScript to open a new window (using window.open) and control the window that is opened (no address bar, etc). You can also control the size of the window (you can't maximize it, but you can get the users screen size, and set the window that same size).
Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provide events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements. These APIs may present you with a more acceptable solution for those browsers.
See this hacks.mozilla.org blog post for details.