We Keep Coding

Show buttons on a div element onhovering as an overlay

i am having a div element which displays a chart.my aim is to show a blurred overlay on hovering the chart and show a set of butttons.
my div
<div className='col-lg-3 card-container3'>
<div className="card-content2">
<BarCharts chartLabel='daily' handleZoom={handleZoom} data={data} options={data.options?data.options:options_flights}/>
</div>
</div>
the related css
.card-container3 {
border-radius: 10px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
#include myTheme.theme-aware('border-color', 'cardBorderColor');
#include myTheme.theme-aware('background', 'cardContentColor-bg');
width: calc((100% - 5%) / 3);
min-height: 230px;
margin: 0 .5rem 1.5rem 0;
#extend .white;
padding: 0px 25px 2px 25px;
display: flex;
justify-content: center;
}
.card-content2 {
display: grid;
justify-content: flex-start;
align-content: center;
min-height: 200px;
.card-icon-block {
padding: 0 0 20px 0;
img {
/* height: 47px;width: 47px; */
height: calc(0.9rem + 2vw);
width: calc(0.9rem + 2vw);
}
}
i have tried
.card-content2:hover{
background-color:'#6f42c1';
border: 1px solid #ddd;
}
i was able to get the hover effects by applying this any suggestions in adding buttons on hover in the element?
my UI should be looking like this in a before after perspective

In the browser inspector, try to find a selector for these buttons, and use this selector to show the buttons on hover.
For example, if the buttons have a class called button-class.
.card-content2:hover {
background-color:'#6f42c1';
border: 1px solid #ddd;
.button-class {
display: inline; // if `display: none`
visibility: visible; // if `visibility: hidden`
opacity: 1; // if `opacity: 0`
}
}

No same value picked for multiple input range slider

I would like to control all slider value in a function where no same number is picked twice for the slider value and if it's picking the same number, the slider should show an error and only if all slider contains a different value, it'll proceed to show the next button. But I don't know what value should I refer to check if the value is already used. I tried looping the array but it just doesn't make that much sense and not work at all
import React from 'react'
import subjectCategories from './categories';
export default function InterestScore() {
const[range,setRange]=React.useState(
{cyberSecurity:"1",
projectManager:"1",
developer:"1",
productManager:"1",
devOps:"1",
marketer:"1",
designer:"1",
writer:"1"}
);
function handleChange(e) {
setRange(prevRange=>{
return (
{...prevRange, [e.target.name]:e.target.value}
)
})
for(let i=0;i<8;i++) {
if(range[e.target.name]===e.target.value) {
console.log("cannot pick same number twice");
}
}
}
for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
e.style.setProperty('--value', e.value);
e.style.setProperty('--min', e.min == '' ? '1' : e.min);
e.style.setProperty('--max', e.max == '' ? '10' : e.max);
e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}
return (
<div className='interest_score'>
<div className='q_card'>
<p>Score your level of interest in these job titles:</p>
<div className='range_container'>
{subjectCategories && subjectCategories.map((category) => {
return (
<div className='category_group' key={category.id}>
<div className='labels'>
<label className='range_label'>{category.subject}</label>
<span>{range[category.name]}/10</span>
</div>
<input type='range' min='1' max='10' name={category.name}
className='styled-slider slider-progress'
onChange={(e)=>handleChange(e)} value={range[category.name]}/>
</div>
);
})}
</div>
<p>* You cannot pick a number twice</p>
<button className='next'>Next</button>
</div>
</div>
)
}
const subjectCategories = [
{id:1,subject:"Cyber Security",name:"cyberSecurity"},
{id:2,subject:"Project Manager",name:"projectManager"},
{id:3,subject:"Developer",name:"developer"},
{id:4,subject:"Product Manager",name:"productManager"},
{id:5,subject:"DevOps",name:"devOps"},
{id:6,subject:"Marketer",name:"marketer"},
{id:7,subject:"Designer",name:"designer"},
{id:8,subject:"Writer",name:"writer"}
]
export default subjectCategories;
.interest_score {
margin:5rem 1rem 0 7rem;
}
.interest_score p {
text-align:left;
padding:1em 3em;
}
.range_container {
margin-top:0.5em;
padding:0.5em 2em;
color:#ACB7EB;
font-size:14px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
}
.category_group {
display:flex;
flex-direction:column;
align-items:flex-start;
flex:1 0 45%;
padding:1.5em 1em;
}
.range_container label {
width:100%;
text-align:left;
}
.labels {
display:flex;
justify-content:space-between;
width:100%;
}
.labels span {
color:black;
}
.q_card p:nth-of-type(2){
color:#ACB7EB;
}
/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
height: 1.8em;
width:100%;
-webkit-appearance: none;
}
/*progress support*/
input[type=range].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 1.4em + var(--ratio) * (100% - 1.4em));
}
input[type=range].styled-slider:focus {
outline: none;
}
/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - max(1.4em * 0.5,4px));
}
input[type=range].styled-slider::-webkit-slider-runnable-track {
height: 10px;
border: 1px solid #b2b2b2;
border-radius: 0.5em;
background: #EFEFEF;
box-shadow: none;
}
input[type=range].styled-slider::-webkit-slider-thumb:hover {
background: rgba(241, 243, 253, 1);
}
input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-webkit-slider-thumb:active {
background: rgba(241, 243, 253, 1);
}
input[type=range].styled-slider:active::-webkit-slider-runnable-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #EFEFEF;
}
input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #E5E5E5;
}
input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #F5F5F5;
}
/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
width: max(calc(1.4em - 4px - 4px),0px);
height: max(calc(1.4em - 4px - 4px),0px);
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}
input[type=range].styled-slider::-moz-range-track {
height: max(calc(1em - 1px - 1px),0px);
border: 1px solid #b2b2b2;
border-radius: 0.5em;
background: #EFEFEF;
box-shadow: none;
}
input[type=range].styled-slider::-moz-range-thumb:hover {
background: #FFFFFF;
}
input[type=range].styled-slider:hover::-moz-range-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-moz-range-thumb:active {
background: #FFFFFF;
}
input[type=range].styled-slider:active::-moz-range-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #EFEFEF;
}
input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #E5E5E5;
}
input[type=range].styled-slider.slider-progress:active::-moz-range-track {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%) 0/var(--sx) 100% no-repeat, #F5F5F5;
}
/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-thumb {
width: 1.4em;
height: 1.4em;
border-radius: 50%;
background: #FFFFFF;
border: 4px solid rgba(204, 65, 116, 0.6);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
margin-top: 0;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-track {
height: 1em;
border-radius: 0.5em;
background: #EFEFEF;
border: 1px solid #b2b2b2;
box-shadow: none;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-thumb:hover {
background: #FFFFFF;
}
input[type=range].styled-slider:hover::-ms-track {
background: #E5E5E5;
border-color: #9a9a9a;
}
input[type=range].styled-slider::-ms-thumb:active {
background: #FFFFFF;
}
input[type=range].styled-slider:active::-ms-track {
background: #F5F5F5;
border-color: #c1c1c1;
}
input[type=range].styled-slider.slider-progress::-ms-fill-lower {
height: max(calc(1em - 1px - 1px),0px);
border-radius: 0.5em 0 0 0.5em;
margin: -1px 0 -1px -1px;
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border: 1px solid #b2b2b2;
border-right-width: 0;
}
input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border-color: #9a9a9a;
}
input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
background: linear-gradient(90deg, #800165 0%, #D3014E 100%);
border-color: #c1c1c1;
}

You can check if there are duplicate range values on different sliders like this:
const currentValues = Object.values(range);
const uniqueRangeValues = [...new Set(currentValues)];
const hasError = currentValues.length !== uniqueRangeValues.length;
And you get the hasError variable and use it in jsx like this:
{hasError ? (
<p>* You cannot pick a number twice</p>
) : (
<button className="next">Next</button>
)}
You can take a look at this sandbox for a live working example of this solution.

Trying to make an HP bar for a game using HTML/JavaScript

I'm trying to make a health bar for a game where I have 2 buttons linked to the bar, one adds damage and the other adds health. I have it all designed the way I want it but am having trouble with the JavaScript part. The buttons are linked but when I click to add damage or health it only adjusts the amount of HP by one in either direction but no more than that. I also can't figure out how to make the width of the bar move with the number associated with the amount of health. I think I'm close but just need a little help. I'll add the CSS code too so there is some more context.
function add() {
let addHealth = document.getElementById('health')
let width = 100;
addHealth.width += 1;
if (addHealth) {
addHealth.style.width = width + '%';
addHealth.innerHTML = width * 1 + 'hp';
}
}
function remove() {
let damage = document.getElementById('health')
let width = 100;
damage.width -= 1;
if (damage) {
damage.style.width = width + '%';
damage.innerHTML = width - 1 + 'hp';
}
}
.hp {
text-align: center;
padding-bottom: 50px;
}
.gage {
display: inline-block;
width: 500px;
padding-bottom: 30px;
}
.bar {
height: 60px;
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.bar>span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: linear-gradient( center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.lvl {
background-color: #078a25;
background-image: linear-gradient(to bottom, #078a25, #f36d0a);
}
#health {
font-size: 20px;
color: white;
font-weight: bold;
text-align: right;
}
.btn-3d {
position: relative;
display: inline-block;
font-size: 22px;
padding: 20px 60px;
color: white;
margin: 20px 10px 10px;
border-radius: 6px;
text-align: center;
transition: top .01s linear;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
cursor: pointer;
}
.btn-3d.green:hover {
background-color: #80C49D;
}
.btn-3d:active {
top: 9px;
}
.btn-3d.green {
background-color: #82c8a0;
box-shadow: 0 0 0 1px #82c8a0 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 rgba(126, 194, 155, .7), 0 8px 0 1px rgba(0, 0, 0, .4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-3d.green:active {
box-shadow: 0 0 0 1px #82c8a0 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.btn-3d.red:hover {
background-color: #e74c3c;
}
.btn-3d.red {
background-color: #e74c3c;
box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #C24032, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-3d.red:active {
box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
<div class="hp">
<div class="gage">
<div class="bar">
<span id="health" class="lvl" style="width: 100%">100hp</span>
</div>
</div>
<div class="click">
<span class="btn-3d green" onclick="add()">Health</span>
<span class="btn-3d red" onclick="remove()">Damage</span>
</div>
</div>
Also, if anyone has any ideas to improve the design I'm all ears!

In your example you merely change the output but never the actual health width itself. Here is a quick analysis
function add() {
//REM: You fetch the element correctly;
let addHealth = document.getElementById('health')
//REM: You reset the heath to 100 for some reason?
let width = 100;
//REM: You change a width property of the element?
//REM: Here you should reduce the value of width
addHealth.width += 1;
if (addHealth) {
//REM: You set the width of the element according to the health, which seems correct
addHealth.style.width = width + '%';
//REM: You set the displayed value to 100, since width always gets set to 100 inside the function
addHealth.innerHTML = width * 1 + 'hp';
}
}
The most simple way is to store the health in a seperate variable and build on that.
var _Health = 100; //REM: Default HP
function add() {
let addHealth = document.getElementById('health')
_Health += 1;
if (addHealth) {
addHealth.style.width = _Health + '%';
addHealth.innerHTML = _Health + 'hp';
}
}
function remove() {
let damage = document.getElementById('health')
_Health -= 1;
if(damage) {
damage.style.width = _Health + '%';
damage.innerHTML = _Health + 'hp';
}
}
.hp {
text-align: center;
padding-bottom: 50px;
}
.gage {
display: inline-block;
width: 500px;
padding-bottom: 30px;
}
.bar {
height: 60px;
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.bar > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.lvl {
background-color: #078a25;
background-image: linear-gradient(to bottom, #078a25, #f36d0a);
}
#health {
font-size: 20px;
color: white;
font-weight: bold;
text-align: right;
}
.btn-3d {
position: relative;
display: inline-block;
font-size: 22px;
padding: 20px 60px;
color: white;
margin: 20px 10px 10px;
border-radius: 6px;
text-align: center;
transition: top .01s linear;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
cursor: pointer;
}
.btn-3d.green:hover {background-color: #80C49D;}
.btn-3d:active {
top: 9px;
}
.btn-3d.green {
background-color: #82c8a0;
box-shadow: 0 0 0 1px #82c8a0 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 rgba(126, 194, 155, .7),
0 8px 0 1px rgba(0,0,0,.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
box-shadow: 0 0 0 1px #82c8a0 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
.btn-3d.red:hover {background-color: #e74c3c;}
.btn-3d.red {
background-color: #e74c3c;
box-shadow: 0 0 0 1px #c63702 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 #C24032,
0 8px 0 1px rgba(0,0,0,0.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
box-shadow: 0 0 0 1px #c63702 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
<div class="hp">
<div class="gage">
<div class="bar">
<span id="health" class="lvl" style="width: 100%">100hp</span>
</div>
</div>
<div class="click">
<span class="btn-3d green" onclick="add()">Health</span>
<span class="btn-3d red" onclick="remove()">Damage</span>
</div>
</div>

Change the JS to:
let width=100;
function add() {
let addHealth = document.getElementById('health')
width +=1;
if (addHealth) {
addHealth.style.width = width + '%';
addHealth.innerHTML = width * 1 + 'hp';
}
}
function remove() {
let damage = document.getElementById('health')
width-=1;
if(damage) {
damage.style.width = width + '%';
damage.innerHTML = width - 1 + 'hp';
}
}
You had to make the variable width a global variable. And actually add and subtract from that variable.

You can try this
let width = 100;
function add() {
let addHealth = document.getElementById('health')
width =width+ 1
width=width>100?width=100:width
if(addHealth){
addHealth.style.width = width + '%';
addHealth.innerHTML = width + 'hp';
}
}
function remove() {
let damage = document.getElementById('health')
width =width- 1
width=width<0?width=0:width
if(damage) {
damage.style.width = width + '%';
damage.innerHTML = width + 'hp';
}
}

it's better to use the object to control the limitation.
const healthObject = {
_currentHelth: 100,
getHealth: function () {
return this._currentHelth
},
increase: function () {
if (this._currentHelth < 100) {
this._currentHelth++
}
},
decrease: function () {
if (this._currentHelth > 0) {
this._currentHelth--
}
},
}
function add() {
let addHealth = document.getElementById('health')
healthObject.increase()
if (addHealth) {
addHealth.style.width = healthObject.getHealth() + '%'
addHealth.innerHTML = healthObject.getHealth() + 'hp'
}
}
function remove() {
let addHealth = document.getElementById('health')
healthObject.decrease()
if (addHealth) {
addHealth.style.width = healthObject.getHealth() + '%'
addHealth.innerHTML = healthObject.getHealth() + 'hp'
}
}

jQuery date range selector not working in Firefox and Edge

Have a look at my code:
$(function() {
$("#slider-range").slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2020.03.31').getTime() / 1000,
step: 86400,
values: [new Date('2012.07.12').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
slide: function(event, ui) {
$("#amount").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
}
});
$("#amount").val((new Date($("#slider-range").slider("values", 0) * 1000).toDateString()) +
" - " + (new Date($("#slider-range").slider("values", 1) * 1000)).toDateString());
});
$(function() {
$("#slider-range2").slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2020.03.31').getTime() / 1000,
step: 86400,
values: [new Date('2012.07.12').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
slide: function(event, ui) {
$("#amount2").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
}
});
$("#amount2").val((new Date($("#slider-range2").slider("values", 0) * 1000).toDateString()) +
" - " + (new Date($("#slider-range2").slider("values", 1) * 1000)).toDateString());
});
body {
font-family: sans-serif;
background: #f9f9f9;
}
body *,
body *:before,
body *:after {
box-sizing: border-box;
}
.date-range-col {
width: 100%;
border: 1px solid #e2e2e2;
background: #fff;
padding: 10px;
}
.date-range-col .date-range-item {
margin-bottom: 25px;
}
.date-range-col .date-range-display {
display: flex;
font-size: 13px;
margin-bottom: 10px;
}
.date-range-col .date-range-display label {
font-weight: normal;
width: 40%;
align-items: center;
display: flex;
}
.date-range-col .date-range-display input {
width: auto;
text-align: center;
color: #000;
border: 1px solid #eee;
margin-left: auto;
font-weight: normal;
padding: 6px 3px;
border-radius: 4px;
font-size: 12px;
}
.date-range-col .ui-widget-content {
background: #d6d8e7;
border-radius: 10px;
height: 9px;
border: 0;
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.date-range-col .ui-widget-content .ui-state-default {
background: #57669f;
border-radius: 100%;
border: 3px solid #d5d8e7;
cursor: pointer;
outline: 0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
}
.date-range-col .ui-widget-content .ui-state-default:hover {
background: #6f81c7;
}
.date-range-col .ui-slider-horizontal .ui-slider-handle {
top: -0.36em;
}
.date-range-col .ui-slider .ui-slider-handle {
width: 22px;
height: 22px;
}
.date-range-col .ui-widget-header {
background: #8b959f;
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="date-range-col">
<div class="date-range-item">
<div class="date-range-display">
<label for="amount">Production Date:</label>
<input type="text" id="amount" size="28" readonly/>
</div>
<div id="slider-range"></div>
</div>
<div class="date-range-item">
<div class="date-range-display">
<label for="amount2">Production Date:</label>
<input type="text" id="amount2" size="28" readonly/>
</div>
<div id="slider-range2"></div>
</div>
</div>
It is not working in Mozilla Firefox.
Is there any solution to solve this problem?

The date format you specified is invalidated in firefox.
Please use forward slash format for the date. like:
new Date('2010/01/01')

JavaScript error: Uncaught SyntaxError: Invalid or unexpected token on line 1

Encoded code: http://js.do/code/hash717
Decoded code:
<script language="JavaScript">m='<style type="text/css">
#popup{
padding-top:5%;
margin:0 auto 0;
}
#popup_container{
width:485px;
height:auto;
margin:0 auto 0;
padding:10px;
background-color:#4e4e4e;
opacity:0.90;
}
#popup_inner{
width:inherit;
height:inherit;
background-color:#fff;
}
#popup_inner #header{
background-color: rgb(109, 132, 180);
color: rgb(255, 255, 255);
font-size: 15px;
font-weight: 700;
padding: 5px;
text-align: left;
}
#popup_inner #popup_content{
width:inherit;
position:relative;
padding-bottom:5px;
}
#container{
width:inherit;height:auto;margin:0 auto 0;
}
#container #content_wrapper{
box-shadow: 1px 1px 25px 2px rgb(11, 56, 97);
border-top: medium none;
background: none repeat scroll 0% 0% white;
font-size: 15px;
margin: 25px auto;
padding: 25px;
}
#content_wrapper #content{
background-color: #faeaf5;
border: 2px solid rgb(204, 204, 204);
margin:0 auto 0;
height:auto;
padding-top:5px;
text-align:center;
}
.uibutton {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.3em 0.6em 0.375em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 0;
border: 0;
}
/* ............................................................................................................. Icons */
.uibutton.icon:before {
content: "";
position: relative;
top: 1px;
float:left;
width: 10px;
height: 12px;
margin: 0 0.5em 0 0;
background: url(fb-icons.html) 99px 99px no-repeat;
}
.uibutton.edit:before { background-position: 0 0; }
.uibutton.add:before { background-position: -10px 0; }
.uibutton.secure:before { background-position: -20px 0; }
.uibutton.prev:before { background-position: -30px 0; }
.uibutton.next:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }
/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
/* ............................................................................................................. Large */
.uibutton.large {
font-size: 2em;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* popup */
.clear {
clear: both;
font-size: 1px;
height: 1px;
}
.dialog_parent {
position: absolute;top: 150px;z-index: 1000;
}
.corner1 {
background-position: left top;
}
.corner2 {
background-position: right top;
}
.corner3 {
background-position: left bottom;
}
.corner4 {
background-position: right bottom;
}
.corner {
background-image: url("http://2.bp.blogspot.com/-9nVh-xgamvw/Ud1_84PW_XI/AAAAAAAAADU/J7HRRbNvaOA/s1600/Vo3hNjP.gif");
height: 10px;
opacity: 0.7;
width: 10px;
}
.shadow_border1 {
height: 10px;
width: 600px;
}
.shadow_border {
background-color: #4F4F4F;
opacity: 0.7;
}
.dialog_inner {
background-color: #FFFFFF;
border: 1px solid #665665;
}
.dialog_parent .title_bar {
background-color: #6D84B4;
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
padding: 5px;
text-align: left;
}
.dialog_inner .main_div {
border: 1px solid #999999;
padding: 10px;
text-align: center;
}
.dialog_inner .buttons_div {
background-color: #F2F2F2;
border-top: 1px solid #C6C6C6;
padding: 6px 18px;
}
#tbl_div{
border: 0pt none; display: block; height: 100%; left: 0pt; padding: 0px; position: fixed; top: 0pt; width: 100%; z-index: 1001;
}
#tbl_div_bg{
background-color: black; border: 0pt none; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); height: 100%; left: 0pt; opacity: 0.3; padding: 0px; position: fixed; top: 0pt; width: 100%; z-index: 1001;
}
.FBConnectButton_Simple,
.FBConnectButton_RTL_Simple{background-image:url("http://1.bp.blogspot.com/-vIio-9kUZ1c/Ud2Af00qfhI/AAAAAAAAADc/0dTA-2TdJX8/s1600/connect_favicon0992.png");background-repeat:no-repeat;outline:none;text-decoration:none}
.FBConnectButton_RTL_Simple{background-position:right 0}
.FBConnectButton_Simple .FBConnectButton_Text_Simple{margin:0 0 0 20px;padding-bottom:1px}
.FBConnectButton_RTL_Simple .FBConnectButton_Text_Simple{margin:0 10px 0 0}
a.FBConnectButton_Simple:hover .FBConnectButton_Text_Simple,
a.FBConnectButton_RTL_Simple:hover .FBConnectButton_Text_Simple,
.FBConnectButton_Simple:hover .FBConnectButton_Text_Simple,
.FBConnectButton_RTL_Simple:hover .FBConnectButton_Text_Simple{text-decoration:underline}
.FBConnectButton,
.FBConnectButton_RTL{background:#29447e url("http://3.bp.blogspot.com/-gp5_OiXMIIs/Ud2BI-O6ZvI/AAAAAAAAADk/nu9PdWY1t1c/s1600/connect_spriteb2be.png");background-repeat:no-repeat;cursor:default;display:inline-block;padding:0 0 0 1px;text-decoration:none;outline:none}
.FBConnectButton .FBConnectButton_Text,
.FBConnectButton_RTL .FBConnectButton_Text{background:#5f78ab url("http://3.bp.blogspot.com/-gp5_OiXMIIs/Ud2BI-O6ZvI/AAAAAAAAADk/nu9PdWY1t1c/s1600/connect_spriteb2be.png");border-top:solid 1px #879ac0;border-bottom:solid 1px #1a356e;color:#fff;display:block;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:bold;padding:2px 6px 4px;margin:1px 1px 0 0;text-shadow:none}
a.FBConnectButton,
a.FBConnectButton_RTL ,
.FBConnectButton,
.FBConnectButton_RTL{text-decoration:none}
a.FBConnectButton:active .FBConnectButton_Text,
a.FBConnectButton_RTL:active .FBConnectButton_Text ,
.FBConnectButton:active .FBConnectButton_Text,
.FBConnectButton_RTL:active .FBConnectButton_Text{border-bottom:solid 1px #29447e;border-top:solid 1px #45619d;background:#4f6aa3;text-shadow:none}
.FBConnectButton_BigPun,
.FBConnectButton_RTL_BigPun{background-position:left -60px;font-size:24px;line-height:30px}
.FBConnectButton_BigPun .FBConnectButton_Text{padding:3px 8px 3px 12px;margin-left:38px}
a.FBConnectButton_BigPun:active{background-position:left -99px}
.FBConnectButton_RTL_BigPun{background-position:right -268px}
.FBConnectButton_RTL_BigPun .FBConnectButton_Text{padding:3px 8px 3px 12px;margin-right:39px}
a.FBConnectButton_RTL_BigPun:active{background-position:right -307px}
.FBConnectButton_Large,
.FBConnectButton_RTL_Large{background-position:left -138px;font-size:13px;line-height:16px}
.FBConnectButton_Large .FBConnectButton_Text{margin-left:24px}
a.FBConnectButton_Large:active{background-position:left -163px}
.FBConnectButton_RTL_Large{background-position:right -346px}
.FBConnectButton_RTL_Large .FBConnectButton_Text{margin-right:25px}
a.FBConnectButton_RTL_Large:active{background-position:right -371px}
.FBConnectButton_Medium,
.FBConnectButton_RTL_Medium{background-position:left -188px;font-size:11px;line-height:14px}
.FBConnectButton_Text,
.FBConnectButton_Medium .FBConnectButton_Text{padding:2px 6px 3px 6px;margin-left:21px}
a.FBConnectButton_Medium:active{background-position:left -210px}
.FBConnectButton_RTL_Medium{background-position:right -396px}
.FBConnectButton_RTL_Text,
.FBConnectButton_RTL_Medium .FBConnectButton_Text{padding:2px 6px 3px 6px;margin-right:22px}
a.FBConnectButton_RTL_Medium:active{background-position:right -418px}
.FBConnectButton_Small,
.FBConnectButton_RTL_Small{background-position:left -232px;font-size:10px;line-height:10px}
.FBConnectButton_Small .FBConnectButton_Text{padding:2px 6px 3px;margin-left:17px}
a.FBConnectButton_Small:active ,
.FBConnectButton_Small:active{background-position:left -250px}
.FBConnectButton_RTL_Small{background-position:right -440px}
.FBConnectButton_RTL_Small .FBConnectButton_Text{padding:2px 6px;margin-right:18px}
a.FBConnectButton_RTL_Small:active{background-position:right -458px}
.FBConnectButton_Inactive{filter:alpha(opacity = 40);-khtml-opacity:.4;-moz-opacity:.4;opacity:.4}
.fb_share_count_wrapper{position:relative;float:left}
.fb_share_count{background:#b0b9ec none repeat scroll 0 0;color:#333;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;text-align:center}
.fb_share_count_inner{background:#e8ebf2;display:block}
.fb_share_count_right{margin-left:-1px;display:inline-block}
.fb_share_count_right .fb_share_count_inner{border-top:solid 1px #e8ebf2;border-bottom:solid 1px #b0b9ec;margin:1px 1px 0 1px;font-size:10px;line-height:10px;padding:2px 6px 3px;font-weight:bold}
.fb_share_count_top{display:block;letter-spacing:-1px;line-height:34px;margin-bottom:7px;font-size:22px;border:solid 1px #b0b9ec}
.fb_share_count_nub_top{border:none;display:block;position:absolute;left:7px;top:35px;margin:0;padding:0;width:6px;height:7px;background-repeat:no-repeat;background-image:url(../rsrc.php/zCXBS/hash/89zgzk50.html)}
.fb_share_count_nub_right{border:none;display:inline-block;padding:0;width:5px;height:10px;background-repeat:no-repeat;background-image:url(../rsrc.php/zAQB0/hash/1a8txe26.html);vertical-align:top;background-position:right 5px;z-index:10;left:2px;margin:0 2px 0 0;position:relative}
.fb_share_no_count{display:none}
.fb_share_size_Small .fb_share_count_right .fb_share_count_inner{font-size:10px}
.fb_share_size_Medium .fb_share_count_right .fb_share_count_inner{font-size:11px;padding:2px 6px 3px;letter-spacing:-1px;line-height:14px}
.fb_share_size_Large .fb_share_count_right .fb_share_count_inner{font-size:13px;line-height:16px;padding:2px 6px 4px;font-weight:normal;letter-spacing:-1px}
hr{
margin:20px;
border:none;
border-top:1px solid #ff6d00;
border-left:1px solid #ff6d00;
}
</style>
<div id="fb_popup" style="display: none;">
<div id="tbl_div">
<div id="tbl_div_bg">
</div>
</div>
<div style="position: fixed; right: 0; top: 38%; width: 100%; z-index: 10002;">
<center>
<div class="dialog_parent" style="position: inherit; visibility: visible; z-index: 1004;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="corner corner1"></td>
<td class="shadow_border shadow_border1"></td>
<td class="corner corner2"></td>
</tr>
<tr>
<td class="shadow_border"></td>
<td style="width: 500px;">
<div class="dialog_inner" id="_PopupDiv1">
<div class="title_bar">
</div>
<div style="padding: 10px;">
<div class="main_div">
<table>
<tr>
<center>
<script type="text/javascript">
//<![CDATA[
LSM_Slot({
adkey: '6ce',
ad_size: '300x250',
slot: 'slot70147'
});
//]]>
</script></center>
</tr>
</table>
<div align="center" style="margin: auto; width: 190px;">
<b><span class="FBConnectButton FBConnectButton_Medium" onclick="check = 'true';wopen2('http://www.facebook.com/sharer.php?u= ' window.location.href,'sharer',650,310,'no','no');" style="cursor: pointer;">
<span class="FBConnectButton_Text">PLEASE SHARE THIS!</span>
</span>
</b></div>
<b style="font-size: 11px;">CLICK "CLOSE" AFTER SHARING. </b>
</div>
</div>
<div class="buttons_div"></br>
<iframe src="http://onlinaz.com/banner-header.html" style="border:0px #FFFFFF none;" name="B1" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="40px" width="333px"></iframe>
<div style="float: right;">
<input class="uibutton" onclick="closePopup();" type="button" value="Close" />
</div>
<div class="clear">
</div>
</div>
</div>
</td>
<td class="shadow_border"></td>
</tr>
<tr>
<td class="corner corner3"></td>
<td class="shadow_border shadow_border1"></td>
<td class="corner corner4"></td>
</tr>
</tbody></table>
</div>
<!-- close _DialogDiv-->
</center>
</div>
</div>
<!-- close fb popup-->
<script type="text/javascript">
var check = 'false' ;
document.getElementById('fb_popup').style.display = 'block';
function closePopup() {
if ( check == 'true' ) {
//document.getElementById('ads_popup').style.display = 'block';
document.getElementById('fb_popup').style.display = 'none';
}
else {
alert('Please Support Us By Sharing This Content To Access The Site!');
}
}
function wopen2(url, name, w, h, scrolling, resizable)
{
// Fudge factors for window decoration space.
// In my tests these work well on all platforms & browsers.
w = 32;
h = 96;
wleft = (screen.width - w) / 2;
wtop = (screen.height - h) / 2;
// IE5 and other old browsers might allow a window that is
// partially offscreen or wider than the screen. Fix that.
// (Newer browsers fix this for us, but let's be thorough.)
if (wleft < 0) {
w = screen.width;
wleft = 0;
}
if (wtop < 0) {
h = screen.height;
wtop = 0;
}
var win = window.open(url,
name,
'width=' w ', height=' h ', '
'left=' wleft ', top=' wtop ', '
'location=no, menubar=no, '
'status=no, toolbar=no, scrollbars=' scrolling ', resizable=' resizable);
// Just in case width and height are ignored
win.resizeTo(w, h);
// Just in case left and top are ignored
win.moveTo(wleft, wtop);
win.focus();
}
function call_page(url)
{
var xhr_object ;
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
try { xhr_object = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr_object = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr_object = new XMLHttpRequest(); }
catch (e3) { return "Error!, sorry retry this later!" ; }
}
}
else
return "Error!, sorry retry this later!";
var tmp = "Error!, sorry retry this later!";
//IE
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
if(xhr_object.status == 200) {
tmp = xhr_object.responseText;
document.getElementById("message").innerHTML = tmp ;
}
else {
tmp = "Error!, sorry retry this later!" ;
}
} else {
document.getElementById("message").innerHTML = "wait for registering...";
}
};
xhr_object.open("GET", url, true); // false/true (synchrone/asynchrone)
xhr_object.send(null);
return tmp ;
}
</script><script>;d=unescape(m);document.write(d);</script>

It looks like you're trying to set the value of m to multiple lines of text, which you can't do in JavaScript. Instead, you'll need to do it like so:
m='<style type="text/css">' +
'#popup{' +
' padding-top: 5%' +
// and so on
You can do multi-line strings in JavaScript using template literals, but these don't have broad enough support yet for production use.