I'm trying to copy text to clipboard by using ZeroClipboard. It works good, but only in the second click on the button and not in the first click. I saw few solutions in Google but none of them fixed my problem.
I tried to put the ZeroClipboard events outside of the click button event, and also to put it inside the $(document).ready(function() and all of this didn't help.
Can you please help me solve this problem?
Thanks!
$("body").on('click','.copyToClipboard', function (event) {
var clientTarget = new ZeroClipboard( $("#copy_to_clipboard"), {
moviePath: "js/ZeroClipboard.swf",
debug: false
} );
$('#copy_to_clipboard').attr('data-clipboard-text', texttocopy);
alert(texttocopy);
clientTarget.on( "load", function(clientTarget)
{
$('#flash-loaded').fadeIn();
clientTarget.on( "complete", function(clientTarget, args) {
clientTarget.setText( args.text );
$('#data-to-copy-text').fadeIn();
} );
alert(args);
} );
});
I think you need to set up the zero clipboard before you click on it. In your code, you're not setting it up to handle clicks until you actually click on it. You should find all the objects on the page that need to handle clicks and set them up on document ready. something like this:
$(function () {
$('.copyToClipboard').zclip({ /* zclip settings */ });
});
Related
I have add tinyMCE in may website which is using angular. I'm not able to catch full screen event of tinyMCE. I've checked the topic here and tried many method, but still no success.
-With the code below in editor setting I'm able to catch "change", "redo", "undo" event:
setting = {
selector: 'textarea',
...
setup: function(e) {
e.on('undo', function () {
some codes;
});
},
};
but 'fullscreen' seems not work here, neither the button on the toorbar, nor the one in the menu.
-I also tried to get it by finding the fullscreen class in the DOM:
if ( angular.element('.mce-fullscreen').length ) {
console.log('fullscreen');
}
Anyone have some hints, please? Thank you very much.
If you look at the source code for the fullscreen plugin you will see this line:
editor.fire('FullscreenStateChanged', {state: fullscreenState});
...so when you go to full screen the editor will emit the FullscreenStateChanged event. You can then use that event like this:
setup: function (editor) {
editor.on('FullscreenStateChanged', function () {
console.log('FullscreenStateChanged event fired.');
});
}
I'd like to initially set the focus onto the text-field of an item when editing it, but cannot overcome TinymMCE'S iframe kickin' in. When disableling TinyMCE, everything works as expected, the text-field is focusable. I tried simulating a click in TinyMCE's body-element, no luck either. Is it possible at all, to focus the body-field via JS?
This is what I tried so far:
(function($) {
$(document).ready(function() {
$('#text').focus() // Only works, when TinyMCE is disabled.
$('body#content').click() // Cannot click into TinyMCE's body.
$('#text_bold').click() // Cannot even click one of the editor's buttons.
setTimeout(function() {
// Tried same as above with time-delay, no luck.
}, 277);
});
$(window).load(function() {
// Tried the same as in doc.ready, no luck.
});
})(jQuery);
I know this is kind of old but I definitely struggled finding a solution for this online, so I'm sharing. Add this, in your tinymce.init() codeblock. Change selector or event if needed.
selector: "textarea.tinymce",
setup: function (editor) {
editor.on('mouseup', function (e) {
this.focus();
});
}
TinyMCE is loaded inside an IFRAME so it's not in the DOM of the main document. Direct jQuery calls will not work.
This is an old code I used (TinyMCE version shipped with Plone 4.3):
(function($) {
function checkTinyMCELoaded () {
if (window.tinymce==undefined || !tinymce.editors.length) {
setTimeout(checkTinyMCELoaded, 100);
return;
}
$('#text_ifr').contents().find(".mceContentBody").get(0).focus();
}
$(document).ready(function() {
setTimeout(checkTinyMCELoaded, 100);
});
})(jQuery);
It's ugly. Best way is to get rid of setTimeout and attach an handler on TinyMCE load event, but when I looked into this I found this is not so easy on Plone as you must change the .init() call of TinyMCE done by Plone JS.
I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle
Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/
I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.
Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle
I upload all the stuff so you could see what I mean: http://nonemoticoner.com/learning/jquery/clickbug/
The point is that I cannot click divs I created with Handlebar, this is:
firstthumbin (id),
restthumbing (class)
They exist on thumbnails so I could use them to switch between galleries.
In script.js I created handlers in jQuery so I could click ones. None of them work :(
$('div#firstthumbing').on('click', function () {
console.log('clicked first');
changeSli(galInView, 0);
});
$('div.restthumbing').on('click', function () {
console.log('clicked rest');
changeSli(galInView, 1);
});
$('.thumb').on('click', function () {
console.log('clicked first thumb');
changeSli(galInView, 0);
});
I don't know why but a little above click works correctly. Is that because of Handlebars? How can I solve it? Please help me, I really tried to fix it by myself but this thing is really new to me. Click always used to work for me.
You are loading the firstthumbing after "onload" event, and you click function not binding becouse the element doesn't exist on DOM whe you run the script to haddle the click function.
Try to call the click function before create you clickable thumbs.
I've seen a couple of questions in regards to bootstrap modals, but none exactly like this, so I'll go ahead.
I have a modal that I call onclick like so...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
This works fine, but when I show the modal I want to focus on the first input element... In may case the first input element has an id of #photo_name.
So I tried
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
But this was to no avail. Lastly, I tried binding to the 'show' event but even so, the input won't focus. Lastly just for testing, as I had a suspiscion this is about the js loading order, I put in a setTimeout just to see if I delay a second, will the focus work, and yes, it works! But this method is obviously crap. Is there some way to have the same effect as below without using a setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
Try this
Here is the old DEMO:
EDIT:
(Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3)
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
Starting bootstrap 3 need to use shown.bs.modal event:
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
or put the focus on the first visible input like this:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
http://getbootstrap.com/javascript/#modals
I am using this in my layout to capture all modals and focus on the first input
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it´s something about the animation!
I had problem to catch "shown.bs.modal" event.. And this is my solution which works perfect..
Instead simple on():
$('#modal').on 'shown.bs.modal', ->
Use on() with delegated element:
$('body').on 'shown.bs.modal', '#modal', ->
Seems it is because modal animation is enabled (fade in class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.
I can think of two ways to solve this problem:
Remove fade from class, so the dialog is immediately visible after calling .modal('show'). You can see http://codebins.com/bin/4ldqp7x/4 for demo. (Sorry #keyur, I mistakenly edited and saved as new version of your example)
Call focus() in shown event like what #keyur wrote.
I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
You just need to call modalEvents() on document ready.
Use:
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
So, you can use the same modal to load what you want without worry about remove events every time.
I had the same problem with the bootstrap 3 and solved like this:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
Bootstrap has added a loaded event.
https://getbootstrap.com/docs/3.3/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
Bootstrap modal show event
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
A little cleaner and more modular solution might be:
$(document).ready(function(){
$('.modal').success(function() {
$('input:text:visible:first').focus();
});
});
Or using your ID as an example instead:
$(document).ready(function(){
$('#modal-content').modal('show').success(function() {
$('input:text:visible:first').focus();
});
});
Hope that helps..