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!
Related
For a website, when people load a page, there is an animation with buttons inside which appear. You can see a screenshot of the animation below.
Once the animation is finished, I want the user to be able to click on one of them. How can I do this ? Is existing a library, a suitable language, or a specific technology to complete this ?
Thank you
if possible, edit the video and crop it.
Add the buttons using simple HTML.
I’m sorry if that isn’t possible.
I'd say the easiest way to get the animation to respond to click events (like a button) would be to set up a mouse event listener in javascript, it will get fired every time someone clicks on the page.
Basically, within the click handler, you will compare the click location of the mouse to known screen coordinates of the buttons - if they match - trigger an event.
The hard bit comes with finding the coordinates of the buttons - very easy if the animation is drawn on a canvas - a bit harder if it's just an image.
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
Is it possible for a click or mouseup event to launch a function where an additional click and drag event is invoked on another part of the div or on another div?
In short when I click on something I want the mouseup event to create the equivalent of the user quickly selecting another div (or part of the same div) and dragging it. I am not looking for a css animation perse'. I know that sounds weird but read below for what I think I need this for
The problem I am trying to solve with this
The problem I am trying to solve with this is the following.
I am making this tool:
https://dl.dropboxusercontent.com/u/57427474/JsPlumb_troubleshooting/trace3.html
When the user types into the pad, clicks the green button and moves the editor all works fine. But if they then again click the green button and add additional content to the notepad (and then closes the editor) the JSplumb wire-nodes get out of wack and don't update as in the picture below.
https://dl.dropboxusercontent.com/u/57427474/JsPlumb_troubleshooting/img.png
However, when I drag the div the nodes fall back into place.
I was thinking if I could add an eventListener that slightly drags the div (using a mouse event) when the user clicks the green button I could subtly fix this.
You may be able to use trigger();
$("#myButton").trigger("click");
ymmv
I am developing a magnifying glass and I was hoping I could get some help figuring out how I am going to do a step.
What I am doing is I have a div with a higher z-index than the content. It is moveable and draggable. It also has a transparent background so one can see the content (images & text) behind/underneath it that has a lesser z-index.
Now the part that I need help with is this:
I want to figure out exactly what content is behind the div (let's give it an ID of #glass).
Then my plan was to append a <span> before and a closing one after and style it with CSS3 scale transforms to increase the size so it acts as if it is magnified.
If you have a better idea on how to 'magnify' the content please share it.
So what I am looking to do in a spot of pseudo-code is:
Get position of #glass.
Get content behind #glass.
Store that in a variable or give it a class or something to refer it to.
Append a span before and after.
Style it with scale-transform.
Undo and reset the above when #glass moves.
I would really appreciate any and all help with any of these steps, but especially number 2 and 3, As I have no idea on how to do those.
You can listen for the mousemove event on every element in the page. each time the event fires you update a variable with the latest node being hovered over.
So as you are dragging around the glass, the mousemove event should be getting fired on the elements behind the glass (since you are hovering over them). And you can then use your latest node variable to get the element behind it.
Here a is Jsfiddle demonstrating how this could be done:
http://jsfiddle.net/wWVuy/
I'm trying to build an interactive map and I'm looking for information on how to have a click and drag in one window, affect an image in its parent window.
As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?
Any information/help is greatly appreciated!
jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.
The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html
The first one in the box has the boundaries of the box.
And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html
I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?
Let me explain:
1- Add a listener to mouse down, up and move to that little map;
2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);
3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.
I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.