JSFiddle

  • Notification with Mercurius #4 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var token = document.getElementById('token');
    var message = document.getElementById('message');
    var button = document.getElementById('notify');
    
    function sendMessage() {
      fetch('https://mozcurius ...
  • Simple Service Worker Example #40 is the latest revision

    https://github.com/matthew-andrews/serviceworker-simple

    // https://jsfiddle.net/zalun/d80qawf9/    
    window.addEventListener('message', function () {
        debugger;
    });
    
    function log() {
        var el = document.createElement('div');
        el.innerHTML = Array ...
  • Simple Service Worker #7 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    console.log('https://jsfiddle.net/zalun/d80qawf9/');
    
    this.addEventListener('install', function oninstallHandler(event) {
      console.info('\nService worker installed, oninstall fired ...
  • Basic Worker Example #7 is the latest revision

    https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

    // zalun/5md9tnys
    
    var first = document.querySelector('#number1');
    var second = document.querySelector('#number2');
    
    var result = document.querySelector('.result');
    
    if (window.Worker ...
  • Basic Worker #2 is the latest revision

    https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

    onmessage = function(e) {
      console.log('Message received from main script');
      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
      console ...
  • Load a fiddle from MDN

    Mootools 1.3 (compat), HTML, CSS, JavaScript

    <h2>Load a fiddle from MDN</h2>
    <form method='post' action='//jsfiddle.net/api/mdn/?utm_source=mdn&utm_medium=code-sample&utm_campaign=external-samples' target='check'>
        <p><input type='submit'/> - fiddle will be loaded in different browser window/tab.</p>
        <textarea name='html'><p id="red">It's magic!</p>
    <p><a href="http://doc.jsfiddle.net/api/post.html">Documentation</a></p></textarea>
        <textarea name='js'>document.getElementById ...</textarea></form>
  • Gaia icon font #7 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <section> <a href="#2g" id="2g" data-icon="2g"></a>
     <a href="#3g" id="3g" data-icon="3g"></a>
     <a href="#4g" id="4g" data-icon="4g"></a>
     <a href="#accessibility" id="accessibility" data-icon="accessibility"></a>
     <a href="#add-contact" id="add-contact" data-icon="add-contact"></a>
     <a href="#add" id="add" data-icon="add"></a>
     <a href="#airplane" id="airplane" data-icon="airplane"></a>
     <a href="#alarm-clock" id="alarm-clock" data-icon="alarm-clock"></a>
     <a href="#alarm-stop" id="alarm-stop" data-icon="alarm-stop"></a>
     <a href="#alarm" id="alarm" data-icon="alarm"></a>
     <a href="#album" id="album" data-icon="album"></a>
     <a href="#all-day" id="all-day" data-icon="all-day"></a>
     <a href="#arrow-back" id="arrow-back" data-icon="arrow-back"></a>
     <a href="#arrow-forward" id="arrow-forward" data-icon="arrow-forward"></a>
     <a href="#artist" id="artist" data-icon="artist"></a>
     <a href="#attachment" id="attachment" data-icon="attachment"></a>
     <a href="#back-light" id="back-light" data-icon="back-light"></a>
     <a href="#back" id="back" data-icon="back"></a>
     <a href="#battery-0" id="battery-0" data-icon="battery-0"></a>
     <a href="#battery-1" id="battery-1" data-icon="battery-1"></a>
     <a href="#battery-10" id="battery-10" data-icon="battery-10"></a>
     <a href="#battery-2" id="battery-2" data-icon="battery-2"></a>
     <a href="#battery-3" id="battery-3" data-icon="battery-3"></a>
     <a href="#battery-4" id="battery-4" data-icon="battery-4"></a>
     <a href="#battery-5" id="battery-5" data-icon="battery-5"></a>
     <a href="#battery-6" id="battery-6" data-icon="battery-6"></a>
     <a href="#battery-7" id="battery-7" data-icon="battery-7"></a>
     <a href="#battery-8" id="battery-8" data-icon="battery-8"></a>
     <a href="#battery-9" id="battery-9" data-icon="battery-9"></a>
     <a href="#battery-charging" id="battery-charging" data-icon="battery-charging"></a>
     <a href="#battery-unknown" id="battery-unknown" data-icon="battery-unknown"></a>
     <a href="#bluetooth-a2dp" id="bluetooth-a2dp" data-icon="bluetooth-a2dp"></a>
     <a href="#bluetooth-circle" id="bluetooth-circle" data-icon="bluetooth-circle"></a>
     <a href="#bluetooth-transfer-circle" id="bluetooth-transfer-circle" data-icon="bluetooth-transfer-circle"></a>
     <a href="#bluetooth-transfer" id="bluetooth-transfer" data-icon="bluetooth-transfer"></a>
     <a href="#bluetooth" id="bluetooth" data-icon="bluetooth"></a>
     <a href="#brightness" id="brightness" data-icon="brightness"></a>
     <a href="#browsing" id="browsing" data-icon="browsing"></a>
     <a href="#bug" id="bug" data-icon="bug"></a>
     <a href="#calendar" id="calendar" data-icon="calendar"></a>
     <a href="#call-bluetooth" id="call-bluetooth" data-icon="call-bluetooth"></a>
     <a href="#call-emergency" id="call-emergency" data-icon="call-emergency"></a>
     <a href="#call-forwarding" id="call-forwarding" data-icon="call-forwarding"></a>
     <a href="#call-hang-up" id="call-hang-up" data-icon="call-hang-up"></a>
     <a href="#call-hold" id="call-hold" data-icon="call-hold"></a>
     <a href="#call-incoming" id="call-incoming" data-icon="call-incoming"></a>
     <a href="#call-merge" id="call-merge" data-icon="call-merge"></a>
     <a href="#call-missed" id="call-missed" data-icon="call-missed"></a>
     <a href="#call-outgoing" id="call-outgoing" data-icon="call-outgoing"></a>
     <a href="#call-reversed" id="call-reversed" data-icon="call-reversed"></a>
     <a href="#call-ringing" id="call-ringing" data-icon="call-ringing"></a>
     <a href="#call" id="call" data-icon="call"></a>
     <a href="#callback-emergency" id="callback-emergency" data-icon="callback-emergency"></a>
     <a href="#camera" id="camera" data-icon="camera"></a>
     <a href="#change-wallpaper" id="change-wallpaper" data-icon="change-wallpaper"></a>
     <a href="#clear-input" id="clear-input" data-icon="clear-input"></a>
     <a href="#close" id="close" data-icon="close"></a>
     <a href="#compose" id="compose" data-icon="compose"></a>
     <a href="#contact-find" id="contact-find" data-icon="contact-find"></a>
     <a href="#contacts" id="contacts" data-icon="contacts"></a>
     <a href="#crashed" id="crashed" data-icon="crashed"></a>
     <a href="#crop" id="crop" data-icon="crop"></a>
     <a href="#data" id="data" data-icon="data"></a>
     <a href="#delete" id="delete" data-icon="delete"></a>
     <a href="#developer" id="developer" data-icon="developer"></a>
     <a href="#device-info" id="device-info" data-icon="device-info"></a>
     <a href="#dialpad" id="dialpad" data-icon="dialpad"></a>
     <a href="#dismiss-keyboard" id="dismiss-keyboard" data-icon="dismiss-keyboard"></a>
     <a href="#do-not-track" id="do-not-track" data-icon="do-not-track"></a>
     <a href="#download-circle" id="download-circle" data-icon="download-circle"></a>
     <a href="#download" id="download" data-icon="download"></a>
     <a href="#edge" id="edge" data-icon="edge"></a>
     <a href="#edit-contact" id="edit-contact" data-icon="edit-contact"></a>
     <a href="#edit-image" id="edit-image" data-icon="edit-image"></a>
     <a href="#edit" id="edit" data-icon="edit"></a>
     <a href="#email-forward" id="email-forward" data-icon="email-forward"></a>
     <a href="#email-mark-read" id="email-mark-read" data-icon="email-mark-read"></a>
     <a href="#email-mark-unread" id="email-mark-unread" data-icon="email-mark-unread"></a>
     <a href="#email-move" id="email-move" data-icon="email-move"></a>
     <a href="#email-reply" id="email-reply" data-icon="email-reply"></a>
     <a href="#email" id="email" data-icon="email"></a>
     <a href="#exclamation" id="exclamation" data-icon="exclamation"></a>
     <a href="#expand" id="expand" data-icon="expand"></a>
     <a href="#facebook" id="facebook" data-icon="facebook"></a>
     <a href="#feedback" id="feedback" data-icon="feedback"></a>
     <a href="#find" id="find" data-icon="find"></a>
     <a href="#firefox" id="firefox" data-icon="firefox"></a>
     <a href="#flag" id="flag" data-icon="flag"></a>
     <a href="#flash-auto" id="flash-auto" data-icon="flash-auto"></a>
     <a href="#flash-off" id="flash-off" data-icon="flash-off"></a>
     <a href="#flash-on" id="flash-on" data-icon="flash-on"></a>
     <a href="#focus-locked" id="focus-locked" data-icon="focus-locked"></a>
     <a href="#focus-locking" id="focus-locking" data-icon="focus-locking"></a>
     <a href="#forward-light" id="forward-light" data-icon="forward-light"></a>
     <a href="#forward" id="forward" data-icon="forward"></a>
     <a href="#gesture" id="gesture" data-icon="gesture"></a>
     <a href="#gmail" id="gmail" data-icon="gmail"></a>
     <a href="#grid-circular" id="grid-circular" data-icon="grid-circular"></a>
     <a href="#grid" id="grid" data-icon="grid"></a>
     <a href="#gsm" id="gsm" data-icon="gsm"></a>
     <a href="#hdr-boxed" id="hdr-boxed" data-icon="hdr-boxed"></a>
     <a href="#hdr" id="hdr" data-icon="hdr"></a>
     <a href="#headphones" id="headphones" data-icon="headphones"></a>
     <a href="#help" id="help" data-icon="help"></a>
     <a href="#homescreen" id="homescreen" data-icon="homescreen"></a>
     <a href="#hspa-plus" id="hspa-plus" data-icon="hspa-plus"></a>
     <a href="#hspa" id="hspa" data-icon="hspa"></a>
     <a href="#import-memorycard-circle" id="import-memorycard-circle" data-icon="import-memorycard-circle"></a>
     <a href="#incoming-sms" id="incoming-sms" data-icon="incoming-sms"></a>
     <a href="#info" id="info" data-icon="info"></a>
     <a href="#keyboard-circle" id="keyboard-circle" data-icon="keyboard-circle"></a>
     <a href="#keyboard" id="keyboard" data-icon="keyboard"></a>
     <a href="#languages" id="languages" data-icon="languages"></a>
     <a href="#link" id="link" data-icon="link"></a>
     <a href="#location" id="location" data-icon="location"></a>
     <a href="#lock" id="lock" data-icon="lock"></a>
     <a href="#media-storage" id="media-storage" data-icon="media-storage"></a>
     <a href="#menu" id="menu" data-icon="menu"></a>
     <a href="#messages" id="messages" data-icon="messages"></a>
     <a href="#mic" id="mic" data-icon="mic"></a>
     <a href="#minus" id="minus" data-icon="minus"></a>
     <a href="#moon" id="moon" data-icon="moon"></a>
     <a href="#more" id="more" data-icon="more"></a>
     <a href="#mute" id="mute" data-icon="mute"></a>
     <a href="#nfc" id="nfc" data-icon="nfc"></a>
     <a href="#no-sim" id="no-sim" data-icon="no-sim"></a>
     <a href="#notifications" id="notifications" data-icon="notifications"></a>
     <a href="#o" id="o" data-icon="o"></a>
     <a href="#outgoing-sms" id="outgoing-sms" data-icon="outgoing-sms"></a>
     <a href="#outlook" id="outlook" data-icon="outlook"></a>
     <a href="#pause" id="pause" data-icon="pause"></a>
     <a href="#picture-size" id="picture-size" data-icon="picture-size"></a>
     <a href="#play-circle" id="play-circle" data-icon="play-circle"></a>
     <a href="#play" id="play" data-icon="play"></a>
     <a href="#playlist" id="playlist" data-icon="playlist"></a>
     <a href="#privacy" id="privacy" data-icon="privacy"></a>
     <a href="#recent-calls" id="recent-calls" data-icon="recent-calls"></a>
     <a href="#reload" id="reload" data-icon="reload"></a>
     <a href="#repeat-once" id="repeat-once" data-icon="repeat-once"></a>
     <a href="#repeat" id="repeat" data-icon="repeat"></a>
     <a href="#reply-all" id="reply-all" data-icon="reply-all"></a>
     <a href="#rocket" id="rocket" data-icon="rocket"></a>
     <a href="#rotate" id="rotate" data-icon="rotate"></a>
     <a href="#scene" id="scene" data-icon="scene"></a>
     <a href="#sd-card" id="sd-card" data-icon="sd-card"></a>
     <a href="#search" id="search" data-icon="search"></a>
     <a href="#seek-back" id="seek-back" data-icon="seek-back"></a>
     <a href="#seek-forward" id="seek-forward" data-icon="seek-forward"></a>
     <a href="#select" id="select" data-icon="select"></a>
     <a href="#self-timer" id="self-timer" data-icon="self-timer"></a>
     <a href="#send" id="send" data-icon="send"></a>
     <a href="#settings" id="settings" data-icon="settings"></a>
     <a href="#share" id="share" data-icon="share"></a>
     <a href="#shuffle" id="shuffle" data-icon="shuffle"></a>
     <a href="#signal-0" id="signal-0" data-icon="signal-0"></a>
     <a href="#signal-1" id="signal-1" data-icon="signal-1"></a>
     <a href="#signal-2" id="signal-2" data-icon="signal-2"></a>
     <a href="#signal-3" id="signal-3" data-icon="signal-3"></a>
     <a href="#signal-4" id="signal-4" data-icon="signal-4"></a>
     <a href="#signal-5" id="signal-5" data-icon="signal-5"></a>
     <a href="#signal-roaming" id="signal-roaming" data-icon="signal-roaming"></a>
     <a href="#sim-toolkit" id="sim-toolkit" data-icon="sim-toolkit"></a>
     <a href="#sim" id="sim" data-icon="sim"></a>
     <a href="#skip-back" id="skip-back" data-icon="skip-back"></a>
     <a href="#skip-forward" id="skip-forward" data-icon="skip-forward"></a>
     <a href="#songs" id="songs" data-icon="songs"></a>
     <a href="#sound-max" id="sound-max" data-icon="sound-max"></a>
     <a href="#sound-min" id="sound-min" data-icon="sound-min"></a>
     <a href="#star-empty" id="star-empty" data-icon="star-empty"></a>
     <a href="#star-full" id="star-full" data-icon="star-full"></a>
     <a href="#stop" id="stop" data-icon="stop"></a>
     <a href="#storage-circle" id="storage-circle" data-icon="storage-circle"></a>
     <a href="#storage" id="storage" data-icon="storage"></a>
     <a href="#switch" id="switch" data-icon="switch"></a>
     <a href="#sync" id="sync" data-icon="sync"></a>
     <a href="#tethering" id="tethering" data-icon="tethering"></a>
     <a href="#themes" id="themes" data-icon="themes"></a>
     <a href="#tick-circle" id="tick-circle" data-icon="tick-circle"></a>
     <a href="#tick" id="tick" data-icon="tick"></a>
     <a href="#time" id="time" data-icon="time"></a>
     <a href="#toggle-camera-front" id="toggle-camera-front" data-icon="toggle-camera-front"></a>
     <a href="#toggle-camera-rear" id="toggle-camera-rear" data-icon="toggle-camera-rear"></a>
     <a href="#topup-with-code" id="topup-with-code" data-icon="topup-with-code"></a>
     <a href="#topup" id="topup" data-icon="topup"></a>
     <a href="#twitter" id="twitter" data-icon="twitter"></a>
     <a href="#undo-circular" id="undo-circular" data-icon="undo-circular"></a>
     <a href="#undo" id="undo" data-icon="undo"></a>
     <a href="#unlock" id="unlock" data-icon="unlock"></a>
     <a href="#update-balance" id="update-balance" data-icon="update-balance"></a>
     <a href="#usb" id="usb" data-icon="usb"></a>
     <a href="#user" id="user" data-icon="user"></a>
     <a href="#vibrate" id="vibrate" data-icon="vibrate"></a>
     <a href="#video-mic" id="video-mic" data-icon="video-mic"></a>
     <a href="#video-size" id="video-size" data-icon="video-size"></a>
     <a href="#video" id="video" data-icon="video"></a>
     <a href="#voicemail" id="voicemail" data-icon="voicemail"></a>
     <a href="#wallpaper" id="wallpaper" data-icon="wallpaper"></a>
     <a href="#wifi-1" id="wifi-1" data-icon="wifi-1"></a>
     <a href="#wifi-2" id="wifi-2" data-icon="wifi-2"></a>
     <a href="#wifi-3" id="wifi-3" data-icon="wifi-3"></a>
     <a href="#wifi-4" id="wifi-4" data-icon="wifi-4"></a>
     <a href="#wifi-permissions" id="wifi-permissions" data-icon="wifi-permissions"></a>
    
    </section>
  • Stoper #4 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    
    function stop(event) {
        window.removeEventListener('keypress', stop);
        listen = window.addEventListener('keypress', start, false);
        time.setTime(zero);
        stopBgColor();
        clearInterval(interval);
    }
    
    function ...
  • toLocaleString #294 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var dateString = '2014-07-08';
    var wtf = document.getElementById('wtf');
    var date = new Date(dateString);
    var dateS = date.toLocaleString('pl', {
        'day': 'numeric ...
  • Make non-blocking from blocking #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function asyncalert(content, callback) {
        var div = document.createElement('div');
        var cEl = document.createElement('p');
        cEl.appendChild(document.createTextNode(content));
        var ...