My Vaadin web application uses custom buttons that extend from CssLayout.
Click listeners are added to the layout/button with addLayoutClickListener.
Often when the layout/button is clicked, no event is fired.
It seems that the event is only fired when the mouse is not moved at all between press and release. Traditional UI buttons allow mouse movement between press and release, as long as the pointer is still within the button area during release (the 'pressed and armed' state).
Do I absolutely have to use com.vaadin.ui.Button or com.vaadin.ui.NativeButton?
Can someone maybe provide some explanation for why the layout approach does not work reliably?
I was not able to customize the style of the default buttons within a reasonable amount of time (Valo Theme was too complicated for me)
Use button.setPrimaryStyleName("my-button") and you’ll have a blank slate to apply your own CSS.
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.
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.
So... I am working on an interaction design project and I want to create a sencha-style gesture scroll for content areas. The way I've done it so far, is to attach touchmove/start/end events to the content area, and it translateY's the contents. It works in on desktop with mousemove/up/down events, but it jumps around like crazy with touch. I'm not sure whats wrong.. here is a link to a prototype.
**requires webkit.
http://apps.omorphos.com/gesture-scroll
I think it is an issue with the event response, but I tried and haven't been able to nail it down. Any help is greatly appreciated!
So, I figured this out.
What I was doing was attaching the touch event to the list tag itself.. and, that works fine on desktop with mouse events; however, with touch, the target changes and touchend doesn't fire properly.
So, what I did, and what I believe sencha does, ... and I had originally implemented but went in a different direction... is have an absolutely positioned element with a transparent background color floating above the element that will be manipulated. All of the touch events will be captured by that DIV and then the elements below can be manipulated without losing the event data.
In the new version I used HammerJs ... more info: http://eightmedia.github.io/hammer.js/
but i'm pretty sure you could just use standard events; but the good thing about hammer js, is that it will translate touch events to mouse events for testing in the browser, this also means making the coordinates for touch the same as mouse, so you can access mouse event coords via
e.gesture.touches[0].pageX
e.gesture.touches[0].pageY
which let's you write less code.
Part 2:
Additionally... part of the issue is... how do you click on the content/components(e.g. links) below the screen.
How you do this... is you take the coords from the event handler and pass them through this native Javascript function...
var a = document.elementFromPoint(x, y);
this will return the dom element. and all you have to do is trigger the click/tap event.
Which would be great, except it will pick the element with the highest z-index.. so that is your screen obj(the one that is capturing all of the touch events). So, what you need to do, is hide the screen after a tap is registered, and then execute this function 200ms later, and then bring back the screen to capture whatever events.
You can do this with this function...
$(theScreen).on('tap', function(e){
screen.hide();
var hit = document.elementFromPoint(e.gesture.touches[0].pageX, e.gesture.touches[0].pageY);
$(hit)[0].tagName !=="A" || $(hit).trigger('click');
setTimeout(function(){screen.show()},300);
});
And, that is how I solved it!
My code is not super annotated, but you can find it at the link below:
Updated example:
http://apps.omorphos.com/gesture-scroll/v2/
I am tracking the mousedown state and not only does Secondary mouse button click trigger the mousedown event while failing to deliver on a mouseup event, so does the situation of dragging on something selected (note this is different from dragging to select).
I am currently experiencing this on Safari 6 on a Mac and I'll report back if I see it on other platforms/systems.
Is there a way to intercept this so that my JS program can be not confused about what's going on? For the secondary button situation I simply check event.which === 3 in my handler and just don't mark my button as down, and that takes care of that, but I am using the left button to initiate drag on a selected bit of text as well..
I am not sure I understand what you want to do, but checking which button has been pressed may involve a bit more work other that checking the which property.
Have a look this quirksmode page. The rightclick section contains some code that may help you.
A very thorough explanation on mouse events is also available here. It can really help you deal with browser quirks.
The specific issue here is that mousedown is not triggered when dragging a selection.
The solution is to simply prevent selection where it may become problematic.
I have a div, with an onMouseUp event set (in HTML).
Within that div are many elements, some of which contain icons for handles that I want to drag.
The icons have an onMouseDown event.
When I drop the mouse on an icon and release it, first the icon's onMouseDown event fires, then the div's onMouseUp event fires - exactly as I would expect.
However when I click down on the icon, drag it to another part of the div, and release, the mouseDown event is fired as you would expect, and the onmouseUp event is NOT fired.
I have two questions.
1) Why is this the behaviour?
2) What is the correct way to handle drag-drop in a browser independant way?
I am using firefox 3.6.16 on widows, but IE 8 behaves the same way.
I know this doesn't seem like it's a fair answer, but the best answer (in my opinion) is to use something like jQuery and use draggable. I've only worked with Dojo and jQuery but both have an easy to use drag/drop interface that is browser independent.
Here's a url explaining jQuery's.
http://jqueryui.com/demos/draggable/
I'm just wrestling with this today. There is a nice demo at http://www.brainjar.com/dhtml/drag/demo.html that uses raw Javascript (with all the browser checks that that implies). It looks like the key is to stop event propagation on the mousedown event.
I'm working with Dojo, and using dojo.stopEvent in the dragStart (that is, the function attached to mousedown) made the difference in my seeing the mouseup.