I've started using FeatherLight and have a small problem:
I have a simple div. Here is its code:
<div id="AddNewItemToMenu" style="display:none;">....</div>
Basically i can open the lightbox and it is shown perfectly and everything is ok - UNTIL i manually force a close of the lightbox popup via Javascript.
After closing it once? - when i try to reload it again, i get an empty lightbox (maybe the close operation erased the div's content).
For the close command i use:
$.featherlight.close();
and for the opening command (opening of the featherlight lightbox) i use the following command:
$.featherlight($('#AddNewItemToMenu'), { 'persist' : true });
Any ideas why that happens?.
Maybe there is another methood of hiding instead of closing? (something that won't vanish my div?).
Thank you!.
Updated:
I've attached an example file. Uploaded to some temp site. here is the link: https://ufile.io/wxipg
When opening index.html => click on the "Open Featherlight" and then close the popup and then click on the "Open Featherlight" again, and you'll see empty div.
You should either use featherlight's binding (e.g. $('#open-fl').featherlight(...)), or else use the result of $.featherlight to re-open it, e.g.:
var fl = $.featherlight(...); // Opens dialog a first time
fl.close(); // Closing it via JS
fl.open(); // Opening again
Related
I'm trying to override the default file browser dialog with a custom function when the user clicks on the file selection dialog as shown below in Bootstrap-Vue.
The code is
<b-form-file
v-on:click.prevent
v-model="file"
:state="Boolean(file)"
placeholder="Choose a file or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
I tried adding v-on:click.prevent, and #click="function (e) {e.preventdefault()}" but those don't work for me.
https://bootstrap-vue.js.org/docs/components/form-file/
The way to prevent the default file browser from showing (and to run your own action on click) would be something similar to the following:
<b-form-file #click.native.prevent="alert('Hello world')"></b-form-file>
For the app I'm working on, users can edit text inline using CKEditor. Recently, I've included 2 extra plugins that I modified: stylescombo and bidi. For both of these, I just gave it a new name and modified what happens when text is clicked.
When a user clicks on a block of text to edit, I would dynamically load CKEditor onto it like this:
HTML: <div id="text-content">sample text</div>
JS: var $text = $("#text-content");
$text.attr("contenteditable", true);
CKEDITOR.disableAutoInline = true;
...
// toolbarOptions is an array of toolbar options
var editor = CKEDITOR.inline("text-content", {toolbar: toolbarOptions});
When user clicks away from the CKEditor, I would destroy the editor like this:
editor.destroy(true);
editor = null;
$("#text-content").removeAttr("contenteditable");
Now all of this works fine the first time, but when I attempt to edit the text-content again, the CKEditor fails to load without any error whatsoever. I console log the "editor" variable and I see the status of the editor being "unloaded". After some debugging, I found that if I don't load one of the 2 customized plugins above, the editor can reload after being destroyed. Any ideas why those 2 plugins are affecting the reloading of the inline CKEditor?
Demo: http://jsfiddle.net/22A6F/
I'm using fancybox with ajax request to open multilpe fancybox instances on same page:
This is html code:
User
and this is Javascript i've used:
<script type="text/javascript">
$(document).ready(function()
{
$(".comment_button_fancy").click(function(){
var element = $(this);
var Ide = element.attr("id");
$("#"+Ide).fancybox();
return false;});});
</script>
Everything could be ok, just 1 problem... first time i load the page, i need to click 2 times over "User" to open fancybox...
If i open fancybox and then i close it, the second time i can click just 1 time...
why?
Thanks
The first click registers the event to the DOM, and the second (and subsequent ones) show the Fancybox.
If using multiple Fancyboxes, you should avoid using ID's like you have there and change it to classes. Not sure why you've got all that code to launch the fancybox, when this should work:
$(".comment_button_fancy").fancybox();
This will Fancybox all elements with the class "comment_button_fancy" and should fix your two-clicks issue. You don't need to put a 'click' event handler around the Fancybox code, as it inherently has that event attached to it.
I'm trying to figure out how to validate a form opened using nyroModal.
The page is being opened as below on click of a button:
$(function() {
$('.btnedit').click(function() {
$.nmManual('form_page.php);
});
});
On the form that opens up, I have a few fields that are mandatory and a cancel & submit button.
<a class="nyroModalClose button" href="#" id="btn_submit">Submit</a>
On clicking of the submit button, I want to make sure the mandatory fields have value. If no, an error message should be displayed & the modal window should not close.
I'm trying to use the jquery validation plugin, but without success. The modal window always closes irrespective of the validation scripts.
I haven't found much info regarding form validation in a modal window. Is this not a preferred approach?
Thanks in advance.
I'm not able to help you about the jquery validation plugin in a modal window, but I know that using the instruction $.nmManual in that way, the form will not be placed inside the iframe tag, and if I remember correctly the content of new page will be added without header and body tags, so in a word incorrectly. I guess this can produce no validation.
To successfully open an iframe you need to use filters as described here:
Open iframe manually in nyroModal?
I hope this can help you.
I'm working on a webapp for iPad. What I want is provide a "save & quit" option. When the user presses the quit button, I safely update my database and show a screen who thanks the user for using the webapp.
What I want to do now is actually close the webapp. As window.close(); doesn't seems to work I have found a workaround with links.
Clicking on a link in a webapp closes the fullscreen app and opens safari. So far I tried to embed an hidden link in my mage and trigger it with link.onclick(); but it doesn't work, and document.location= doesn't open safari.
Here's the HTML example:
<body onload="leave();">
Modifications saved, goodbye!
<a id="goodbye" href="www.mahsite.com" style="display:none;"> </a>
And the JS:
function leave() {
window.close();//Doesn't work
window.setTimeout(function e(){document.getElementById('goodbye').onclick();},1000);
return true;
}
Can someone give me an idea? I'm aware that the onclick() won't work unless I have a onclick handler attached to my link, but I don't have any other idea.
Try
self.close();
or
self.window.close();