JSFiddle

  • vue.js loop each example

    vue.js loop each example

    // IMAGES: placeimg.com / lorempixel.com
    // http://lorempixel.com/300/170/sports/
    // https://placeimg.com/300/170/nature
    
    //var objects = {};
    var ...
  • Handlebars each example

    Handlebars each example

    // IMAGES: placeimg.com / lorempixel.com
    // http://lorempixel.com/300/170/sports/
    // https://placeimg.com/300/170/nature
    
    var an_array=[
        {name ...
  • Load WordPress Posts in vue.js

    Load WordPress Posts in vue.js

    'use strict';
    
    var apiURL = '//allotoi.com/wp-json/wp/v2/posts/?_embed&per_page=10&author=';
    
    /**
     * Posts demo with ability to change author
     */
    
    var posts ...
  • Bulma CSS Flex IS ELLIPSIS & FLEX Scroll

    Bulma CSS Flex IS ELLIPSIS & FLEX Scroll

    // elipsis fallback : https://codepen.io/onigetoc/pen/NwwVKJ
    // .line-clamp
    // How To Create Horizontal Scrolling Containers
    // https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6
    
  • Bulma CSS Flex IS ELLIPSIS

    Bulma CSS Flex

    <div class="scrollXLeft">
      <!-- CARD 1 is-pulled-left -->
      <div class="card">
        <div class="card-image">
          <!-- image is-4by3 -->
          <figure class="image is-16by9">
            <img src="http://lorempixel.com/300/170/sports/" alt="Placeholder image">
          </figure>
        </div>
        <div class="card-content">
    
          <div class="content ellipsis is-ellipsis-2">
            Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit ...</div></div></div></!--></div>
  • Ember.js Routing

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

    App = Ember.Application.create();
    
    App.Router.map(function() {
        //first paramater refers to the template
        this.route('home', { path: '/' });
        this.route ...
  • EmberJS Simple Routing Example

    A simple example of EmberJS routing.

    App = Ember.Application.create();
    
    App.Router.map(function() {
        //first paramater refers to the template
        this.route('home', { path: '/' });
        this.route ...
  • Page.js + Handlebars

    jQuery (edge), HTML, CSS, JavaScript

    page('/about', function(){
      renderTemplate("about-template");    
      console.log("About");
    });
    
    page('/user/:id', function(context){
      var userId = context.params.id;     
      renderTemplate("user-template ...
  • Load WordPress Posts in React

    Load WordPress Posts in React

    // FROM: https://codepen.io/krogsgard/pen/NRBqPp
    // Simple: https://codepen.io/onigetoc/pen/MOJNxX
    
    "use strict";
    
    var App = React.createClass ...
  • Add Animation to your Hero Image using animate.css

    Add Animation to your Hero Image using animate.css

    $(document).ready(function(){			
      $('.ct-slick-homepage').on('init', function(event, slick){
        $('.animated').addClass('activate fadeInUp');
      });		
    
      $('.ct-slick-homepage').slick({
        autoplay: true,
        autoplaySpeed: 3000,
        pauseOnHover ...