Programming by Daisy de Miami

jQuery (CDN 3.x)

DaisyDeMiami — 2017-05-20 18:18:52 UTC

jQuery Mobile (CDN)

DaisyDeMiami — 2017-05-20 18:22:07 UTC

Must load jQuery before loading this module.

jQuery UI (CDN)

DaisyDeMiami — 2017-05-20 18:29:28 UTC

Must load jQuery before loading this module.

Web Font Loader (CDN)

DaisyDeMiami — 2017-05-20 18:33:22 UTC

Bootstrap 3 CSS (CDN)

DaisyDeMiami — 2017-05-20 18:37:27 UTC

Bootstrap 3 JavaScript (CDN)

DaisyDeMiami — 2017-05-20 18:40:05 UTC

Must load jQuery before loading this module.

Bootstrap 4 CSS (CDN)

DaisyDeMiami — 2017-05-20 18:48:58 UTC

Bootstrap 4 coming soon.

Bootstrap 4 JavaScript (CDN)

DaisyDeMiami — 2017-05-20 18:50:33 UTC

Bootstrap 4 coming soon.

Fluid Grid with Sticky Footer

DaisyDeMiami — 2017-05-20 18:52:25 UTC

Fluid Grid layout with a sticky footer and columns can have scroll-overflow. Demo: http://cssdesk.com/qr5Hr


    
    
    
    
    
    
    
    
    
    
    

    
    
    
    /* 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;
    }

Simple A-Tag Image

DaisyDeMiami — 2017-05-21 01:09:52 UTC

Turns an a-tag into an image.


   
   



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

Hides and 'Materializes' Object with a Fade-In

DaisyDeMiami — 2017-05-21 01:14:39 UTC

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);

});

Testing jQuery and Make it Non-Conflicting

DaisyDeMiami — 2017-05-21 01:18:40 UTC

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).


jQuery(document).ready(function(){ 

 
   jQuery("#jqtest").click( function() {
      alert("jQuery is working!" );    
   }); 
    
   console.log("jQuery is working!");

});




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

    $("#jqtest").click( function() {
         alert("jQuery is working!");
    });
 

    console.log("jQuery is working!");  
 
});




$(document).ready(function(){

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

});

CDNs

DaisyDeMiami — 2017-05-21 01:56:08 UTC

Hosted Libraries. | Google Developers

jQuery Strict Mode

DaisyDeMiami — 2017-05-21 01:59:55 UTC

Simple line of code for enabling strict mode in JavaScript/jQuery.

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

   

});

Figuring Out NTH Child or Of Type

DaisyDeMiami — 2017-05-21 02:15:44 UTC

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. */
   }

HTML5 Embed Code for SWF Files

DaisyDeMiami — 2017-05-21 02:23:58 UTC

A simple code for embedding a flash SWF file to a page with custom width and height, using HTML5.

Ajax Request and Handler using jQuery & JSfiddle

DaisyDeMiami — 2017-05-21 02:40:33 UTC

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:
Makes an AJAX request & tell it where to grab the data from.
If request has failed, a message will displayed.
If the request was successful, gets the data and then it displays the filtered data.

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


   aRequest = $.ajax({
      type: "POST",
      url: "/echo/html/", 
      data: {
      html: "Test data"
      }
   });



   aRequest.fail(function() {
      console.log("A request has failed.");
      alert("A request has failed.");
    });



 aRequest.done(function(data) {


      var pieceOfData = $(data).filter("#dataId").text();


      console.log( "Here's the data you requested: " + pieceOfData);
      alert( "Here's the data you requested: " + pieceOfData);

   });


});

Pixel to EMs Guide

DaisyDeMiami — 2017-05-21 15:06:28 UTC

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
   */

Sticky Footer

DaisyDeMiami — 2017-05-21 15:18:27 UTC


   
   

   
   




/* 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. */
   }

jQuery hover sprite change

DaisyDeMiami — 2017-05-21 22:48:00 UTC

Demo

 





/* 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;
   }



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

   $('#twitterBird').hover(
      function() {
    $(this).addClass('twitterBird2').removeClass('twitterBird1');

      setTimeout(function() 
{$('#twitterBird').addClass('twitterBird3').removeClass('twitterBird2');
        }, 500); 

      }, function() {
   $(this).addClass('twitterBird4').removeClass('twitterBird3');

      setTimeout(function()
 {$('#twitterBird').addClass('twitterBird1').removeClass('twitterBird4');
      }, 500); 


  });

});