Control.modal wont run unless the whole page finishes loading
I just updated it to 1.2.7. In this you can call Control.Modal.load(); anywhere on the page without breaking things (it won't load twice now, no matter how many times you call load()). There is a note on the project page about it. Basically you just want to call it after you've put all the modals on the page (right before the closing body tag maybe?). Thanks for the input - Ryan
Posted April 8th, 2007 at 8:52pm by ryan
Oh ok... I see it.... what exactly would the syntax be? I'll put it before the tag ends.... This would solve the problem of having to wait for everything to load before the modal window works right? thanks a ton, its a great script :)
Posted April 16th, 2007 at 4:51am by zahir
I would also like to know the syntax for allowing this script to work before page finished loading.
Thanks!
Posted April 16th, 2007 at 5:40pm by jyeager
Control.Modal.load();
Posted April 17th, 2007 at 2:32pm by ryan
Hey ryan.... I tried it.... doesnt work Control.Modal.load(); if someone calls the modal window before the whole page loads, it opens it as a full page.... im lost...
Posted April 17th, 2007 at 2:58pm by zahir
Try putting onclick="return false;" on each modal link.
Posted April 17th, 2007 at 3:19pm by ryan
doesn't really solve the problem, just avoid the link from performing an action unless the page has loaded fully....
Posted May 7th, 2007 at 12:33am by zahir
onclick="return false" works for me. I have a page that loads a paginated list of photos (each of which opens a modal window when clicked). Before adding the onclick attribute, if anyone clicked on any of the images before all of them were loaded and the page had entirely finished it would navigate to the url rather than open the modal window with it. For my purposes, just having it do nothing is fine. Maybe I'll add onclick="alert('Please wait for page to load'); return false;" or something like that (lame I know, but not as lame as going to a broken page).
Anyone else have suggestions as to how to more gracefully handle this situation?
Posted December 29th, 2007 at 10:09pm by Caleb Jones
I settled on what, in my opinion, is a good solution to this problem. For the links that open modal windows set onclick="return false;" (as stated above by ryan). This functionally solves the problem but results in a strange user experience. While the page is still loading the links will show the pointer cursor which indicates to the user that they can click on the link and do something. To fix this UI issue I did the following:
- Set each modal link's cursor CSS style to 'wait' (ie: style="cursor:wait;")
- Set each modal's name attribute to the same thing (ie: name="controlModalLink")
- Added a simple function to Control.Modal which gets all elements with the above name (in step #2) and sets their cursor CSS style to 'pointer' (ie: element.style.cursor = 'pointer';)
- Set the page's body tag's onload attribute to call the function defined in step #3 (ie: onload="Control.Modal.ready();")
So while the page is loading, none of the modal links will do anything when they are clicked and when hovered over the mouse cursor will show the hourglass (or whatever that browser's 'wait' cursor is). Then, once the page has loaded, the modal links will work and when hovered over they will show the normal hand cursor (or again whatever that browser's 'pointer' cursor is).
Here's the function I added right after the 'load: function(){' definition in control.modal.js:
ready: function() {
var modal_links = document.getElementsByName('controlModalLink');
for (var i = 0; i < modal_links.length; i++) {
modal_links[i].style.cursor = 'pointer';
}
},There may be a more graceful way to get all the modal links without having to set their name attributes. If there is a way to do this w/o using name attributes then that would remove step #2 above.
Ryan, how possible/difficult do you think it would be possible to build this automatically into a future version of Control.Modal?
Posted January 5th, 2008 at 5:14pm by Caleb Jones
Oh, I just remembered, IE doesn't like the document.getElementsByName() function. If you need this to work for IE (which I also do), there are plenty of work arounds.
Posted January 5th, 2008 at 5:25pm by Caleb Jones
I'm not sure how many people use prototype.js as well as Control.Modal but it seems to me that you could solve the problem above using a class name then getting the elements by class. Using the beautiful enumerable functionality you could use the each() function for the loop above. Would do the same thing in a more elegant fashion. Just a suggestion. Also, when using prototype, you could enclose your Modal instantiation in an Event.observe block and watch for the window load before instantiating the modals.
Posted January 22nd, 2008 at 11:37am by zaroundus
I'm facing a very odd problem. Control modal is great but I'm using it on a cms based site as an alternative(and a pretty one at that) to popups. Problem is if someone clicks a link which calls a modal window before the entire page finishes loading, it just opens the page being called as a regular link. What I mean is instead of opening the specified link in the modal window, it opens it as a regular link would open if it didn't have the control.modal functionality.
If the page finishes loading and then someone clicks the link, it works like a charm. I'd really hate to go back to popups but I'll have to do that if I cant figure this out....
Looking forward to hearing your comments guys... thanks a bunch
Posted April 7th, 2007 at 5:23pm by zahir