JSFiddle

  • Sass Colour Palette Guide #1 is the latest revision

    Lighten and Darken Functions for colour palettes - Blue, Red, Shades

    <section class="container">
      <div class="col-1">
        <p>1</p>
      </div>
      <div class="col-2">
        <p>2</p>
      </div>
      <div class="col-3">
        <p>3</p>
      </div>
      <div class="col-4">
        <p>4</p>
      </div>
      <div class="col-5">
        <p>5</p>
      </div>
    </section>
    <section class="container-two">
      <div class="col-6">
        <p>6</p>
      </div>
      <div class="col-7">
        <p>7</p>
      </div>
      <div class="col-8">
        <p>8</p>
      </div>
      <div class="col-9">
        <p>9</p>
      </div>
      <div class="col-10">
        <p>10</p>
      </div>
    </section>
    
    <section class="container-three">
      <div class="col-11">
        <p>11</p>
      </div>
      <div class="col-12">
        <p>12</p>
      </div>
      <div class="col-13">
        <p>13</p>
      </div>
      <div class="col-14">
        <p>14</p>
      </div>
      <div class="col-15">
        <p>15</p>
      </div>
      <div class="col-16">
        <p>16</p>
      </div>
      <div class="col-17">
        <p>17</p>
      </div>
      <div class="col-18">
        <p>18</p>
      </div>
      <div class="col-19">
        <p>19</p>
      </div>
      <div class="col-20">
        <p>20</p>
      </div>
    </section>
    
  • Sass Colour Palette Guide

    Lighten and Darken Functions for colour palettes - Blue, Red, Shades

    <section class="container">
      <div class="col-1">
        <p>1</p>
      </div>
      <div class="col-2">
        <p>2</p>
      </div>
      <div class="col-3">
        <p>3</p>
      </div>
      <div class="col-4">
        <p>4</p>
      </div>
      <div class="col-5">
        <p>5</p>
      </div>
    </section>
    <section class="container-two">
      <div class="col-6">
        <p>6</p>
      </div>
      <div class="col-7">
        <p>7</p>
      </div>
      <div class="col-8">
        <p>8</p>
      </div>
      <div class="col-9">
        <p>9</p>
      </div>
      <div class="col-10">
        <p>10</p>
      </div>
    </section>
    
    <section class="container-three">
      <div class="col-11">
        <p>11</p>
      </div>
      <div class="col-12">
        <p>12</p>
      </div>
      <div class="col-13">
        <p>13</p>
      </div>
      <div class="col-14">
        <p>14</p>
      </div>
      <div class="col-15">
        <p>15</p>
      </div>
      <div class="col-16">
        <p>16</p>
      </div>
      <div class="col-17">
        <p>17</p>
      </div>
      <div class="col-18">
        <p>18</p>
      </div>
      <div class="col-19">
        <p>19</p>
      </div>
      <div class="col-20">
        <p>20</p>
      </div>
    </section>
    
  • You have been destroyed! hahah

    The usual suspects........

    var move = $('nav ul li a');
    var text = "You have been destroyed! ha ha ha..."
    move.on('click', function(index ...
  • Animate Logo - Stack Overflow Q'n #14 is the latest revision

    Animate Logo - Stack Overflow Q'n & Answered - http://stackoverflow.com/questions/42424862/how-to-make-my-logo-js-animation-scale-like-image-logo-on-website

     // Create an array to store our particles
     var particles = [];
    
     // The amount of particles to render
     var particleCount = 10;
    
     // The maximum ...
  • Table aria-expanded="true" or False Based on Event

    toggle aria-expanded="false"

    $('.radio-table-responsive .details-row .collapse').on('shown.bs.collapse hidden.bs.collapse', function (e) {
            //Find the element with data-toggle="collapsed" data-target= myid ...
  • Background Color Change on Scroll - Opacity change - Window Object

    jQuery 1.9.1, HTML, CSS, JavaScript

    $(function() {
    
      var $animate = $('.backgrounds li');
      var $window = $(window);
    
      function check_if_in_view() {
        var window_height = $window.height();
        var window_top_position = $window.scrollTop();
        var window_bottom_position ...
  • Table aria-expanded="true" or False Click function #3 is the latest revision

    toggle aria-expanded="false"

    $("tr.table-row").click(function() {
      if ($(this).attr('aria-expanded') === 'true') {
        $(this).attr('aria-expanded', 'false');
    
      } else {
        $(this).attr('aria-expanded', 'true');
      }
    });
    
  • Table aria-expanded="true" or False Click function

    toggle aria-expanded="false"

    $("tr.table-row").click(function() {
      if ($(this).attr('aria-expanded') === 'true') {
        $(this).attr('aria-expanded', 'false');
    
      } else {
        $(this).attr('aria-expanded', 'true');
      }
    });
    
  • Date Function - Update P (DOM)

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

    function displayDate(){
    		document.getElementById("demo").innerHTML=Date();
    	}
  • JavaScript Create P Or Div Increment - Buttons From Array

    JS Create P Or Div From Array with Increment- Alert Value - Clickable Buttons with Sass

    document.body.innerHTML = '';
    
    var nums = [1, 2, 3];
    
    for (var i = 0; i < nums.length; i++) {
    
      var num = nums[i ...