I have a div with an anchor and icon.
<a id="createWave_addStation"><img class="createWaveToolBarImg"
src="img/mapIcons/ico_station.png"></a>
I drag this and want to drop it on an OpenLayers map. Because img's have draggable as default, I don't set it here. Now When I drag the icon, the img does not get dragged along so I only see the cursor. How can I show the icon od the dragged thing. This is my code, but it doesnt work.
$('#createWave_addStation').bind("dragstart", function(ev){
ev.preventDefault();
console.log("drag start");
enableGetMouseupEvent();
var dragIcon = document.createElement('img');
dragIcon.src = ICO_STATION;
dragIcon.width = 100;
ev.originalEvent.dataTransfer.setDragImg(dragIcon, -10, -10);
});
Well the code itself works, but the img is not shown while dragging
I hacked something together that works in Chrome, I didn't test it in any other browser.
A demo is in this fiddle.
Two things are important:
an arbitrary element should have set draggable="true"
the image you want to show while dragging should be preloaded, otherwise it will not show the first time.
Related
I am making drag and drop event with html5.
If you drag an image, the transparent image sticks to mouse cursor though the base image keep still.
I would like to hide the base image as if you move some real object.
So I try this code.
<img src="img/tape01.png" id="img">
var img = document.getElementById('img');
img.addEventListener('dragstart', function(evt) {
//catch the drag event here.
img.style.visibility = 'hidden';
}, true);
But it hides not only base image but dragged image.
This is the standard behaviour of a html5 browser to keep two images of the draggable object on screen to remind the user the starting position and current position of the dragging object before its drop event is completed.
In your example, setting the draggable object 'img' be invisible will make the two images of it be invisible at the same time.
I am writing a simple jQuery page with two images shown. Clicking on one of them triggers a CSS3 transformation, which should end zooming on the image.
The page has to be viewed on iPad, thus I must use CSS3 3D Transformation in order to use the hardware acceleration and keep the transition smooth.
I wrote a simple demo script here: http://jsfiddle.net/andrearota/KAdmV/4/
E.g. here is how I zoom in, using scale factor. Please note that I use the z property trying to get the div over the closed one:
Carousel.prototype.openLeft = function (callback) {
var that = this;
if (this.leftStatus != 'open') {
this.left.transition({
z: '+=100',
scale: 2
}, function () {
that.leftStatus = 'open';
if (callback) callback();
});
} else {
if (callback) callback();
}
};
As you can see, if you clic on the left image, the image is zoomed in and goes over the right one. When you click on the right one, vice versa. But then, if you click again on the left one, you can see an issue on image stacking as the left zoomed image goes under the minimized right one.
Any hint?
It looks like you can remove the transform on the second image and it will go back behind the first one. So in other words, on image click I would probably first remove all occurrences of the transform property before applying to the clicked image.
Or you could also set both images to position:relative and then on click set the z-index to something like 5 and set all other images to something below it such as 3. But again, you'll need to clear these inline styles so that when another image is clicked there are remnants from before that give you un-clear results.
I am using html5 drag and drop to drag and drop div elements. On the dragstart event I set the the opacity of the div element to 0.4 which reduces makes the div element lighter but it is not transparent ie. when I drag the div element over other div elements I can't see the elements in the background.
var cols = document.querySelectorAll('.draggablediv');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', function (e) {this.style.opacity =
'0.4'; return true;}, false); });
I am using chrome 17.0.963.56.
Edit Note: This does not happen in firefox
Any ideas?
Thanks
There is a tutorial that features the same code you are using at:
http://www.html5rocks.com/en/tutorials/dnd/basics/
If you load the link above in Firefox, you'll notice the examples do not work. The tutorial features a specific mention of Firefox and why the examples don't work - you'll need to "wire up" the dataTransfer object.
I'm having my first experience in developing html5 applications. My issue is to make room plan. In the top of the page I have elements to drag to the bottom map area (they are copied). In the map area I can move elements, but not copy.
I've built drag'n'drop with help of image elements. But now I want to use canvas for updating numbers on images. I want to use canvas text functions for updating images.
The problem is when I copy canvas element from the top, html inserts well, but it is not drawn in some reasons.
Please, watch code here http://jsfiddle.net/InsideZ/MuGnv/2/. Code was written for Google Chrome.
EDIT:
I made a few small tweaks here: http://jsfiddle.net/MuGnv/5/
Note the changes made to the drawImg function:
function drawImg(src, targetClass) {
$(targetClass).each(function() {
var ctx = $(this).get(0).getContext('2d');
var img = new Image();
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
});
}
Anytime a drop event is handled, the images are drawn again. This was the missing component as the image was only being drawn once.
I know how to toggle an entire div, however I only want to hide all but the top 10% or top 100px, for example. And then when the div is clicked, the entire div opens.
I thought I saw this a while ago, but can't remember where.
Thanks.
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
Your code should be something in the lines of:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').animate({height: '20px'});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').animate({height: '100%'});
return false;
});
});
Take a look the image on my home page, is this kind of what you want to do?
http://www.carsonshold.com/
I have it jet out when you hover over it, but that can easily be changed to a click. It somewhat complicated to do, and still isn't perfect in IE (the page loads and the clip isn't recognized until you hover over it).
It may be slightly different from what you want since I did this on an image rather than a div, so I needed to animate the clipping mask. The function I used is as follows:
var featureDuration = 300; //time in miliseconds
$('#featured-img').hover(function() {
$(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});
}, function() {
$(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
});
If you want to animate the clip, you will need to insert this JS as well because it doesn't behave properly otherwise. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
Take a look at the CSS in my code if you are unsure how I did the rest of it, or comment on here if you have any questions.
Cheers
Did this rather quickly, note it will only hide the bottom portion.
http://jsfiddle.net/loktar/KEjeP/
Simple toggle that changes the height, hiding the rest of the content within. Easy enough to animate as well, just modify the toggle functions to adjust the heights rather than adding a class.