JSFiddle

  • CSS3 Busy Indicator

    Shows how to animate bars to represent a busy indicator using only html and css3

    <div style='font-size: large; text-align: center'>
        <p>Busy getting some data</p>
        <div class='indicator'>
            <div class='bar'></div>
            <div class='bar'></div>
            <div class='bar'></div>
            <div class='bar'></div>
            <div class='bar'></div>
        </div>
    </div>
    
  • What is 'this'?

    Demonstration of the apply function and how it affects the 'this' object.

    (function () {
        //create some vars
        this.foo = 'Click me!';
    
        //some function
        function myFunction() {
            return this.foo;
        }
    
        //get the result element
        var ...
  • Flip CSS Transform

    Hover over a div to reveal additional content using css3 transforms

    <h1>Look at our cool gadgets!</h1>
    
    <div class="container">
        <div class="back">This is something that looks interesting. Hover to see more!</div>
        <div class="over"> <span>This is more interesting content ...</span></div></div>
  • 3D button popout effect

    Shows how to make a button pop out using transforms and translate.

    <p>Hover over the buttons, or tab to focus a button</p>
    <button>Push Me!</button>
    <button>No, Push Me!</button>
    <button>Push Me Instead!</button>
  • Skewer

    Skew box when clicking on it

    (function ($) {
    
        //our plugin startup method
        $.skewer = function (element, options) {
    
            this.options = {};
    
            //store the object as a data item on the ...
  • Flexbox

    Shows how to use flexbox to have a bottom resting div and a content div

    <div id="content">
        <div >
            <div style="height: 1000px">
                Test
            </div>
        </div>
        <div class="floatBottom">
            <button>Some Button</button>
        </div>
        
    </div>
  • Revolving Div

    uses IE 11 transform: perspective to simulate div spinning

    $(document).ready(function () {
        $(".trans").mousedown(function () {
    
            $(".trans").css({
                borderSpacing: 0
            });
    
            $(".trans").animate({
                borderSpacing: 6.28 * 10
            }, {
                duration: 5000,
                step: function ...
  • "New!" Banner

    Displays a red banner over a div at 45deg showing that the content is "new" or whatever you want.

    <div id="feature">
        Some Content
    </div>
  • Drop Menu #22 is the latest revision

    A simple drop down menu using JQuery

    var _expanded;
    var _expandSpeed = 500;
    var _retractSpeed = 350;
    var _dropHeight = 350;
    
    function toggleMenu() {
    
        //check to see if the menu is ...