- Scan ID:
- 1f6f7f6e-21b2-4320-b586-a22ceaef93b0Finished
- Submitted URL:
- https://t4w8.page.link/463g1Redirected
- Report Finished:
Links · 0 found
The outgoing links identified from the page
JavaScript Variables · 26 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | string |
| documentPictureInPicture | string |
| onscrollend | string |
| SignaturePad | string |
| $ | string |
| jQuery | string |
| angular | string |
| @uirouter/angularjs | string |
| L | string |
| Stomp | string |
Console log messages · 2 found
Messages logged to the web console
| Type | Category | Log |
|---|---|---|
| error | network |
|
| error | network |
|
HTML
The raw HTML body of the page
<!DOCTYPE html><!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tracking</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600" rel="stylesheet">
<link href="css/leaflet.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-D7EX83KHF0&l=dataLayer&cx=c"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<!--<script src="scripts/angular-ui-router.min.js"></script>-->
<!--<script src="scripts/angular-ui-router.min.js"></script>-->
<script src="scripts/leaflet.js"></script>
<script src="scripts/angular-leaflet-directive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-sanitize.min.js"></script>
<script src="scripts/stomp.min.js"></script>
<script src="scripts/sockjs.min.js"></script>
<script src="app.js"></script>
<script src="smartTrack/smart_track_routes.js"></script>
<script src="smartTrack/controller/main_controller.js"></script>
<script src="smartTrack/controller/feedback_controller.js"></script>
<script src="smartTrack/controller/track_package_controller.js"></script>
<script src="smartTrack/controller/update_address_controller.js"></script>
<script src="smartTrack/services/smart_track_services.js"></script>
<script src="scripts/MovingMarker.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-119883012-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-119883012-1');
</script>
<style></style></head>
<body class="primary-bg ng-scope" ng-app="smartTrackingApp">
<!-- uiView: --><div ui-view="" style="height: 100%" class="ng-scope"><!-- ngIf: !complete --><div id="loader-bg" ng-if="!complete" class="ng-scope">
<div class="loaderCircle"></div>
</div><!-- end ngIf: !complete -->
<!-- Header Start -->
<header id="header" class="flex justify-center align-center ng-scope">
<div style="flex-basis: 10%;">
</div>
<div class="logo flex justify-center" style="flex-basis: 80%; height: 33px">
<img src="../images/BD-LOGO.jpeg" alt="">
</div>
<div style="display:flex; flex-basis: 10%;">
</div>
</header>
<!-- Header End -->
<style class="ng-scope">
body {
background: #f5f5f5;
}
.wrapper textarea:focus{
border: 1px solid #d4caca !important;
outline: 0 !important;
text-align: left !important;
margin: 0 !important;
}
</style>
<!-- Wrapper End -->
<section id="wrapper" class="wrapper pt15 overflow-y ng-scope" style="bottom:0px;">
<div class="card">
<div class="card-header">
<div class="check-circle mr10">
<img src="../images/check.svg" alt="">
</div>
<p>
Your shipment has been delivered
</p>
</div>
<div class="card-body p15">
<div class="flex mb15">
<div class="flex column" style="flex-basis: 50%">
<p class="fs10 text-light-gray">Tracking Number</p>
<p class="fs11 bold ng-binding">33876088164</p>
</div>
<div class="flex column" style="flex-basis: 50%">
<p class="fs10 text-light-gray ng-hide" ng-show="deliverDate">Delivery Date</p>
<p class="fs11 bold ng-binding ng-hide" ng-show="deliverDate"></p>
</div>
<div class="flex column" style="flex-basis: 50%;padding-left:5px">
<p class="fs10 text-light-gray">Received By</p>
<p class="fs11 bold ng-binding"></p>
</div>
</div>
</div>
</div>
<div class="card" ng-hide="isUpdated || difference>30">
<p class="pt15" style="text-align: center;">Note : Questions marked with <span class="text-danger">*</span> are mandatory</p>
<div class="card-header">
<p style="text-align: center;">
Based on your recent interaction with our Blue Dart Delivery staff when your shipment was delivered, please let us know how likely are you to recommend our logistics services to your friends & family <span class="text-danger">*</span>
</p>
</div>
<div class="card-body p15">
<div ng-show="isClose" style="margin-top: 50px;">
<div style="display:flex;justify-content: center;">
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=0 }" ng-click="ratingValue='0'" ng-disabled="true" disabled="disabled">
<img src="../images/feedback0.png" alt="">
<span class="feedback-rate-helping-text">Not at all </span>
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=1 }" ng-click="ratingValue='1'">
<img src="../images/feedback1.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=2 }" ng-click="ratingValue='2'">
<img src="../images/feedback2.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=3 }" ng-click="ratingValue='3'">
<img src="../images/feedback3.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=4 }" ng-click="ratingValue='4'">
<img src="../images/feedback4.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=5 }" ng-click="ratingValue='5'">
<img src="../images/feedback5.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=6 }" ng-click="ratingValue='6'">
<img src="../images/feedback6.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=7 }" ng-click="ratingValue='7'">
<img src="../images/feedback7.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=8 }" ng-click="ratingValue='8'">
<img src="../images/feedback8.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=9 }" ng-click="ratingValue='9'">
<img src="../images/feedback9.png" alt="">
</span>
<span class="check-nps ml-15" ng-class="{'shadowIcon': ratingValue!=null && ratingValue!=10 }" ng-click="ratingValue='10'">
<img src="../images/feedback10.png" alt="">
<span class="feedback-rate-helping-text">Definitely </span>
</span>
</div>
<!-- <div class="mt10" style="text-align: center;color: #007cca;">-->
<!-- <p ng-if="ratingValue==10">Good</p>-->
<!-- <p ng-if="ratingValue==7">Average</p>-->
<!-- <p ng-if="ratingValue==4">Bad</p>-->
<!-- </div>-->
<!-- ngIf: ratingValue=='0' || ratingValue=='1' || ratingValue=='2' || ratingValue=='3' || ratingValue=='4' || ratingValue=='5' || ratingValue=='6' || ratingValue=='7' || ratingValue=='8' || ratingValue=='9' || ratingValue=='10' -->
<div ng-hide="checkValidation() || checkPromoter()" class="mt30 mb10 desktopViewCenterAlign ng-hide">
<h3>Is the issue related to : <span class="text-danger">*</span></h3>
<p class="fadedText mt5">Select one option</p>
<span class="feedback-radio-button mr15">
<input type="radio" id="delivery_service" name="radioGroup" value="Delivery Service" ng-click="issueRelatedTo='deliveryService'">
<label for="delivery_service" style="margin-right: 7px;">Delivery Service</label>
</span>
<span class="feedback-radio-button">
<input type="radio" id="product_quality" name="radioGroup" value="Product Quality" ng-click="issueRelatedTo='productQuality'">
<label for="product_quality" style="margin-right: 7px;">Product Quality</label><br>
</span>
</div>
<div ng-hide="checkValidation() || checkPromoter()" class="mt30 desktopViewCenterAlign ng-hide">
<p class="fadedText" style="font-weight: 700;">Based on your current interaction with our courier staff how would
you rate on the below parameters :</p>
<div class="desktopViewAdditionalQuestion">
<div class="mt10" style="width: fit-content;">
<h3>Quality of Delivery</h3>
<p class="fadedText mt5">Select an option</p>
<div class="chart-scale text-center">
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='0'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==0 }">0</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='1'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==1 }">1</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='2'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==2 }">2</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='3'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==3 }">3</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='4'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==4 }">4</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='5'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==5 }">5</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='6'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==6 }">6</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='7'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==7 }">7</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='8'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==8 }">8</button>
<button class="btn mt5 ratingButton" ng-click="qualityOfDelivery='9'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==9 }">9</button>
<button class="btn mt5 ratingButton tenthButton" ng-click="qualityOfDelivery='10'" ng-class="{'selectedButton': qualityOfDelivery!=null && qualityOfDelivery==10 }">10</button>
</div>
<div style="display: flex; justify-content: space-between;" class="mt5">
<p>Not good at all</p>
<p style="color: #004f9f;">Just great</p>
</div>
</div>
</div>
<div class="desktopViewAdditionalQuestion">
<div class="mt10" style="width: fit-content;">
<h3>Speed of Delivery</h3>
<p class="fadedText mt5">Select an option</p>
<div class="chart-scale text-center">
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='0'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==0 }">0</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='1'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==1 }">1</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='2'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==2 }">2</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='3'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==3 }">3</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='4'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==4 }">4</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='5'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==5 }">5</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='6'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==6 }">6</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='7'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==7 }">7</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='8'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==8 }">8</button>
<button class="btn mt5 ratingButton" ng-click="speedOfDelivery='9'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==9 }">9</button>
<button class="btn mt5 ratingButton tenthButton" ng-click="speedOfDelivery='10'" ng-class="{'selectedButton': speedOfDelivery!=null && speedOfDelivery==10 }">10</button>
</div>
<div style="display: flex; justify-content: space-between;" class="mt5">
<p>Not good at all</p>
<p style="color: #004f9f;">Just great</p>
</div>
</div>
</div>
<div class="desktopViewAdditionalQuestion">
<div class="mt10" style="width: fit-content;">
<h3>Courier Interaction</h3>
<p class="fadedText mt5">Select an option</p>
<div class="chart-scale text-center">
<button class="btn mt5 ratingButton" ng-click="courierInteraction='0'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==0 }">0</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='1'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==1 }">1</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='2'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==2 }">2</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='3'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==3 }">3</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='4'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==4 }">4</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='5'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==5 }">5</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='6'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==6 }">6</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='7'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==7 }">7</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='8'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==8 }">8</button>
<button class="btn mt5 ratingButton" ng-click="courierInteraction='9'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==9 }">9</button>
<button class="btn mt5 ratingButton tenthButton" ng-click="courierInteraction='10'" ng-class="{'selectedButton': courierInteraction!=null && courierInteraction==10 }">10</button>
</div>
<div style="display: flex; justify-content: space-between;" class="mt5">
<p>Not good at all</p>
<p style="color: #004f9f;">Just great</p>
</div>
</div>
</div>
</div>
<div class="mt30">
<p style="padding: 10px; text-decoration: none; color: #0075BA; font-weight: bold; text-align: center;">Your Signature</p>
<div style="position:relative; height:150px;">
<div class="sign_wrapper" style="margin: 0 auto;">
<canvas id="signature-pad" class="signature-pad" style="touch-action: none;"></canvas>
<button id="clear" class="sign-clear">
<svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 497.25 497.25" style="enable-background:new 0 0 497.25 497.25;" xml:space="preserve">
<g>
<g id="undo">
<path d="M248.625,89.25V0l-127.5,127.5l127.5,127.5V140.25c84.15,0,153,68.85,153,153c0,84.15-68.85,153-153,153
c-84.15,0-153-68.85-153-153h-51c0,112.2,91.8,204,204,204s204-91.8,204-204S360.825,89.25,248.625,89.25z"></path>
</g>
</g>
</svg>
</button>
</div>
</div>
<div style="text-align: center;margin-top: 35px;">
<p style="margin-bottom: 5px;">For any further query, please write to us at:</p>
<a href="mailto:[email protected]" target="_top" style="padding: 10px; text-decoration: none; color: #0075BA; font-weight: bold;">[email protected]</a>
</div>
</div>
<div class="mt30 mb10" style="z-index:10">
<button class="btn btn-secondary block mt10" ng-disabled="checkSaveEnable()" ng-click="saveFeedback()" disabled="disabled">Done</button>
</div>
</div>
</div>
</div>
<div class="card ng-hide" ng-show="isUpdated">
<div class="card-body p15">
<div class="text-center" style="width: 30%;margin: 30px auto;">
<img src="../images/hand.svg" alt="" style="width: 100%">
</div>
<p class="fs16 text-center">
Thank you for your valuable feedback
</p>
<p class="fs14 text-light-gray text-center mb15">
Your feedback will continually help us improve our services
</p>
</div>
</div>
<div class="card ng-hide" ng-show="difference>30 && !isUpdated">
<div class="card-body p15">
<img src="../images/BD_background_expires.jpeg" alt="" style="width: 100%">
</div>
</div>
</section>
<div class="toastMsg ng-binding ng-scope" ng-class="{'toastOpen':successMessage}"></div>
<style class="ng-scope">
.sign_wrapper {
position: absolute;
width: 100%;
height: 155px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #d3d3d3;
border-radius: 8px;
margin-bottom: 60px;
left: 0;
right: 0;
}
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 150px;
background-color: white;
border-radius: 8px;
}
.sign-clear {
position: absolute;
right: 10px;
top: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #F9F9F9;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
outline: 0;
border: none;
}
.sign-clear:hover,
.sign-clear:visited {
background-color: #EEEEEE;
}
.shadowIcon {
opacity: .3;
}
.toastMsg {
position: fixed;
border-radius: 4px;
width: 200px;
text-align: center;
background: rgba(0, 0, 0, .9);
color: white;
padding: 10px 10px;
font-size: 13px;
bottom: -60px;
left: 50%;
z-index: 9999;
margin-left: -100px;
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
}
.toastOpen {
bottom: 90px;
}
.leaflet-control-layers-toggle{
display:none;
}
#loader-bg {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: blue;
z-index: 9998;
}
.loaderCircle {
position: absolute;
height: 80px;
width: 80px;
border-radius: 80px;
border: 3px solid rgba(255, 255, 255, .7);
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: loaderCircle 3s linear infinite;
animation: loaderCircle 3s linear infinite;
}
.loaderCircle:after {
content: "";
position: absolute;
top: -5px;
left: 20px;
width: 11px;
height: 11px;
border-radius: 10px;
background-color: white;
}
@-webkit-keyframes loaderCircle {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loaderCircle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.all {
position: relative;
text-align: center;
}
input[type=range] {
-webkit-appearance: none;
width: 98%;
border-radius: 4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
background: linear-gradient(to right, #d5352e, #f9c747 50%, #4dab57);
border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb {
position: relative;
height: 42px;
width: 42px;
border-radius: 50%;
box-shadow: 0px 1px 7px rgba(74, 74, 74, 0.25);
background: #ffffff;
background-image: url("../images/feedback-thumb.png");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
-webkit-appearance: none;
margin-top: -18px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
background: linear-gradient(to right, #d5352e, #f9c747 50%, #4dab57);
border-radius: 4px;
}
input[type=range]::-moz-range-thumb {
position: relative;
height: 42px;
width: 42px;
border-radius: 50%;
box-shadow: 0px 1px 7px rgba(74, 74, 74, 0.25);
background: #ffffff;
background-image: url("../images/feedback-thumb.png");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
margin-top: -18px;
}
input[type=range]::-ms-track {
width: 100%;
height: 14.2px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-thumb {
border: 1px solid #d3d3d3;
height: 32px;
width: 32px;
background: #02be17;
cursor: pointer;
}
output {
position: absolute;
top: -55px;
display: flex;
margin-left: -10px;
width: 24px;
height: 24px;
background: black;
border-radius: 3px;
color: #fff;
font-size: 12px;
line-height: 24px;
justify-content: center;
}
output::after {
position: absolute;
content: '';
bottom: -12px;
width: 0;
right: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 14px solid #000000;
}
</style>
<script class="ng-scope">
// .firefox
var isFF = true;
var addRule = (function (style) {
var sheet = document.head.appendChild(style).sheet;
return function (selector, css) {
if ( isFF ) {
if ( sheet.cssRules.length > 0 ) {
sheet.deleteRule( 0 );
}
try {
sheet.insertRule(selector + "{" + css + "}", 0);
} catch ( ex ) {
isFF = false;
}
}
};
})(document.createElement("style"));
// .all
if ( 'webkitRequestAnimationFrame' in window ) {
$( '.all input' ).addClass( 'webkit-track' );
}
addRule( '.all input::-moz-range-track', 'background: linear-gradient(to right, green, #005555 100%, red)' );
$( '.all input' ).on( 'input', function( ) {
addRule( '.all input::-moz-range-track', 'background: linear-gradient(to right, green, #005555 ' + this.value + '%, red)' );
if ( $( this ).hasClass( 'webkit-track' ) ) {
$( this ).css( 'background', 'linear-gradient(to right, red, yellow 50%, green)' );
}
} );
$( '.all input' ).trigger( 'input' );
</script></div>
</body></html>