JSFiddle

  • Simple Steps Timeline #3 is the latest revision

    Taken from http://azoom.curvyslider.com/

    <div class="row"><div class="large-12 medium-12 columns">
    		<div class="azoom-steps-wrapper">
    			<div class="azoom-steps jump-steps azoom-steps-margin-bottom azoom-steps-margin-top azoom-transition" data-start_steps="all" data-min-width="960" style="margin-top:160px; margin-bottom:190px; ">
    				<ul class="large-block-grid-5 medium-block-grid-5 small-block-grid-5" style="background:#c5cdd1; color:#c5cdd1;">
    		
    			<li data-step-color="#56ccc8" class="active done" style="background-color: rgb(86, 204, 200);">
    				<div class="step-nav">
    					<i class="icomoon icomoon-icon-previous11 step-back"></i>
    					<i class="icomoon icomoon-icon-next15 step-next"></i>
    				</div>
    				<div class="step-icon steps-noselect" style="background-color: rgb(86, 204, 200);">
    					<span class="number">1</span>
    					<span class="check">
    						<i class="icomoon icomoon-icon-checkmark"></i>
    					</span>
    				</div>
    				<div class="step-details-line" style="background-color: rgb(86, 204, 200);"></div>
    				<div class="step-details">
    					<h3>Download The Package</h3>
    					<p>Go to your Downloads section and download the zip.</p>
    				</div>
    			</li>
    		
    			<li data-step-color="#57d176" class="active done" style="background-color: rgb(87, 209, 118);">
    				<div class="step-nav">
    					<i class="icomoon icomoon-icon-previous11 step-back"></i>
    					<i class="icomoon icomoon-icon-next15 step-next"></i>
    				</div>
    				<div class="step-icon steps-noselect" style="background-color: rgb(87, 209, 118);">
    					<span class="number">2</span>
    					<span class="check">
    						<i class="icomoon icomoon-icon-checkmark"></i>
    					</span>
    				</div>
    				<div class="step-details-line" style="background-color: rgb(87, 209, 118);"></div>
    				<div class="step-details">
    					<h3>Upload The Theme</h3>
    					<p>Unzip downloaded package ...</p></div></li></ul></div></div></div></div>
  • Show Marker on Google Maps from address #2 is the latest revision

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

    var map, marker,
        geocoder = new google.maps.Geocoder(),
        default_geo_latitude_coord = 55.9411086,
        default_geo_longitude_coord = -3.2404886
        ;
        
    function pointOnMap(address) {
      if(address && address.length > 0) {
        geocoder.geocode({
          'address': address
        }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            var latLng = new google.maps.LatLng(
              results[0].geometry.location.lat(),
              results[0].geometry.location.lng()
            );
            map ...
  • Vue - Tasks - Example Template 1

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

    Vue.config.debug = true;
    Vue.component('tasks', {
    	template: '#task-template',
      props: ['tasks'],
      data: function() {
      	return {
        
        }
      }, 
      computed: {
      
      },
      methods: {
      	toggleComplete: function(task) {
        	task ...
  • Vue - Independant Timers #1 is the latest revision

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

    Vue.config.debug = true;
    Vue.component('timer', {
      template: '#timer-template',
      props: [],
      data: function() {
      	return {
          current_timestamp: 0,
          timestamp_interval: null,
          stopped: false
    		};
    	},
    	template ...
  • Vue - Event Listeners - Multiple Listeners #3 is the latest revision

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

    new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
      },
      ready: function() {    
        var that = this;
        
      },
    });
  • Vue - Event Listeners - Multiple Listeners #4 is the latest revision

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

    new Vue({
      el: '#app',
      data: {
        plans: [
        	{ name: 'Enterprise', 'price' : 100 },
          { name: 'Pro', 'price' : 50 },
          { name: 'Personal', 'price' : 10 },
          { name: 'Free ...
  • Vue - Event Listeners - Multiple Listeners #1 is the latest revision

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

    var data = {
      "4": {
        "product_name": "Business Level",
        "product_id": "4",
        "providers": {
          "1": {
            "provider_id": "1",
            "provider_name": "Block Group",
            "criteria": {
              "11": {
                "group_id": "11",
                "group_name ...
  • Vue - Event Listeners - Multiple Listeners #12 is the latest revision

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

    new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
      },
      ready: function() {    
        var that = this;
        
      },
    });
  • Vue - Select -> model #10 is the latest revision

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

    //Vue.config.debug = true;
    new Vue({
      el: '#app',
      data: {
        selected:5,    
    		selectedType: {},
        types: [
          {id: 5,
          name: 'A test name',
          moreData ...
  • Vue - Select -> model #1 is the latest revision

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

    //Vue.config.debug = true;
    new Vue({
      el: '#app',
      data: {
        selected:5,    
    		selectedType: {},
        types: [
          {id: 5,
          name: 'A test name',
          moreData ...