I want a popup screen to show the user that "this part" or "that part" of my app is loading....A lot of things within my app is referenced content so sometimes it takes a sec to load...
I'm new to Ajax (so pardon me, please), but I want a popup window to appear to the user in Ajax or JavaScript to let the user know the app is "loading" when the user finger taps something that needs to load....For example content on the new screen....I hope I'm making sense here.... I don't know where to start when it comes to making this happen (cause I'm not a code warrior yet, still a bit green sry lol), so any help is appreciated. I'm using JavaScript and HTML5 so far, but I need a popup loading window widget...
You're probably looking for something along the lines of colorbox.js (http://www.jacklmoore.com/colorbox). In more general terms, what you're looking for is a modal dialog box. Modal dialog boxes can be contrasted with more basic dialog boxes that don't grey out the rest of the screen. jQuery UI includes such a dialog, which you can see here: http://jqueryui.com/demos/dialog/
Of course, these aren't going to give you a loading effect out of the box. You'll have to write code to check whatever loading conditions pertain to your app, then dismiss the dialog box. A very simple way to do this would be to use setTimeout in conjunction with an ajax call whose success handler dismisses the dialog box. Or, if you don't have a way to track your loading status, you could just use a simple dialog to prompt the user to wait (but that's not particularly nice for the user).
Related
Currently I'm working with Mercado Pago API, but the thing is that I want when the user clicks the pay button, I want to open a new window in the browser (chrome, firefox, etc.) in the middle of the screen where is going to fill his credit card number and all that stuff meanwhile i want that the background site (I mean the main site where the user clicked on pay) to be blocked, like with darker colors, and not be able to do anything in that site until the user close the new window or he finish with the payment. I've been looking on the internet but I haven't found anything related to the blocked site. Maybe you could help me or have any idea to make that. thanks in advance.
I can't make comments, so sorry in advance for this being an "answer". But are you not able to store information about what the user has selected and then use the current page to process the payment, then bring back or send off what they wanted? perhaps using AJAX to run a PHP page that stores something. Just a suggestion but not entirely an answer, because AFAIK you can't "block" tabs as that could be very dangerous and could be used for the wrong reasons.
The task you want to do requires both back-end programming (php/server-side) and a bit of front-end jquery(js) + ajax.
For front-end something like this could be your start.
Bootstrap Static Modal Example.
And you would need to put your form there, submit it via ajax, and on success close the modal.
I hope this could help you a bit, and get you started in the right direction.
Note: This is not particularly safe. (It's not hard to hide the modal and fiddle around the page in the background.
After several time showing alert window the browser ask whether to prevent creating additional dialog.
Is there a way to force JavaScript show alert window even the user has checked the 'Prevent this page from creating additional dialog' ?
No, there isn't.
Thank goodness.
(you could, however, fake it with a modal dialog--possibly jQuery UI would suit your needs)
The whole point of that checkbox is to prevent sites from continuously spamming the user with alert boxes, preventing them from accessing anything in their browser anymore, even switching tabs. If it were possible for a site to continue posting new alert messages after the user decided he doesn't want to see it anymore, the whole buisness of "Don't click this link" where you'd end up on an infinite loop of alerts if you did click it, would be made possible again. Nobody wants that.
I am building a MMO which has a tutorial in it.
When the user tries to navigate away from the tutorial or close the tab/browser while on the tutorial, I need to show a custom popup which has a options as to why the person is quitting the tutorial.
I am familiar with the onbeforeunload event but my requirement is to display the custom popup instead of the browser default popup as it can't be customized other than changing the text message.
Is there any way I can hide the browser popup and show my custom popup instead.
I'd really suggest you use jQuery UI for this. It'll make your life much easier and has modal dialogs built into the API. See here: http://jqueryui.com/dialog/#modal
OK, what I said before was totally wrong. Must have been tired.
You can't override the onbeforeunload because of the way it fires in the DOM. This is a good SO explaining it.
How can I override the OnBeforeUnload dialog and replace it with my own?
I'm using the colorbox plugin for modal popups. It's working nicely, but there's a main thing about it that seems wrong.
I have a form that pops up, and on submitting (or clicking a link) in the form, this might open another "colorbox" modal. It works smoothly, but there's one thing that bothers me.
As it is, colorbox seems to wait until it receives the response (via ajax) and then shows a "loading.gif" and starts to change size.
To me it makes more sense to have the "loading.gif" show as soon as they are opening a new colorbox modal. (and not just the image, I just mean that whatever happens when you open a new colorbox) It doesn't have to resize (obviously) but it's just annoying because some of my colorbox modals use webservices that are slow, so you might submit a form and nothing happens for literally 1 or 2 seconds. It'd be nice if it just would look like it was loading the next one for that time.
Ideas on how to do this?
It looks like the loading graphic is being shown onLoad, and the script tries to figure out the content type before this point. So if you have a slow web service, it may take time to realize the content type, thus not showing the loading.gif.
I did a quick test, and displaying the gif onOpen seems to work:
$(".myClass").colorbox({
onOpen:function(){
// taken from colorbox.css
$('#cboxLoadingGraphic').show();
},
onComplete:function(){
$('#cboxLoadingGraphic').hide();
}
});
Is there anyway to create an alert box, but with a more modern style? When an alert box is issued, the user can not use the browser until it is acknowledged (enter key or click OK). I would like to lock the browser in the same fashion, however use a custom made, better looking alert box. Is this possible with javascript?
Thanks
Edit: To clarify, by lock the browser I mean unable to change url, open new tab etc. The user needs to confirm before they can switch to another page
Yes. The kind of dialog you're referring to is a modal dialog. The basic principle of implementation is to simply cover the rest of the elements on the page with another element to render them unclickable.
Simply googling "javascript modal dialog" reveals a wealth of information; I could not hope to provide a comprehensive explanation in this small space.
[edited -Nickolay] Such dialog won't block further JavaScript execution as alert() does though, and it won't prevent the user from accessing the rest of the browser (other tabs and the Location bar). It's a good thing the user can continue to use the browser and it's one of the reasons such page-modal dialogs were created.
Yes, they are called "modal dialogs". JQuery has an excellent dialog widget that can be made modal as part of its JQueryUI library that can host just about any type of content, including forms.
See this one
Dialog
using jQuery
or
jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)
Edit
To your edit: I don't think by using javascript you can prevent the user from typing it to the url bar or opening a new tab. And do avoid doing these sort of things that make a user hinder his normal action.
No, I don't think modal dialogs solves his question.(Not that I have a solution for this, but just to express my opinion). When you use modal dialogs, the only controls you can't access are those inside the web page but the controls of the browser can very well be accessed (ie. Menus, address bar);
This is not possible in javascript. You may use facebox-like containers, that simulates modal behavior, but there are not native modal, i.e. javascript code will not stop execution, when "modal window" is appear.