working on it ...

Filters

Explore Public Snippets

Sort by

Found 3 snippets

    public by zer00ne  2655  4  5  0

    Single Event Handler for Multiple Elements

    addEventListener to an ancestor element of multiple descendant elements
    /*
    HTML should comprise of a group of elements intended 
    to be clicked or any other event trigged by user interaction.
    The parentSelector parameter is any working selector to
    reference an element that is an ancestor to that group of
    elements.
    EX.
    <section id="perentEle">
      <a href="#" id='link1'>Link 1</a>
      <a href="#" id='link2'>Link 2</a>
      <a href="#" id='link3'>Link 3</a>
    </section>
    */
    var parentEle = document.querySelector(parentSelector);
    
    parentEle.addEventListener('click', testFunc, false);
    
    function testFunc(event) {
      event.preventDefault();
      if(event.target !== target.currentTarget) {
        var clickedChild = event.target.id;
        var child = document.getElementById(clickedChild);
        alert('ID: ' + child.id);
      }
      event.stopPropagation();
    }

    public by zer00ne  3478  15  6  0

    Modal Iframe

    http://stackoverflow.com/a/34611625/2813224
    <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Modal Iframe</title>
      <style>
        html,
        body {
          box-sizing: border-box;
          font: 400 16px/1.45 "Verdana";
          height: 100vh;
          width: 100vw;
        }
        *,
        *:before,
        *:after {
          box-sizing: inherit;
          margin: 0;
          padding: 0;
          border: 0 none hlsa(0%, 0, 0, 0);
          outline: 0 none hlsa(0%, 0, 0, 0);
        }
        body {
          position: relative;
          background-color: #111;
          color: #EEE;
          padding: 10px;
        }
        #overlay {
          display: none;
          position: relative;
          left: 0;
          top: 0;
          width: 101vw;
          height: 101vh;
          text-align: center;
          z-index: 1111;
        }
        #overlay section {
          position: relative;
          top: 0;
          left: 0;
          width: 640px;
          height: 360px;
          margin: 10px auto;
          background-color: #fff;
          border: 1px solid yellow;
          border-radius: 8px;
          padding: 15px;
          text-align: center;
        }
        #test {
          position: absolute;
          top: 25%;
          left: 25%;
          width: 128px;
          height: 48px;
          border-radius: 8px;
          border: 1px outset yellow;
          font-size: 1.2rem;
          font-variant: small-caps;
          color: yellow;
          background: #222;
          cursor: pointer;
        }
      </style>
    </head>
    
    <body>
      <button id="test">Test Modal</button>
      <aside id="overlay">
        <section>
          <iframe id="iFrame" name="iFrame" src="http://example.com/" frameborder="0" scrolling="no"></iframe>
        </section>
      </aside>
      <script>
        document.getElementById('test').addEventListener('click', modal, false);
    
        function modal() {
          var ov = document.getElementById("overlay");
          ov.style.display = (ov.style.display == "block") ? "none" : "block";
        }
      </script>
    </body>
    
    </html>
    

    public by zer00ne  230363  1  6  1

    DB(store, schema) | Store Data in localStorage

    [FORK][ https://www.snip2code.com/Snippet/217248/object-data-store-----stuff-it-in-yer-cl
      // Local Data
       
    function DB(store, schema) {
          this.store = store;
          if (!localStorage[store] || typeof localStorage[store] == 'undefined') {
              localStorage[store] = JSON.stringify(schema|| {});
          }
          this.setData = function (key, val) {
              var lda = JSON.parse(localStorage[this.store]);
              doUpdate(ldta, key, val);
              localStorage[store] = JSON.stringify(ldta);
          };
          this.getData = function (key) {
              var ldta = JSON.parse(localStorage[this.store]);
              if (key) {
                  return pathGet(ldta, key);
              }
              return ldta;
          };
          this.reset = function (schema) {
              localStorage[this.store] = JSON.stringify(schema || {});
          };
          this.delete = function() {
              localStorage.removeItem(this.store);
          };
          var doUpdate = function (ob, kStr, val) {
              var kpth = keyStr.split('.'),
              i = 0, lstIdx = kpth.length - 1;
              for (;i < lstIdx; ++i) {
                  var key = kpth[i];
                  if (!(key in ob)) {
                      ob[key] = {};
                  }
                  ob = ob[key];
              }
              ob[kpth[lstIdx]] = val;
          };
          var pathGet = function (obj, key, leftOvrs) {
              if ( leftOvrs === undefined ) {
                  leftOvrs = key.split('.');
              }
              var cur = leftOvrs.shift();
              if ( typeof(obj) == 'object' && obj[cur] !== undefined ) {
                  if ( leftOvrs.length === 0 ) {
                      return obj[cur];
                  }
                  else if ( typeof(obj[cur]) == 'object' ) {
                      return arguments.callee(obj[cur], undefined, leftOvrs);
                  }
              }
              return null;
          };
      }
                            

    List Complete ( 3 snippets total )

    • Public Snippets
    • Channels Snippets