Skip to content

Instantly share code, notes, and snippets.

@rizowski
Last active August 29, 2015 14:01
Show Gist options
  • Save rizowski/9021f53b6f9df69a7526 to your computer and use it in GitHub Desktop.
Save rizowski/9021f53b6f9df69a7526 to your computer and use it in GitHub Desktop.
Javascript fun
div{
width: 50px;
height: 50px;
}
.inline{
display: inline-block;
background: black;
color: white;
}
.flot{
float: left;
background: gray;
margin-right: 4px;
color: white;
}
<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>
<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>
$(document).ready(function(){
$('.item').each(function (index, item){
$('body').append("item: " + item.id + "</br>");
});
});
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);
}
<div class="base">
I am done
</div>
<div class="top">
I am over this
</div>
<br>
<button id="toggle">Toggle</button>
$("#toggle").click(function(){
$(".top").toggleClass("overlapping");
});
String.prototype.contains = String.prototype.contains || function (item, caseSensitive) {
if(caseSensitive)
return (this.indexOf(item) > -1);
return (this.toUpperCase().indexOf(item.toUpperCase()) > -1);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment