I am sitting with an issue where CSS styles don't get removed from an anchor tag when the css class is removed via AJAX, it only happens on a mobile device. This doesn't happen when using a desktop browser.
Have a look here using a mobile device.
You will note that the filters turn red when you select them, but deselecting them doesn't remove the red.
The code that is used there:
$('.tagsContainer .tagsContainerA').click(function () {
vm.alphabet("");
clearAlphabet();
$('.pagination.alphabet .alphabetAll').addClass('currentPage');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$(this).addClass('selected');
}
return false;
});
Any ideas what could be causing this on a mobile device?
The problem has to do with the hover, not the click function.
This happens because the hover is triggered in mobile while the element is focused also.
Just add this to your css:
#media screen and (max-width: 768px) {
.places-filter .places-tags li:hover {
background-color: #d1d1d1;
background: #d1d1d1;
}
}
This way you will 'disable' the hover function and only have the click one in mobile.
Another solution is placing the hover effect only in screens bigger than X amount.
Related
I have a menu that needs to pop up when it is hovered over (and collapse when the cursor is moved outside). However, on touch devices I want it to expand and collapse on 'click', since hover events aren't very useful.
To do that, I use :hover selector, and a backup .clicked class that is applied on touch events. The touchstart handler toggles the .clicked class and uses preventDefault to block the default action (which sets the :hover flag).
It works fine in Chrome's mobile simulator, but on my iPhone the menu ends up having both :hover and .clicked. Why is that happening?
Here's a fiddle: http://jsfiddle.net/rgLodhjg/1/
// html
<div class="test">
</div>
// css
.test {
width: 200px;
height: 100px;
border: 1px solid black;
}
.test:hover:before {
content: "hover";
}
.test.clicked:after {
content: "clicked";
}
// js
$(".test").on("touchstart", function(e) {
$(this).toggleClass("clicked");
e.preventDefault();
return false;
});
You can try this and it will work on iOS9 (I'm not sure about iOS8 and older):
#media (hover: hover) {
.test:hover:before {
content: "hover";
}
}
To support older iOS systems you can use mq4-hover-shim.
You can also use the solution provided by #Simon_Weaver in this post.
By default, hovers are activated on first "tap" in safari. Try leaving the default hover functionality and tapping it, the hover behavior should happen.
I have the following CSS to keep one of my page elements hidden initially:
#media only screen {
#page-element-1 {
display: none;
}
}
and the following JS to fadeIn the element when another element is clicked.:
$('page-element-2').click(function(){
$('#page-element-1').fadeIn();
}
However I want to fade in the element only on tablets and desktops.
How can I do this?
I did try wrapping the js in something like: if (screen.width >= 769){}. But even with this, when I resize the browser, I do see the #page-element-1 as
element.style {
display:block
}
overrides:
#page-element-1 {
display: none;
}
Expanding on my comment above, rather than trying to apply the effect through JavaScript, instead use CSS transitions to do so, targeting the resolutions you want with media queries and then just use JS to initiate the effect by toggling a class.
Here's a pure JS proof of concept, click on the green div to reveal the red div above:
document.getElementById("shown").addEventListener("click",function(){
document.getElementById("hidden").classList.toggle("shown");
},0);
#hidden{
background:red;
height:0;
}
#media all and (min-width:769px){
#hidden{
opacity:0;
}
#hidden.shown{
opacity:1;
transition:opacity .5s;
}
}
#hidden.shown{
height:100px;
}
#shown{
background:green;
cursor:pointer;
height:100px;
}
<div id="hidden"></div>
<div id="shown"></div>
There's a couple of key factors here.
Make sure you have <meta name="viewport" content="width=device-width" /> in your <head> element.
As #Shaggy said, you need to use media queries for the desired effect.
example:
#media (min-width: 768px) { // tablets can't go below 768px
#someID {
// styles
}
}
Additional media queries here for selected devices
As for your javascript calculating the resize of your browser, this only works on doc load UNLESS you're using resize event.
$(window).on('resize', function() {
// throw your resize code here for whatever you want to hide/show
if (window.screen.availWidth > 768 {
......
}
});
You don't necessarily have to use both the resize event AND the media queries. Once you resize the browser, the media queries will pick up the width and assign styles to the elements.
best way, as others suggested, is using keyframes in css.
if you wanted to do it in javascript, try:
if ($(window).width() < 796) {
//DO STUFF
}
To see the change you should use the mobile emulation available in chrome and firefox, and reload the page. That and use the media queries.
I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).
On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.
I get it, you don't want the users to see the "caret" on the desktop. This could be achieved with minimal amount of Media Queries. It should be something along these lines. I got the Desktop breakpoint Media query code right from Bootstrap 3 Docs.
#media (min-width: 1200px) {
.navbar-nav .caret {
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
}
You can use Jquery hover to activate the drop-down
Try this
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
if($(window).width() > 750)
{
$('b.caret').hide()
}
});
DEMO
Is this possible? Short of converting all my hover styles into mouseover listeners is it possible to stop a touch device from triggering the CSS hover state?
I have an application that must work on both touch and pointer input, it works great but certain styles applied on hover just don't make sense on touch devices because they tend to retain the hover state indefinitely after a user has tapped an object.
Things to take into account:
Device width bears no correlation with touch enabled devices to me,
the touch screens we are using here are desktop size monitors.
I don't want to force a user to input via touch on a multi-input
device.
I had solved this problem following the approach shared in the link in the comments above. If you're not using it, consider using Modernizr in this scenario. Would like to hear some other approaches as well...
As user, Blender mentions, you can check against touch events like so:
html.touch {
/* Touch Device ~ No Hovers */
}
html.no-touch {
/* Not a Touch is disabled */
}
html.no-touch .element:hover {
opacity:.5;
}
My solution is to add hover-active css class to the HTML tag,
and use it on the beginning of all the CSS selectors with :hover
and remove that class on the first touchstart event.
http://codepen.io/Bnaya/pen/EoJlb
JS:
(function () {
'use strict';
if (!('addEventListener' in window)) {
return;
}
var htmlElement = document.querySelector('html');
function touchStart () {
document.querySelector('html').classList.remove('hover-active');
htmlElement.removeEventListener('touchstart', touchStart);
}
htmlElement.addEventListener('touchstart', touchStart);
}());
HTML:
<html class="hover-active">
CSS:
.hover-active .mybutton:hover {
box-shadow: 1px 1px 1px #000;
}
I'm using .toggle() on a button element:
$("header button").click(function(event){
$(".site-nav-wrapper").toggle();
event.preventDefault();
});
This works great. The problem is if the button is toggled to display:none and then I change the device orientation, triggering my desktop media query, despite the fact I re-force display:block; on the desktop media query, the button remains toggled to display:none:
(Sass):
.site-nav-wrapper{
//Mobile First
display:none;
#include breakpoint($breakpoint-lg) {
display:block;
}
}
Is there a way to reset whatever the toggle() function is storing?
toggle uses inline styling, which overrides whatever you're doing in your stylesheet.
To get the desired result, you should use a special hidden class to hide the element, and use toggleClass instead.
SASS:
.site-nav-wrapper.hidden {
display: none;
#include breakpoint($breakpoint-lg) {
display: block;
}
}
JS:
$("header button").click(function(event){
$(".site-nav-wrapper").toggleClass('hidden');
event.preventDefault();
});
If I remember correctly toggle sets the display property to none on the element's style attribute. If you want to force the button to display in the "desktop" orientation then you'll need to include an !important declaration in your desktop breakpoint.
Alternately, you can listen for onorientationchanged and switch to the desktop version of the site then (un-toggling / activating everything that needs to be activated).
Why not avoid the toggle so there's no issues with the media queries.
$("header button").click(function(event){
$(".site-nav-wrapper:visible").hide();
$(".site-nav-wrapper:hidden").show();
event.preventDefault();
});