Skip to content

Instantly share code, notes, and snippets.

View Origame's full-sized avatar

Ozyr Origame

  • Paris
View GitHub Profile
@Origame
Origame / resizeTimer.js
Created October 25, 2016 09:16
Smart resize function
//https://css-tricks.com/snippets/jquery/done-resizing-event/
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Run code here, resizing has "stopped"
@Origame
Origame / tableTransposer.js
Created October 25, 2016 09:06
Transpose rows & columns in HTML table (for mobile purposes mainly)
$("table").each(function() {
if ( !$(this).hasClass("reverted") ) {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td, th").each(function(){
i++;
if(newrows[i] === undefined) {
newrows[i] = $("<tr></tr>");
@Origame
Origame / setImgSize.js
Last active September 30, 2016 07:34
JS function to manage CSS classes to set [width 100%; height auto;] or [height: 100%; width: auto;] on images depending on their natural ratio and their container size
setImgSize: function() {
// Get containers size Height and Width)
var containerH = $('.myContainer').height();
var containerW = $('.myContainer').width();
// Get images natural size and calculate ratio:
// if image is wider than the container, class "wide" sets height to 100% and width to auto
// otherwise, class "tall" sets width to 100% and height to auto
$('.image').each(function(){
var thisImg = $(this);
@Origame
Origame / setBoxHeight.js
Created July 8, 2016 07:32
JS - function to set the same height of items on a row
/* Set boxes height to match the highest box on the same row */
setBoxHeight: function(){
var boxes = $j('.myBoxes', this.$scope); //Selector and scope
var boxesByRow = 3; //Nb of items on a row
//Create each row
for(var i = 0; i < boxes.length; i+=boxesByRow) {
var newRow = boxes.slice(i, i+boxesByRow);
setHeight(newRow);
}
@Origame
Origame / search-regex-for-sublime.js
Created March 18, 2016 09:43
Search regex for Sublime Text
//SEARCH REGEX for sublime Text
//Begins with AA and ends with BB:
(?=AA)(.*)(?<=BB)
//After AA and before BB:
(?<=AA)(.*)(?=BB)
@Origame
Origame / border-box.css
Created March 11, 2016 10:48
Apply border-box
/* BORDER-BOX */
.dontMessWithMyPadding{
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@Origame
Origame / transitions.css
Created March 11, 2016 10:46
Apply css transition to all with ease
/* TRANSITIONS */
.transitionAll{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@Origame
Origame / justify-to-center.css
Created March 11, 2016 10:43
Horizontally distribute all items
/* JUSTIFY TO CENTER */
#subMenu ul{
vertical-align: middle; /*Or anything else*/
width: 100%;
max-width: 960px; /*Allow items to be distributed only in this maximum space, remove if you need all 100% */
margin: 0 auto; /*Center*/
text-align: justify;
}
#subMenu ul:after{
@Origame
Origame / verticallyCentered.css
Last active March 1, 2016 10:39
Vertically centered
.verticallyCentered{
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}