Is there any way to prevent Firefox from rendering a ghost image that is way smaller than the source element when dragging large elements?
I've created a sample page and video, if you do not understand what I'm talking about.
This downsized ghost-image is problematic in applications where the user is dragging a large element to an absolute position; when the user tries to drop the dragged element to an exact location, it doesn't drop where they're trying to drop it. Only after several blind attempts, can they place the dragged element exactly where they want it.
In Chromium 69, the element drops exactly where the user tries to drop it, because the ghost image is exactly the same size as the source element.
If you can think of additional reasons against this default behavior in Firefox, please voice them at the bug I've submitted here.
In the meantime, I'm looking for a work-around.
The ghost image is ideal, because it looks exactly like what's being dragged. I know its possible to have custom drag-images, but I can't think of a way to make that custom image look exactly like the element being dragged (like the ghost image achieves).
I may have to settle for just making a generic image that can at least be sized correctly during drag and drop. Any other ideas?
Related
My web page (with vanilla Javascript) accepts files dropped on to it from the native desktop. I want to change the cursor's appearance while dragging, to give users feedback about the progress of their drag (when they're on the drop zone, etc). This is easy if you're dragging an HTML element from within the same page, but I haven't found how to do it when dragging a file or image from elsewhere on the desktop.
I have tried setting a class on the body element and all its descendants (and there are no other cursor styles anywhere) but as you can see (from the attached edited screenshot)
it has no effect - the class and style are applied correctly (see debug tools view in the lower half of the image) but the cursor nevertheless takes its default appearance.
Relevant snippet of CSS:
.no-drop-cursor, .no-drop-cursor * {
cursor: no-drop;
}
and Javascript applies the class to the body element whenever the cursor is on my web page but outside the drop zone.
Is this in fact impossible - or is there some neat way to make it happen?
A couple of things to avoid unnecessary suggestions:
All relevant drag/drop event handlers already do preventDefault();
The actual drag/drop code works just fine, exactly as intended;
I already give visual feedback to users by highlighting the drop zone appropriately as the cursor moves into and out of it, but I would also like the cursor's appearance to change.
Any ideas appreciated, even if it's only a clear explanation of why I can't do that!
Edit 2022-08-16: This earlier question seems to be a duplicate, but received no useful responses.
I am interested in building a new functionality in which the user can print what he sees in the page (as screenshot). But first he has to customize the position of some elements (images).
I am trying to find a way to do this and I was thinking of html5 canvas. I have little experience on this and I wonder if what I am thinking is at all possible.
My idea is to take a screenshot of the corresponding element (in this case is a div element with a map). I save this screenshot in a canvas and on top of it I place some other images (legend of the map) which are movable. The user can drag and drop them on the canvas.
Do all these make sense? Can it be implemented or is science fiction?
Perhaps the title isn't great, but I had a little trouble with the wording...
Basically, is it possible to have jQuery's hover only fire over the actual content of a png with an alpha channel.
So in the image below;
http://i.imgur.com/3kO7v.png
Only fire on the rectangle and not the alpha channel which make up the rest of the document bounds...
I've tried the obvious $('obj').hover(function(){stuff}) but this fires on the alpha channel too...
The final implementation of this will be for more complex shapes than just a rotated square, so css3 tricks are out for the primary basis, but could be used with a back-up/shim, plus I need to support IE7 and ipad,iphone,ipod....
If there is a CSS2 solution then that would be suitable too. Also any real guidance on this issue is more than welcome.
My backup for this will be to have an empty div, display block and position it over the shape and then use that. This will obviously not be ideal for the less square objects.
Any hits or tips are more than welcome.
Thank you
Yes it is possible depending on the stacking context of your elements. Keep in mind that when you do a focus over any particular element on a page, that you are actually focusing all other elements within the same stacking context.
So what you could do is either stop the event from bubbling up the stack (if the element you want to "hover" is lower in the stack that the elements you want to prevent hover effects on), or specifically put in prevent default for onhover events for all elements in the stacking context except for the one you want to actually get a hover effect.
I need to make a interactive image gallery (or image slider) where some hotspots need be placed on. It has to be possible to click on those hotspots, to update a sidebar with the corresponding info. Some basic animation must also be possible on a slide or scene of the gallery.
Which setup would be the best solution.
I'm currently thinking about the canvas element, but the lack of specific events for drawn hotspots makes me doubt. EaselJS could be a solution though.
An alternative could be just using a regular javascript image gallery and place some fixed positioned hotspots on it.
This is actually a basic mvc-setup, I have the image gallery, hotspots and the sidebar.
Should I use a javascript mvc library like http://javascriptmvc.com/ or backbone.js
So my question actually is, what would be the best setup, with performance and some basic animation in mind?
Thanks.
other interesting links I found:
http://processingjs.org
http://raphaeljs.com
...
If you are displaying large images or expect users to have older browsers or browsers without current GPU acceleration then you should always use standard HTML4 elements to get this done. Using canvas is overkill and will cause you pain later on if you are not overly-experienced with it.
With DOM-based images you already have click events and can even use image maps to do the click-regions. With canvas you need to code your own click detection and map mouse position to a region to check for clicks.
All in all the simplest solution is usually the best one and for performance and ease of dev, canvas is not the way forward in my opinion.
Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc
Check this:
jQZoom
Zoomimage - jQuery plugin
jQuery ImgZoom
FancyBox
How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.