I'm Dragging and Drooping an image from a toolbar onto a canvas and then moving it around in the canvas.Currently I'm able to load a single image onto a canvas multiple times from the toolbar as shown in the link below.
http://jsfiddle.net/gkefk/22/
I want to add the functionality of deleting a particular copy of the image from the canvas when the user double clicks on that particular image.For this I'm triggering a jQuery event on double click.
$("#image").dblclick(function(){
layer.remove();
});
Even though I'm double clicking on a particular copy the image,that particular copy is not getting deleted from the canvas.I can't understand what I'm doing wrong..Please Help
The link to the fiddle containing the jQuery event
http://jsfiddle.net/gkefk/23/
Updated your fiddle to make it work:
image.on('dblclick', function() {
image.remove();
layer.draw();
});
http://jsfiddle.net/gkefk/26/
You have to add an event handler to each copy of the image instead of trusting in jQuery to dynamically do this.
Your jQuery call is done once on document load (while no element with id "image" exists) and has no effect afterwards. Also keep in mind that it's not a good idea to work with a static ID on multiple dynamic elements as an ID has to be unique.
Related
I'm trying to create a simple drag and drop web application using jquery.
everything so far works as it should.
now what I am trying to do is to add a button to the page so when its clicked, it will FLIP the selected image and I am not having any luck with at all.
I have created a jsfiddle so you can see it for yourself: http://jsfiddle.net/7btkn17q/8/
drag and drop a book image onto the box bellow it and click once inside it, and you will see a button appear at the top of it which says flip.
I need to use that button to flip the selected image.
for that I used this:
$('#flip').click(function(e){
if( $(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag img").css('border', 'solid 5px #000');
}
});
but this does not have any affect on the image(s) at all. I know that the code above is not for flipping the image(s). i just created that code as a test to see if I can access the image(s) on button click with no luck.
could someone please advise on this?
EDIT:
EVEN though I thought this would work, it didn't and I am so confused on why it didn't work:
$('#flip').click(function(e){
if($(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag").find('img').css('border','5px solid #000');
}
});
Second Edit:
I've tried to use the remove() function to see if i could get the img and somewhat I could make it work but similar to the answer bellow, it will remove ALL the img's instead of removing the selected only:
$(e.target).parent().siblings(".drag" ).find(".img" ).remove();
is there any way to apply the CSS or remove() to the selected element only?
When selecting an image, you can set a class to it. Let's add selected to it.
When selecting another image we just remove the selected class from other elements and add it to the one we just selected.
Here's my fiddle
Another problem I noticed, was that you were trying to test this by changing the border of the selected element. When you click the flip button, the image gets unselected and the border is changed to medium none (Remember, firebug/devtools are your friends.).
So I changed it to change the outline css property to see that the button works.
You also might want to update from jQuery 1.6 as the event handling is so much easier with the .on() function.
'.closest()' only travels up the DOM tree; you'll need to do something like this to target the images:
$('#flip').click(function(e){
if( $(e.target).parent().siblings(".drag").length > 0 ) {
$(e.target).parent().siblings(".drag").find('img').css('border','5px solid #000');
}
});
updated jsfiddle: http://jsfiddle.net/7btkn17q/9/
I have a div which I need to empty excluding a couple of divs inside it, the problem is, I have got it to work but the div's lose there jquery click functionality.
I have a stage which will have items dragged on them but I need to be able to empty these items but retain the click buttons which are also on the stage and stored in a div called keep.
I found this and it works but the things inside #keep still appear but they lose their jquery .click().
var $stage = $('#stage'), $noRemove = $stage.find('#keep');
$stage.html($noRemove);
This is because they are being removed and then re-added.
You either have to remove the children. OR Rebind the click method afterwards.
So for example:
$noRemove.click(function(...){});
See the Fiddle here : http://jsfiddle.net/r98dj/1/
Also, as a note. Make keep a class. Otherwise you'll end up with multiple divs with the same ID and this will cause you to fail W3C validation.
I am able to select object programatically using fabricjs. However, it does not behave like when one selects an object using mouse click. On a mouse click, the object comes under focus, and one can, for example, drag it. However, on programatic selection, I cannot immediately move an object. An example jsfiddle:
http://jsfiddle.net/ThzXM/1/
Programmatic selection:
canvas.setActiveObject(canvas.item(0));
What I would like to ultimately achieve is this: on clicking a button, a new rectangle is added to canvas, which the user can move around before placing it on canvas - without requiring extra clicks. Is it possible to do this in a cross-browser compatible way? (I know in some browsers I can fire a mouseclick event but most disallow it.)
You have to do this. Don´t forget to call setCoords() to update the bounding box of your object.
// Set the active element
canvas.setActiveObject(canvas.item(0));
// Set left, o right,or angle... check documentation.
//Don´t forget to call setCoords() after changes.
canvas.item(0).setLeft(80).setCoords();
//Then render the canvas
canvas.renderAll()
i have some code that tries to list images based on their height. the weird thing is that the same code kinda works when i try with 2 images but doesn't work when i try with 3 or more
site: http://bit.ly/JV5I0Z
if you click on a menu button, the images should list themselves one below the other filling a width as wide as that black line thingy. if you click the 1st button that creates 2 thumbnails they work but the other buttons dont do nothing
code: http://jsfiddle.net/5qt3s/
i have tried to remove all irrelevant stuff to keep it as simple as possible
what could i be doing wrong? thanks
You only have two small images on your webspace (euroscala.balkanium.com):
images/shkalla/small/1.jpg
images/shkalla/small/2.jpg
images/shkalla/small/3.jpg doesn't exist so when it gets to this image (in the loop inside createThumbs) instead of firing the img.onload event it fires img.onerror, because it fails to load the image. This means your totalLoaded count never reaches totalThumbs and redrawThumbs doesn't get called.
Either create the missing images, or hook into the img.onerror event and skip the image.
I have one button, and when i click it it adds elements that are with same class, for example my class is image_class, the default added elements are being dragged, but when i add new element with the class i can't drag it or sort it.How can i fix that ?I want when dynamically added element shows up to be dragged or sorted .There is no problem with the default ones.
I'm using jquery ui
Okay, here's one way of doing it (and since I have no idea what your button code does...)
http://jsfiddle.net/TrowthePlow/qZz5j/
By default, events are added at runtime and not bound to elements created after the point of binding, even when they have the same selector.
To make sure that events are bound to items with the same selector dynamically, make sure you use the jQuery live method to bind your events.
$('.clickme').live('click', function() {
// Live handler called.
});