Janic Beauchemin djanix
djanix
/ css transition fix
Created
July 11, 2013 15:27
css fix when using css transition or filter (element is flashing)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| -webkit-transform: translateZ(0); | |
| backface-visibility: hidden; | |
| -webkit-backface-visibility: hidden; | |
| -moz-backface-visibility: hidden; | |
| -ms-backface-visibility: hidden; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function ($) { | |
| var normalizePostalCode = function (postalCode) { | |
| return postalCode.replace(/[^a-z0-9]/gi, '').toUpperCase(); | |
| }; | |
| var formatPostalCode = function (postalCode) { | |
| var regex = /^([abceghjklmnprstvwxyz][0-9][abceghjklmnprstvwxyz])([0-9][abceghjklmnprstvwxyz][0-9])$/i; | |
| var normalized = normalizePostalCode(postalCode); | |
djanix
/ less -> var in bg-image path
Created
March 19, 2013 18:33
Hot to add a var in a background-image css rule in less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @image-path: "../path/to/img"; | |
| .item { | |
| background: url("@{image-path}/image.png") center center no-repeat; | |
| } |
djanix
/ responsive -> img swap
Last active
December 13, 2015 21:58
mobile -> swap img mobile vs tablet vs desktop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img src="" data-src-desktop="pathTo/imgName.jpg" data-src-tablet="pathTo/imgName_tablet.jpg" data-src-mobile="pathTo/imgName_tablet.jpg" alt="" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-size: 62.5%; /* resets the page font size */ | |
| } | |
| p { | |
| font-size: 0.8em; /* equals 8px */ | |
| font-size: 1.0em; /* equals 10px */ | |
| font-size: 1.6em; /* equals 16px */ | |
| font-size: 2.0em; /* equals 20px */ | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| p { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ///////////////////////////////////////////////////// | |
| XML DOCUMENT EXAMPLE | |
| ///////////////////////////////////////////////////// | |
| <?xml version="1.0"?> | |
| <items> | |
| <item> | |
| <headline>title</headline> | |
| <description>text</description> | |
| <image>content_logo.png</image> | |
| </item> |
djanix
/ js -> convert percent to number
Created
April 13, 2012 17:17
js -> convert percent to number
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function convertPercentToNumber(el) { | |
| if (el.charAt(el.length-1) == '%') { | |
| return el.slice(0, -1)/100*duration; | |
| } else { | |
| return el; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| verticalAlign(yourElement); | |
| function verticalAlign(el) { | |
| var height = el.height(); | |
| var parentHeight = el.parent().height(); | |
| var padding = (parentHeight - height) / 2; | |
| el.css('padding-top', padding); | |
| } |
djanix
/ Label + input vertical align display fix for all browsers
Created
March 21, 2012 14:38
css -> label and input vertical align
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*--------------------------------------------------------------------------- | |
| * Label + input display fix | |
| * Put the input + text inside the label to make it works correctly | |
| *--------------------------------------------------------------------------*/ | |
| label { | |
| display: block; | |
| padding-left: 15px; | |
| text-indent: -15px; | |
| } |