I have a custom Modal Box (just like the browser's alert())
Usually, using alert() the browser pauses that underneath page rendering and executions,
how to get the same behavior of restricting the rest of the window to load unless one confirms OK in the Modal element?
So how to
Pause window load -> Show modal -> (OK) -> continue window load
New Edit
Instead of stopping page load, why not remove all of the page show popup, then place the document back ie using JQuery...
var pageBody = $('body').html(); //Copies Body of Page
pageBody = $('body').html(""); //Delete the Body
/* Do Some Awesome Code here*/
$('body').html(pageBody); //Place Body Back
This will allow page to load, remove it, execute code then place it back. The other method below will not work as stopping the page, will stop EVERYTHING including any other code you are running.
Old Answer
You could use
window.stop(); //works in all browsers but IE
if ($.browser.msie) {document.execCommand("Stop");}; //works in IE,
document.execCommand works in IE, however it does stop some of FF, NS and some other browsers' functions. Like displaying GIF's animation for example. Using "if browser is IE" makes these two codes work perfectly in all browsers.
This code will simply pause the execution of the page. Like clicking the STOP button on your page but you will need to reload to start the page again..
I would personally advise simply placing a fullscreen white div behind your popup box but above your popup to give the idea of the popup is only there while the user will be none the wiser that the rest of the page has stopped loading
Related
I have a site where a particular page has two buttons that open pages in new tabs. One page is a preview of an item, and one is the print of that item.
// Preview button's click event
window.open('my.preview.url.com', 'preview');
// Print button's click event
window.open('my.print.url.com, 'print');
On the print page, window.print(); is call on page load.
This seems to create a bit of an issue on some browsers. Opening the print page and not closing the print preview results in all of the JavaScript being blocked on the originating page (with the buttons) and the preview page (if one had been opened previously).
This appears to not happen in all browsers. For example, Chrome displays the issue but Firefox does not.
This is similar to a similar unanswered post, which has a useful fiddle at http://jsfiddle.net/Zicane/7ntsb7hh/10/
Hoping someone might know the solution to both issues.
I'm working on a site that provides web access to to legacy data.
The basic flow is for the user to select a query form from a menu, fill out the form, and submit it. The server generates the appropriate HTML and returns it to the browser. So far, so good.
Some reports can take some time to generate. For those reports I display a "processing" indicator when the form is submitted. This indicator is a normally hidden <div> containing an animated icon.
The problem comes when a user uses the browser's Back button to return to the query form. When the browser re-displays the page with the query form, the processing indicator is still visible. The only way to get rid of it seems to be to refresh the page at that point.
Is there any way to hide it after the Back?
You could set a JavaScript event to automatically remove the indicator after the page loads. That way, the indicator won't display unless the script later tells the indicator to show. In order to avoid never displaying the indicator, you could place the code that displays the indicator after the event that automatically hides it, both occurring on the page loading.
I finally have a solution for this that is working well enough in this application.
Some browsers, like Firefox, fire a document.focus event when the page is re-displayed. Others, like Safari, fire a window.popstate event instead.
I now hook both of these events and it works as expected 99.9% of the time.
As far as I could find, you should be able to use pageshow window event:
The pageshow event is sent to a Window when the browser displays the window's document due to navigation.
This includes:
Initially loading the page
Navigating to the page from another page in the same window or tab
Restoring a frozen page on mobile OSes
Returning to the page using the browser's forward or back buttons
<!DOCTYPE html>
<script>
window.addEventListener("load", console.log);
window.addEventListener("pageshow", console.log);
</script>
<p><a href="https://html.spec.whatwg.org/multipage/">Navigate
away</a> (then come "Back")</p>
See also:
Can I use "pageshow"?
I want to create a "popup window" that get focus each time the button is clicked. The function below executes fine from an onclick event but does not execute as expected when the parent page is refreshed and executed from an onload event.
here is my function:
function PopupDelete(delete_images)
{
var win = window.open('URL','PopupDelete','width=500,height=400,scrollbars=yes');
win.focus();
}
So if I use this from the button below it works as expected.
<input type="button" name="delete" value="Images" class="smallbutton" onclick="PopupDelete(delete_images);">
Now the problem I am having is we are using another method called set_mode on the button instead of directly calling the PopupDelete function.
function set_mode(mode)
{
document.MASTER.mode.value = mode;
document.MASTER.submit();
}
<input type="button" name="delete" value="Images" class="smallbutton" onclick="set_mode('delete');">
It sets the mode in the master form as Delete and submits the form. The landing page is the same page where the form is. So it does some php validation and executes the PopupDelete function with onload method within the body tag.
<body onload='PopupDelete(delete_images)'>
If there was no pop up window open it works fine but if the pop up window was already open and minimized, then the pop up window does not get the focus. The funny thing is it does recognized and updates the contents rendered on the pop up window but does not recognize the .focus().
Any suggestions will be widely appreciated.
Both opening a popup window without user interaction and focusing a popup window without user interaction is a problem is due to browser security. Also because security is maintained independently, this is browser specific.
It appears that you can open a popup window without user interaction if the user has already have accepted to show blocked popups. But allowing popups does not allow for calling the focus method on any popup window object. This other SO answer touches on this if you would like more information.
You can demo this problem with the following code. Loading the page does not allow for the popup to open in neither Safari, Chrome, or Firefox (keep in mind I'm on a mac so the browser results may be different for windows). If you allow the blocked popup, or already have the popup window open from previously visiting the site, then the window will be reloaded with the url in all 3 browsers. Only Safari allows calling the focus on this already popped up window without user interaction (onload), Chrome and Firefox do not. But as you can see clicking the focus button does still focus the popup window on all 3 browsers, showing that it is possible, but the browser is just blocking it. So from what I can tell this is only possible in Safari (once again keep in mind I have not tried IE). But either way I don't believe it would be good to force your users to use a specific browser to view your site correctly.
var w;
function PopupDelete(delete_images) {
w = window.open('/testing/t/', 'PopupDelete', 'width=500,height=400,scrollbars=yes');
console.log(w);
w.focus();
}
$(function () {
PopupDelete();
$('#open').click(PopupDelete);
$('#focus').click(function () {
console.log('f', w);
w.focus();
});
});
DEMO
Also keep in mind, even if you could do this, when you reloaded the parent it's reopening the popup window and replacing the previous one (and this has to be done because to my knowledge you can't get a window object of a previously opened window, there is no way to maintain that variable to focus it without reopening it first). So this popup window wouldn't keep it's integrity anyway. I believe there must be a better way to completing this task.
On the page load you can show this popup
$(document).ready(function () {
window.open("URL","Hello","width=500,height=500,scrollbars=yes")
});
Issue: Should restrict the webpage from submission and moving to the next, till the child window gets closed.
Technology: jsp
Browser: firefox.
Code used for Opening:
retValue = window.open(child_url,',',"Height=400px,Width=670px,status:no,top=190px,left=200px");
Desc:
Clicked on one link in the page and opened up the child window from the firefox browser using the window.open command. But just after the click of the link, along with the opening up of the child window, the main page is also getting submitted and moved to the next page.
The same logic in ie works fine. In ie am using showModalDialog() which works without any issue.
NB: Hoping for an alternative way, which is something other than giving if conditions to the page submission line.
Could someone pls help... thanks in advance
I would recommend that you move up to the jQuery modal dialog. It's browser-independent, and your user will understand that he is interacting with a modal dialog that must be closed before proceeding. With a separate window or tab (your current solution), it's too easy for the user to get lost and click away from the browser altogether.
I decide to make my own "neverending" scroll page which suits exactly my needs rather than making comfortable with some extensive classes that could not have to work exactly the way I would like them to.
Now, when all works like a charm, last thing remains. Preserve the scroll position when the browser's back button is hit. Every time you get to the bottom of the page I change the hash # part of the url. When the back button is hit, it shows waiting icon and then loads dynamic content.
Firefox scroll after that exactly to place the page was scrolled (good).
Opera and Safari seem to load exactly the same state there were before, so dynamic content seems to be already prefetched and displayed (good).
But IE and Chrome want to scroll before dynamic content is load and they don't try again later. IE get stucked at the top of the page and Chrome somewhere in the middle (bottom of the page before dynamic content shows up).
Now, what could I do to solve this issue? I could in theory store the current scroll position to url hash when any click is detected. Then previous page is load and I could simply parse the hash and ScrollTop(). But for some reason, this
$(document).live("click", function() { window.alert("gotcha"); });
doesn't work for me anyway.
The document doesn't have anything to be clicked on. document.documentElement is the root <html> node, so attach events to that, or to the window if appropriate.