Develop Reference

Price range slider not working in mozzila browser but working in chrome & opera browser

I've created price range slider by using html, css & javascript. It is working perfectly in google chrome and opera browser but not working in mozzila firefox browser.
See below mention screenshot what I got when I tried to run this in mozzila firefox browser. I'm unable to identify the issue.
I'm unable to add image here but here is the image link : Screenshot of the issue
Please anyone can help me to resolve this issue?
// Custom price range slider created by Pawan Mall | www.pawanmall.net
let rangeSlider = ((containerSelector, minSelector, maxSelector, selectionSelector, inputCallback, changeCallback) => {
inputCallback = inputCallback || function () { };
changeCallback = changeCallback || function () { };
let timeout;
let sliderContainer = document.querySelector(containerSelector);
let sliderMinElement = document.querySelector(minSelector);
let sliderMaxElement = document.querySelector(maxSelector);
let sliderSelectionElement = document.querySelector(selectionSelector);
let values = { min: sliderMinElement.value, max: sliderMaxElement.value };
sliderMinElement.addEventListener('input', e => {
sliderTimeout(() => { valueChanged(e); });
});
sliderMaxElement.addEventListener('input', e => {
sliderTimeout(() => { valueChanged(e); });
});
sliderMinElement.addEventListener('change', () => { changeCallback(values); });
sliderMaxElement.addEventListener('change', () => { changeCallback(values); });
return {
setHandles: data => {
data = data || {};
if (data.min) {
sliderMinElement.value = data.min;
valueChanged({ target: sliderMinElement });
}
if (data.max) {
sliderMaxElement.value = data.max;
valueChanged({ target: sliderMaxElement });
}
}
};
function valueChanged(event) {
if (event.target === sliderMinElement && +sliderMinElement.value >= +sliderMaxElement.value) {
sliderMinElement.value = +sliderMaxElement.value - 5;
return event.preventDefault();
}
if (event.target === sliderMaxElement && +sliderMinElement.value >= +sliderMaxElement.value) {
sliderMaxElement.value = +sliderMinElement.value + 5;
return event.preventDefault();
}
values.min = sliderMinElement.value;
values.max = sliderMaxElement.value;
sliderSelectionElement.style.left = +sliderMinElement.value / +sliderMaxElement.getAttribute('max') * 100 + '%';
sliderSelectionElement.style.right = +sliderMaxElement.value / +sliderMaxElement.getAttribute('max') * -100 + 100 + '%';
inputCallback(values);
}
function sliderTimeout(callback) {
clearTimeout(timeout);
timeout = setTimeout(callback, 10);
}
})('.range-slider', '.range-slider-min', '.range-slider-max', '.range-slider-selection', values => {
// console.log('values changed!', values);
// document.querySelector('.display1').innerHTML = '₹ '+ values.min + ', ₹ ' + values.max;
document.querySelector('.minmaxprice').value = values.min + ',' + values.max;
document.querySelector('.minprice').innerHTML = '₹ ' + values.min;
document.querySelector('.maxprice').innerHTML = '₹ ' + values.max;
}, values => {
// console.log('change done!', values);
});
rangeSlider.setHandles({ min: 5000, max: 250000 });
// console.log('inited!');
// https://seiyria.com/bootstrap-slider/#example-13
// $("#BudgetRange").slider({ min: 5000, max: 250000, value: [25000, 55000], focus: true });
/* Custom price range slider created by Pawan Mall | www.pawanmall.net */
.range-slider {
margin: 0 0;
position: relative;
height: 20px;
}
.range-slider::before,
.range-slider-selection {
content: "";
position: absolute;
z-index: 2;
top: 50%;
margin-top: -2px;
height: 3px;
z-index: 2;
}
.range-slider-selection {
background: orange;
left: 0px;
right: 0px;
}
.range-slider::before {
background: #ccc;
left: 0px;
right: 0px;
}
.range-slider-min,
.range-slider-max {
pointer-events: none;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
outline: none;
-webkit-appearance: none;
}
.range-slider-min::-webkit-slider-thumb,
.range-slider-max::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
pointer-events: all;
position: relative;
z-index: 3;
outline: 0;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ddd;
background: #fff;
}
.range-slider-min:active::-webkit-slider-thumb,
.range-slider-max:active::-webkit-slider-thumb {
background: #f3f3f3;
}
.minmaxprice {
width: 200px;
text-align: center;
margin: 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3 p-3">
<div class="row mt-2">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<b class="minprice">₹ 5,000</b>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 text-right">
<b class="maxprice">₹ 2,50,000</b>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<div class="range-slider"><span class="range-slider-selection"></span>
<input class="range-slider-min" type="range" min="5000" max="250000"
step="1" value="5000" />
<input class="range-slider-max" type="range" min="5000" max="250000"
step="1" value="250000" />
<br />
<input type="hidden" class="minmaxprice" name="pricerange" value="" />
</div>
</div>
</div>
</div>

You've used Webkit specific prefix pseudo element styling for the range slider.
::-webkit-slider-thumb
but failed to take into account that Mozilla and Microsoft have their own prefixes:
::-moz-range-thumb
::-ms-thumb
At a minimum you must implement the Mozilla version, but should consider implementing both.
From the MDN site about this tech, follow this link for a correctly implemented cross-browser slider: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<input type="range" min="0" max="100" step="5" value="50"/>
Then modify the CSS to accommodate your needs.

Handle CSS change (color picked by user) on hover in jQuery

I've got a PHP/HTML application in which the user selects the background color they want. It is saved in an ini file and it's used when the page is reloaded.
Now, users would like to do the same thing with the "hovered" color of the many different user actions elements. I have already added the Hoverable class to effectively able to style all those actions elements.
Now, I need to change the .Hoverable:hover background-color, but the following doesn't seem to work: $(".Hoverable:hover").css("background-color, new_value);"
Is there an easy and effective way to dynamically change a property value in the CSS of a hovered class?
Here is a simplified snippet to illustrate my problem.
$("#textareaID").bind("input propertychange", function() {
//console.log($("#textareaID").val());
$("#body").attr("user_color", $("#textareaID").val());
// I Need to change the .Hoverable:hover background-color, but the following doesn't work
$(".Hoverable:hover").css("background-color", $("#textareaID").val());
});
// Line below makes the above triggers on load
$("#textareaID").trigger("input");
body {
font: 18px arial, sans-serif;
}
#textareaID,
.Tool,
.Link,
.Button {
display: block;
width: 100px;
height: 24px;
border: 2px solid rgba(0, 0, 0, .1);
transition: all 0.4s;
text-align: center;
background-color: transparent;
box-sizing: border-box;
}
#textareaID {
resize: none;
overflow: hidden;
}
.Tool {
border-left-color: red;
border-right-color: red;
}
.Link {
border-bottom-color: blue;
}
.Button {
border-bottom-color: green;
}
.Hoverable {
cursor: pointer;
}
.Hoverable:hover {
border-color: rgba(0, 0, 0, .7);
background-color: rgba(0, 0, 0, .1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body" user_color="#ddddff">
<!-- In my case, my color selection is not a textarea, I used it to make things simplier -->
Color selected: <textarea id="textareaID">#ddddff</textarea>
<br> User possible actions:
<div class="Tool Hoverable">DIV</div>
<br>
<a class="Link Hoverable">LINK</a>
<br>
<button class="Button Hoverable">BUTTON</button>
</body>

You can simplify by using CSS variable:
$("#textareaID").on("input change", function() {
$("#body").attr("user_color", $(this).val());
$(":root").attr("style","--color-hover:"+$(this).val())
});
// Line below makes the above triggers on load
$("#textareaID").trigger("input");
:root {
--color-hover:#ffffff;
}
body {
font: 18px arial, sans-serif;
}
#textareaID,
.Tool,
.Link,
.Button {
display: block;
width: 100px;
height: 24px;
border: 2px solid rgba(0, 0, 0, .1);
transition: all 0.4s;
text-align: center;
background-color: transparent;
box-sizing: border-box;
}
#textareaID {
resize: none;
overflow: hidden;
}
.Tool {
border-left-color: red;
border-right-color: red;
}
.Link {
border-bottom-color: blue;
}
.Button {
border-bottom-color: green;
}
.Hoverable {
cursor: pointer;
}
.Hoverable:hover {
border-color: rgba(0, 0, 0, .7);
background-color:var(--color-hover);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body" user_color="#ddddff">
<!-- In my case, my color selection is not a textarea, I used it to make things simplier -->
Color selected: <textarea id="textareaID">#ddddff</textarea>
<br> User possible actions:
<div class="Tool Hoverable">DIV</div>
<br>
<a class="Link Hoverable">LINK</a>
<br>
<button class="Button Hoverable">BUTTON</button>
</body>

Here we go with an easy solution combinning focusin, focusout and keyup events:
var val = ""
$("#textareaID").on("focusin focusout keyup", function() {
val = $(this).val()
});
$(".Hoverable").mouseover(function(){
$(this).css("background-color", val);
});
$(".Hoverable").mouseout(function(){
$(this).css("background-color", "white");
});
body {
font: 18px arial, sans-serif;
}
#textareaID,
.Tool,
.Link,
.Button {
display: block;
width: 100px;
height: 24px;
border: 2px solid rgba(0, 0, 0, .1);
transition: all 0.4s;
text-align: center;
background-color: transparent;
box-sizing: border-box;
}
#textareaID {
resize: none;
overflow: hidden;
}
.Tool {
border-left-color: red;
border-right-color: red;
}
.Link {
border-bottom-color: blue;
}
.Button {
border-bottom-color: green;
}
.Hoverable {
cursor: pointer;
}
.Hoverable:hover {
border-color: rgba(0, 0, 0, .7);
background-color: rgba(0, 0, 0, .1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body" user_color="#ddddff">
<!-- In my case, my color selection is not a textarea, I used it to make things simplier -->
Color selected (Write any color and test it): <textarea id="textareaID">red</textarea>
<br /> User possible actions:
<div class="Tool Hoverable">DIV</div>
<br />
<a class="Link Hoverable">LINK</a>
<br />
<button class="Button Hoverable">BUTTON</button>
</body>

Expanding Search Off Click Close JQuery

I made an expanding JQuery Search Box yesterday, which works like a charm! But, I am having trouble creating a script that makes it so when the user clicks off the search box, it closes.
This is my JQuery:
function expandSearch(){
$('#search-input').toggleClass('search-input-open');
}
This is my HTML:
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span onclick="expandSearch()" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>
And my CSS:
.ngen-search{
padding:0px 0px 0px;
}
.form-search-input{
width:0px;
height:55px;
border: 0;
outline: 0;
font-size:21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open{
width:410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit{
display:inline-block;
width:55px;
height:43px;
border: 0;
outline: 0;
background-color:#151515;
font-size:21px;
color: white;
cursor: pointer;
text-align:center;
}
All help is appreciated! Thanks!
Also, please note that I am quite new to JQuery and rarely use it.

You can write a click handler which listens to the click on anywhere in the page and then remove the class like
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
})
.ngen-search {
padding: 0px 0px 0px;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: white;
cursor: pointer;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation-search ngen-search">
<form class="ngen-search-form form-search" action="search" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
<span id="search-trigger" class="form-search-submit" value="🔎">🔎</span>
</form>
</div>

How do I make smooth movement of div while moving it with mouse pointer?

<style>
.moveAble {
position: absolute;
display:none;
}
a:hover + div.moveAble {
display: block;
}
.moveAble .qtip {
background-color: #FFF;
background-color: rgba(255,255,255,.95);
border-color: #ccc;
padding: 10px;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: #f1d031;
background-color: #ffffa3;
color: #555;
}
.qtip, .qtip {
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
}
#nytmm .qtip-content {
border-color: #999;
color: #000;
padding: 4px 7px;
text-align: center;
}
.qtip-content {
position: relative;
padding: 5px 9px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
}
.moveAble .qtip-content h5 {
font: 300 20px/22px "nyt-cheltenham",Georgia,"Times New Roman",serif;
color: #000;
margin: 0;
}
.moveAble .qtip-content h6 {
font: 300 13px/16px 'nyt-franklin',Arial,Helvetica,sans-serif;
margin: 0;
}
</style>
<img src="http://s.jeff.io/img/gifts.png" />
<div class="moveAble">
<div id="qtip-0" class="qtip qtip-default qtip-pos-tr" style="z-index: 15001;">
<div class="qtip-content" id="qtip-0-content">
<h5>Dining Gifts »</h5>
<h6>Pug Muddlers</h6>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$('.moveAble').css({'top': e.pageY,'left': e.pageX-(e.pageX/2)});
});
});
</script>
The code above is working but when I move mouse pointer over the image in that div, it is flickering too much. I don't know why it is happening. What should be the change in the code that make it work properly?
DEMO Here

This is how you should have done it. Demo :http://jsfiddle.net/wUAGP/468/
Note adding 'left' : e.pageX+20 makes it even more smoother. Play around.
So, check out a cool .gif I made for you all. Interactive isn't it?
This is because of the gap between the .moveAble and the cursor, so they don't clash.
$(document).ready(function() {
$(document).hover(
//Mouse-over
function(e) {
$(this).mousemove(function(e) {
$('.moveAble').css({
'position' : 'absolute',
'top' : e.pageY,
'left' : e.pageX+20
}).show();
});
},
//Mouse-out
function() {
$('.moveAble').fadeOut(1300);
}
);
}, 'a img' );

All you need to do is change 'left': e.pageX - (e.pageX/2) to just a static number like 10 or 5.
Pretty Demo :)
Javascript:
$(document).ready(function () {
var $moveable = $('.moveAble');
$(document).on({
mouseenter: function () {
$moveable.show();
$(this).on('mousemove', function (evt) {
var e = evt || window.event;
$moveable.css({
top: e.pageY,
left: e.pageX + 5
});
});
},
mouseleave: function () {
$moveable.hide();
}
}, 'a img');
});
CSS (cleaned up and optimized for you):
.qtip {
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
background-color: #FFF;
background-color: rgba(255, 255, 255, .95);
border-color: #ccc;
padding: 10px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: #f1d031;
background-color: #ffffa3;
color: #555;
}
.qtip-content {
border-color: #999;
color: #000;
position: relative;
padding: 5px 9px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
}
.qtip-content h5 {
font: 300 20px/22px"nyt-cheltenham", Georgia, "Times New Roman", serif;
color: #000;
margin: 0;
}
.qtip-content h6 {
font: 300 13px/16px'nyt-franklin', Arial, Helvetica, sans-serif;
margin: 0;
}
HTML (added inline CSS for hiding and position):
<img src="http://s.jeff.io/img/gifts.png" />
<div class="moveAble" style="display: none;position: absolute;">
<div id="qtip-0" class="qtip qtip-default qtip-pos-tr" style="z-index: 15001;">
<div class="qtip-content" id="qtip-0-content">
<h5>Dining Gifts »</h5>
<h6>Pug Muddlers</h6>
</div>
</div>
</div>
PS - use updated jQuery to avoid possible deprecation/removed components in the future.

Please add some margin between mouse pointer and moveable div, because when mouse inter within moveable div, a:hover not works and moveable div display become "none".
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$moveable.css({'top': e.pageY + 5,'left': e.pageX + 5});
});
});

How to change the color of the checkbox (tickbox) from white to black?

I want to change my checkbox color white to black and color of my tick black to white.Wnat to know is it possible ?
I tried background color and color property it is not working.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src=" http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:700normal"/>
<title>Untitled Document</title>
<script>
function statecheck(layer) {
var myLayer = document.getElementById(layer);
if(myLayer.checked = true){
myLayer.style.color = "#bff0a1";
} else {
myLayer.style.backgroundColor = "#eee";
};
}
</script>
label {
margin:0px 2px 4px 2px;
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}
</head>
<body>
<form action="" method="get">
<label title="Alabama" id="Alabama"><input type="checkbox" value="checkbox" onchange="statecheck('Alabama')" />AL</label>
<label title="Alaska" id="Alaska"><input type="checkbox" value="checkbox" onchange="statecheck('Alaska')" />AK</label>
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck('AmericanSamoa')" />AS</label>
</form>
</body>
</html>

This is what i use for "styling" checkboxes : http://jsfiddle.net/D8daE/1/
HTML:
<input type="checkbox" id="check1" class="checkbox"><label for="check1"> Example</label>
Css:
input[type="checkbox"]{
margin-left: 10px;
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: 17px;
position: absolute;
left: 0;
bottom: 1px;
background-color: black;
border-radius: 3px;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 40px;
margin-right: 15px;
font-size: 15px;
}
.checkbox label {
margin-bottom: 10px;
}
.checkbox label:before {
border-radius: 3px;
}
input[type="checkbox"]:checked + label:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: white;
text-align: center;
line-height: 15px;
}
It doesn't style the checkbox itself instead it modifies the label of the checkbox.
In order to change the color of the box set the label:before background to what color you want and in order to modify the tick set the color of the "input[type="checkbox"]:checked + label:before" to whatever color you need.
Ps. It is pure css.