Related
I'm trying to change the background color of a range slider via Javascript.
I'm not getting any errors, however the background color isn't changing at all. All the other values that change work, just not the background style.
<input type="range" min="1000" max="6000" value="2000" step="100" class="slider" id="myRange" name="myRange"/>
.slider{
-webkit-appearance: none;
width: 100%;
height: 20px;
background: linear-gradient(90deg, rgb(244, 237, 144) 60%, rgb(244, 237, 144) 60%);
outline: none;
opacity: 1;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 12px;
box-shadow: 0px 0.1px 10px -2px #000000;
}
document.getElementById('myRange').addEventListener('input', function(){sliderChange(this.value)});
function sliderChange(val) {
document.getElementById('myRange').style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%);';
if (val == 6000) {
var value = '6,000+';
} else {
var value = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
document.getElementById('sqftValue').innerHTML = value;
var base = val * 0.12;
var discount = base * 0.2;
var cost = base - discount;
document.getElementById('cost').innerHTML = cost.toFixed(0);
}
What am I missing here?
Try removing the semi-colon from the end of the value you're setting it to.
range.style.background =
'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';
The value above should like this.
range.style.background =
'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)'
const range = document.getElementById('myRange')
range.addEventListener('input', function(){
sliderChange(this.value)
});
function sliderChange(val) {
range.style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';
}
.slider{
-webkit-appearance: none;
width: 100%;
height: 20px;
background: linear-gradient(90deg, red 60%, blue);
outline: none;
opacity: 1;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 12px;
box-shadow: 0px 0.1px 10px -2px #000000;
}
<input type="range" min="1000" max="6000" value="2000" step="100" class="slider" id="myRange" name="myRange" />
Also, using two percentage values doesn't do anything by the way.
EDIT: UPDATED jsfiddle (https://jsfiddle.net/3ow12Lk0/2/)
https://jsfiddle.net/gb8qsrzc/
Im trying to pass variables to pbModal.open
buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount
(towards bottom of JS), then to function buildOut:
function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {}
in order to display "results" in modal with
// Create content area and append to modal
resultHolder = document.createElement("div");
resultHolder.className = "paybutton-content";
resultHolder.id = "result";
resultHolder.innerHTML = (buttonAmount + " " + amountType + " = " + bchAmount/100000000 + " BCH");
this.modal.appendChild(resultHolder);
Being new, I dont know what to call this.
Attempting to get anything to work, I attempted to just pass all variables anywhere and Im not sure Im even close to doing this correctly.
The code I am working on is here: https://jsfiddle.net/gb8qsrzc/
And the modal original is here for reference https://jsfiddle.net/theranjitkumar/1yhthrv8/
how should I be passing variables from buttons to the modal?
EDIT: UPDATED jsfiddle (https://jsfiddle.net/3ow12Lk0/2/)
I think the issue is related to the fact that you are not passing the parameters in the constructor of the modal. i.e. :
var pbModal = new Modal({
content: pbContent,
buttonAmount: buttonAmount,
amountType: amountType,
toAddress: toAddress,
successField: successField,
successMsg: successMsg,
successCallback: successCallback,
bchAmount: bchAmount
});
pbModal.open();
You can try the code above as illustrated in the sample below.
Also, you may want to have another look at the rate/conversion calculations... they seemed incorrect to me but I am not sure what the right formula should be so I didn't try to fix that :)
// Create an immediately invoked functional expression to wrap our code
(function() {
// Define our constructor
this.Modal = function(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {
// Create global element references
this.closeButton = null;
this.modal = null;
this.overlay = null;
// Determine proper prefix
this.transitionEnd = transitionSelect();
// Define option defaults
var defaults = {
autoOpen: false,
className: 'fade-and-drop',
closeButton: false,
content: "",
maxWidth: 270,
minWidth: 250,
overlay: true
}
// Create options by extending defaults with the passed in arugments
if (arguments[0] && typeof arguments[0] === "object") {
this.options = extendDefaults(defaults, arguments[0]);
}
if (this.options.autoOpen === true){
this.open();
}
}
// Public Methods
Modal.prototype.close = function() {
var _ = this;
this.modal.className = this.modal.className.replace(" paybutton-open", "");
this.overlay.className = this.overlay.className.replace(" paybutton-open",
"");
this.modal.addEventListener(this.transitionEnd, function() {
_.modal.parentNode.removeChild(_.modal);
});
this.overlay.addEventListener(this.transitionEnd, function() {
if (_.overlay.parentNode) _.overlay.parentNode.removeChild(_.overlay);
});
}
Modal.prototype.open = function() {
buildOut.call(this);
initializeEvents.call(this);
window.getComputedStyle(this.modal).height;
this.modal.className = this.modal.className +
(this.modal.offsetHeight > window.innerHeight ?
" paybutton-open paybutton-anchored" : " paybutton-open");
this.overlay.className = this.overlay.className + " paybutton-open";
}
// Private Methods
function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {
var content, contentHolder, docFrag, resultHolder, buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount;
/*
* If content is an HTML string, append the HTML string.
* If content is a domNode, append its content.
*/
if (typeof this.options.content === "string") {
content = this.options.content;
} else {
content = this.options.content.innerHTML;
}
// Create a DocumentFragment to build with
docFrag = document.createDocumentFragment();
// Create modal element
this.modal = document.createElement("div");
this.modal.className = "paybutton-modal " + this.options.className;
this.modal.style.minWidth = this.options.minWidth + "px";
this.modal.style.maxWidth = this.options.maxWidth + "px";
// If closeButton option is true, add a close button
if (this.options.closeButton === true) {
this.closeButton = document.createElement("button");
this.closeButton.className = "paybutton-close close-button";
this.closeButton.innerHTML = "×";
this.modal.appendChild(this.closeButton);
}
// If overlay is true, add one
if (this.options.overlay === true) {
this.overlay = document.createElement("div");
this.overlay.className = "paybutton-overlay " + this.options.className;
docFrag.appendChild(this.overlay);
}
// Create content area and append to modal
contentHolder = document.createElement("div");
contentHolder.className = "paybutton-content";
contentHolder.innerHTML = content;
this.modal.appendChild(contentHolder);
// Create content area and append to modal
resultHolder = document.createElement("div");
resultHolder.className = "paybutton-content";
resultHolder.id = "result";
resultHolder.innerHTML = (this.options.buttonAmount + " " + this.options.amountType + " = " + this.options.bchAmount / 100000000 + " BCH");
this.modal.appendChild(resultHolder);
// Append modal to DocumentFragment
docFrag.appendChild(this.modal);
// Append DocumentFragment to body
document.body.appendChild(docFrag);
}
function extendDefaults(source, properties) {
var property;
for (property in properties) {
if (properties.hasOwnProperty(property)) {
source[property] = properties[property];
}
}
return source;
}
function initializeEvents() {
if (this.closeButton) {
this.closeButton.addEventListener('click', this.close.bind(this));
}
if (this.overlay) {
this.overlay.addEventListener('click', this.close.bind(this));
}
}
function transitionSelect() {
var el = document.createElement("div");
if (el.style.WebkitTransition) return "webkitTransitionEnd";
if (el.style.OTransition) return "oTransitionEnd";
return 'transitionend';
}
var payButton = document.getElementsByClassName("pay-button");
for (var i = 0; i < payButton.length; i++) {
var payButtons = payButton[i];
// pull in attribute info from button when clicked
payButtons.addEventListener("click", function(event) {
var buttonAmount = this.getAttribute("amount");
var amountType = this.getAttribute("amount-type");
var toAddress = this.getAttribute("address");
var successField = this.getAttribute("success-field");
var successMsg = this.getAttribute("success-msg");
var successCallback = this.getAttribute("data-success-callback");
var bchAmount;
var test = "test message";
// check if amount type is set to bch or fiat
if (amountType === "BCH") {
bchAmount = 100000000 * buttonAmount;
} else if (amountType === "Satoshi") {
bchAmount = buttonAmount;
}
var qr = new QRious({
element: document.getElementById('qr'),
value: toAddress + "?amount=" + bchAmount,
background: 'white', // background color
foreground: 'black', // foreground color
backgroundAlpha: 1,
foregroundAlpha: 1,
level: 'M',
mime: 'image/png',
size: 250,
padding: null
});
var qrdecoded = qr.toDataURL();
var pbContent =
'<div>' + '<div>' +'<div>' +
'<div><img src="' + qrdecoded + '"></div>' +
'</div>' +
'<div>' +
'<div class="addressdiv"><span>Click QR code to Copy Address</span></div>' +
'</div>' +
'<div>' +
'<div class="amountdiv"><span>Amount = ' + bchAmount + ' BCH</span></div>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Open in BitcoinCash Wallet</span></button>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Send BCH with Badger Wallet</span></button></div>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Send BCH with Telecope Wallet</span></button></div>' +
'</div>' +
'<div>' +
'<div id = "result"></div>' +
'</div>' +
'</div>' +
'</div>';
var pbModal = new Modal({
content: pbContent,
buttonAmount: buttonAmount,
amountType: amountType,
toAddress: toAddress,
successField: successField,
successMsg: successMsg,
successCallback: successCallback,
bchAmount: bchAmount
});
pbModal.open();
});
}
}());
body {
font-family: Helvetica, Arial, san-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.pay-button {
border-radius: 4px;
cursor: pointer;
border: 2px solid orangeRed;
background: transparent;
position: relative;
padding: 0px;
min-width: 150px;
margin: 5px;
color: #fff;
/*For IE*/
}
.pay-button>span {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pay-button:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
z-index: -1;
}
.pay-button>span,
.pay-button:after {
background-size: 300%;
background-position: 100%;
transition: .6s, font-size 0.2s;
}
.pay-button:hover>span,
.pay-button:hover:after {
background-position: 0;
font-size: 1.1em;
color: orangeRed;
/*For IE*/
}
.pbmodal-button {
border-radius: 4px;
cursor: pointer;
border: 2px solid orangeRed;
background: transparent;
position: relative;
padding: 0px;
width: 240px;
margin: 0px 0px 10px 0px;
color: #fff;
/*For IE*/
}
.pbmodal-button>span {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pbmodal-button:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
z-index: -1;
}
.pbmodal-button>span,
.pbmodal-button:after {
background-size: 300%;
background-position: 100%;
transition: .6s, font-size .2s;
}
.pbmodal-button:hover>span,
.pbmodal-button:hover:after {
background-position: 0;
font-size: 1.08em;
color: orangeRed;
/*For IE*/
}
/* Modal Base CSS */
.paybutton-overlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
background: rgba(0, 0, 0, .6);
}
.addressdiv {
word-wrap: break-word;
font-size: 14px;
margin: 0px 0px 10px 0px;
}
.amountdiv {
word-wrap: break-word;
font-size: 16px;
margin: 0px 0px 10px 0px;
}
.paybutton-modal {
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
text-align: center;
opacity: 0;
overflow: auto;
width: 100%;
padding: 10px 10px 15px 10px;
/*padding: 24px 20px;*/
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
}
.paybutton-modal.paybutton-open.paybutton-anchored {
top: 20px;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.paybutton-modal.paybutton-open {
opacity: 1;
}
.paybutton-overlay.paybutton-open {
opacity: 1;
}
/* Default Animation */
.paybutton-overlay.fade-and-drop {
display: block;
opacity: 0;
}
.paybutton-modal.fade-and-drop {
top: -300%;
opacity: 1;
display: block;
}
.paybutton-modal.fade-and-drop.paybutton-open {
top: 50%;
-webkit-transition: 300ms top 300ms ease;
-moz-transition: 300ms top 300ms ease;
-ms-transition: 300ms top 300ms ease;
-o-transition: 300ms top 300ms ease;
transition: 300ms top 300ms ease;
}
.paybutton-modal.fade-and-drop.paybutton-open.paybutton-anchored {
-webkit-transition: 300ms top 300ms ease;
-moz-transition: 300ms top 300ms ease;
-ms-transition: 300ms top 300ms ease;
-o-transition: 300ms top 300ms ease;
transition: 300ms top 300ms ease;
}
.paybutton-overlay.fade-and-drop.paybutton-open {
top: 0;
-webkit-transition: 300ms opacity ease;
-moz-transition: 300ms opacity ease;
-ms-transition: 300ms opacity ease;
-o-transition: 300ms opacity ease;
transition: 300ms opacity ease;
opacity: 1;
}
.paybutton-modal.fade-and-drop {
-webkit-transition: 300ms top ease;
-moz-transition: 300ms top ease;
-ms-transition: 300ms top ease;
-o-transition: 300ms top ease;
transition: 300ms top ease;
}
.paybutton-overlay.fade-and-drop {
-webkit-transition: 300ms opacity 300ms ease;
-moz-transition: 300ms opacity 300ms ease;
-ms-transition: 300ms opacity 300ms ease;
-o-transition: 300ms opacity 300ms ease;
transition: 300ms opacity 300ms ease;
}
/* Close Button */
.paybutton-close {
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 12px;
position: absolute;
top: 5px;
right: 5px;
padding: 5px 7px 7px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: #e74c3c;
}
.paybutton-close:hover {
background: #c0392b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<button class="pay-button" amount="0.038" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.038 BCH</span>
</button>
<button class="pay-button" amount="0.1" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.1 BCH</span>
</button>
<button class="pay-button" amount="10000" amount-type="Satoshi" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>10,000 Satoshi</span>
</button>
UPDATED
I added a second version that improves on the need to generate the code for all elements in the modal (divs, buttons, etc) every single time the buttons are clicked.
Instead, we can have a hidden div and its contents are updated on button click and adding/removing a class that hides/shows it as needed.
For OP: I worked on re-using this div but did not pay attention to the transition effects on the existing code.
A few minor tweaks are still needed for opacity and modal size, etc but I ran out of time to continue working on this part :)
UPDATE 2
Removed second approach as OP will not find it as useful (different requirements than I had anticipated)
I've created Jquery plugin countdown timer so i'd like add some effects and animation to countdown like rotate or fade:
example for what i need:
Animation Demo
Note:
i need animation work with Days, Hours, Mintues and Seconds
n
(function ($) {
jQuery.fn.countdown = function (options, callback) {
var settings = { 'date': null };
if (options) {
$.extend(settings, options);
}
this_sel = $(this);
function count_exec() {
eventDate = Date.parse(settings['date']) / 1000;
currentDate = Math.floor($.now() / 1000);
if (eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / (60 * 60 * 24));
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60 ;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
// add 0 value to left of value
if (!isNaN(eventDate)) {
this_sel.find('.days').text(days);
this_sel.find('.hours').text(hours);
this_sel.find('.mins').text(minutes);
this_sel.find('.secs').animate({ 'font-size': '100px' },1000).text(seconds);
}
}
count_exec();
interval = setInterval(count_exec, 1000);
};
})(jQuery);
$(document).ready(function () {
$("#countdown").countdown({
date: "4 january 2017 7:15:00"
},
function () {
$("#countdown").text("merry christmas");
}
);
})
#countdown{
width:1000px;
margin:50px auto;
border:1px solid #14e170;
}
#countdown .countdown-container{
width:25%;
height:200px;
float:left;
position:relative;
border:1px solid #14e170;
text-align:center;
}
.countdown-container > div{
text-align:center;
font-size:100px;
}
.countdown-container > span{
display:block;
top:0;
left:0;
font-size:40px;
color:rgba(73, 73, 73, 0.82);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
<div class="countdown-container">
<div class="days">
00
</div>
<span>Days</span>
</div>
<div class="countdown-container">
<div class="hours">
00
</div>
<span>Hours</span>
</div>
<div class="countdown-container">
<div class="mins">
00
</div>
<span>Minutes</span>
</div>
<div class="countdown-container">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
</div>
Please visit this link : http://www.jqueryscript.net/time-clock/Animated-Responsive-jQuery-Countdown-Timer-Plugin-mbCoimingsoon.html
Just download this countdown, It's work like you want.
I hope it's helpful for you
/*
* flipclock
* Version: 1.0.1
* Authors: #gokercebeci
* Licensed under the MIT license
* Demo: http://
*/
(function($) {
var pluginName = 'flipclock';
var methods = {
pad: function(n) {
return (n < 10) ? '0' + n : n;
},
time: function(date) {
if (date) {
var e = new Date(date);
var b = new Date();
var d = new Date(e.getTime() - b.getTime());
} else
var d = new Date();
var t = methods.pad(date ? d.getFullYear() - 70 : d.getFullYear())
+ '' + methods.pad(date ? d.getMonth() : d.getMonth() + 1)
+ '' + methods.pad(date ? d.getDate() - 1 : d.getDate())
+ '' + methods.pad(d.getHours())
+ '' + methods.pad(d.getMinutes())
+ '' + methods.pad(d.getSeconds());
return {
'Y': {'d2': t.charAt(2), 'd1': t.charAt(3)},
'M': {'d2': t.charAt(4), 'd1': t.charAt(5)},
'D': {'d2': t.charAt(6), 'd1': t.charAt(7)},
'h': {'d2': t.charAt(8), 'd1': t.charAt(9)},
'm': {'d2': t.charAt(10), 'd1': t.charAt(11)},
's': {'d2': t.charAt(12), 'd1': t.charAt(13)}
};
},
play: function(c) {
$('body').removeClass('play');
var a = $('ul' + c + ' section.active');
if (a.html() == undefined) {
a = $('ul' + c + ' section').eq(0);
a.addClass('ready')
.removeClass('active')
.next('section')
.addClass('active')
.closest('body')
.addClass('play');
}
else if (a.is(':last-child')) {
$('ul' + c + ' section').removeClass('ready');
a.addClass('ready').removeClass('active');
a = $('ul' + c + ' section').eq(0);
a.addClass('active')
.closest('body')
.addClass('play');
}
else {
$('ul' + c + ' section').removeClass('ready');
a.addClass('ready')
.removeClass('active')
.next('section')
.addClass('active')
.closest('body')
.addClass('play');
}
},
// d1 is first digit and d2 is second digit
ul: function(c, d2, d1) {
return '<ul class="flip ' + c + '">' + this.li('d2', d2) + this.li('d1', d1) + '</ul>';
},
li: function(c, n) {
//
return '<li class="' + c + '"><section class="ready"><div class="up">'
+ '<div class="shadow"></div>'
+ '<div class="inn"></div></div>'
+ '<div class="down">'
+ '<div class="shadow"></div>'
+ '<div class="inn"></div></div>'
+ '</section><section class="active"><div class="up">'
+ '<div class="shadow"></div>'
+ '<div class="inn">' + n + '</div></div>'
+ '<div class="down">'
+ '<div class="shadow"></div>'
+ '<div class="inn">' + n + '</div></div>'
+ '</section></li>';
}
};
// var defaults = {};
function Plugin(element, options) {
this.element = element;
this.options = options;
// this.options = $.extend({}, defaults, options);
// this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var t, full = false;
if (!this.options || this.options == 'clock') {
t = methods.time();
} else if (this.options == 'date') {
t = methods.time();
full = true;
} else {
t = methods.time(this.options);
full = true;
}
$(this.element)
.addClass('flipclock')
.html(
(full ?
methods.ul('year', t.Y.d2, t.Y.d1)
+ methods.ul('month', t.M.d2, t.M.d1)
+ methods.ul('day', t.D.d2, t.D.d1)
: '')
+ methods.ul('hour', t.h.d2, t.h.d1)
+ methods.ul('minute', t.m.d2, t.m.d1)
+ methods.ul('second', t.s.d2, t.s.d1)
+ '<audio id="flipclick">'
+ '<source src="https://github.com/gokercebeci/flipclock/blob/master/js/plugins/flipclock/click.mp3?raw=true" type="audio/mpeg"/>'
+ '</audio>');
setInterval($.proxy(this.refresh, this), 1000);
},
refresh: function() {
var el = $(this.element);
var t;
if (this.options
&& this.options != 'clock'
&& this.options != 'date') {
t = methods.time(this.options);
} else
t = methods.time()
// second sound
setTimeout(function() {
document.getElementById('flipclick').play()
}, 500);
// second first digit
el.find(".second .d1 .ready .inn").html(t.s.d1);
methods.play('.second .d1');
// second second digit
if ((t.s.d1 === '0')) {
el.find(".second .d2 .ready .inn").html(t.s.d2);
methods.play('.second .d2');
// minute first digit
if ((t.s.d2 === '0')) {
el.find(".minute .d1 .ready .inn").html(t.m.d1);
methods.play('.minute .d1');
// minute second digit
if ((t.m.d1 === '0')) {
el.find(".minute .d2 .ready .inn").html(t.m.d2);
methods.play('.minute .d2');
// hour first digit
if ((t.m.d2 === '0')) {
el.find(".hour .d1 .ready .inn").html(t.h.d1);
methods.play('.hour .d1');
// hour second digit
if ((t.h.d1 === '0')) {
el.find(".hour .d2 .ready .inn").html(t.h.d2);
methods.play('.hour .d2');
// day first digit
if ((t.h.d2 === '0')) {
el.find(".day .d1 .ready .inn").html(t.D.d1);
methods.play('.day .d1');
// day second digit
if ((t.D.d1 === '0')) {
el.find(".day .d2 .ready .inn").html(t.D.d2);
methods.play('.day .d2');
// month first digit
if ((t.D.d2 === '0')) {
el.find(".month .d1 .ready .inn").html(t.M.d1);
methods.play('.month .d1');
// month second digit
if ((t.M.d1 === '0')) {
el.find(".month .d2 .ready .inn").html(t.M.d2);
methods.play('.month .d2');
// year first digit
if ((t.M.d2 === '0')) {
el.find(".year .d1 .ready .inn").html(t.Y.d1);
methods.play('.year .d1');
// year second digit
if ((t.Y.d1 === '0')) {
el.find(".year .d2 .ready .inn").html(t.Y.d2);
methods.play('.year .d2');
}
}
}
}
}
}
}
}
}
}
}
},
};
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$(this).data('plugin_' + pluginName)) {
$(this).data('plugin_' + pluginName,
new Plugin(this, options));
}
});
};
})(typeof jQuery !== 'undefined' ? jQuery : Zepto);
// RUN
$('#container').flipclock();
html, body {
margin: 0;
padding:0;
height: 100%;
color: #fff;
font: 11px/normal sans-serif;
background-image: url('https://github.com/gokercebeci/flipclock/raw/master/css/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://github.com/gokercebeci/flipclock/raw/master/css/mask.png');
z-index: 2;
}
h1 {
margin: 0 10px;
font-size: 70px;
font-weight: bold;
text-shadow: 0 0 2px #fff;
}
.clearfix {
clear: both;
}
#page {
margin: 0 auto;
width: 600px;
}
#container {
opacity: .9;
}
#usage li {
position: relative;
margin: 5px 0;
padding: 10px;
color: #222;
background: #fff;
}
#usage code {
position: absolute;
top:0;
right:0;
padding: 10px;
color: #eee;
border: 1px solid #333;
background: #000;
}
/*
* flipclock
* Version: 1.0.0
* Authors: #gokercebeci
* Licensed under the MIT license
* Demo: http://
*/
/*==============================================================================
FLIP CLOCK
==============================================================================*/
.flipclock {
}
.flipclock hr {
position: absolute;
left: 0;
top: 65px;
width: 100%;
height: 3px;
border: 0;
background: #000;
z-index: 10;
opacity: 0;
}
ul.flip {
position: relative;
float: left;
margin: 10px;
padding: 0;
width: 180px;
height: 130px;
font-size: 120px;
font-weight: bold;
line-height: 127px;
}
ul.flip li {
float: left;
margin: 0;
padding: 0;
width: 49%;
height: 100%;
-webkit-perspective: 200px;
list-style: none;
}
ul.flip li.d1 {
float: right;
}
ul.flip li section {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
ul.flip li section:first-child {
z-index: 2;
}
ul.flip li div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 49%;
overflow: hidden;
}
ul.flip li div .shadow {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
ul.flip li div.up {
-webkit-transform-origin: 50% 100%;
top: 0;
}
ul.flip li div.down {
-webkit-transform-origin: 50% 0%;
bottom: 0;
}
ul.flip li div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #fff;
text-shadow: 0 0 2px #fff;
text-align: center;
background-color: #000;
border-radius: 6px;
}
ul.flip li div.up div.inn {
top: 0;
}
ul.flip li div.down div.inn {
bottom: 0;
}
/*--------------------------------------
PLAY
--------------------------------------*/
body.play ul section.ready {
z-index: 3;
}
body.play ul section.active {
-webkit-animation: index .5s .5s linear both;
z-index: 2;
}
#-webkit-keyframes index {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
body.play ul section.active .down {
z-index: 2;
-webkit-animation: flipdown .5s .5s linear both;
}
#-webkit-keyframes flipdown {
0% {
-webkit-transform: rotateX(90deg);
}
80% {
-webkit-transform: rotateX(5deg);
}
90% {
-webkit-transform: rotateX(15deg);
}
100% {
-webkit-transform: rotateX(0deg);
}
}
body.play ul section.ready .up {
z-index: 2;
-webkit-animation: flipup .5s linear both;
}
#-webkit-keyframes flipup {
0% {
-webkit-transform: rotateX(0deg);
}
90% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-90deg);
}
}
/*--------------------------------------
SHADOW
--------------------------------------*/
body.play ul section.ready .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: show .5s linear both;
}
body.play ul section.active .up .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
/*DOWN*/
body.play ul section.ready .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: show .5s linear both;
}
body.play ul section.active .down .shadow {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
-webkit-animation: hide .5s .3s linear both;
}
#-webkit-keyframes show {
0% {
opacity: 0;
}
90% {
opacity: .10;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes hide {
0% {
opacity: 1;
}
80% {
opacity: .20;
}
100% {
opacity: 0;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div id="mask">
<div id="page">
<h1>flipclock</h1>
<div id="container"></div>
<div class="clearfix"></div>
<h2>USAGE</h2>
<ul id="usage">
<li class="selected">
clock
<code>$('#container').flipclock();</code>
</li>
<li>
fulldate
<code>$('#container').flipclock('date');</code>
</li>
<li>
countdown
<code>$('#container').flipclock('2013 01 17 12:00:00');</code>
</li>
</ul>
</div>
</div>
Would you please try above code?
so I created a style for input range sliders using HTML5/CSS3. All works fine except for the fill percentage in Firefox (the bit that fills up right to the drag-able button). It works in Chrome. I've tried everything can someone maybe assist me to make it work in Firefox as well. Heres what I have:
CSS :
.my-retirement-sliders input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
border:none;
height: 6px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #94A14E),
color-stop(0.15, #C5C5C5)
);
}
.my-retirement-sliders input[type='range']::-moz-range-thumb {
-moz-appearance: none;
background: rgb(148, 161, 78);
border: 3px solid #fff;
height: 10px;
width: 10px;
}
.my-retirement-sliders input[type="range"]{
-webkit-appearance: none;
border-radius: 5px;
height: 6px;
background-color: #444;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #94A14E),
color-stop(0.15, #C5C5C5)
);
}
.my-retirement-sliders input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(148, 161, 78);
border: 3px solid #fff;
border-radius:10px;
height: 15px;
width: 15px;
}
Little-bit of JS:
//SLIDERS
//SET START POINT FOR SLIDERS FILL
var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
$("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
$("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
//CHANGE FILL %
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
});
So I managed to fix it for Firefox now as well :D Happy DAYS! So my CSS looks like this
/* Firefox */
.my-retirement-sliders input[type='range']::-moz-range-track {
border:none;
background:transparent;
}
.my-retirement-sliders input[type='range']::-moz-range-thumb {
-moz-appearance: none;
background: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:10px;
height: 13px;
width: 13px;
box-shadow:black 2px 2px 10px;
}
/* Chrome and Opera */
.my-retirement-sliders input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:15px;
height: 20px;
width: 20px;
box-shadow:black 1px 1px 5px;
}
/* IE */
.k-ie .my-retirement-sliders input[type="range"]{
height:81px;
top:10px;
position:relative;
width:300px;
margin-left: 10px;
display: inline-block;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-track {
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-fill-lower {
background: #94A14E;
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-fill-upper {
background: #C5C5C5;
border-radius:10px;
height:5px;
}
.k-ie .my-retirement-sliders input[type="range"]::-ms-thumb {
background-color: rgb(148, 161, 78);
border: 4px solid #fff;
border-radius:15px;
height: 15px;
width: 15px;
box-shadow:black 1px 1px 5px;
overflow:auto;
}
AND JS LOOKS LIKE THIS :
//SLIDERS
//SET START POINT FOR SLIDERS FILL
var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
$("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$("#SliderRetAge").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val*100 + '% , #C5C5C5 ' + val*100 + '%)');
var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
$("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$("#SliderPostRetExpPerc").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
//CHANGE FILL %
$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
$(this).css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
});
I am currently writing a program which toggles a value based on the status of a checkbox. With a normal checkbox everything works fine.
HTML:
<td><script> checkbox('px_THPressure_Enable')</script></td>
<td><script> checkbox('px_THPressure_Activate')</script></td>
Javascript checkbox function:
function checkbox(register)
{
var onClicked = "setDataJQuery('"+register+"',this.checked?'1':'0')";
var output = "<input type='checkbox' class='fetch' onClick=\""+onClicked+"\" id='" + register + "'>";
document.write(output);
}
Now I am trying to style the checkbox with CSS as described here http://www.paulund.co.uk/style-checkboxes-with-css "Checkbox Four"
So now my checkbox function changed to:
function checkbox(register)
{
var onClicked = "setDataJQuery('"+register+"',this.checked?'1':'0')";
var output = "<div class='checkboxFour'><input type='checkbox' class='fetch' value='1' onClick=\""+onClicked+"\" id='" + register + "' name=''></input><label for='checkboxFourInput'></label></div>";
document.write(output);
}
CSS:
input[type=checkbox] {
visibility: hidden;
}
/**
* Checkbox Four
*/
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checkbox button
*/
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checked state
*/
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
}
Now I am able to see the correct status of the checkbox with the new style but when I click the checkbox the value does not change. I know that the issue is in the id field. The checkbox style requires the id="checkboxFourInput" and my program requires the id to equal the register value which is being toggled. ie THPressure_Enable
I know that having multiple ids on an html element is not allowed, so is there any way that I can toggle this register value with the styled checkbox.
Thank you in advance.
EDIT:
It is a function that will change the register value depending on the correct authorization. I have the function defined as follows:
function setDataJQuery(register,value)
{
statusElem = document.getElementById('status');
if (statusElem)
statusElem.innerHTML=" ";
//alert("logged in as " + "<?php echo \"{$_SERVER['PHP_AUTH_USER']}\"; ?>");
if (((user_name == 'slipsmart' || user_name== 'slipsmart_super') && (operator_set_ok.indexOf(register.substring(3)) != -1)) ||
(user_name == 'slipsmart_super' && (supervisor_set_ok.indexOf(register.substring(3)) != -1)) ||
user_name == 'slipsmart_setup')
{
$.ajax({
url: 'set.php?' + register + '=' + value,
type: 'post',
success:function(data){
var val_pairs = data.split("&");
document.getElementById('Error').innerHTML=" ";
for (i in val_pairs)
{
var pair = val_pairs[i].split("=");
var myElem = document.getElementById(pair[0]);
if (myElem)
myElem.innerHTML= pair[1];
}
}
});
}
else
alert("Not authorized!");
}