I need a very FAST and lightweight jquery based Modal box on my site, I am looking at Facebox http://famspam.com/facebox
It is a nice plugin and it seems fast and lightweight but I think I can still strip out some of the features I do not need. For example I do not need it to use regex and find photos, so I have removed that part of the code, also I do not want the box to close whenever you click anywhere or the escape key. I have this partially done, I removed the code that makes the escape key close the box but I have not figured out how to make it only close programaticly or when clicking the close button only, right now it closes on any click outside of the box.
Now I have one issue I have not been able to figure out yet, there appears to be 2 spots in the code that control the delay of fading the box in and out, they were set at 200 and I changed them to 0 and tried several other number combinations but I can not seem to get the speed to be faster (less delay).
Does anyone know how to remove the delay in opening a facebox? Also how to disable it from closing when you click anywhere outside of the box?
To disable closing it from clicking anywhere outside,
you can find something called "overlay : true"
change it to "overlay : false,"
To close it with-out delay, You can find something like '$(document).bind('close.facebox', function() {'
there, change
"$('#facebox').fadeOut(function() {"
to
"$('#facebox').hide(function() {"
I use the thickbox for one project, pretty fast. Check also this list. I recommend you to keep the closing by clicking outside the box option, a real help for users.
Instead of hacking facebox, I would try something more configurable.
I've used jqModal to create modal boxes, which display instantly, can't be closed except when certain conditions are met, etc
Related
I've got a date-picker component in an app and used the example for a menu to open it.
I now want to make it more efficient to use for desktop users, so I removed the readonly flag to make manual input possible.
Now desktop users can simply tab through the different fields of the form to quickly input dates and times. The problem here was that the date-picker would not show up when a user tabs into a field, which was easily fixed with adding #focus="menuVariable=true" to the text-field.
But the problem now is that the date-picker won't show up anymore when a user first clicks into the text-field, at least not consistently, which I haven't been able to fix. I already tried to listen for click events and setting the menu's toggle to true then, but I guess the problem is setting that variable in the first place. Not sure how to work around this or how to open that menu manually any other way.
Here is a codepen showing off the problem. Click around a bit between the two fields, the date-picker on the right always opens, the one on the left only occasionally.
Does anyone know a better solution to consistently show the date-picker when a user either clicks into the text-field (or any other part of the v-menu) or tabs into the text-field?
#keyup="menuVariable=true"
#keydown="menuVariable=false"
I worked with this.
there is a nice solution here:
https://codepen.io/Phennim/pen/KKPYGRK
v-on:focus="onFocus"
v-on:blur="onBlur"
Hope it helps you
I am programming HTML using Sublime Text 3 and every time autocomplete pops up, it stays up for not even a second and closes. I've tried putting the mouse inside the list and that doesn't work, even while I'm scrolling through the list it'll close. Does anyone know the fix for this? I've been searching and can't find anything.
I am trying to implement an easy way of displaying a small modal window when the user exits my Website, containing a quick and easy single question dialog, with a multiple-choice answer, and a submit button..
I'm having trouble finding a simple, straight-forward answer everywhere I've looked. Yes, I searched.
NOTE: I already have my Modal Window created, with the Form on it, and everything ready! (currently the Modal Window is set to Display None, until I figure out the following question)..
What I need to know exactly is this: What is the easiest way to simply detect when the user is leaving my website, and set the Property of the Modal Window ID to Display:Block for example, which would change it from Display:None and make it show?
I would prefer a simple script being able to detect any of the following behavior as they are trying to exit the website either by (A) clicking X on the tab, (B) clicking X on the window, or (C) hitting the back button enough times to leave my Site - at which time, the script would change my Modal's ID property from display none, to display block.. Thats it.
Thanks in advance!
JavaScript has a special event for this onbeforeunload
<script>
window.onbeforeunload = exitFunc;
function exitFunc() {
modal logic here
}
</script>
I need to sort messages, and I can either remove them or approve them (or ignore).
I want to create a script (probably using Tampermonkey - I'm using Chrome on mac) where I could input a list of recurring words (swear words I would input) for which it removes the messages so that it can go faster, it would automatically click the remove button after if it find the word(s) in the message.
If it doesn't find anything I want it to do NOTHING, just leave the page as is.
Basically usually after I click the button the page loads again automatically and gives me the next message.
I don't really know programming, I'm mostly just around html/css and a bit of jquery, but I'm learning here and there.
How can I achieve this ?
Thank you very much.
I can display an alert box as follows: alert('Please wait 5 seconds');.
Is there a way to remove this alert box after 5 seconds if the user has not clicked "OK" by that time using JavaScript?
No, you cannot do that.
As an alternative you could create some sort of modal window right in your UI.
When a native JS alert dialog is fired the browser stops everytihng, until the user clicks "OK", this goes for the confirm() funciton as well.
I recommend using jQuery's UI dialog component:
http://jqueryui.com/demos/dialog/
Highly configuratble, modal, non modal, size, and of course for your use... timed interval. Heck you can even ad a nifty timer that counts down!
As far as I know there is no way to do this using the browsers alert window. JavaScript cannot be executed when an alert box is "Alerting". However you could use a UI element with a close() method, as the displaying of such an element would not stop the browser from executing your JavaScript.
The alert can not be removed, what you can do is to make a custom alert using jquery. With jquery, you can customize your alert theme and decide how its going to be removed with a simple command like fadeOut();
This may not help the poster at all but I bet some finders readers will get through fire and flames out with this : reload the script the alert box is displayed from.
To do this you should add an invisible frame from which the alert box is fired, and reload that frame without affecting your dear front page... Not even sure if that works I'll go try and come back to this...