# data[].attributes.body
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

# data[].attributes.body
Bootstrap 4  coming soon.

# data[].attributes.body
Must load jQuery before loading this module.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

# data[].attributes.body
Must load jQuery before loading this module.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

# data[].attributes.body
Must load jQuery before loading this module.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

# data[].attributes.body
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

# data[].attributes.body
Bootstrap 4  coming soon.

# data[].attributes.body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

# data[].attributes.body
Fluid Grid layout with a sticky footer and columns can have scroll-overflow. Demo: http://cssdesk.com/qr5Hr

<!DOCTYPE html>
    <html>
    <head>
    <link href="home.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="chat_wrapper">
    <div id="chat"></div>
    <div id="users"></div>
    <div class="clear"></div>
    <div id="message"></div>
    </div><!-- Ends Wrapper -->
    </body>
    </html>
    <!-- ************** -->
    /* CSS */
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100%; /* Do not remove:   Gives layout 100% height */
    }
    #chat_wrapper {
    position:relative;
    min-height:100%;
    height:100%; /* Do not remove: Needs to be here so the divs inside wont collaspe */
    width: 100%; /* You can resize the width */
    margin:0 auto;
    background:#CCFF99; /* Please remove later */
    }
    #chat {
    float:left;
    overflow:auto;
    min-height: 90%;
    width: 70%;
    background: #003300; /* Please remove later */
    margin-bottom: -10%; /* This makes the sticky footer visible. */
    }
    #users {
    float:right;
    overflow:auto;
    min-height: 90%;
    width: 30%;
    background:#00CC66; /* Please remove later */
    }
    #message {
    min-height: 10%;
    width: 100%;
    background:#006699;/* Please remove later */
    position: absolute;
    }
    .clear {
    clear:both;
    }

# data[].attributes.headline
Testing jQuery and Make it Non-Conflicting

# data[].attributes.subject
Testing jQuery and Make it Non-Conflicting

# data[].attributes.body
When you want to test to see if jQuery is working, plus two different examples on how to write jQuery so that it will not conflict with other JavaScript-based libraries. Then an example of the shorthand way of writing jQuery (which I would not get into the habit of. It's not worth the headaches you'll run into when working with legacy apps or a CMS).

<!-- Example 1:
Non-Conflicting jQuery -->
jQuery(document).ready(function(){

<!-- Option 1: Add the jqtest ID in your html to the link/a-tag of your choice and then click it for an alert. -->
   jQuery("#jqtest").click( function() {
      alert("jQuery is working!" );
   });
<!-- Option 2: Send a message to the console but the browser must support
console.log(). -->
   console.log("jQuery is working!");

});

<!-- ************** -->

<!-- Example 2: Non-Conflicting jQuery -->
jQuery(document).ready(function($) {

<!-- Option 1: Add the jqtest ID in your html to the link/a-tag of your choice and then click it for an alert. -->
    $("#jqtest").click( function() {
         alert("jQuery is working!");
    });

<!-- Option 2: Send a message to the console but the browser must support console.log(). -->
    console.log("jQuery is working!");

});

<!-- ************** -->

<!--This is the shorthand way to write jQuery although it might conflict with other libraries.This is just to show the difference. -->
$(document).ready(function(){

   $("#jqtest").click( function() {
      alert("jQuery might now conflict with other libraries!");
   });

});

# data[].attributes.headline
Hides and 'Materializes' Object with a Fade-In

# data[].attributes.subject
Hides and 'Materializes' Object with a Fade-In

# data[].attributes.body
Hides object with the materialize ID and makes it visible again while giving it a smooth fade-in.

jQuery(document).ready(function($){

 $('#materialize').hide().css({visibility: 'visible'}).fadeIn(3000);

});

# data[].attributes.body
Demo

<!-- HTML -->
<!-- The Class is set to the default sprite in case Javascript is disabled. -->
<a id="twitterBird" class="twitterBird1"></a>

<!-- ************** -->

/* CSS */
   #twitterBird {
      display: block;
      width: 150px; /* Change as needed. */
      height: 150px; /* Change as needed. */
   }
   .twitterBird1 {
      /* Default Sprite. */
      background: url('http://minimalmonkey.com/lab/css3-animations/twitter-bird-sprite.png') 0px 0px;
   }
   .twitterBird2 {
      background: url('http://minimalmonkey.com/lab/css3-animations/twitter-bird-sprite.png') -150px 0px;
   }
  .twitterBird3 {
      background: url('http://minimalmonkey.com/lab/css3-animations/twitter-bird-sprite.png') -300px 0px;
   }
   .twitterBird4 {
      background: url('http://minimalmonkey.com/lab/css3-animations/twitter-bird-sprite.png') -450px 0px;
   }

<!-- ************** -->

<!-- JavaScript/jQuery -->
jQuery(document).ready(function($) {

   $('#twitterBird').hover(
      function() {
<!-- Sets to a transition sprite. -->    $(this).addClass('twitterBird2').removeClass('twitterBird1');

      setTimeout(function()
<!-- In half a second, changes transition sprite to desired sprite and stays there.-->{$('#twitterBird').addClass('twitterBird3').removeClass('twitterBird2');
        }, 500);
<!-- 500 = Half a
second. -->
      }, function() {
<!-- Sets to desired sprite when mouse leaves. -->   $(this).addClass('twitterBird4').removeClass('twitterBird3');

      setTimeout(function()
<!-- In half a second, changes transition sprite to desired sprite and stays there --> {$('#twitterBird').addClass('twitterBird1').removeClass('twitterBird4');
      }, 500);
<!-- 500 = Half a
second. -->

  });

});

# data[].attributes.headline
Ajax Request and Handler using jQuery & JSfiddle

# data[].attributes.subject
Ajax Request and Handler using jQuery & JSfiddle

# data[].attributes.body
This is how to make an Ajax request using jQuery. This code is meant to be tested in JSfiddle, however it can easily be adapted for anyone's needs.
Code does:

1. Makes an AJAX request & tell it where to grab the data from.

2. If request has failed, a message will displayed.

3. If the request was successful, gets the data and then it displays the filtered data.

jQuery(document).ready(function($){
   var aRequest;

<!-- Makes an AJAX request. -->
   aRequest = $.ajax({
      type: "POST",
      url: "/echo/html/", <!-- Change this to desired path. This is for testing ajax in JSfiddle. --><!-- This data section is only used for testing. remove once url has been changed. -->
      data: {
      html: "<div id='dataId'><p>Test data</p></div>"
      }
   });


<!-- Good place to tell the user to try again or you got some debugging to do. -->
   aRequest.fail(function() {
      console.log("A request has failed.");
      alert("A request has failed.");
    });


<!-- Handles all the data coming in. -->
 aRequest.done(function(data) {

<!-- Finds certain id plus what it contains as plain text. -->
      var pieceOfData = $(data).filter("#dataId").text();

<!-- Displays the filtered data back to you. -->
      console.log( "Here's the data you requested: " + pieceOfData);
      alert( "Here's the data you requested: " + pieceOfData);

   });


});

# data[].attributes.body
Quick way of figuring out the numbers that go into the nth-child or nth-of type CSS formula.

ul li:nth-child(Yn+X) {color: #000;} X = the number that is targeted when the code first runs. Ex: you want the 4th li to be the first to have this code (X = 4). Y = count the number of li after, X, including the next one to be affected. Ex: you want the 7th li to the next affected, that's a difference of 3 (Y = 3). This also means that after 7, the sequence will be 10, 13, 16, 19, 21, etc.

/* CSS */
   ul li:nth-child(3n+4){
      color: #F00;
      /* Affects li 4, 7, 10, 13, 16, 19, 21, etc. */
   }

# data[].attributes.body
Simple line of code for enabling strict mode in JavaScript/jQuery.

jQuery(document).ready(function($){
   "use strict";

   <!-- insert desired code here. -->

});

# data[].attributes.body
Hosted Libraries. | Google Developers

# data[].attributes.body
A simple code for embedding a flash SWF file to a page with custom width and height, using HTML5.

<!-- Replace "FILE" with desired filename. -->
<embed src="swfs/FILE.swf" width="800px" height="600px"/>

# data[].attributes.body
Turns an a-tag into an image.

<!-- HTML -->
   <a href="www.YOUR-URL.com" class="atagimg">
   </a>

<!-- ************** -->

/* CSS */
   a.atagimg {
      background:
      url(img_url.png) no-repeat;
       width: 167px;
       height: 126px;
       display: block;
       border: 0;
   }

# data[].attributes.body
By default the body font-size is 16px and this code makes converting pixels to ems easier. This may conflict with Bootstrap's CSS library.

/* CSS */
   body {
      font-size: 62.5%;
      /* Sets base font-size to 10px */
   }

   /* By making base font-size 10px, it makes calculating pixels to ems easier.

   Example:
   10px = 1em
   12px = 1.2em
   14px = 1.4em
   16px = 1.6em
   18px = 1.8em
   20px = 2em
   24px = 2.4em
   26px = 2.6em
   28px = 2.8em
   36px = 3.6em
   48px = 4.8em
   72px = 7.2em
   100px = 10em
   150px = 15em
   500px = 50em
   1,000px = 100em
   */

# data[].attributes.body
<!-- HTML -->
   <div id="content">
   </div><!-- end content -->
   <footer id="sticky">
   </footer><!-- end footer -->

<!-- ************** -->

/* CSS */
   #sticky {
      height: 60px;
      /* Change the height as needed. Percents work as well but then make sure to add a fixed min-height size. */
      width: 100%;
      position: fixed;
      bottom: 0;
      background: #F00;
      /* emove background color later. */
   }