Why alert() popup is cut off at end of browser window? - javascript

I am showing alert on this. But alert is clipped on the either sides, width of popup is 320px. How can I display the entire alert ?Pop-up screen

That problem occurs when Chrome is running on Windows 7. It occurs when alert is smaller than 370px. I have the same problem and I found that it is a bug in Chrome when is used on Windows 7.

In your screenshot the popup is cropped to the parent window size.
Resize the window to show the full alert box.
In all browsers I know the alert-box is always a child of the browser window, so it can never reach outside the browser window.
Option 1
You could use JS to resize the browser window (e.g. make window wider before alert, smaller again after alert):
window.resizeTo( width, height );
Option 2
Create your own JS popup box instead of using alert(). You cannot style the alert() box, but you can control size/design of a custom popup you create

Related

Javascript alert box is hidden inside popup window

Hidden alert box
OS : Windows 7 32-bit
Browser : Google Chrome 53.0.2785.116 m
Like the attached screenshot,
alert box's overflowed area is hidden inside popup window.
It happens only in Chrome 32-bit.
Anyone had this kind of issue?
That's normal behaviour for Chrome.
Given that internally the dialog is also just composed of HTML and CSS (pretty much everything UI related in Chrome is), it doesn't come as a surprise that the window's content won't overflow the window. It's no native OS dialog or similar.

Why is element not being shown before alert?

In this simple example https://jsfiddle.net/4rsje4b6/1/ why is the #test element not being shown before the alert appears?
Shouldn't the jQuery css() method be syncronous?
#test {
display: none;
}
<span id="test">Element</span>
$("#test").css("display", "inline");
alert("Showed element!");
UPDATE:
This behavior is manifesting for me on Chrome Version 52.0.2743.116 m, Windows 10.
It changes the style synchronously, and you will notice that if you read back the value on the next line and show it.
$("#test").css("display", "inline");
alert("Showed element!" + $("#test").css("display"));
But the change of the style object triggers a repaint request message to the page renderer, and that is handled as soon as the browser becomes idle, which is after this script routine has ended.
It depends on the browser, though. In Edge it works fine, and the element is shown right away but in Chrome and Vivaldi it is not.
Another test to see how browsers handle this:
If you resize the browser window, JSFiddle will scale (each of the areas keeps the same relative size). If you resize the Vivaldi browser with the alert open, it doesn't do that. In fact if you make it small, then show the alert, then make it larger, you just get a grey area in the new space until you close the message box. In Edge, the fiddle will just resize in the background, even though the entire browser window is grayed out, so it's not just a matter of the time of processing, but more that Chrome completely freezes the page when an alert is open.

JavaScript window options

I'm looking to create a "pop-up" window that simply displays text within the window without the browser's signature. When I create a window simply by using the window.open command, the Chrome symbol and address bar is displayed.
Is there a way to get rid of this?
Or is there a smarter way of doing this?
Also, with that being said, I want this window to stay on top of all other windows being displayed. That is, I want it to essentially be running on top of a window even though I may be clicking on a full screen window behind it.
No, this is intentionally made not possible (at least in Chrome) because it could be used to confuse the user to think that a browser window is a window for another program.
Google Chrome window.open height includes URL bar

windows.open() method error

window.open() of javascript, it is working fine in other browsers, but in case of ie-8 it shows some error such as popup.
You're probably getting stopped by the pop-up blocker.
window.open ("http://www.location.com", "mywindow","status=1,toolbar=1");
The allowed parameters are as below
status The status bar at the bottom of the window.
toolbar The standard browser toolbar, with buttons such as Back and Forward.
location The Location entry field where you enter the URL.
menubar The menu bar of the window
directories The standard browser directory buttons, such as What’s New and What’s Cool
resizable Allow/Disallow the user to resize the window.
scrollbars Enable the scrollbars if the document is bigger than the window
height Specifies the height of the window in pixels. (example: height=’350′)
width Specifies the width of the window in pixels.
(Shamelessly copied from here)

IE6 Text Resize in JavaScript Modal

I am having an issue where IE6 will not re-size the text in a JavaScript generated modal window. If I leave the parent page text size at medium open the modal window and then re-size the the text to largest, the text becomes cut off in the modal window. If I close the modal window and leave the text size at largest, then re-open the modal window, the text is fine. It appears to be an IE6 redraw issue.
Has anyone else run into this issue.
NOTE: The company I work for still supports IE6, so that is why I am looking for a solution in IE6.
Your answer my lie in the "modal" part. Modal means you should not be able to do anything else until this dialog is "taken care of". Might be easier to not allow such operations while modal windows are open?
"Restrictive or limited interaction due to operating in a mode. Modal often describes a secondary window that restricts a user’s interaction with other windows. A secondary window can be modal with respect to its primary window or to the entire system. Compare modeless.
msdn.microsoft.com/en-us/library/bb226821(VS.85).aspx"

Categories

Resources