Does anyone knows, how to implement the effect/hover, when the mouse is placed over an image, then an overlay if placed on the image, which contains some buttons to interact with it.
Similar with what happens on pixabay, when you hover an image
Related
I'm trying to figure out how to prevent a popup image from poping up and down repeatedly (forever) when the user moves the mouse to a location on the page.
See https://codesandbox.io/s/jitterbug-on-popup-25kp4 to illustrate the problem. Hover over the text Mouse over this and the Jitter Image will appear to see the jitter problem.
EDIT: Since this was originally posted, I incorporated the solution into the code showing the problem, and now it also shows a solution.
Details
What follows is a text description of the problem, but the code does illustrates the problem as well (and with a lot less text).
On a web page, that has a vertical scroll bar,
The user moves the mouse over a div which has a MouseEnter javascript handler.
the on MouseEnter event fires which causes an image to pop up.
The popup causes the scroll bar to scroll the content. So now, the mouse is no longer hovering over the hover item so the MouseLeave event fires which causes the image to pop down.
With the image no longer being displayed, the scroll bar moves the content back to where it was prior to the popup and viola, the mouse is overtop of the div and the MouseEnter event fires again to pop up the image.
Steps 2-4 repeat forever at the speed at which the browser can keep up.
Or when the user moves the mouse to stop the popup/popdown from happening.
I've seen this happen on some other websites and now that it's happening to me, I want to fix it but I'm not sure how to.
I've searched for a solution but haven't found one yet. Here are some links I found:
https://css-tricks.com/content-jumping-avoid/ - This was good but suggests using min-height which doesn't work in my situation.
I've also tried using overflow: hidden which does prevent the jitter effect described above but leaves the user with no way to see the rest of the popup image. This, however, is a better solution than the jitter effect described above.
I'm using AngularJS and JQuery if that affects the answer.
position:absolute on the image, will solve this as it won't change the current flow when you display the image and the scroll bar will remain in it current position.
I'm building an access database for my music catalog. I've created one main table with a bunch of queries. I want to make a decent looking front end. I have a bunch of buttons with macros assigned to them already. The problem (which I presume is something very small that I'm missing) is that I added a picture to the button it's just a picture of vinyls that would run a query to show my vinyls. The picture only displays a portion rather than the whole picture. I can get it to show the picture by expanding the button size but this is not desired.
Any help is appreciated.
Thank you and Happy Thanksgiving.
The button doesn't resize the image you assign to it.
You first need to resize your picture files to whatever size you deem suitable for the button, then use that scaled down image.
Alternatively, you can use the Image control instead of a button. That control will allow you to resize the image inside it, but it will generally appear slightly blurry, depending on the image and the dimensions you resize it to.
Also, forcing Access to load larger image and then resize them can make your application less responsive if you have a lot of images, since you make it do extra work.
A workaround is to work with an image and a button.
Insert and size the image you need in the form
Add a button, setting its property "transparent" to true
Overlay the transparent buton over the image
Make sure the button is on the topmost layer usuing the "bring forward" in the image menu. We have then the transparent button over the picture
Associate VBA code or macro to transparent button.
For all intent and purposes, user will click on an image, but because there is a transparent button over it, will be in fact clicking on the button
I want to create a timed image slide show where each image can made be made a clickable link. I have tried using css web animation but that doesn't work because each image is stacked on top of each other and only the transparency changes revealing different images and so they cant be clickable links. Any thoughts or links to tutorials would be very much appreciated.
Thanks,
m
You can do what you were doing before, but after the opacity of the image fades out to 0, you will want to then set it to display: none; ... This will prevent the user from being able to click on it, allowing the click to pass through to the next image underneath.
I can't tell you much else without any code or examples of what you would like to happen, but hopefully that helps you out.
I'm writing some HTML so that I can draw a Bezier curve using the HTML SVG and PATH tags. My curve comes out really nice and now I want to add a capability where if a user hovers his/her mouse over the curve I change the color. What's happening though is that the SVG creates a large box that contains the path and it catches all clicks. It's essentially blocking everything underneath it, even in areas where the path is not present. Imagine that the path goes from the bottom left corner to the top right corner and someone clicks in the top left corner (where it's empty but I have a button). That click doesn't go through.
I realized that in CSS I can add a pointer-events: none; line and that allows me to click through the SVG altogether but that disables the SVG completely.
So the question is, is there a way that I can get a path (with a large stroke width) to catch clicks and allow clicks to go through in areas where the path is not present?
mj
I had a similar issue where the empty section of my path was blocking and preventing hover of SVG elements underneath it, even in the section where the path was not present. I resolved it by specifying none for the fill CSS attribute and also removed the fill-opacity attribute. So try this, hopefully it will help.
When using a HTML <button> whenever you press the button it moves a little. A small animation to show it's actually a button.
I'm looking for a way to have it stay exactly the way it is, and force my animation using mouse Events.
I started off just placing an <img> and use mouse events to swap the picture. This worked fine, except that it has some side effects I can't seem to get rid of. For starters, pictures can be dragged, which just looks odd if just press the button - hold - and decide you want to leave the button. I can turn off "draggable" but then it will show a blue square selection box, which is very unwanted.
My solution was to place it on a <button> element instead (with hidden background and border). This solves all the problems, except that it's slightly wiggling to the side.
I tried disabling it, but that also disables the javascript events.
How can I force a button to stay in place even if it's clicked?
So you have to use another tag than button (for instance span) and manipulate it's behaviour with javascript.