JSFiddle

  • Keyup Textare Example

    http://stackoverflow.com/questions/43023576/textarea-keypress-not-working/43023698#43023698

    $(document).ready(function(){
      $("#yourcode").keyup(function() {
        alert("I found Hogwarts.");
      });
    });
  • Pure Javascript Toggle Function

    Specific use case instantiation

    function toggleEdit(trigger, content){
    
    	var trigger = document.getElementById(trigger);
      var content = document.getElementById(content);
      var activeContent = 'editing';
      var activeTrigger = 'editing-active ...
  • Pure Javascript Dynamic Toggle Function

    Instantiation by classes

    function toggleEdit(children, editables){
    
      var children = document.querySelectorAll(children);
      var editables = document.querySelectorAll(editables);
      
      for(var i=0; i< children ...
  • Vue.js - Simple Event Counter

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

    new Vue({
    
    	el: '#app',
        data: {
    		count: 0
        },
        methods: {
        	updateCount: function() {
            	this.count += 1;
            }
        }
    
    });
  • Vue.js - Simple event handling #9 is the latest revision

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

    new Vue({
    
    	el: '#app',
        methods: {
        	handleIt: function() {
                alert('Handled');
            },
            doSomething: function() {
            	alert('Something');
    		}
        }
    
    });
  • Vue.js Simple Databinding

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

    new Vue({
    
    	el: '#app',
        data: {
        	message: 'Hello World!'
        }
    
    });
  • Vue.js show

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

    new Vue({
    
        el: '#app',
        data: {
    
            message: ''
    
        }
    
    });
    
  • Re-order HTML blocks using CSS3 - CSS Table Property

    Re-order HTML blocks using CSS3 - CSS Table Property

    <div id="example">
        <div id="block-1">First</div>
        <div id="block-2">Second</div>
        <div id="block-3">Third</div>
    </div>
  • Re-order HTML blocks using CSS3 - Flexbox #11 is the latest revision

    Re-order HTML blocks using CSS3 - Flexbox

    <div id="flex">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>
  • Re-order HTML blocks using CSS3 - Flexbox FlexFlow

    Re-order HTML blocks using CSS3 - Flexbox FlexFlow

    <div class="container">
        <div class="first">first</div>
        <div class="second">second</div>
    </div>