Button will not change color (HTML5) - javascript

I have three buttons that act much like radio buttons - where only one can be selected at one time:
<button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button id="btn-silver" name="btn-silver" type="button">Silver</button>
<button id="btn-gold" name="btn-gold" type="button">Gold</button>
For the normal, unselected state, all the buttons use a gradient background:
#btn-bronze
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
width: 33%;
height: 100%;
}
#btn-silver
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
width: 33%;
height: 100%;
}
#btn-gold
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
width: 33%;
height: 100%;
}
When selected, the selected button should add this class to modify the background color:
.blue-selected
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));;
}
This is done using jQuery in the method that is called when the body loads:
$("#btn-bronze").click(function()
{
console.log("bronze");
$(this).addClass('blue-selected');
$("#btn-silver").removeClass('blue-selected');
$("#btn-gold").removeClass('blue-selected');
});
$("#btn-silver").click(function()
{
console.log("silver");
$("#btn-broze").removeClass('blue-selected');
$(this).addClass('blue-selected');
$("#btn-gold").removeClass('blue-selected');
});
$("#btn-gold").click(function()
{
console.log("gold");
$("#btn-broze").removeClass('blue-selected');
$("#btn-silver").removeClass('blue-selected');
$(this).addClass('blue-selected');
});
When I click one of these buttons, the console log message appears, but the background color remains the same. What am I doing wrong? Here is the fiddle.

I would fix a couple of things.
Use class instead of ID targeting. I left the IDs in, but you don't really need them now:
<button class="btn" id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button>
<button class="btn" id="btn-silver" name="btn-silver" type="button">Silver</button>
<button class="btn" id="btn-gold" name="btn-gold" type="button">Gold</button>
Then I would use these styles. This way I could add more buttons without creating new styles:
.btn
{
float: left;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F8F8F8), color-stop(1.0, #AAAAAA));
width: 33%;
height: 100%;
}
.btn:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
}
.btn:last-child {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}
.btn.blue-selected
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #FFFFFF), color-stop(1.0, #6699CC));
}
Finally, I would simplify the hell out of the javascript:
$(".btn").click(function () {
$(".btn").removeClass("blue-selected");
$(this).addClass('blue-selected');
});
http://jsfiddle.net/4ZygH/1/

#btn-bronze has a higher specificity than .blue-selected, so its background takes precedence.
You can get around this by using !important, but that's probably not the best solution.
The most reliable would be if the parent element also has an ID, then you can select #parent-element>.blue-selected and get a higher specificity.

A ID selector have a more priority then an class selector. You could use important in your css code.

Related

How to add arrows in matTooltip?

I'm trying to add arrows on matTooltip, there is any way to add arrows on matTooltip.
<button mat-raised-button
matTooltip="Info about the action"
aria-label="Button that displays a tooltip when focused or hovered over">
Action
</button>
You need to override material styles. and add before/after pseudo-element as arrow. For example if you need to style a tooltip with left border and arrow just do something like that
.mat-tooltip {
// to make possible place arrow pseudo element outside tooltip with absolute positioning
overflow: visible;
position: relative;
&.right {
border-left: 6px solid red;
margin-left: 5px;
&::before {
position: absolute;
content: '';
display: inline-block;
background-color: red;
clip-path: polygon(50% 0, 0 50%, 50% 100%);
left: -12px;
width: 15px;
height: 15px;
top: 50%;
transform: translateY(-50%);
}
}
}
Following the usage of Material Design, arrows are not included in angular tooltip component. Here you could take a look what you can do and not to do with tooltips https://material.io/components/tooltips/

How to animate background-size of multiple background

I simply can not animate the background-size property.
<div class="bar">
<div class="intern-bar">
R$ <span id="funds">000,00</span>
</div>
</div>
JS (with jQuery):
$(".intern-bar").animate({backgroundSize: "100% 100%, 100%"}, function(){
console.log("done")
});
CSS (SCSS):
body {
background-color: black;
}
.bar {
border-radius: 100px;
background-color: #ffffff;
padding: 7px;
box-sizing: border-box;
.intern-bar {
padding: 6px 15px;
box-sizing: border-box;
border-radius: 100px;
background: linear-gradient(to right, #00C1EB, #00c1eb)
no-repeat, linear-gradient(to right, rgba(182, 182, 182,
0.54), rgba(121, 121, 121, 0.40)) no-repeat;
background-size: 56% 100%, 100%;
background-position: 0%, 10%;
height: 100%;
min-width: 155px;
width: 100%;
font-size: 30px;
text-align: center;
font-weight: 200;
line-height: 1;
transition: 0.8s ease;
#funds {
font-weight: 500;
}
}
}
I've stumble upon this answer:
Because background-size is a CSS3 property that is not supported by jQuery yet as it's still a candidate for recommendation.
From this question: jQuery - Animate css background-size?
And none of the answers that I've come across worked for me, and I need to use the callback function of animate, to do something when it's finished, like a confetti animation, etc
Pen: https://codepen.io/Malganis/pen/MvXLxY
Here's my working jsFiddle, I used CSS animations.
I just modified your CSS and the JQUERY :) hope this can help you.
Solutions:
(jQuery) Attach an event handler function for one or more events to the selected
elements.
$(element).on();
(Standard JS) The transitionend event occurs when a CSS transition has completed
element.addEventListener("transitionend", function () {
console.log("Done");
}, false);
jsFiddle

Positioning disables hover selector and mouseover events

This jsfiddle..
https://jsfiddle.net/9e1wd245/12/
..demonstrates a browser behavior I'd like to understand better than I do.
If you remove the positioning from the crumbtray and the crumb, the hover- selected CSS is applied when the crumb is hovered and mouseover events are triggered when the mouse enters the crumb.
With the positioning in place, neither of those things happen; but if you hover over the top border, the hover CSS is applied and the mouseover event is triggered.
(In this situation, the approach used uses positioning to enable z-indexing so that the curved right border will appear over the left side of the adjacent elements.)
Note that you can take the negative right margin off the crumb, and the problem persists, so it isn't being caused by the negative margin.
I realize I could use an svg for a crumb, or maybe use a couple of separator elements over a shared background rather than using positioning and z-indexing, but why doesn't this work? Is there something in the spec that says hover and mouseover events aren't expected to work for positioned elements? Is there something else entirely that I'm overlooking?
html:
<div class="crumbtray">
<span class="crumb">USA</span>
<span class="crumb">California</span>
<span class="crumb">Sacremento</span>
</div>
css:
.crumbtray {
position: relative;
top: 0px;
left: 0px;
display: inline;
z-index: -10;
font-family: ariel, sansserif
font-size: 12px;
}
.crumb {
position: relative;
top: 0px;
left: 0px;
display: inline;
border: solid 1px gray;
border-left: none;
border-radius: 0px 10px 10px 0px;
padding: 0px 8px 0 12px;
margin-right: -10px;
cursor: pointer;
background: #c3f4c6;
background: -moz-linear-gradient(top, #c3f4c6 0%, #96f788 8%, #98e0a4 92%, #419330 96%, #188700 100%);
background: -webkit-linear-gradient(top, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
background: linear-gradient(to bottom, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3f4c6', endColorstr='#188700',GradientType=0 );
}
.crumb:hover {
background: none;
background-color: yellow;
}
.crumb:first-child {
border-left: solid 1px gray;
z-index: 60;
padding-left: 2px;
}
.crumb:nth-child(2) {
z-index: 50;
}
.crumb:nth-child(3){
z-index: 40;
}
JavaScript:
var ViewModel = {
init: function(){
console.log("ViewModel.init called");
$('.crumbtray').on('mouseover','span',function(){
console.log('mouseover crumb: ', this);
});
}
};
$(ViewModel.init);
Your problem is here:
z-index: -10;
This puts the element behind the background, which means although you can see it, the mouse can't "see" it because it is behind the (transparent) background, so it does not recieve mouseover events.
Now, it should still work, because the .crumbs have a positive z-index, above the background. It's likely that there is simply a bug, I do not believe this behaviour is documented anywhere.
It doesn't work, because you've set a negative z-index to parent element (Why did you do that?). Just remove it from there or change it to some positive value, like 1, for example.
When you set a negative z-index to element, it creates negative stacking context of all children element, so z-index width 40, 50, 60 just make sense inside it's parent, but main z-index will be negative (under body element).
So the main problem is negative z-index, you can cut it and search some information with 'negative z-index hover' keywords to clear the situation
.crumbtray {
position: relative;
top: 0px;
left: 0px;
display: inline;
z-index: -10;
font-family: ariel, sansserif
font-size: 12px;
}

HTML input range Style in Firefox

I´ve got a CSS problem with a input-range element:
<input type="range" id="difficultSelect" max="3" min="1" value="2"/>
the css looks like this:
-webkit-appearance: none;
z-index: 102;
width: 225px;
height: 5px;
margin-left: 95px;
margin-top: 15px;
border-radius: 2px;
background: linear-gradient(to right, #83f922 0%,#ff4c00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#83f922),
color-stop(100%,#ff4c00));
background: -moz-linear-gradient(left, #83f922 0%, #ff4c00 100%);
background: -webkit-linear-gradient(left, #83f922 0%,#ff4c00 100%);
As u can see, the background of the slider should show a linear-gradient from green to red.
In Chrome it displays as intended, but in Firefox there is the background-gradient, but ontop of it is the normal "grey" bar of the slider: http://imgur.com/xcxuZXV
Were is my mistake? Firefox Version ist 27.0.1
THANKS
Mozilla has a separate property to style the shadow dom of the input (which is what -webkit-appearance:none; takes care of for webkit):
::-moz-range-track {background:transparent; border:0px;}
On a side note, you can also style the slide/grip/button/thumb:
/* These need to be separated, not combined with a comma */
::-webkit-slider-thumb { /* ... */}
::-moz-range-thumb { /* ... */}

Ajax Control Toolkit Slider Handler Image Positioning

like the title says, i am using ajax control toolkit SliderExtender . Everything works fine but not the styling of the control. I am using this code in aspx page
<asp:TextBox runat="server" ID="textBoxSlider"></asp:TextBox>
<asp:SliderExtender Orientation="Horizontal" ID="sliderExtenderControl" TargetControlID="textBoxSlider" HandleCssClass="handleClass" RailCssClass="railClass" EnableHandleAnimation="True" runat="server"></asp:SliderExtender>
and the CSS classes :
.handleClass {
width: 44px;
position: absolute;
height: 18px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
overflow: hidden;
background-color: #455f47;
background-image: -webkit-linear-gradient(bottom, #5e5e5e, #8f8f8f);
background-image: -moz-linear-gradient(bottom, #5e5e5e, #8f8f8f);
background-image: -o-linear-gradient(bottom, #5e5e5e, #8f8f8f);
background-image: -ms-linear-gradient(bottom, #5e5e5e, #8f8f8f);
background-image: linear-gradient(to top, #5e5e5e, #8f8f8f);
}
.railClass {
width: 450px;
height: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #61bb46;
position: relative;
}
and i have an image for slider handler with height : 18px and width 44px .
The control looks like this :
what i am trying to do but without success is to align the handle image slightly higher so that the rail will be in the middle of the handler. Also i want that the left side of the slider to be a some color and the right side some other color and this colors will change on slider dragging. i think this could be done with some javascript.
In the end i would like the slider to look something like this :
I'm not sure what the sliding js for the component looks like and if it changes the top position for the handle. If it does not change, you can add this to .handleClass
top:-5px;
If you want to make colors change, you must have another div over the handle with opacity:0, which changes it's transparency as the handle moves right. If you supply some the handle js, maybe I can add some code.

Categories