If I have an html page with a number of images displayed, and a user drag-selects several images (i.e. highlights them as selected) with a mouse, can I identify those images via JavaScript or otherwise?
In other words, the use-case is that I want to "tag" multiple images at once and allow a user to use a mouse to click anywhere on the screen, then hold the mouse button down while moving the mouse, creating a highlighted rectangle, thus selecting all items displayed on the page within that rectangle. The goal is then to identify only images that were selected, and present a pop-up to the user, allowing her to "tag" those highlighted images.
Sorry if this is confusing, I'm just not sure what the common terminology is to describe what I want.
Related
I have two divs. Users can select text in either div. When they drag from one to the other, it selects parts of both and creates a big, ugly, unpredictable selection.
Is there any way to force a selection to finish in the same element it started in (i.e. by preventing it from extending into other components regardless of where the user moves their cursor)?
i tried a lot of examples but nothing works as i want it to be.
It's for touch screen only devices (app) and i use jquery 1.8.3.
What i do is i upload a photo and it fetches the photo from the server and put it in a div.
In that div, i need to be able to move the photo around to whatever i want it to be.
When i click next it will cut the part out of the photo that i selected (the server can do this).
I tried canvas, but it doesn't work on touchscreen devices.
What i try to ask is:
Is there a way to move the background in a div, and what i see in the div (user point of view) is what the picture is going to be, get the cordinates and submit them to the server.
The server will cut a square out that picture (with that cordinates) and maybe even a rotate and saves it.
The server part is not an issue, it's the moving in div en getting cordinates.
Or does anyone have a better idea (i want the instagram like how to select a square out of a picture)
You could make the element in the background draggable. Once it's draggable, then the user can drag it around any certain way.
Finally, when the submit button is clicked, you can check to see what part of the picture is inside the box.
I have a lot of photos with links to wherever, and I'd like to have a semi-transparent box come up on hover, after a delay, with caption and copyright for the larger underlying photo. In my dreams, I'd like the smaller overlay to link to the original photo or the photographer's site, while the still-visible area of the underlying image will still link to wherever. If it make a difference, this is on a Joomla site (with jQuery already loaded) but I'm generally able to hack the PHP and HTML on the template.
I see a few pretty straightforward ways to overlay a linked box over a non-linked image or a non-linked box over a linked image, but can I set up a linked box over a larger linked image, with the overlying box intercepting clicks just on itself? I'm guessing that this would require some JavaScript, but at this point I only have a hazy understanding of JavaScript, so at very least I need to know whether JavaScript can ultimately do that, before I get into this, and I'd love to get a generic script to do this.
The overlying box can be in a consistent location -- like full-width at the bottom of the underlying image -- rather than, say, a tooltip located relative to the mouse cursor. Seems like a script would have to respond to a click in the image area, then check whether it also falls inside the overlying box, and act accordingly. Could a script do that, and, um, might I get a rough scrip for something like that?
Thanks,
Drew
I want to draw a dot each time the user clicks/touches a point on any web page. Ideally this would be some kind of transparent pane that draws these dots but also allows the clicks/touches to pass through the pane so that original page doesn't lose functionality.
I think you have to do two things. First of all create a click event listener on your body, that way you will catch all clicks. When clicked, place an dom element, for example a div on that position and format it as you wish.
Secondly look at this: Click through a DIV to underlying elements
Hope it helps!
So I'm working on my first bookmarklet and had a few questions.
The goal of the bookmarklet is to overlay a video player on any website to essentially dim the lights everywhere except the actual player.
The user flow would go something like this:
user clicks the bookmarklet and they are able to hover over certain elements of the page where they highlight (think Firebug inspect)
user hovers over the correct div (where the video is) and clicks it
that area that they click remains "see-through" while the rest of the visible browser page goes black (or say 90% opaque.)
clicking the bookmarklet again would clear the selection and allow the user to start over.
Another idea would be to allow the user to "drag / draw" a rectangle where the video would be and then step 3 would occur after making a selection on the page.
I'm just looking for any ideas / snippets / anything else that might be out there to get me going in the right direction.
Try putting an opaque/near-opaque black div over the entire screen, then setting the z-index of the video to something higher than the black div.
You can use something like what's at this page to determine what element the mouse is over and highlight it.