I have a requirement to have some modal popups appear on a webpage. At first i implemented them as true modal windows, but then i found out that true modal windows cannot communicate with parent window in IE.
Now i am trying to implement them as regular windows that always steal focus, which is sorta working.
Here is the code that i am using:
modalPopup = window.open(url, 'popup', arr.join(",")); //use a global var here
modalPopup.focus();
$(window).bind("focus.modal", function(){
if(modalPopup){
modalPopup.focus();
} else {
$(window).unbind("focus.modal");
}
});
There are several things wrong with this:
In firefox, once i close the popup, the modalPopup does not become null, it points to parent window. (this is ok, since we dont support firefox anyway)
In IE, it works like a charm when you open 1 window and close it, but opening any more windows results in the exception:
Error: The callee (server [not server application]) is not available and disappeared; all connections are invalid. The call did not execute.
edit: In IE the error happens when modalPopup.focus(); is called. apparently modalPopup is never set to a falsy value when closed :P
Can you help me write a better implementation that uses window.open for creating the popups?
Before anyone says anything, using lightbox is not an option. The popup windows contain A TON of html, javascript etc, and loading them in the DOM is not going to result in a good UX. Also, we sorta have to have this work on IE6.
The windows containing a "ton" of JavaScript, HTML, etc. isn't a reason that you can't use "lightbox" style techniques (which do work on IE6; I don't know if a specific library you've looked at doesn't). The technique is simple:
Have an absolutely-positioned iframe on the page whose z-index is higher than any other content normally shown on the page. Normally the iframe is hidden.
When doing a "modal," show that iframe and set it to cover all other content. Create an absolutely-positioned div with a higher z-index than the iframe and place it wherever you want (typically in the middle of the viewport).
Put your "modal" content in that div. This can be pre-loaded, or you can demand-load JavaScript and other resources to fill it.
Have a UI control of some sort on the div that "closes" it by removing the div and hiding the iframe.
You can build very rich UIs with this that (can) have a dramatically better UX than enforced multiple windows. And you have the advantage of avoiding cross-windows communication and potentially offering much better response time to the user when they "open" one of these windows.
Related
I tried the following simple pop-up code obtained from here and slightly modified-
<!-- sample.html -->
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=400,width=400,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')
}
</script>
Open a popup window
When I run this, a pop window appears as expected. But the scrollbars and the URL are very much there and I could easily resize the window even though I've resizable=no,scrollbars=no,location=no
Why isn't the change to these attributes reflecting in the resultant pop up window?
Strange this is scrollbar attribute reflects properly on Mozilla 10.0.4 and not on Google Chrome 19.0.1084.56
But the other 2 attributes show the same behavior on either of the browsers.
The important thing here is that these settings are suggestions to the browser. The browser vendor may choose to have the browser ignore them. Some vendors (including Mozilla) let users define whether certain settings are ignored (see various notes on MDN's window.open page).
You can avoid scrollbars by styling the resulting document as described in this other answer here (provided the SOP doesn't come into play), but if the browser is supplying location and resizing when you're telling it not to, there's really nothing else you can do — using a pop-up window.
You might consider instead using an absolutely-positioned element within your current window, which is pretty much the modern way to do popups. Your specific example loading Facebook may require you use an iframe (and may try to escape it), though.
I need to have panel behavior in chrome: something always on top but that does not impair the navigation (in any other way than masking a few pixels).
We have two options at the moment:
window in panel mode: not available yet (although it is available now to the GTalk extension).
window in popup mode: I can make it be always on top by refocusing at every event, however the focus will get targeted at my window (and impair the navigation)
I'm looking for either:
GTalk's dark magic
A way to make a popup window stay on top (or come on top and relinquish the focus to the second topmost window)
I found how GTalk is the only extension with panels. You can have panels too in your own extension, using really dark magic:
In your manifest.json, add the key-value pair:
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDsDApubb73tPfYlNIFxDu3K3/EHgV6/YOJXJkld1OZ20jW/cOht1j0NggnXhQYuu1mXFUufud4I2N7b5ydyg09gcM9Va3Zk17RhNV9smbPHOd4XlzJeXifX/9MgHPu4FzCen3CiSXsOeAELJIXEuT28xICriuUko/rNPwGeIB9VwIDAQAB"
And BOOM, panels activated!
This is Google's way of activating a hidden feature. The documentation tells us "key"'s purpose is to provide a unique identifier but that we don't really need it. As demonstrated, it also activates hidden features.
Also, you cannot have two extensions with the same "key" value (GTalk gets uninstalled). And I think your extension might not make it to the chrome store.
If you know someone at Google, please tell them we mortals would really really love to have panels too. Panels are awesome. And they are the only way to display information on top of a web page while still interacting with it. Google should share the love, we really need panels.
when i try to
window.open()
in IE 9 , it opens it with favorites sidebar (if it was present in parent window) this is behaviour unique to IE , and it breaks dialog windows as I envisioned them. Any hope to fix that?
Since you specified that you're using this for a dialog, I feel I should discourage this. Using window.open() is not ideal for creating dialog boxes.
Some browsers will ignore your 'new window' request, and open it as a new tab. This can be configured by the browser user, so is out of your control.
If the user has toolbars and side panels open, there's a strong likelyhood of them showing up in the new window, which will mangle your layout. Again, you'll need to test this in every browser, and even then you can't be sure without knowing all the config options that might affect it.
Opening a new window does not give you a modal dialog box. You can't prevent the user from clicking back to the parent window and ignoring the dialog box.
Therefore, if you want to make a dialog box, you would be much better off using a javascript library that opens a box inside the current page. It's much more flexible, and gives you much more control over the end result than window.open().
If you're using JQuery, you might want to start by looking here: http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/, but there are stacks of others available (it's a very easy thing to write, especially in JQuery, so there's plenty of plugins out there you can try till you find one which is perfect for you)
Try changing it to window.location.href= 'url + target="_blank"'
I want to implement a utility for myself that should provide a small console where I can execute random JS in any browser (much like Firebug's console - I don't reinvent the wheel, I just want to do something I need and just have fun doing it).
So the usage use-case would be this:
Click a bookmarklet from any browser.
It shows dialog (much like jQuery dialog or similar) with text area and couple of buttons.
User enter a JS in the text area.
User clicks a button and it gets executed.
User closes the dialog.
I don't know how I can display nice dialog on any web page (Gmail, news, static pages, whatever).
I think it would be possible to create a jQuery dialog (or other library) and show it on the page. But it could lead to a lot of issues as the dialog might conflict with page CSS, JS and so on.
So the question is how to display a custom dialog on any web page from all (major) browsers using JavaScript.
The NOTES: I don't want to have a popup window. IFRAME would be ok but we cannot use it as the web page's DOCTYPE might not support it.
Thanks,
Dmitriy.
http://getfirebug.com/lite.html
Works in IE, Opera, Safari - basically gives you firebug's functionality in any browser.
bookmarklets are pieces of JS code, so you can basically develop any kind of JS program and use it via bookmarklet... just do what you would do normally. check how other bookmarklets work.
regarding the window display - use lightbox-like effect (DIV layered over other content).
I am looking for a way to improve the workflow in a PHP based CMS. There is a lot of switching between the editor mode and the preview mode of the page. The editor mode is huge to load, and so I would like to open the preview mode in a different window.
I don't want to use new windows or an iframe within the current window to keep the workflow simple and to avoid confusion.
Is there a way to explicitly open a new tab (not window), and to jump to that tab from a document, in Firefox? The number of users is limited, so there is the possibility to set up the client with the necessary extensions / permissions.
I know Firefox can be forced to open all links in tabs, but I think that won't cut it, as I still can't address and focus the newly opened window.
Thanks for all the great answers everyone. I have now enough material to decide whether I'll take the greasemonkey approach, rely on the user to set up "open in tabs" and address the window by name, or use a "inline" HTML solution as so many of you suggested. I am accepting the answer that I feel went most effort into.
There is no way to force a window to open as a tab. It's all dependent on the user's preference settings.
I second the answers that say you should do this in HTML using Javascript. Then it can work in all browsers that support JS.
I would put two divs on the page and show/hide each div depending on which tab is selected. If you are clever about this you could trap the click on the tab and determine if the user left-clicked or middle-clicked. If they left click you load that tab on the page. If they middle-click you let the browser open a new tab/window (according to the user's prefs, don't try to force it), and leave the current window unchanged (that is, don't switch to the new tab). The action for clicking on the tab would be to use AJAX to load the contents of the remote document and put it into the tab. Use Javascript to modify the URL before submitting the AJAX request so that the server knows to send a web page fragment instead of the whole page.
The advantage of this dual-natured solution is that the tabbed approach will work the way you want it to work for the majority of cases, but for users with, say, two screens, or who prefer switching between browser tabs, they will still have the flexibility to work in multi-window mode. This can all be done without any browser extensions and it should work equally well in IE as well as Firefox, Opera, etc. Avoid locking yourself into one browser, even one as excellent as Firefox. One day a customer will need to use Opera or Safari and you'll be stuck.
You say you don't want to use an iframe to avoid confusion. Now I don't know about the layout of your website, but I've been using the approach that the editor opens in its own div right next to the content being edited and the content is being live updated as you edit. No need to change tabs.
(If the window is too narrow there are HTML tabs Edit and Preview)
It does not seem to add confusion to the user and for me this approach works really well. Maybe it's worth considering in your case.
What about using iframes and JavaScript?
I know you said you want to avoid 'confusion using iframes', but in my opinion if you really need to load different pages at the same time this is the best option.
In theory, you could create your own tab system using javascript or even better, using jQuery, because its UI module offers pretty cool tab control.
For every tab you could load separate "headerless-footerless" version of your specific admin page inside <iframe> element. If user wanted to modify something different, he will simply click on the tab and bring different iframe.
All this could also be done using AJAX, but iframe solution is quite easy as you just need to load ready page and all postbacks are already handled by original page and separated from master-admin-page.
You might also need to play a little bit to set correct height of your iframe to fit all the content without scrollbars, but this again, is just bit of javascript.
Nope, there's no way to force the opening of a new tab, simply because this would be unsupported by un-tabbed browsing
You can only set it to open a new window, not a new tab.
Greasemonkey springs to mind - a quick google gives open in tabs on left click. I think you could modify that so it only runs on one particular page, and you'd be up up and away.
This question made me wonder if HTML 5 allows that sort of specification, and it doesn't (nothing in one of the other hyperlink attributes, either). A new browsing context is a new browsing context, there's no way to express a preference for tab over window or foreground over background.
You can't force a tab, but if you use a target with a specific name, like target="my_cms_window", many browsers will open this as a new tab. Additionally, they will remember the name and if you use the target repeatedly, put the contents in the same tab. I have found that this works pretty well in the real world.