I'm having a similar problem as described in this question, but with JQuery Mobile 1.4, particularly with the list views. A slight tap that is not enough to be considered a click causes list elements to highlight and stay highlighted:
Can anyone tell me how I can prevent any hover highlighting in my application? I would rather not have to modify any of the JQM theming CSS to do this, but I will if that is what it takes.
It looks like maybe there is a jquery hover event or mouseover being triggered to set the interaction state to something like ".ui-state-hover" or ".state-hover"
1.
jQueryUI - removing class on hover
2.
function overPrevent(e){
e.preventDefault();
return false;
}
$(".options li").hover(overPrevent,outOption);
// alternative to above but still using JavaScript
$(".options li").click(function() {
$(this).removeClass("ui-state-focus ui-state-hover");
}
// alternative to above but still using JavaScript
$(".options li").hover(function(e){
$(this).removeClass("ui-state-hover");
});
OR maybe unbind to the mouseenter and mouseleave?
3.
$('.options li').click(function(){
$(this).unbind("mouseenter mouseleave");
})
OR try a pure css override
4.
.theme-group-header .state-default .corner-all .state-hover:hover{
background:none;
}
also detecting mobile up front with something like this small library - http://detectmobilebrowsers.com/
then you can name space your css and override the jquery ui library with something roughly like this:
.touch{
.theme-group-header .state-default .corner-all .state-hover:hover{
background:none;
}
}
see also references:
http://trentwalton.com/2010/07/05/non-hover/
jQueryUI - removing class on hover
http://tech.vg.no/2013/04/10/hover-state-on-touch-devices/
The issue with the "ui-state-hover" effect
Jquery hover function and click through on tablet
jQuery UI button not "unclicking"
http://api.jqueryui.com/theming/css-framework/
mobile safari links retains focus after touch
http://detectmobilebrowsers.com/
https://github.com/kof/remove-hover
To prevent any hover highlighting in a jQuery Mobile 1.4 Listview you can overwrite the appropriate CSS according to the swatch you're using:
/* Button hover */
#yourList.ui-group-theme-a .ui-btn:hover {
background-color: #f6f6f6 /*{a-bhover-background-color}*/;
}
/* Button down */
#yourList.ui-group-theme-a .ui-btn:active {
background-color: #e8e8e8 /*{a-bdown-background-color}*/;
}
Related
I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.
Is there any way to disable the button without changing its color to grey?
Instead of disabled prop you could use your custom class with pointer-events: none, e.g.
.disable-events {
pointer-events: none
}
<v-btn :class="{'disable-events': customCondition}">
Then add additional styling to that class if needed.
I do it by removing v-btn--disabled and playing with vuetify's css classes.
Still grey but with colored text solution
The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.
I, personally, also had some custom opacity to disabled buttons.
HTML
<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>
CSS
button.v-btn[disabled] {
opacity: 0.6;
}
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
})
}
CodePen
Same display solution
If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
document.getElementById('btnA').classList.remove('success--text')
document.getElementById('btnA').classList.add('success')
})
}
CodePen
As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.
<v-btn :disabled="true" id="custom-disabled">
Button
</v-btn>
<style>
#custom-disabled.v-btn--disabled {
background-color: red !important;
}
</style>
For light and dark theme:
<style>
#custom-disabled.v-btn--disabled.theme--light {
background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
background-color: brown !important;
}
</style>
Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.
You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.
So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.
<v-btn
:style="{
color: `${getTxtColor()} !important`,
backgroundColor: `${getBtnColor()} !important`
}"
:disabled="status"
#click="doSomething"
>
Click Here
</v-btn>
This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.
Using the JQuery UI datepicker, in the header it gives you the option to go to the next month or previous month with left/right arrows. My question is what is the css property to change the colors when hovering over the previous or next arrows?
ui-state-hover is the class that is applied when hovering, see here
It's a little harder than it seems. As NimChipsky pointed out, it's in ui-state-hover, but the colors aren't there directly.
If you look at ui-state-hover, out of the box, you will see something that looks like:
background-image: url("images/ui-icons_222222_256x240.png");
Basically, this is telling you that you will be using an icon sheet with color #222222, but the icon sheet graphic has to be available. You can generate other icon sheets directly, with other colors, by using the jQuery UI theme builder.
<script>
$(".ui-datepicker-next, .ui-datepicker-prev").hover(function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
</script>
and css for your class 'hover'
.hover
{
background-image:url('paper.gif');
}
I would like to style my selected button.
I would like to display a light-blue border around the image of my selected button to show which page the user is on. (or just use the same hover image as the selected button image when the button is pushed.)
I didn't have success with the css link selectors :visited, :focus, or :selected.
Does this require a javascript solution?
thanks for any pointers!
i usually just a extra class name called selected
<div class="button selected">Button 1</div>
<div class="button">Button 2</div>
.selected {
border: 1px solid #0000ff;
}
It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.
you should use :active pseudo class in css to achieve what you want.
jQuery Solution with your CSS
You would probably want to check first if it is selected, that way this solution works with things like Twitter Bootstrap, where you can make any element act like a button:
$(function () {
$('div.button').click(function(){
if ($(this).hasClass('selected') {
$(this).removeClass('selected');
//Insert logic if you want a type of optional click/off click code
}
else
{
$(this).addClass('selected');
//Insert event handling logic
}
})
});
You will, in fact, need to use javascript. I did this in a project a while back, by iterating through the links in the navbar, and setting a class called "selected" on the one the user is currently visiting.
If you use jQuery, you can accomplish it like this:
$(function() {
$('#navbar li').each(function() {
if ($(this).children('a').attr('href') == window.location.pathname)
{
$(this).addClass('active');
}
});
})
The CSS Pseudo-selector :active won't still be active after a pagereload.
I have a jQuery UI Button that I am trying to style using CSS. Basically all I want is a dark-green background, and a light-green hover color. I noticed that for whatever reason, specifying the desired styles in my CSS file didn't work, so I added some code to apply them programmatically when the button is created:
//initialize the jQuery button with the correct styles
$( "button", ".buttonContainer" ).button();
//add a class that we can apply our styles to (jQuery likes to override styles applied to .ui-button)
$(".buttonContainer .ui-button").addClass("greenButton");
//override button styles (doesn't work when done through stylesheet)
$(".greenButton").css("background", "none !important");
$(".greenButton").css("background-color", "#006600 !important");
$(".greenButton").css("border", "1px solid darkGray !important");
//mouseover handler to change the background color (same reason as above)
$(".greenButton").hover(function() {
//mouse-over handler
$(this).css("background-color", "green !important");
}, function() {
//mouse-out handler
$(this).css("background-color", "#006600 !important");
});
This works fine in Chrome, IE, and Safari, but for some reason Firefox continues showing the default gray button styles (no scripting errors are reported). Interestingly, if I open the web-developer CSS editor, the button gets the correct styles instantly. I have the following in my CSS from back before I realized that the styles would only take if applied programmatically:
.greenButton {
background-color: #006600 ! important;
}
.greenButton:hover {
background-color: green ! important;
}
Anyways, what I see in Firefox by default looks like this:
...when it should look like this (as seen in any other browser):
Any ideas?
In your CSS you are only setting the background-color attribute, while jQuery UI buttons are built with background image, which covers the color. You were correct to set 'background:none' via JS, but adding it to the element's style multiple times via css() messes things up a bit - just inspect the style attribute of your button when active in, e.g. FireBug. It might well be that you hit a minor bug in FireFox. It works for me. In any case, here is working jsFiddle
CSS:
.greenButton {
background: #006600 none ! important;
}
.greenButtonHover {
background: #009900 none ! important;
}
HTML:
<button>Should be green on hover</button>
JS:
$("button").button();
$("button").addClass("greenButton");
$(".greenButton").hover(function() {
$(this).addClass('greenButtonHover');
}, function() {
$(this).removeClass('greenButtonHover');
});
Currently testing mobile site on iOS (will get to other devices soon, so unsure if this pertains to other OS's/Browser).
How come mobile safari triggers the active state of a link during scroll?
My test page is constructed of an unordered list with a link tag inside each list item that expands to 100% width. The issue is that during a normal scroll, the :active state is triggered, revealing the background that is intended for showing during :active state only (I'm obviously omitting unnecessary styles and content from the example):
html:
<ul id="foo"><li>Content</li></ul>
css:
#foo a {background:white; width:100%; height:100px;}
#foo a:active {background:red;}
You can tell if a click turns into a drag gesture or not by listening to touchstart and touchmove events and then evaluate if the touch turns into a scroll or not e.g. if you were coding in angular
let isTouchMove = false;
#HostListener('window:touchmove', ['$event'])
onTouchMove(event) {
isTouchMove = true;
}
#HostListener('window:touchstart', ['$event'])
onTouchStart(event) {
isTouchMove = false;
}
you can add a class, e.g. 'not-scrolling', based on the value of isTouchMove variable and use that in addition to your :active selector, like :active.not-scrolling { background:red; }.
You should use ontouchstart/ontouchend to add/remove a class with Javascript. Then use that class instead of :active.