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();
}
});
Related
I have this strange issue with web app I am working on. Basically there is a UI error, that after pulling menu from the side and closing it again, the whole DOM is moved half off the screen.
The interesting part is that if I call alert(); after the menu slides out again, something happens with the view and page is displayed correctly again.
I have tried to re-render dom by hiding it and showing again, but it doesnt have the same effect.
Does anyone know what happens when alert window is displayed/closed and if there is any way to simulate it in JS?
Thanks
UPDATE: Just so you can see I didn't make that up: https://github.com/jakiestfu/Snap.js/issues/238
I have a small Phonegap app and on a button click I have it refresh the page via:
window.location.reload();
It loads pretty fast. However, although fast, you can see a flash of some elements being loaded before others. I would like to do some sort of load screen during this time, which I think will be a nice touch.
What might be the best way for me to do this? It wouldn't be at application start, but somehow tied into the button that calls for the page to be refreshed.
BTW, I am not using Jquery Mobile or Zepto .
Thanks
I'm not too privy on phonegap but I believe it is just normal HTML, CSS and JS no? So then why not just have an AJAX request that grabs your data, so the page itself is not actually refreshed but the data within the container. Then just have a div prepended to the body on the refresh call that contains your loader information (spinning gif, loading, etc). Then disappears on the ajax callback.
This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.
I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.
I want to run a - accept our terms pop up box - that must be accepted before the page can be seen. I think I found answers here: https://stackoverflow.com/questions/6588167/how-do-i-make-a-popup-appear-immediately-before-the-rest-of-the-page-loads
But I am at a loss to what I was doing wrong, and why my method had a time lag.
I uploaded http://jsfiddle.net/ZqVuj/2/ as example - If you click run you can see the lorem pops up for a moment then black. Why does the modal not work before the rest of the page loads?
Someone built the page Im on off the code from this page: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
I took out the fade-ins, and changed $(document).ready(function() to $(function()
Yet the text still loads for a moment before the modal kicks in. What am I doing wrong?
Instead of $(function() {...}), use (function() { ... })(); and put it right at the top of the <body>. That way, it will run instantly before the page content is shown.
Bear in mind, though, that anyone with basic knowledge of their browser can just remove the popup and reveal the content. You should use a more reliable method for securing your content.
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).