I have a spinning wheel animation performed while opening a modal=true p:dialog. (via ajaxStatus listener). When dialog frame is showed up it keeps spinning because there are still some computations being executed required to display dialog content. This is OK.
But! If click somewhere on the dialog the wheel disappears. Actually it is being covered by the dialog as its z-index becomes less.
I tried explicitly set z-index in dialog style to 9999 but it doesn't catch it up. Moreover I found that z-index is being dynamically changed when focusing dialog or wheel. So even if I set it to 9999 via browser dev tools, it eventually (in some time) will be set back to its previous "covered" value.
Is there a way to set and fix z-index of a spinner (which is a nothing but a transparent dialog) ?
Thank you!
Related
I am creating a simple mobile app with Cordova. For good user experience I would like there to be instant feedback whenever a user presses a button. This should be accomplished with the :active pseudoclass. It mostly works, but it's not quite 'instant'.
See the jsbin here.
With desktop Chrome, clicking the button produces absolutely instant feedback, no question.
With Chrome for Android, tapping the button quickly feels pretty quick, but a slow tap or holding on the button causes a delay (it might be hard to notice, but it is there and it's bugging me).
I think this is something to do with scrolling. If you go to the Android settings, there is a scrolling list of options. These options seem to highlight with a similar delay. However, any native Android buttons which are not within a scrolling list are absolutely instant (for example, the back button in the top right, or save/cancel on a popup dialog).
Is there some way I can convince Chrome that these buttons are not on any kind of scrolling pane and should just be highlighted instantly?
This is probably unrelated, but I have also noticed that holding on an html button highlights it, but then moving your finger (still within the button) causes the highlight to disappear. This does not match the behaviour of native Android buttons, which would stay highlighted so long as you stay within the button.
Edit: I should add that -webkit-tap-highlight-color (which only works with cursor: pointer) is a bit faster than :active, but it's not an acceptable solution, for a few reasons:
The highlight disappears if you hold on the button for more than one second
It clashes with :active - to get sensible results with -webkit-tap-highlight-color you would have to remove :active, which makes no sense
There is no way to control the size/shape of the highlight, which might not match the actual button (sometimes it bleeds around the edge, or has mismatching rounded corners)
The correct HTML way of solving this is :active, and I would like to use that if at all possible.
It seems the best way to solve this is to listen for touch events and set a class:
$('button').on('touchstart', function(e){
$(this).addClass('active');
});
$('button').on('touchend', function(e){
$(this).removeClass('active');
});
To keep this as closely related to the :active pseudoclass, I opted to use a class of active and add styles for both like this:
button:active, button.active {
// active style
}
For more information, see: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
Firefox 46.0.1. I'm using the inspector. I'm a beginner. When I move the mouse around, I get a blue box around the element. I would like to stop the movement so I can use my mouse to move about the lower info boxes.
I found a way of doing this before, but cannot find it now via google. I know this wasn't done via a breakpoint. It was some key press.
answer:
Ok, click on the box with arrow in it; it's on the upper left margin. It turns blue. Move mouse to where you want. Left click. The blue box goes away, but the text below stays frozen.
Supposedly, the answer is here:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
Robert
What are stuck in is often referred to as "Point to Inspect" mode or "Inspect Element" mode. In many browser developer tools, this mode is entered via application menu item, right click context menu, or a button in the developer tools UI. The idea is to help the user see the hovered element in a DOM tree visualization.
Usually, this mode is active until the next left click. When the user left-clicks on an element, it is revealed in the DOM tree view. (Some tools also log the element to console.) So, to get out of the mode, simply click on some element to select it.
I've read somewhere, (unfortunately I can't find my source again) that if a user has loaded an HTML page with a running CSS3 animation (infinite parameter) and he decides to leave it, the browser (computer) still needlessly plays the animation and so, CPU (or Acceleration hardware?) is still working for the animation although the user left the page.
So if someone could answer me, I will be pleased.
Is this fact true?
And if it's true:
Are the transitions also concerned with this issue ?
Is pausing animation (and transition if concerned) enough to avoid this problem? (I was thinking to force the pausing with an onbeforeunload event) Or should I have to do another thing ? Notice that I don't want to use "hover" to start the animations/transitions.
PS: I'm still new in CSS, javascript and know no other language. And sorry but my knowledge of English language is far from top...
If the user leaves the page completely (e.g. navigates to a whole new page or closes that tab) then the animations shouldn't keep running. If they somehow do keep being updated, it's because of a browser bug and you shouldn't worry about it anyway.
However, CSS3 animations for hidden elements (display: none;, for instance) still get evaluated, since they are keyframe-based, and there might be a keyframe sometime in the future that would cause the element to become visible again.
Imagine wanting to animate a box by first hiding it, then showing it again and making it flash. If CSS transitions would suddenly become disabled when the box is hidden, the animation would stop and the box would never appear again. And that's not what you want.
Note: profiling your web page can be done e.g. in Chrome using the Developer Tools (F12 -> Profiles). I haven't used it to profile CSS3 animations though, so I'm not sure if it can be done. You can however just take a look at Chrome's very own task manager (Shift-ESC) and see whether your website is using up a considerable amount of CPU. If that's true, then it's a sign that there might be too many animations on that page.
I have noticed that if a VScrollBar component contains RichEditableTextFields then when I am scrolling the component, and the mouse falls over a text field, then the component stops scrolling because the mouse cursor has changed and the mouse focus is on the text field. (even though I haven't given focus to the field by clicking on it).
This feels pretty buggy and I'm wondering if there is a way around it?
Edit: I should add that this only happens on Mac OSX when using the touchpad.
This has now been fixed in the 4.6 SDK. The workaround is to update your SDK version.
My Flex application contains a set of Hbox,Vbox combination that is shown/hidden depending on users actions. There is an option provided to show all these containers as open(from their previous hidden state). At that point, the styles used in my page vanishes! The page becomes really lengthy and when I scroll down a bit, the styles reappear. If I scroll up again to a threshold point, all styles are lost and the page looks plain white! To bring the styles back, I need to scroll down again a bit...
Anyone knows why this is happening? Please provide your answers.[EDIT]
Without style http://img268.imageshack.us/img268/1859/withoutstyle.jpg
with style http://img269.imageshack.us/img269/906/withstyle.jpg
The transition from image1 to image2 happens with a mild scroll down!
It sounds like the rendering of the style information is lagging behind the rendering of the data. That's why it 'catches up' if you wait but disappears again if you scroll.