I have a "follow" button that has "Follow" which when clicked, changes a class and the text visible is "Following". On hover this changes to "Unfollow".
Works just fine. On mobile (phone), clicking it seems to lock it into the "hover" state. As a result, it completely bypasses "Following" and shows "Unfollow". If I tap somewhere else on the screen, it "fixes" itself.
Is there any way to make this happen automatically? $('body').click() did nothing for me...
You can use the touchstart/touchend events in jquery. If you are using only CSS, I don't know of a solution, but what you can either bind your normal functions to touchstart/touchend events in addition to hover events or do something like the following.
$('.button').bind('touchstart',function(){
$(this).addClass('hoverClass');
});
$('.button').bind('touchend',function(){
$(this).removeClass('hoverClass');
});
This just make your "hoverClass" change the button as you need to via CSS. I hope that is clear enough. Basically, touchstart/touchend are similar to hover, but as far as I know not accessible via CSS exclusively.
Related
I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.
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/
I'm playing around with apps on Phonegap, and ran into something that's bugging me.
When I put :hover on a class and change the background, it looks like a real button being pressed on a touchscreen, which is good, yeah.
But if I push the button, then slide my finger off the button (without actually clicking it), it still thinks I'm hovered over it so the background stays changed.
Is there another thing I can use besides :hover that won't stay? Only triggered when it's actually clicked?
Hopefully you get what I'm trying to explain.
You could try using the :active psuedoclass:
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
What CSS property should I change at this page to disable transparency of a share iframe which appears when Like button is clicked?
When you hover on that Facebook box after clicking Like button, it becomes partially transparent and if you move your cursor away from it, it becomes solid white. I want it to be completely opaque all the time.
Well, I see no transparency on that box, only for the fade-in effect when it opens, but once it's fully opened it's not transparent.
To answer your question, you can see for yourself using firebug (firefox) or the development tools (chrome/safari) which css rules apply to what element.
From what I've seen now, you can use the use these: fb_edge_comment_widget fb_iframe_widget which are the classes of the span containing the iframe, or you can use the iframe itself.
The thing is though, is that you should not hack that. Why? Since then you'll have to always check for updates facebook are making, changes that they do not update you about (API changes they update on the blog), if you fail to be aware of these changes it can "break" your code/style.
I was also having the exact same problem.
I am using an AddThis widget set, and I don't know if this was the case for you or not (it looks like you may have chosen a different solution as I can't see the Like button on your site).
I ended up using
.addthis_button_facebook_like {
opacity:1 !important;
}
but you would use whatever selector that wrapped your like button. if using the standard embed from Facebook, it would probably be
.fb-like {
opacity:1 !important;
}
Someone else was having a similar problem with a Send button, which got me on the right track.
See it working like it ought to here. I'm sure it had something to do with some conflict from other styles, or possibly AddThis, but it's working now!
Is there any way to style an internally-linked div when it becomes focused? Like say I've got a link at the top of a page that I internally link (<a href="samepage.html#more">) to a div further down the page (<div id="more">), when someone clicks to that div, is there any way to style it to show that it's focused (like I'd maybe use a change in its background color or give it a border when it's clicked to)? It's not really like giving it a hover styling, it's more giving it styling on active or on focus or something like that. Is there any way to do that?
I'm not sure if there's just no way to do it, or if I'm being dense and there's an easy way, but I'm not seeing it so far. Thanks.
You should bind a JavaScript function to the window.onhashchange event:
window.onhashchange = function () {
var hashloc = window.location.hash;
// hashloc is a string like '#focusDiv'
// .. manipulate DOM
};
This miniature working jsFiddle example uses jQuery, and adds a CSS class to the focused DIV when a hash change event occurs.
The event is bound using plain JS because jQuery doesn't natively provide this hook, which may not at all be supported for older browsers as noted by Matt. To solve this I highly recommend this jQuery plugin for simple hash events.
Divs don't have a focus property that I'm aware of, but you'd probably want to bind to an event when the hash in the URL changes, then apply the changes to the div with an ID of the value of the hash.
For example, bind to this event: window.onhashchange -- it will only work on modern browsers (ie8+, Chrome 5+, Firefox 3.6+, etc) without some tweaking.