I try to make a copy to clipboard button but I don't know why I can't make it.
I load my page with ajax so I call a function to add the zclip to my button when I mouseOver the button. But when I click on it, nothing is happening.
Here are my codes:
JS :
<script type="text/javascript" src="<?php echo JS_DIR?>zclip.min.js"></script>
<script type="text/javascript">
function mouseOver(){
$('.copyMails').each(function (k,n) {
console.log("test");
var copyMails = $(this);
$(this).zclip({
path: '<?php echo JS_DIR?>ZeroClipboard.swf',
copy: function () {
var val = $(copyMails).attr('data-clipboard-text');
return val;
},
afterCopy: function () { console.log($(copyMails).data('clipboard-text') + " was copied to clipboard"); }
});
});
}
</script>
And my button:
<button onmouseover="mouseOver()" data-clipboard-text="<?php echo implode(',', $emails); ?>" class="copyMails" title="Copier les adresses emails">
Copier les adresses emails
</button>
Thanks in advance.
I could not get this to work on my server, I downloaded the ZeroClipboard.swf from zclips website and would not work. I noticed that the swf on zclips website in not the one that they use for their examples. So I created a hyperlink to http://www.steamdev.com/zclip/js/ZeroClipboard.swf and clicked "save link as" compared the size to the one I had downloaded originally and it was bigger. So I put the new one from the link above onto my server and it worked perfectly.
I think if you downloaded the swf from zclips website directly from their download link, this is your problem as it was mine. Try saving my link as a file and then uploading it to your server.
There is an error in your example, at least with what's provided. Trying it in a fiddle prouces your mouseOver function being undefined.
I assume your intent is to copy the data to the clipboard when they click the button, and setup the clipboard when the mouseover event is triggered, correct? If that's the case, your best bet would be to create a single event for this, delegating it to your class of button(s). This way, it's not continuing to configure the clipboard plugin, every time an element is hovered over, for all elements matching your selector.
Here's an example of the code, but I don't believe you can include the SWF path as an external resource within the fiddle so it's not fully functional. So I have put together a version of the code I feel is close. Please give it a try.
JSFiddle: http://jsfiddle.net/adx93ave/3/
$(function () {
$(document).on("mouseover", ".copyMails", function (evt) {
var $btn = $(this);
$btn.zclip({
path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy: $btn.data("clipboard-text"),
afterCopy: function () {
console.log($btn.data('clipboard-text') + " was copied to clipboard");
}
});
});
});
Related
What I'm doing
I'm using clipboard.js to copy a URL to the clipboard.
So I start by rendering some HTML in PHP. The code looks something like this:
$copyToClipboard = "copyToClipboard(".$id.");";
echo "<a id='get-link-$id' class='small-button get-link' onclick='$copyToClipboard' data-clipboard-text='myText'><u>Get Link</u></a>";
This is done at the top of my page, before my <script> tag.
Here's what I have below in my script:
new Clipboard(".get-link"); // initialize clipboard elements
$(function() {
new Clipboard(".get-link"); // initialize clipboard elements
});
function copyToClipboard(id) {
new Clipboard(".get-link");
new Clipboard("#get-link-" + id);
$("#get-link-" + id).text("Copied!");
setTimeout(function(){ $("#get-link-" + id).text("Get Link"); }, 2000);
}
I was redundantly using new Clipboard(".get-link"); in an effort to make it work.
All this code does is copy the link to the clipboard, then change the text for 2 seconds, then change it back.
The problem
It only copies the link to the clipboard after the second click on the a tag. I can't figure out why.
Edit
For some reason, this JS Fiddle shows my code working. Not sure why it doesn't work on my website.
Maybe you are not using document ready? Here is working solution for more links:
$(document).ready(function(){
new Clipboard(".get-link"); // initialize clipboard elements
});
https://jsfiddle.net/j8yLssy9/11/
I know this has been asked many times here, actually I found plenty of questions, each of them with a very good answer, I also followed those answers, used the different ways I found but I still don't get it to work.
What I'm trying to do is to load an image into a div, after clicking a link, instead of redirecting to a new page.
I'm using Pure Css (http://purecss.io/) to create a menu, the menu is made of a list, and each list item has a link inside it, like so:
<div class="pure-menu pure-menu-open" id="vertical-menu">
<a class="pure-menu-heading">Models</a>
<ul id="std-menu-items">
<li class="pure-menu-heading cat">Menu heading</li>
<li>Model 1</li>
</ul>
</div>
In that same html file, I have another div where I want to load the image:
<div id="model-map"></div>
I've tried the following ways, using jquery, in a separate js file:
I followed the selected answer for this question, which seemed to have the best approach (Can I get the image and load via ajax into div)
$(document).ready(function(){
console.log("ready"); //this shows on console
$('.model-selection').click(function () {
console.log("clicked"); //this doesn't show after clicking
var url = $(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$('#model-map').empty().append(image);
};
image.onerror = function () {
$('#model-map').empty().html('That image is not available.');
}
$('#model-map').empty().html('Loading...');
return false;
});
});
As you see, the console.log("clicked") never executes, I'll be ashamed if it's something stupid, cause it seems that the function is not handling the click event properly.
I get the image of course, but in a new page (default behavior of clicking the href) and I want it to load on the div without being redirected. I hope you can help me.
Thanks in advance!
Edit
The code above is working, and both answers are correct, the issue was due to some code inside tags in my html ( YUI code to create the dropdowns for the menu) and it was conflicting with my js file. I moved it to the actual js file and now it works as expected.
Thanks!
You need to use event.stopPropagation();
$('.model-selection').click(function( event ) {
event.stopPropagation();
// add your code here
});
You just need to prevent the default behavior of moving to a new page for <a> tags, to do this say e.preventDefault() first:
...
$('.model-selection').click(function (e) {
e.preventDefault(); // Stops the redirect
console.log("clicked"); // Now this works
...
)};
...
I have using dropzone.js in mvc by following this tutorial for uploading images but after uploading the image the thumbnail image still showing and I need it to be removed after every time I upload an image.
I have tried to replace the generated HTML after uploading the image using jQuery but it not showing correctly as the first time I need to refresh the page to show correctly but I don't want to do that.
$("#ImageUpload").replaceWith('<form action="/Products/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone dz-clickable" id="dropzoneForm">'
+'<div class="fallback">'
+'<input name="file" type="file" multiple />'
+'<input type="submit" value="Upload" />'
+'</div>');
You can try this:
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
More information here:
http://www.dropzonejs.com/#dropzone-methods
removeAllFiles() and removeFile() will trigger the server-side removal too, if you hooked Dropzone to remove files as well.
The solution to clear it only client-side, remove the file preview, and if you had a blank state message, remove the dz-started class to prevent the Dropzone CSS from hiding it:
$('.dropzone')[0].dropzone.files.forEach(function(file) {
file.previewElement.remove();
});
$('.dropzone').removeClass('dz-started');
Another option (similar to answer of Giraldi, but then when all files are completed):
myDropzone.on("queuecomplete", function () {
this.removeAllFiles();
});
it was actually an easy thing to do but some time it go hard so i just delete the dropzone generated code using jquery and add a button with 'id = btnCreate' then
$('#btnCreate').click(function () {
$('div.dz-success').remove();
});
and when i upload the thumbnail image removed after i click the button
Just an fyi...
The method removeAllFiles is not necessarily the prime choice. Which is the same as removeFile(file).
I have an event handler for dropZone's removedfile event... I'm using it to send a server message to delete the respective file from the server (should a user delete the thumbnail after it's been uploaded). Using the method removeAllFiles (as well as the individualized removeFile(file)) fires the event removedfile which deletes the uploaded images in addition to clearing the thumbnails.
So one could add some finessing around this but in the reality of it the method as mentioned in the primary answer on this thread is not correct.
Looking through the api for Dropzone I am not seeing an API call to simply reset or clear the thumbnails... The method disable() will clear the stored file names and what not but does not clear the thumbnails... Seems dropzoneJS is actually missing a critical API call to be honest.
My work around is to manually reset the containing div for dropzone:
document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""
This clears the thumbnails without firing off the event removedfile which is supposed to be used for deleting an image from the server...
docsDropzone.on('complete', function (response)
{
$(".dz-preview").remove();
});
Above works for me
try this on your library dropzone dropzone.js; but set time out to auto close 2500
success: function(file) {
if (file.previewElement) {
return file.previewElement.classList.add("dz-success"),
$(function(){
setTimeout(function(){
$('.dz-success').fadeOut('slow');
},2500);
});
}
},
It is very simple if you listen complete event in your dropzone options:
const dropZoneOptions = {
url: ...,
// complete event
complete: function(file) {
setTimeout(() => {
this.removeFile(file); // right here after 3 seconds you can clear
}, 3000);
},
}
Another way of clear those thumbnails
Dropzone.prototype.removeThumbnail = function () {
$(".dz-preview").fadeOut('slow');
$(".dz-preview:hidden").remove();
};
then you call it like this:
{your_dropzone}.removeThumbnail();
If this cant be done for cross-browser, then any comments would be much appreciated.
What I am trying to achieve is multiple "copy to clipboard" links on my page like this for example...
Copy Original Link
Copy Medium Link
Copy Web Link
Just not really having much luck getting anything to work.
I am using zClip, and trying to fire using jQuery onClick and a data attribute, like below.
But just cannot get it to work. See fiddle.
var copyText = 0;
$("a.copy").on('click', function () {
var copyText = $(this).attr('data-copy');
return false;
}).each(function () {
$(this).zclip({
path: 'http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf',
copy: copyText,
beforeCopy: function () {
},
afterCopy: function () {
alert(copyText + " has been copied!");
}
});
});
Please see my new fiddle here with zClip jquery plugin being used.
http://jsfiddle.net/Vr4Ky/5/
Thank in advance for any suggestions.
Here is an updated demo that does what you are trying to do:
Using this (the same) HTML:
Copy Original Link
<br />
Copy Medium Link
<br />
Copy Web Link
This script should work:
$("a.copy").on('click', function (e) {
e.preventDefault();
}).each(function () {
$(this).zclip({
path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy: function() {
return $(this).data('copy');
}
});
});
Here is what I did. First off the alert that you were adding via afterCopy is actually the default, so you don't need to add extra code for that. Also the data-copy attributes should be accessed via jQuery's data function. Finally I put the SWF reference to the same host as the JavaScript (this might not be necessary depending on the
security code in the SWF but it seemed necessary to get the jsfiddle to work.
Using Jason Sperske solution, I have found a work around to fix the issue when used inside a bootstrap down.
This is how to get the function to work with bootstrap dropdowns.
$('.btn-group').addClass('open');
$("a.copy").on('click', function (e) {
e.preventDefault();
}).each(function () {
$(this).zclip({
path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy: function() {
return $(this).data('copy');
}
});
});
$('.btn-group').removeClass('open');
Then this css also needs adding, to stop the flash file absolute div positioning outside of the list element.
.dropdown-menu li {
position: relative;
}
See working fiddle. http://jsfiddle.net/Vr4Ky/27/
for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.
So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:
<script>
$(function() {
$('#tray-button').click();
});
</script>
However, this doesnt seem to work in any browsers i tested.
Any idea?
$('#tray-arrow').click(function() {
// prepare an action here, maybe say goodbye.
//
// if #tray-arrow is button or link <a href=...>
// you can allow or disallow going to the link:
// return true; // accept action
// return false; // disallow
});
$('#tray-arrow').trigger('click'); // this is a simulation of click
Try this
$("#tray-arrow").live("click", function () {
// do something
});
I assume that you want to popup the thumbnail bar #thump-tray on page load.
Here's a way to do it:
locate the file supersized.shutter.js and find this code:
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
After it, add:
$(vars.tray_button).click();
Dont forget in your page (demo.html in the plugin), to change
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
to
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
instead of using
$(function(){
//jquery magic magic
});
you culd try this witch will work your jquery magic after the full page is loaded (images etc)
$(window).load(function () {
// jquery magic
});
and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();
$('#tray-arrow').trigger('click',function(){ })
example:
$(window).load(function () {
$('#tray-arrow').trigger('click',function(){
alert('just been clicked!');
})
});
try
<script>
$(function() {
$('#tray-arrow').click();
});
</script>
Make sure that this code is after your carousel is initialized.
This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet.
Maybe you need to add the listener in something like the theme._init function
http://buildinternet.com/project/supersized/docs.html#theme-init
or somewhere similar.
A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.
Check the source code of your plugin.