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');
}
Related
Is it possible to modify style of "Pay with Card" Stripe button? I've tried modifying by,
adding a new class defined in external style sheet
modifying its own class of stripe-button in external style sheet
and editing it inline with style=""
But I cannot get the button to change its style.
It looks like it might be possible with the custom integration instead of the simple integration (source: https://stripe.com/docs/checkout#integration-simple), but I was hoping there was something simpler.
Button with default style:
Does anyone have experience with this?
(I'm integrating into Ruby on Rails if that makes any difference.)
None of those worked for me. I ended up hiding the button in javascript and making a new one.
<form action="/your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="xxx"
data-amount="999"
data-name="zzz"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
<button type="submit" class="yourCustomClass">Buy my things</button>
</form>
Search for this class:
.stripe-button-el span
I think this is where you have to modify your own button's style.
You may overwrite it within your own external css file.
Although a little hacky, for anyone wanting a super quick and simple way of using a different button along with the "simple integration", especially if you don't have "solid JavaScript skills", you can just hide the Stripe button with;
.stripe-button-el { display: none }
This way, any submit button within the form will call the checkout so you can just use the button you already had before introducing Stripe.
The following will override the background color with the custom color #EB649C. Disabling the background-image is required, as well as styling both the button and it's inside span tag.
button.stripe-button-el,
button.stripe-button-el>span {
background-color: #EB649C !important;
background-image: none;
}
You should use data-label its part of the regular stripe Checkout API:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
data-amount="10000"
data-label="Proceed to Pay with Card"
...
...
data-locale="auto">
</script>
Using jQuery, you can also simply scale the button like this:
<script>
$(function() {
$(".stripe-button-el").css({'transform': 'scale(2)'});
});
</script>
Or replace it by a button with any image you want, like this:
<script>
$(function() {
$(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
});
</script>
You can remove the button styles with Jquery and add your own. Worked a charm for me:
<script type="text/javascript">
$(document).ready(function(){
$(".stripe-button-el span").remove();
$("button.stripe-button-el").removeAttr('style').css({
"display":"inline-block",
"width":"100%",
"padding":"15px",
"background":"#3fb0ac",
"color":"white",
"font-size":"1.3em" }).html("Sign Me Up!");
});
</script>
The .stripe-button-el span actually works.
But you need to add !important in CSS to overwrite the default CSS.
You can try this,
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");
Pay with card is inside a span.
For those of you who want to change the background color of the button, make sure you do something like
.stripe-button-el span {
background: #5e366a !important;
background-image:none !important;
background-color: #5e366a !important;
}
in your css file. this will change the actual background of the button fr you. If you wish to have the parent div changed, you can do the same thing without the span or do a direct inline style.
In my page,I use tooltip which class name is .tooltipcell to the grid cell,and also use tooltip which class name is .tooltipbtn to the button.Now I want to change the background color of the tooltip in grid,but I do not want to affect the background color of the button tooltip.How to do that?I use to codes below,it affects the two tooltip.
method1:both effect
.k-widget.k-tooltip{
background-color:red; //set the desired color
}
method2:both effect
div .k-widget.k-tooltip{
background-color:red; //set the desired color
}
JS
show: function (e) {
e.sender.popup.element.addClass('red-tooltip');
},
and CSS
.red-tooltip {
background-color: #f00 !important;
}
You can do this:
.tooltipcell{background-color:green;}
.tooltipbtn{background-color:green;}
Just incase your div .k-widget.k-tooltip might overwrite the style you may have to target it deeper like this:
div .k-widget.tooltipcell{background-color:green;}
div .k-widget.tooltipbtn{background-color:green;}
The is an amendment to MarioD Answer.
I didn't test it but given that it works, a better practice would be to concatenate these classes. It saves size in the css and improves loading time. Do this:
div .k-widget.tooltipcell, div .k-widget.tooltipbtn {
background-color:green;
}
I had the same problem where I was using kendo tooltip. I wanted to change the CSS of the tooltips only in one place leaving the rest of the tooltips intact.
Using css the normal way to do this would be to use target .widget and .k-tooltip CSS classes.
Although this would change all the tooltips within a page.
So, since I wanted to change only one tooltip (same problem as this post) I had to do a JS approach.
So, I had to use the show function of kendo's tooltip.
Example:
$('.target')..kendoTooltip({
position: 'bottom',
showAfter: 1000,
content: 'test',
function(e) {
e.sender.popup.element.addClass('customClass');
}
}).data('kendoTooltip');
I will try to post here a jsfiddle in few moments.
André
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}*/;
}
I'm using image map on my web page and iPad app. Each area on the image map is a clickable element to make sound, which I can do easily with jQuery. But I haven't been able to change the style, like either showing the border, or change the fill color just to indicate that the area is clicked. If anybody has done this, please let me know; it seems simple, but I'm really stumped.
I got it to work thanks to James Treworgy's awesome ImageMaster Jquery plugin.
$('area').mousedown(function(e) {
$(this).mapster('set',true);
});
$('area').mouseup(function(e) {
$(this).mapster('set',false);
});
$('area').bind( "touchstart", function(e){
$(this).mapster('set',true);
});
$('area').bind( "touchend", function(e){
$(this).mapster('set',false);
});
It's hard to say without seeing the code, but the same way you are referencing the parts of the map is the same way you apply the styles.
If you have a section1 id, then you css could be
#section1{
border://something
background-color://something else
}
Or, in your script, when you reference the click, you also add some styles, e.g.,
$('#section1').click(function(){
//whatever
$(this).css({'background-color' : 'red', 'border' : '1px solid black'});
});
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.