jquery - Create a button that fills from the center as it is held, and then back to the original color if it is held a second time -


i'm trying create quick checklist of people attending event. checklist simple webpage used on ipad, using localstorage remember has arrived , has not.

what have container (or cell in example below) changes it's background color center outwards held. once full cell new color, remains color once user stops holding finger on it. in way check people in event , short hold should prevent accidental clicks.

my problem arises when want create same effect in reverse if wish remove event (accidental click, person leaves etc), again filling center time using original color. find css , jquery using causes cell jump end of fill animation reason.

i'm not great type of transition, going in cack handed way.

here code far, should able copy , paste .html doc , run accepting mouse presses in place of finger holds:

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <title>arrived demo</title>   <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">   <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>   <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>   <style>   html, body { padding: 0; margin: 0; -webkit-user-select: none;}   html, .ui-mobile, .ui-mobile body {     height: 85px;   }   .ui-mobile, .ui-mobile .ui-page {     min-height: 85px;   }   #nav {     font-size: 200%;     width:17.1875em;     margin:17px auto 0 auto;   }   #nav {     color: #777;     border: 2px solid #777;     background-color: #ccc;     padding: 0.2em 0.6em;     text-decoration: none;     float: left;     margin-right: 0.3em;   }   #nav a:hover {     color: #999;     border-color: #999;     background: #eee;   }   #nav a.selected,   #nav a.selected:hover {     color: #0a0;     border-color: #0a0;     background: #afa;   }   .box {     width: 200px;     height: 100%;     background-color: #e1e1e1;   }   .box.arrived {     background-color: green;   }   /* shutter out horizontal */ .hvr-shutter-out-horizontal, .hvr-shutter-out-horizontal2 {   display: inline-block;   vertical-align: middle;   -webkit-transform: translatez(0);   transform: translatez(0);   box-shadow: 0 0 1px rgba(0, 0, 0, 0);   -webkit-backface-visibility: hidden;   backface-visibility: hidden;   -moz-osx-font-smoothing: grayscale;   position: relative;   background: #e1e1e1;   -webkit-transition-property: color;   transition-property: color;   -webkit-transition-duration: 1s;   transition-duration: 1s; } .hvr-shutter-out-horizontal:before, .hvr-shutter-out-horizontal2:before {   content: "";   position: absolute;   z-index: -1;   top: 0;   bottom: 0;   left: 0;   right: 0;   background: green;   -webkit-transform: scalex(0);   transform: scalex(0);   -webkit-transform-origin: 50%;   transform-origin: 50%;   -webkit-transition-property: transform;   transition-property: transform;   -webkit-transition-duration: 1s;   transition-duration: 1s;   -webkit-transition-timing-function: ease-out;   transition-timing-function: ease-out; } .hvr-shutter-out-horizontal2{background: green;} .hvr-shutter-out-horizontal2:before{background: #e1e1e1}  .hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active,  .hvr-shutter-out-horizontal2:hover, .hvr-shutter-out-horizontal2:focus, .hvr-shutter-out-horizontal2:active {   color: white; } .hvr-shutter-out-horizontal.tap:before, .hvr-shutter-out-horizontal2.tap:before {   -webkit-transform: scalex(1);   transform: scalex(1); }  td {     padding: 20px;     vertical-align: middle; }  tr td:first-child {     width: 500px;    }   </style> </head> <body>  <table>     <tr>         <td>person's name</td>         <td id="t1" class="box hvr-shutter-out-horizontal"></td>     </tr>     <tr>         <td>someone elses name</td>         <td class="box hvr-shutter-out-horizontal"></td>     </tr>  <script>     $( document ).ready(function() {         for(i=1;i<100;i++){             if(localstorage.getitem('t'+i) == 'y'){                 //$("#t"+i).addclass('arrived');             }         }     });      var taptime = 0;     $('.box').bind('vmousedown vmouseup', function (event) {         if (event.type == 'vmousedown') {             taptime = new date().gettime();             if($(this).hasclass('arrived')){                 //if marked arrived                 $(this).addclass('hvr-shutter-out-horizontal2');                 $(this).addclass('tap');             } else {                 //if not arrived                 $(this).addclass('tap');             }             //$(this).addclass('tap');         } else {             //event.type == 'vmouseup'             //here can check how long `tap` determine do              var duration = (new date().gettime() - taptime);             if (duration > 1000) {                 //this tap-hold                 if($(this).hasclass('arrived')){                     //if marked arrived                  } else {                     $(this).removeclass('tap');                     $(this).removeclass('hvr-shutter-out-horizontal');                     $(this).addclass('arrived');                 }                    localstorage.setitem('t1','y');             } else {                 //this tap                 $(this).removeclass('tap');             }         }     }); </script>  </body> </html> 

edit: .gif of how behaves, circles around mouse represent mouse being clicked , held down: http://gfycat.com/secondhandslipperyangora

you can see initial animation, filling background green center until whole cell green works fine.

however when click again fill center grey, whole cell turns grey. click causes reverse animation (filling green outside edges inwards). behaviour causing problems.

i behaviour want, grey filling center on third interaction.

here way can this:

<table>       <tr>           <td>person's name</td>           <td id="t1" class="box arrivalindicator"></td>       </tr>       <tr>           <td>someone elses name</td>           <td class="box arrivalindicator"></td>       </tr> </table> 

in css create fillgreen transition , separate fillgray transition:

td {             vertical-align: middle; }  tr td:first-child {     width: 500px;      padding: 20px; }     .box {   width: 200px;   height: 100%;     }   .arrivalindicator{   position:relative;   background: #e1e1e1;   display:inline-block;   overflow:hidden;   cursor:pointer;  } .arrivalindicator:before{   content:'';   position:absolute;   top:0;left:50%;   width:0;   height:100%;   background:green;   z-index:-1;    -webkit-transition: left 1.05s, width 1.05s, .6s -webkit-transform .2s;    -ms-transition: left 1.05s, width 1.05s, .6s -ms-transform .2s;    transition: left 1.05s, width 1.05s, .6s transform .2s; } .fillgreen:before{   width:100%;   left: 0%;   background:green;   z-index:10; } .fillgray:before{   width:100%;   left: 0%;   background:#e1e1e1;   z-index:10; }  .arrived {     background: green; } 

in code add class of appropriate transition on mousedown, , remove transition classes on mouse up. if long hold apply or remove arrived class maintain background color:

  $('.arrivalindicator').on('vmousedown vmouseup', function (event) {     if (event.type == 'vmousedown') {         taptime = new date().gettime();         if($(this).hasclass('arrived')){             $(this).addclass('fillgray');         } else {             //if not arrived             $(this).addclass('fillgreen');         }     } else {         //event.type == 'vmouseup'         //here can check how long `tap` determine do          var duration = (new date().gettime() - taptime);         if (duration > 1000) {             //this tap-hold             if($(this).hasclass('arrived')){                 //if marked arrived                 $(this).removeclass('arrived');             } else {                 $(this).addclass('arrived');             }                localstorage.setitem('t1','y');         }        //this tap       $(this).removeclass('fillgray');       $(this).removeclass('fillgreen');     }            }); 

demo


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -