Skip to content

Instantly share code, notes, and snippets.

Avatar

Ozyr Origame

  • Paris
View GitHub Profile
@Origame
Origame / verticallyCentered.css
Last active Mar 1, 2016
Vertically centered
View verticallyCentered.css
.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%);
}
@Origame
Origame / justify-to-center.css
Created Mar 11, 2016
Horizontally distribute all items
View justify-to-center.css
/* 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 / transitions.css
Created Mar 11, 2016
Apply css transition to all with ease
View transitions.css
/* 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;
}
View border-box.css
/* BORDER-BOX */
.dontMessWithMyPadding{
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@Origame
Origame / search-regex-for-sublime.js
Created Mar 18, 2016
Search regex for Sublime Text
View search-regex-for-sublime.js
//SEARCH REGEX for sublime Text
//Begins with AA and ends with BB:
(?=AA)(.*)(?<=BB)
//After AA and before BB:
(?<=AA)(.*)(?=BB)
@Origame
Origame / setBoxHeight.js
Created Jul 8, 2016
JS - function to set the same height of items on a row
View setBoxHeight.js
/* 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 / setImgSize.js
Last active Sep 30, 2016
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
View setImgSize.js
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 / tableTransposer.js
Created Oct 25, 2016
Transpose rows & columns in HTML table (for mobile purposes mainly)
View tableTransposer.js
$("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 / resizeTimer.js
Created Oct 25, 2016
Smart resize function
View resizeTimer.js
//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 / isRetinaOrHighDensity.js
Created Nov 18, 2016
Retina & high density detect function
View isRetinaOrHighDensity.js
function isHighDensity(){
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}
function isRetina(){
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >=