I am building an audio player in a SPA and have a main player widget that shows the currently playing track along with controls at the bottom of the page. The desired UI is to hide all controls but the play/pause button until the user hovers near the play/pause button. At this point the extra information, seek bar, volume controls etc. will be animated onto the screen.
Excuse my shoddy drawing
I should add that the controls are positioned fixed to the bottom of the screen.
Initially, I tried adding an extra fixed positioned div on top of everything (high z-index) and using that to trigger the hover event. Obviously, this doesn't allow for clicking the buttons below it so I tried pointer-events: none on the element but then no hover event is registered.
I then tried putting the hover region underneath the control elements and adding the hover trigger to both the hover region and the controls. This causes strange behavior when moving the cursor between the hover region and any controls (i.e. to click pause/play).
My next thought is to scrap the hover region HTML element and use a pure JS solution. I could register a mousemove event to the document body and detect when the cursor is within the hover region, triggering control animations. However, I am worried this might cause performance issues as seems a bit heavy.
I hope someone has some input/improvements on the things I have tried or comes up with something I haven't thought of!
BTW: I am using angular2 for the animation if that sparks some bright ideas to use that.
Update 1
Here's a jsFiddle showing the first two attempts. Change the z-index of hover-region to see the effect of it being on top of the play button or below.
I've created a working version for you at http://jsfiddle.net/6wk69fvo/1/. You already did what I was going to suggest, which is to use onmouseenter and onmouseleave.
But rather than just checking the hover area, you also need to check the toolbar area, and then just OR the two values together.
Also note that I put the play / pause button as a child of the hover area. If you don't want to do that, you'd need to create a third check for mouseenter or mouseleave for that div.
You can alter the control's opacity make it visible/invisible. Here is a simple example done in pure html/js to avoid the overhead of setting up an ng2 app, yet, I'm sure you can quickly adapt it to your code.
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.
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
In HTML/CSS/JS, there is one thing I am having trouble figuring out:
How to prevent people from scrolling an element using the mouse wheel press (i.e. hold down the mouse wheel and drag, or click the mousewheel, drag, click the mouse wheel again) and how to do the same when people try to drag the elements around on a touch-device.
This is something I stumble upon, amongst other places, when trying to make a hamburger-style menu.
Setting an element's CSS to overflow: hidden will hide the scroll bars, but using above two methods, it is still easy to scroll through them.
Until now, the only 'solution' I found was to make a second element, and position it on top of the element that should not be scrollable. But this hardly seems like a perfect solution to me.
How can these events be captured using JavaScript?
How can, on, for instance, this page, scrolling horizontally and vertically be blocked when the menu is open?
If you create a jsfiddle, we can give a better solution. If you are OK with jquery, I can give some solution for your second point "How can, on, for instance, this page, scrolling horizontally and vertically be blocked when the menu is open?".
First you need to create one simple class like below.
.overhidden
{
overflow:hidden !important;
}
Next, we need to apply this class when you press the menu icon on your screen. Also we need to remove if they click again for closing. It is easy to do in jquery like below.
$(document).ready(function(){
$('#hamburger').click(function(){
$('body').toggleClass('overhidden');
});
});
I have an application that contains several transitioning elements. These same elements react to mouseenter and mouseleave events. These events are deactivated during transitions to avoid users interacting with elements in transit.
The problem comes in when one of these elements are underneath the mouse when they are made active again. Once the moving elements are no longer moving, they should again register that the mouse is hovering on top of them. But since the mouseenter took place whilst the element was deactivated, the event is not fired once the element is made active once more.
If you then move your mouse off of the element, and then on again, it works fine. This is obviously not very user friendly.
Is there a way to register that the mouse is hovering on an element without moving the mouse?
More information on the elements discussed above:
The elements in question are large divs that contain a lot of content. They are actually pages in the application that I add and remove dynamically. I have a custom scroll bar that shows if the area has focus, and hides if it does not.
As the mouse moves into the page content area, the custom scroll bar shows. Once it moves out, the scroll bars hide again. All events are made inactive whilst the animation is running.
The problem is that is the mouse moves into the page area whilst a page is animating, the the scroll bars do not (and should not) show. Once the animation completes, however, the application should register that the user is hovering inside of the page area without him moving the mouse outside and back inside this space.
Track the position of the mouse using a mousemove event, and test the element at the last known mouse position when you re-enable the behaviour using
document.elementFromPoint(x, y)
I want to customize my submit button so that, when the mouse hovers over it, it crossfades to a new background-image position in my sprite. I can easily get it to switch to that position, but I'd like to have it slowly fade instead.
There are tons of articles on how to do this for simple links, but they all essentially position the other images over the button area, and then fade opacities correspondingly. This doesn't seem possible with a submit button, since input elements don't seem to be able to contain child elements (ie. the other background sprites). Ideas?
I am not sure if this is what you are looking but take a look anyway
http://snook.ca/archives/javascript/jquery-bg-image-animations
DEMO: http://snook.ca/technical/jquery-bg/
anyway, you can still add a click listener event using jquery to any div and make it act like a submit button.
$("div.submit").click(function() {
document.forms[0].submit();
});
add the css, for the mouse over
div.submit:hover {
pointer: cursor;
}
I don't know for sure but if you make the buttons container (a div sized to exactly match the button) you can give it a background image and then fade out the buttons opacity. Can you give an example of the two states you are trying to blend between? It would help give a more specific answer.
There is no consistent way to do this in CSS across all major browsers.
For something like that, you really want jQuery.
Here's a working jsFiddle that shows one example of how you can do this. Just update the fade var to change the timing of the fades.