Javascript fun

FloatVsDisplay.css

div{
    width: 50px;
    height: 50px;
}

.inline{
    display: inline-block;
    background: black;
    color: white;
}

.flot{
    float: left;
    background: gray;
    margin-right: 4px;
    color: white;
}

FloatVsDisplay.html

<div class="inline">1</div>
<div class="inline">2</div>
<div class="inline">3</div>
<div class="inline">4</div>
<div class="inline">5</div>
<hr/>
<div class="flot">1</div>
<div class="flot">2</div>
<div class="flot">3</div>
<div class="flot">4</div>
<div class="flot">5</div>

jQueryEach.html

<div id="1" class="item"></div>
<div id="2" class="item"></div>
<div id="3" class="item"></div>
<div id="4" class="item"></div>
<div id="5" class="item"></div>
<div id="6" class="item"></div>

jQueryEach.js

$(document).ready(function(){
    $('.item').each(function (index, item){
        $('body').append("item: " + item.id + "</br>");
    });
});

StackingDiv.css

div{
    width: 100px;
    height: 100px;
    padding: 10px;
    text-align: center;
    display: inline-block;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.base{
    background: gray;
}

.top{
    background: black;
    color: white;
}

.overlapping{
    -webkit-transform: translate(-100%,0);
    -moz-transform: translate(-100%,0);
    -o-transform: translate(-100%,0);
    transform: translate(-100%,0);
}
 

StackingDiv.html

<div class="base">
    I am done
</div>
<div class="top">
    I am over this
</div>
<br>
<button id="toggle">Toggle</button>

StackingDiv.js

$("#toggle").click(function(){
    $(".top").toggleClass("overlapping");
});

StringContains.js

String.prototype.contains = String.prototype.contains || function (item, caseSensitive) {
    if(caseSensitive)
      return (this.indexOf(item) > -1);
    return (this.toUpperCase().indexOf(item.toUpperCase()) > -1);
};