Skip to content

Instantly share code, notes, and snippets.

Ozyr Origame

  • Paris
Block or report user

Report or block Origame

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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 >=
You can’t perform that action at this time.