Develop Reference

How to change the color of Track for RANGE Input using Jquery/Javascript?

Here`s the HTML Input Range
<input id="golden_range" type="range">
I can change the Background Color of the Range Track to "#DDD" using this CSS
#golden_range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #DDD;
border: none;
border-radius: 3px;
}
#golden_range::-moz-range-track {
width: 300px;
height: 5px;
background: #DDD;
border: none;
border-radius: 3px;
}
but i'm not able to change the background color using Jquery/Javascript. Please help me with this. Here's the code i'm trying to.
$('#golden_range::-webkit-slider-runnable-track').css('background', '#000');
$('#golden_range::-moz-range-track').css('background', '#000');

According to the code in your question, I see a mistake in your syntax. In css the background color property is written as "background-color: color_hex_value". This is how your css code should look like:
#golden_range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background-color: #DDD;
border: none;
border-radius: 3px;
}
#golden_range::-moz-range-track {
width: 300px;
height: 5px;
background-color: #DDD;
border: none;
border-radius: 3px;
}
And this is the code for jquery:
$("#golden_range::-webkit-slider-runnable-track").css("background-color", "#000");
In case you are still having doubts, give a look at these two sources for css background-color properties and Jquery css() method.

You can do this now (2020) by making use of CSS variables.
CSS
#golden_range::-webkit-slider-runnable-track {
background: var(--track-background, #ddd);
}
#golden_range::-moz-range-track {
background: var(--track-background, #ddd);
}
Javascript
document.querySelector('#golden_range').style.setProperty('--track-background', '#f00');
(should change the track background to red)
I'm doing this in Player Chrome to style the media player progress bar, using a background gradient on the track to show progress.

Bad news. I have not found a proper way to do... but I found a dirty way;
Insert a style tag in the body of the page. Of course, the content of this tag is generated with javascript:
var estilo = $("<style>").attr("id", "some_id");
//for Chrome, e.g.
var mod= "::-webkit-slider-runnable-track";
var txt= "#id_range" + mod + " {\n";
txt+= " background-color: rgb(100,100,100)\n";
txt+= "}\n";
estilo.text(txt);
$("#some_id").remove();
$("div#other_id").append(estilo);
it's ugly, slow and bad, but it works.

Add below code into your files
CSS:
#golden_range.change::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #000;
border: none;
border-radius: 3px;
}
#golden_range.change::-moz-range-track {
width: 300px;
height: 5px;
background: #000;
border: none;
border-radius: 3px;
}
jQuery:
$(document).on('input', '#golden_range', function() {
var rangeValue = $(this).val();
var changeRange = 20;
if(currrentRange > changeRange){
$("#golden_range").addClass("change");
}
});
Note: Please check changeRange value and change as you want.

Style a a href as a button

I'm creating a large set of HTML components that works in every browser (where did the idea started anyway :-) )
Now, I want to have a button, and according to this post on StackOverflow, I should not use a button because that one has a 3D push effect on click. In order to remove that one, the advice was to use a a href and style that to the button I like.
So here's the HTML:
<a href="#" class="button">
<span>Yes</span>
</a>
And off course, here's the HTML:
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a:active.button {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
Nothing really commplicated
Now, this does all work in Google Chrome and Firefox as this JsFiddle demonstrates.
The button has 3 different states:
A normal 'default' button.
A style when you hover on it.
A style when you click on it.
Now, Internet Explorer does not apply a new style when you click on the button, it's the same style as the one on hovering. Unless you click the border (If you manage to click the border, than the correct style does apply).
Now, why do I have this behaviour and can it be solved as it is crucial to the development of my Control Suite.
I know it's possible to solve with jQuery by adding a removing a class when you click on it, but this seems a very ugly solution and if there's a 'CSS-Friendly' solution, I would like to use that one.

This may be because the CSS selector is backwards:
Change:
a:active.button {
to
a.button:active {
Chrome et al don't appear to give a care about what order these are in, but IE is, well, IE.
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<a href="#" class="button">
<span>Yes</span>
</a>
Edit
The issue appears to be that when you click on the link, you are actually clicking the span and, in IE, the click event is not bubbling. As far as IE is concerned, the anchor is not being :activeated.
You need to take the span out of the anchor:
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<a href="#" class="button">
Yes
</a>
Edit
If you need the span, then the only solution left is a javascript one.
This block of code adds a mousedown/mouseup event listener to all .button elements which toggles the active class on/off.
// vanilla JS
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
anchors[i].addEventListener("mousedown", function (event) {
this.classList.add('active');
}, false);
anchors[i].addEventListener("mouseup", function (event) {
this.classList.remove('active');
}, false);
}
// jQuery
jQuery(document).ready(function($) {
$('a.button').mousedown(
function(){
$(this).addClass('active');
}
)
.mouseup(
function(){
$(this).removeClass('active');
}
);
});
And we change the :active line of the css to:
a.button:active,
a.button.active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
Which listens to both the :active pseudo-class, as well as the .active class.
//pure JS solution
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
anchors[i].addEventListener("mousedown", function (event) {
this.classList.add('active');
}, false);
anchors[i].addEventListener("mouseup", function (event) {
this.classList.remove('active');
}, false);
}
//jQuery solution
/*
jQuery(document).ready(function($) {
$('a.button').mousedown(
function(){
$(this).addClass('active');
}
)
.mouseup(
function(){
$(this).removeClass('active');
}
);
});
*/
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active,
a.button.active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="button">
<span>Yes</span>
</a>

This seems to be a simple problem of priority... a.button:hover is more accurate than a:active.button so it has precedence. The reason why the browsers don't all behave exactly the same is simply because they handle ties differently.
Making sure that the different pseudo classes are always set at the same level of the selector rule will help counter this problem.
So, this means a:active.button should be switched to a.button:active or the others be switched...

You can remove push effect on button by adding a
button {
padding:0;
}

Convert checkbox to toggle button

I want to change checkbox to toggle button? There are no label tags in my input tags and I cant add them manually either, because I dont have access to core files. I can add jquery / script and or css to my files via CMS.
Here is the code i have for checkbox
<input type="Checkbox" name="savetheocean">
Is there any solution?

basically this is how you can turn it to a toggle button:
$('input[name="savetheocean"]').click(function(){
if($(this).is(':checked')){
//do something
}
else{
//undo something
}
});
UPDATE:
you can see a working Demo here: http://jsfiddle.net/b4C7G/

JSFiddle:
link
CSS:
a.toggler.on {
background: green;
cursor: pointer;
border: 2px solid black;
border-right-width: 15px;
padding: 0 5px;
border-radius: 5px;
}
a.toggler.off {
background: red;
border-right-width: 2px;
border-left-width: 15px;
}
HTML
jQuery
$(function () {
$('input[name="toggle"]').change(function () {
$("a.toggler").toggleClass("off", this.checked)
}).change();
})

Expandable Buttons

I've been trying to create expandable buttons exactly like the ones near the bottom of this site (http://mastermechanic.ca/services.php), but I've been having trouble figuring it out. I'm a beginner in JavaScript, so any help would be greatly appreciated.

HTML:
<button id="lol">Some long text</button>
CSS: #lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px}

try defining width for button...
see example JS Fiddle
#lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px; width: 50%;}

I have made the CSS you may need to have the exact button in the link below. I hope it helps. Cheer.
CSS:
.big {
background: #fb7303;
height: 100px;
width: 250px;
border: 5px solid #ffa500;
border-radius:10px;
color: white;
font-size: 20px;
}
HTML:
<button class="big">Schedule <br>Maintenance</button>
Fiddle link: http://jsfiddle.net/dHq74/3/

I didn't create a very detailed example, but this should set you on the right track. You can play around with it from here.
They use a combination of Jquery & Css, when the user clicks on the "Button" it adds the class "fullheight", and when the click it again, it adds a class "smallheight"
$( "#reveal-container" ).toggleClass("smallheight");
$( "#reveal-container" ).toggleClass("fullheight");
I DIDNT do this. Buy maybe you can still benefit from my example:
I just created a container DIV like they did, then use Jquery to slide it open and closed:
jQuery
$(".button").click(function () {
$button = $(this);
$content = $button.next();
$content.slideToggle(500, function () {
});
});
See FIDDLE for full example .
Hope this helps you. :)

jquery problem with addClass() & toggleClass() & default CSS value

As you can see in following code, background not changes, but border changes.
The problem is with default background value.
How to solve this problem?!
jquery:
$(document).ready(function() {
$('input').bind('focus blur', function() {
$(this).toggleClass('focus');
});
});
CSS:
input{background-color: blue;}
focus{background-color: red; border: 1px solid blue}
HTML:
<input>

The background defined on input is applied to the tag because of its priority. focus is a class, while input is a tag.
Try setting :
input{
background-color: blue;
}
.focus{
background-color: red; !important
border: 1px solid blue;
}

try write:
background-color: red !important;
instead:
background-color: red;
Also you can write this without jquery. Why you don't write following:
input{background-color: blue;}
input:focus{background-color: red; border: 1px solid blue}

The css is incorrect. dot is missing for focus.
input{background-color: blue;}
.focus{background-color: red !important; border: 1px solid blue;}