Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style type="text/css"> /* CSS GOES HERE */ body{ font-family: Helvetica, Arial, sans-serif; background-color: #D6D6D6; -margin: 8em; } content > div{ padding: 2em; } #apDiv1 { } .counter{ -width: 20px; -height: 30px; z-index: 1; border: 2px inset #666; } .counter .wheel{ -margin-top: 5px; -width: 20px; -height: 30px; -font-size: 20px; } span{ display:inline-block; } span button{ display:block; width: 100%; font-weight: bold; } #d8.counter{ width: 150px; -height: 30px; z-index: 1; border: 2px inset #666; } #d8.counter .wheel{ -margin-top: 5px; width: 150px; height: 40px; font-size: 20px; } </style> </head> <body> <header> <h1>This is a blank HTML5 template.</h1> </header> <content> <p>Hello, this is a blank HTML5 template</p> <div id="apDiv1"> <span> <button id="minus1">-</button> <div id="d1" class="counter">0</div> <button id="plus1">+</button> </span> <span> <button id="minus2">-</button> <div id="d2" class="counter">0</div> <button id="plus2">+</button> </span> <span> <button id="plus3">+</button> <div id="d3" class="counter">0</div> <button id="minus3">-</button> </span> <span> <button id="plus4">+</button> <div id="d4" class="counter">0</div> <button id="minus4">-</button> </span> </div> <div> Inverted <div id="d5" class="counter">0</div> </div> <div> Custom <div id="d6" class="counter">1|2|3</div> </div> <div> Custom 2 <div id="d7" class="counter">A|B|C|d|e|f</div> </div> <div> Custom 2 <div id="d8" class="counter">Apples|Oranges|Bannanas|Pineaples|Lemons</div> </div> </content> <footer> Footer goes here </footer> <script type="text/javascript"> /* JAVASCRIPT GOES HERE */ window.onload=function(){ c1 = new Counter(d1); plus1.onclick = function(e){c1.next(); console.log(e); }; minus1.onclick = function(){ c1.previous(); }; c1.onChange = function(){ console.log("pos changed to "+this.pos); } c2 = new Counter(d2); plus2.onclick = function(){ c2.next(); }; minus2.onclick = function(){ c2.previous(); }; c3 = new Counter(d3); plus3.onclick = function(){ c3.next(); }; minus3.onclick = function(){ c3.previous(); }; c4 = new Counter(d4); plus4.onclick = function(){ c4.next(); }; minus4.onclick = function(){ c4.previous(); }; c5 = new Counter(d5); c5.options.inverted = true; c6 = new Counter(d6); c7 = new Counter(d7); c8 = new Counter(d8); }; </script> </body> </html>
@charset "UTF-8"; /* * counter.css - written by Victor N - 22/Nov/2013 - www.vitim.us */ /* Analog Counter Wheel Layout */ .counter { display: inline-block; overflow: hidden; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .counter .wheel { position: relative; display: table; text-align:center; cursor: inherit; } /* digits */ .counter .wheel div{ position: absolute; width: 100%; height: 100%; box-sizing: border-box; cursor: inherit; } .counter .wheel div:nth-child(1){ top: -100%; } .counter .wheel div:nth-child(2){ top: 0; } .counter .wheel div:nth-child(3){ top: 100%; } .counter .wheel.animate{ transition: all ease 300ms; } /* default theme */ .counter{ width: 50px; height: 80px; border: 2px inset #666; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0px 2px 5px rgba(0,0,0,0.7), 0px 2px 2px rgba(255,255,255,0.25); -moz-box-shadow: inset 0px 2px 5px rgba(0,0,0,0.7), 0px 2px 2px rgba(255,255,255,0.25); box-shadow: inset 0px 2px 5px rgba(0,0,0,0.7), 0px 2px 2px rgba(255,255,255,0.25); background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2 0%, #fefefe 34%, #fefefe 61%, #d1d1d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(34%,#fefefe), color-stop(61%,#fefefe), color-stop(100%,#d1d1d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e2e2e2 0%,#fefefe 34%,#fefefe 61%,#d1d1d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e2e2e2 0%,#fefefe 34%,#fefefe 61%,#d1d1d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e2e2e2 0%,#fefefe 34%,#fefefe 61%,#d1d1d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #e2e2e2 0%,#fefefe 34%,#fefefe 61%,#d1d1d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */ } .counter .wheel{ width: 50px; margin-top: 15px; line-height: 50px; height: 50px; font-size: 50px; } .counter .wheel .digit{ border-top: 1px solid rgba(64,64,64,0.5); border-bottom: 1px solid rgba(128,128,128,0.5); } .counter{ cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8yMS8xMzZuuLQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAFBklEQVRYhd2XW2gcZRSAvzMz3aZukm03JE3aF4M2KbbYmFoLQvWhti9KaYqIYApSGyiCvTwEDRSqiH0Ti4rPQpGC+FiqJraFPjVZxIftUtM82G1otuS2m+xtZufy+zCz202zGxOrFTxwWGb2n3O+/9z+GVFKKQARaQIswAEUdSRY/o+JFjhHKZUFNgAGIP+ol78CqIJYeNIQWvXFfwGhPXrjSUMsA3hcCBE5JiLfi8gHItIsIoaIIFLbhLGCIZRSCyISAYoE3REYEkAfHBzsvXPnzkvZbLZV1/WpaDT6G/CGUvSJsBloA74C5oPnVw+wAoQMDg6+dvv27e+SyWTTrl271m/dupW7d+8yPj5eaGlpAeZQildECAM6cKEuRDAHVtRgTTOw/sSJEx+dOXNmMR6PK9d1lVJKnTt3TimllGVZat++fUopKgr8CrwMNC/5I9CaNRCAVTS4Xjh16tRRXdfPDg0NNe3cuRNN05iahXn7OSYmFYZhcOTIEfbsedEPr6HPANPAZqChlp8lAI9OORE5LSIDIvJ2NBp9M51ODx0/fjzc2toKwGwGTn8JE9ZbfPqtYJY8+vv72b9/P93dXTiO2wo8DawLUlEfQCmFiHxYhgjyfwG4Adw4fPiwGYlEtvT09FQetmwwS6DpULDAtDxCoRADAwN0dHSU7WwAmqhTb0aV8/eBsRprikDetu2OHTt2LAmjoYMm4Cr/VykFAuFwmIaGhvLGygDr60ZARPqBn4C0iLz3SBTuAaTT6Wd0fWkURcALStVTsE73cF2XS5cu4Xle9SZ16qVARF4HhoEMsABcr7EuBOTLuypL2ybo7QJDLdDzLOiax8WLFxkZGWF4eISOjnYCuxbgLTfrR+A6kAPygeZE5Gh1BwCaaZpStauKfHwMXgh/wdl3/RRcvXqVK1d+BCCVegAQAUrUOeKNgI5ggYaf819E5B38sBUA27ZtLMvi/v37ZLNZCoUCuVyOXC7H3r17GRkZoVAoMDMzUzEejW4C0ou1HFcDVG/LqwL6OQCwAct1XZVMJhkbG6sUWWNjIy0tLYRCITRNY35+vmJoy5YOmptDpNPpe0C6yu4ygGpR+OOyDCLBPc+2bdXZ2UlfX5+/sKpQy7Jx40YOHjzI7t0W27dHEBGSyeQsMBlEdjlAjVcsBbiBVqS3t9exbbt6Mlb+ExEcx8G2bQ4dOkRXVxepVIqbN2+CfwZkqHMY1R3FNSSTyWRQSuF5Hp7nt5zjOLiuS6FQwDRNRIT29na6u7sxDAPgASu8Z654Gi5ZaBgTt27dKnqet6EM4HkejuNgWRbFYpFCoUCpVELXdQzDYGpqygR+x49m3TZclcRisdGJiYmZWCxW2X2pVKo4zufz5PN5TNPEtm1isRiTk5OzwDh+Ibu17K4lBY5S6pPz58/npqenKzkvlUqYpkmxWMSyLGzbJpVKcfny5fzc3NzXgIlf0I8N4MZisR/i8fiFAwcOlK5du1aBsG27Ugujo6OcPHnSSSQS3ywuLg4D2QCiJoCs9kND/H4LAeFIJPJqZ2fn55FIpG3btm1hwzDIZDIkEomi53mTiUTiMyDOw/GeA2xVw9laAMCPWAh4Cmg0DKPbdd3nlVJtwCzwB37PL+KP9SzBJFVK1SzCtQKUIQz847UhAFrHw6Fl4+e8rA7g1fPzdwAInGn4o7p83JYB3MBpufUU1P+mXDXAvyVr6YL/J8CfgoC/nnzv8zUAAAAASUVORK5CYII= ), pointer; }
/* * Counter.js - written by Victor N - 22/Nov/2013 - www.vitim.us */ function Counter(counterElement){ this.pos = 0; this.values = ['0','1','2','3','4','5','6','7','8','9']; this.options = { mousewheel: true, digitHeight: 0, inverted: false }; this.DOM = { counter : counterElement, wheel : document.createElement('div'), digitAbove : document.createElement('div'), digitCenter : document.createElement('div'), digitBelow : document.createElement('div') }; //Initial Values if(this.DOM.counter.innerHTML.indexOf('|')>-1){ this.values = this.DOM.counter.innerHTML.split('|'); } this.DOM.counter.innerHTML = ""; this.DOM.counter.classList.add('counter'); this.DOM.wheel.classList.add('wheel'); this.DOM.digitAbove.classList.add('digit'); this.DOM.digitCenter.classList.add('digit'); this.DOM.digitBelow.classList.add('digit'); this.DOM.digitAbove.classList.add('above'); this.DOM.digitCenter.classList.add('center'); this.DOM.digitBelow.classList.add('below'); this.DOM.counter.appendChild(this.DOM.wheel); this.DOM.wheel.appendChild(this.DOM.digitAbove); this.DOM.wheel.appendChild(this.DOM.digitCenter); this.DOM.wheel.appendChild(this.DOM.digitBelow); //compute digit height //this.options.digitHeight = this.DOM.digitCenter.offsetHeight; this.options.digitHeight = parseInt(window.getComputedStyle(this.DOM.digitCenter, null).getPropertyValue("height")); this.setPos(0); this.DOM.counter.onmousewheel = this.mouseWheel(); } Counter.prototype.setValue = function(value){ var pos = this.values.indexOf(value); if(pos>=0) return this.setPos(pos); else throw new Error('"'+value+'" is not a item on Counter.values[]'); }; Counter.prototype.getValue = function(){ return this.values[this.pos]; }; Counter.prototype.getPos = function(){ return this.pos; }; Counter.prototype.setPos = function(x){ //function that cycle values between 0..max function n(x,max){ if(x>=max) x=(x%(max)); if(x<0) x=max-(Math.abs(x)%max); return x; } var offsetAbove, offsetBelow; var max = this.values.length; this.pos = n(x, max); if(!this.options.inverted){ //numbers increase rolling down offsetAbove = n(this.pos-1, max); offsetBelow = n(this.pos+1, max); } else{ //numbers increase rolling up offsetAbove = n(this.pos+1, max); offsetBelow = n(this.pos-1, max); } this.DOM.digitAbove.innerHTML = this.values[offsetAbove]; this.DOM.digitCenter.innerHTML = this.values[this.pos]; this.DOM.digitBelow.innerHTML = this.values[offsetBelow]; //dispatch event if handler is set if(this.onChange){ this.onChange.call(this, this.pos); } return this.pos; }; Counter.prototype.moveBy = function(x){ var self = this; if(x!=0){ this.setPos(this.pos+x); //amount of movement var d = this.options.digitHeight; //set direction of movement if(x>0) d*=1; if(x<0) d*=-1; //invert direction of movement animation if(this.options.inverted) d*=-1; this.DOM.wheel.classList.remove('animate'); this.DOM.wheel.style.top = d+"px"; setTimeout(function(){ self.DOM.wheel.classList.add('animate'); self.DOM.wheel.style.top = "0px"; },0); } }; Counter.prototype.moveTo = function(pos){ if(this.pos!=pos){ var max = this.values.length-1; var direction = pos - this.pos; if(this.pos==max && pos==0) direction = 1; if(this.pos==0 && pos==max) direction = -1; this.moveBy(direction); var cur = this.setPos(pos); } }; Counter.prototype.next = function(){ this.moveBy(1); }; Counter.prototype.previous = function(){ this.moveBy(-1); }; Counter.prototype.mouseWheel = function(){ var self = this; var lastScroll=0, eventCount=0; //function attached to onmousewheel return function(e){ if(self.options.mousewheel==false) return; // cross-browser wheel delta e = window.event || e; // old IE support e.preventDefault(); var now = Date.now(); var dif = now-lastScroll; this.lastScroll = now; var delta = e.wheelDelta; //var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); if(self.options.inverted) delta*=-1; if(e.webkitDirectionInvertedFromDevice) delta*=-1; if((dif>20 && Math.abs(delta)>=12) || Math.abs(eventCount)>50){ if(delta>0){ self.next(); } else{ self.previous(); } eventCount = 0; } else{ eventCount+=e.wheelDelta; } //console.log("timestamp %s \t dif: %s \t deltaMode: %s \t inverted: %s \t wheelDelta: %s \t delta: %s \t x: %d", // e.timeStamp, dif, e.deltaMode, e.webkitDirectionInvertedFromDevice, e.wheelDelta, delta, wheel); }; };