I am using the JQuery framework "Dropzone.js" to upload files on server.
I want to do some stuff when the thumbnail is displaying. The other things are working without issue. The DOM is displaying before the javascript call.
I tried to initiate the thumbnail in two ways, according to Dropzone.js documentation :
var dz = new Dropzone(
'div#'+id,
{
init: function() {
this.on("thumbnail", function(file) {console.log("thumbnail") });
},
...
}
and :
var dz = new Dropzone(...);
dz.on("thumbnail", function(file) {
console.log("thumbnail")
});
And nothing is displaying in my browser console when I drop a file in the dropzone. The most weird behaviour is that when I write the same things with the event addedfile (dz.on("addedfile", ... or in the init parameter), I have the correct behaviour : I have something written in the console when a file is added.
Note that I want to modify dynamically the thumbnail when it is created, and this is why I can't use other event.
I use a custom previewTemplate in my Dropzone object; I don't think that cause the issue, but in the doubt I post what I wrote for this parameter too:
previewTemplate : '<div class="dz-preview dz-file-preview ">'
+ '<div class="dz-details">'
+ '<div class="dz-cancel" title="Supprimer">X</div>'
+ '<div class="dz-filename"><span data-dz-name></span></div>'
+ '<div class="dz-size" data-dz-size></div>'
+ '</div>'
+ '<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span><span class="dz-upload-text" data-dz-uploadprogress></span></div>'
+ '<div class="dz-error-message"><span data-dz-errormessage></span></div>'
+ '</div>',
If someone has an idea of what is happening and how can I resolve it, I thank a lot !
Edit after comments
Ok, then, thanks for all for your comments. I think I know where I misunderstood; and reading more carefully the doc, that was the point :
They do stuff like: create a new HTML element, add the element when provided with image data (with the thumbnail event),
This event is only fired when we want to display an image in the thumbnail; but what I am doing is a thumbnail without image (just the name of the file and the size). And that's right that when I add the createImageThumbnails flag and the <img data-dz-thumbnail /> in the template, the event is triggered when I add an image file in the drop zone.
So, my new question is: how to display an event when a free-image thumbnail is created ? I thought in using the uploadprogress event but it is not triggered when the file is not sent (for example, when activating a max file size limit).
I'm not sure that your using it in the right way. I would try the following approach:
var dz = new Dropzone(...);
Dropzone.options.dz = {
init: function() {
this.on("thumbnail", function(file) { console.log("thumbnail") });
}
};
If the event does what you expect it to do is a different matter.
Related
Hope you can help out! :)
I'm trying to created an image carousel (Owl Carousel) with dynamic loaded content instead of static code. This dynamic content is generated using jQuery and the Flickr API.
The script you'll find below, retrieves images from a specific Flickr album and converts the data into HTML elements (image + link). Using the $.each(data.photoset.photo, function(i, item){ function I'm creating the carousel's content according the the requirements given.
The issue is, that somehow the jQuery settings from the Owl Carousel don't apply to the dynamic generated content. Using inspect element in the browser, I can see that the content is generated correctly and also some of the carousel's settings are applied to the generated content but it's not showing in the front-end: view screenshot
Note: Converting the dynamic content to static content and inserting it inside the carousel works fine. It looks like the combination of applying a jQuery plugin on dynamic created content using another script is causing the issue.
Code snipped from the <body> (API key required in script):
<body>
<div class="owl-carousel">
</div>
<script type="text/javascript">
function getFlickrImages(setId) {
var URL = "https://api.flickr.com/services/rest/" + // Wake up the Flickr API gods.
"?method=flickr.photosets.getPhotos" + // Get photo from a photoset. https://www.flickr.com/services/api/flickr.photosets.getPhotos.htm
"&api_key=<YOUR-API-KEY>" + // API key. Get one here: http://www.flickr.com/services/apps/create/apply/
"&photoset_id=72157663149819061" + // The set ID.
"&user_id=135343422#N06" +
"&privacy_filter=1" + // 1 signifies all public photos.
"&per_page=10" + // For the sake of this example I am limiting it to 20 photos.
"&format=json&nojsoncallback=1"; // Er, nothing much to explain here.
// See the API in action here: https://www.flickr.com/services/api/explore/flickr.photosets.getPhotos
$.getJSON(URL, function(data){
var owner = data.photoset.owner;
var phot_set_id = data.photoset.id;
$.each(data.photoset.photo, function(i, item){
// Creating the image URL. Info: https://www.flickr.com/services/api/misc.urls.html
var img_src = "https://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg";
//var img_thumb = $("<img/>").attr("src", img_src).attr("id", item.id).css("margin", "8px");
var link_src = "https://www.flickr.com/photos/" + owner + "/" + item.id + "/in/set-"+phot_set_id;
var img_link = $("<a/>").attr("href", link_src);
var img_thumb = $('<img />').attr({src:img_src}).appendTo($('<a />').attr({href:link_src,target:"_blank"}).appendTo($('.owl-carousel')).wrap("<div></div>"));
});
});
}
$(document).ready(function() {
getFlickrImages("72157650210689192"); // Call the function!
});
</script>
<!-- OWL CAROUSEL - http://www.owlcarousel.owlgraphic.com/ -->
<script src="owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
</body>
Try adding the line
$(".owl-carousel").owlCarousel();
at the end of the function getFlickrImages(setId).
The issue might be that the owlCarousel setting applied the first document.ready() got called and at that time your dynamic content had not generated. Thus, if you apply the owlCarousel at the end of the function getFlickrImages(setId), your dom content has already been generated and then the carousel would apply.
I fell into the same issue while using another liquid carousel(http://www.nikolakis.net/liquidcarousel/), but applied the same solution as I have described above and it worked.
Hope it helps.
I'm trying to create a poker web app using an poker library (http://tairraos.github.io/Poker.JS/)
One of the methods to render a card image is using this function:
getCardImage: function(size, suit, point) {
var image = document.createElement('img');
image.src = this.getCardData(size, suit, point);
return image;
},
It creates an image using canvas and places inside an img tag. I've been trying to place it inside a div, like:
$('#flop').append(Poker.getCardImage(60, 'hearts', 'j'));
but to no avail. The only way it renders normally is using:
document.body.appendChild(Poker.getCardImage(100, 'h', 'Q'));
I really run off of ideas of how to pull this out. I've tried many JQuery methods and nothing worked. I see on the network tab of chrome that the image is created using a base64, but when I try to place it inside a div, nothing appears. Only if appends to the end of the body.
Can someone lend me a help here?
tnx
I think you should just have to change your getCardImage function to return a jQuery Element instead of an HTML element. Try this:
getCardImage: function(size, suit, point) {
var image = '<img src="' + this.getCardData(size, suit, point) + '" />';
return $(image);
}
Then your jQuery append should work:
$('#flop').append(Poker.getCardImage(60, 'hearts', 'j'));
Update 9/11/13 - Here is a fully working jsFiddle demonstrating the issue... to experience the issue, expand the grid and attempt to drag the nested row over to the TreePanel. The drag element will be obfuscated by the TreePanel, as if it is behind it. Link here: http://jsfiddle.net/ZGxf5/
Here's a bit of a unique roadblock I've run into... I figured it would be best illustrated with an image:
As you can see in the picture, I am attempting to drag a div, generated via the rowBodyTpl property of the RowExpander plugin utilized in the grid shown in the bottom left of the image. I am able to "grab" the element and move it about, however it is seemingly constrained to the RowExpander generated div. I cannot drag the div any further left, nor upwards from where its original position. Attempting to move it into the panel to the right results in the dragging div being obfuscated, as shown in the picture.
I have attempted to completely eliminate all constraints in the startDrag method as you will see in the code below, but to no avail. I am basically just using the code provided in Sencha's 5 Steps to Understanding Drag and Drop with ExtJS Blog Post, but it obviously needs some tweaking for my implementation.
Below is my code for initializing the Drag on the target div..
/**
* NOTE: The following code is executed whenever
* the contents of the grid's store change
*/
var me = this, // ENTIRE left panel, including the TreePanel and lower GridPanel
divs = Ext.select('div[name=storage-item-div]', false, me.getEl().dom),
dragOverrides = {}; // provided separately, see below
Ext.each(divs.elements, function(el){
console.warn("mkaing new dd", el);
var dd = new Ext.dd.DD(el, 'storageItemDDGroup',{
isTarget: false
});
Ext.apply(dd, dragOverrides);
});
The dragOverrides object is defined as follows (note my debugging for Constrain)
dragOverrides = {
b4StartDrag : function() {
// Cache the drag element
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
startDrag: function(){
/** DEBUGGING */
_t = this;
this.resetConstraints();
this.setXConstraint(1000,1000);
this.setYConstraint(1000,1000);
},
// Called when element is dropped not anything other than a dropzone with the same ddgroup
onInvalidDrop : function() {
// Set a flag to invoke the animated repair
this.invalidDrop = true;
},
// Called when the drag operation completes
endDrag : function() {
// Invoke the animation if the invalidDrop flag is set to true
if (this.invalidDrop === true) {
// Remove the drop invitation
this.el.removeCls('dropOK');
// Create the animation configuration object
var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
// Remove the position attribute
this.el.dom.style.position = '';
}
};
// Apply the repair animation
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}
}
Finally, I think the rowBodyTpl portion of the lower grid's configuration may be useful in solving the issue, so here is the source for that!
rowBodyTpl : ['<div id="OrderData-{item_id}" style="margin-left: 50px;">'+
'<tpl for="order_data">'+
'<tpl for=".">' +
'<div name="storage-item-div" class="draggable" style="padding-bottom: 5px;">' +
'<b>{quantity}</b> from Purchase Order <b>{purchase_order_num}</b> # ${purchase_cost}' +
'<input type="button" style="margin-left: 10px;" name="storageViewOrderButton" orderid="{purchase_order_id}" value="View Order"/>' +
'</div>' +
'</tpl>' +
'</tpl>'+
'</div>']
I was able to get this working in a Fiddle, but I had to switch my RowExpander template to instead render an Ext.view.View rather than the div which I was previously using. Using an Ext.view.View allowed me to basically just follow the Sencha demo for using DragZone and DropZone.. kinda wish it wasn't so complicated but hey, that's just how it is sometimes, I guess.
See the very messy jsFiddle source here for a working demo using DragZone and DropZone, feel free to tweak for your own needs: http://jsfiddle.net/knppJ/
Again, the issue here was dragging a nested div from inside a RowExpander generated row inside a gridpanel to a separate adjacent panel. The issue I was encountering is thoroughly described in my question above. I was not able to get a regular div working the way I wanted it to, so I ended up using an Ext.view.View in place of the grid. This required adding a bit of extra logic in the onbodyexpand event fired by the RowExpander plugin, basically just rendering an Ext.view.View to the div generated by the RowExpander.
This question already has answers here:
Turning live() into on() in jQuery
(5 answers)
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 9 years ago.
I have been using this code to get a simple lightbox working on a site of mine.
And I tried to modify it slightly so:
a) The lightbox fades in- Done
b) The script pulls in the src attribute not the href- Done
b) I can pull in data from a custom "data-description" attribute on the <img> that is being clicked (or tapped I suppose) to a <p> in the lightbox.
Issues
With the second, when the image is first clicked, It works fine. When any other is clicked, or it is clicked again, nothing happens- I can't work out why as I seem to be doing it right?
Also, when using jQuery 1.9, live() is apparently depreciated- I was using 1.8.2 before and didn't notice until now, I have tried on() with no sucess, and being a JS beginner am puzzled as to how to fix it, this issue means that the lightbox won't close.
Almost-working-but-broken code here: http://codepen.io/hwg/pen/ybEAw - Sorry about all the comments but I find it easier that way.
JS:
$(document).ready(function() { //Document Ready
$('.inner_img').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_src = $(this).attr("src");
// Get Description
var desc = $(this).attr("data-description");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
$('#content').html('<img src="' + image_src + '" />');
// Change Description in the P tag
$('.desc').html(' '+ desc +' ');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').fadeIn(); // Fades it in
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_src +'" />' +
'<p class="desc">'+ desc +'</p>' + // Adds Description from <img data-description="..">
'</div>' +
'</div>';
//insert lightbox HTML into page
$(lightbox).hide().appendTo("body").fadeIn();
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').on('click', function() { //must use live, as the lightbox element is inserted into the DOM
$("#lightbox").fadeOut(); // Fades it out
});
}); // End
Thanks for any help.
EDIT: I have been shown that the live/on issue is very common, I can see where I went wrong. Thanks for the assistance on this commenters.
However, why won't my code work for the second issue?
use event delegation with on -
$(document.body).on('click','#lightbox', function() {
$("#lightbox").fadeOut(); // Fades it out
});
Demo ---> http://codepen.io/anon/pen/ywJhe
You can change
$('.inner_img').click(function(e) {
to
$(document.body).on('click', '.inner_img', function(e) {
so that events occurring after the binding will still be delegated to the new elements.
I generate an mask image on a web server programmatically, then apply it to a HTML element with the following code:
imageToMask.style["-webkit-mask-box-image"] = "url('" + featherURL +"') 100 stretch";
How can I find out when the image comes back and has finished downloading, so that it doesn't just pop onto the page?
You can probably do something similar to what #lonesomeday did in:
jQuery .on() not bound when script inserted into the DOM
Something along these lines:
$('button').click(function() {
var imageToMask = document.createElement('img');
imageToMask.style["-webkit-mask-box-image"] = "url('" + featherURL +"') 100 stretch";
imageToMask.onload = function() {
//Custom behaviour
};
document.body.appendChild(imageToMask);
});