Remove hover state on click (not working on phones) - javascript

I have a button that performs an ajax action on click (no reload)
On my desktop, when I click the button, the button returns to default style state (when not hovering)
But on phones.. It will stay in hover style, even if I click somewhere else
I have tried off("hover") and unbind("mouseover mouseleave mouseenter mousein mouseout hover")
Also tried setting an :active state in css, and creating a classname for the "not-hovered" state, and changing to that on click in jquery
No effect (on any phone)
How can I achieve this?

try making something like this:
$('#element').on(click, function{
this.toggleClass('selected unselected')
});
selected and unselected are styles you must add to you CSS, if doesnt overwrite the existing styles add !important at the end of the elements in the style class you are changing for the browser to force them.
Let me know if that worked.

Here is my solution in all the cases the mobile version do not need the CSS hover state.
First of all, detect if the browser is desktop or mobile (or is touch) via JS / jQuery. Then, add a 'desktop-version' CSS class to the 'body' tag, and set all the ':hover' pseudoclads CSS rules only to the 'desktop-version' anchors / selectors that have a JS function binded to them.
Doing so, they won't have actually no 'hover' state to get stuck with.

Related

Removing an Onclick Event From a Menu Link

I am using a AJAX search plugin for Wordpress that displays in my mobile menu by targeting a specific menu ID (menu-item-6101). Everything works great, but when I click on it the menu is dismissed (which prevents you from doing any searches, the expected behaviour is for the menu to stay visible while typing).
I have spent a number of hours researching, and it seems that there is an onclick event attached to the <a> of that menu item that is likely causing the menu to be dismissed (note that none of the other parent -> child toggles cause this, only this menu item that the search plugin is using to display a search box).
I have tried every single variation of event.preventDefault();, event.stopImmediatePropagation(); & event.stopPropagation();, as well as trying to remove the listener, send it to null, etc. but unfortunately I am having issues with either the targeting (e.g. fetching the ID, and then targeting the <a>, or it is being overridden due to the javascript load order.
I have also tried to make an onclick event for that menu item div that forces the mobile menu to stay visible (the menu gets style="display:none;" added to when when focus is changed), so I thought perhaps that would be a different approach:
jQuery('div.proinput').click(function(){
var element = document.getElementById('#mobile_menu');
element.style.removeProperty("display");
jQuery('.et_mobile_menu').css({
display: inline-block !important;
});
});
I would really appreciate it if someone could help me.
Thanks!
I think the menu toggle is actually being fired by the div#ajaxsearchpro3_2 inside de anchor. Try with this (assuming the div will allways have the same ID):
FIXED
document.getElementById('ajaxsearchpro3_2')
.addEventListener('click', function(e) {
e.stopPropagation();
});
The final solution is:
jQuery(".et_mobile_menu .menu-item a").not(".toggle-menu").off("click");
Hope that this helps someone :)

Make JQuery button appear pressed; ie change theme

I'm using JQuery UI buttons and used ThemeRoller to do all the fancy color stuff. I'm currently looking for a way to present a button that does nothing except appear pressed.
I assume that there is a style attribute that I can use to just change the colors from default state to pressed state, but I am really struggling to find it. I also searched for a way to set the button to a "selected" state, without much luck. Either method works equally well.
Thanks!
Try justt adding the active class.
$("#buttonName").addClass("ui-state-active");
Thanks to some comments, I've discovered a method that that results in the desired behavior. It seems like far from the best method though.
$("#button-id").button().addClass("ui-state-active");
$(document).mousemove(
function(event){
$("#button-id").button().addClass("ui-state-active");
});
I guess continually resetting the class isn't the worst.
Note that any event I tried to bind to the button resulted in a reversion to original colors.
Looks like you are need to disable the button, and set the css style to active, so:
$('#buttonName').attr('disabled','disabled').addClass("ui-state-active");
should do the trick
EDIT
Since you don't want to disable the field:
$('#buttonName').addClass("ui-state-active").click(function(e) {
e.preventDefault();
return false;
});

JQuery Add/Remove Class Issue

Building a simple Multilevel push menu based on CSS classes, It has no javascript animations and runs on CSS transform/transitions. It works fine on every part other than toggling the is-open classes.
When a user clicks on a link, it should first remove the .is-open class. Then add it so the animation activates.
If i say change the .is-open class in the second stage to .addClass("foo"); it has no problem removing the .is-open class and adding the .foo class. So i'm wondering what the problem is with this section of the code.
You can find the code here http://jsbin.com/EjUQ/2/
On the demo you'll find that menus without a submenu load nothing. This is the correct behavior. The problem I'm having is that I would like the Menu to close before opening a new one. So removing the .is-open class then applying it again.
e.g
Link 1, 4,7 don't have submenu's so nothing with open on click/touch, clicking the menu button will prompt nothing to happen. This is the correct behaviour.
Link 2,3,5,6 have submenu's, so it opens on click/touch and the menu button will toggle the menu to open/close.
Hopefully someone can point me the direction of what i'm doing wrong. Thanks.
You should utilize the transitionend event. So that you listen for the animation to complete before adding the 'is-open' class back to the sidebar and content. Ex:
sidebar.one('transitionend', function() {
sidebar.addClass("is-open");
content.addClass("is-open");
});
Now, what I have here isn't perfect, but I believe it conveys the concept: http://jsbin.com/EjUQ/9

jQuery - Is there a way to 'save' a state of dom elements (css) and revert to that saved state etc..?

I have a css menu that also does child menus etc.. the problem is, I have to create eventHandlers for for tab/jaws users. It seems when I manipulate the menu(s) with show()/hide() it mucks up the inherent css selectors and their states, so if a user wanted to do both tab and mouse move - it won't work. They either have to use all mouse or tabbing etc..
I could create more js eventhandlers for mouseovers/outs etc..but curious if it would be feasible to clone the parent elements onload, and tie-into the tabbing that when they tabbed "off" the menu, I "revert" to this saved state so then the user can use the css method of mouseover/out etc..
Does this make sense? Or is this as much work/overhead as just creating more eventHandlers for the mouse events?
Here is an example of saving and restoring a menu just as you suggested.
http://jsfiddle.net/5pvGG/
var $saved = $('#cssmenu').clone();
$('#a').click( function() {
$('#cssmenu').remove();
});
$('#b').click( function() {
$('body').prepend($saved);
});

JQuery Mobile Listview Background Color

How can I adjust the background color of a listview item in jquery mobile? Basically I'd like a user to click a item and have it and only it highlight, very simple, so I thought.
I thought this might achieve it (.groupList is an unordered list with that class). The event is fired but nothing changes.
$(".groupList li").bind('click', function() {
logger.debug("list row click");
$(this).closest("li").siblings().attr("data-theme","a");
$(this).parents("li").attr("data-theme","e");
});
I think the reason this is broken has to do with the fact I can't seem to set data-theme dynamically at all on listviews. I also can't use the background-color css with any luck.
It seems li tags can only have their data-theme set before appending to a list, once appended I can't get it to change.
The logic I've described here works on table rows just fine. Just bind the click event to tbody tr. The jquery functions closest, siblings and parent help us turn on/off the css for the background color. Again, not entirely sure why a listview breaks this.

Categories

Resources