Within a UIWebView in an iOS app I have events firing in javascript when a link is pressed. There is also a grey box that typically appears over links when they are tapped. The -webkit-tap-highlight-color css property.
However, the hit area that activates this grey box is different from the element frame according to javascript. The result is that if I tap a certain distance from links the tap highlight color is activated but the event is not fired as you expect it to when you get this feedback.
Is there any way to correct the frame that activates the highlight color? or perhaps there is an easier way to just disable that and provide similar feedback another way?
Related
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.
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.
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
Try to click in any empty area and drop, this will cause a blue background selection for the page elements like text and images,
To see this behavior clearly, click ctrl+A now.
I have a black theme in a website and some controls requires drag and drop, many visitors drag empty areas by mistake and drop which will cause the unsuitable default elements selection, is there any way to prevent this selection?.
How to disable text selection highlighting using CSS?
This website has a container div.. use your developer toolkit and assign the css rules that I gave you in the post above. You will not be able to select anything.
I have an html page where I set the focus on the first input element on load. I can see that the focus is set because I ask the background of the element to go orange and I can see the orange background. However, the cursor is not shown in the element.
Then when I click on the other input elements, I can see the focus move to them but still no cursor is shown. The cursor only appears when I use the tab key.
Please could someone explain to me why this happens and how I can make this cursor appear without having to use the tab key?
This is for IE8 only. (It's an intranet site)
Code as requested for how I'm setting focus:
$(document).ready(function(){
$('#rachel').focus();
});
EDIT
I didn't think to mention that the problem is happening on a popup window that looks to be implemented like a layer. Is it possible for layers to block the cursor?