Skip to content

Instantly share code, notes, and snippets.

@NdYAG
NdYAG / SassMeister-input.scss
Created February 20, 2014 09:44
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----
%h1 {
font-size: 2em;
}
%h2 {
font-size: 1.8em;
@NdYAG
NdYAG / A-Pen-by-Simon.markdown
Created February 20, 2014 06:25
A Pen by Simon.
@NdYAG
NdYAG / MakoSample.md
Last active December 27, 2023 06:24
Mako Template Sample

Mako Template Syntax Sample

variable, expression

${x}

${len(list_name)}

${pow(x,2) + pow(y,2)}

Z-index and Background

When use negative z-index, care about background of the z-index stack's tag, and html, body tags' background

A Pen by Simon on CodePen.

License.

@NdYAG
NdYAG / Transparent Bubble.markdown
Last active January 3, 2016 16:09
A Pen by Captain Anonymous.
@NdYAG
NdYAG / getCaretText.js
Created August 3, 2013 06:49
Get the character user input in input[type="text"] bypassing IME
function getCaretPos(input_node) {
return 'selectionStart' in input_node? input_node.selectionStart: Math.abs(document.selection.createRange().moveStart('character', -input_node.value.length))
}
function getCaretText(input_node) {
var pos = getCaretPos(input_node)
if(!pos) return
return input_node.value.substring(pos - 1, pos)
}
$input_node.on('keyup', function() {
dosomething(getCaretText($input_node[0]))
@NdYAG
NdYAG / dabblet.css
Created March 27, 2013 06:29
Untitled
.wrapper {
background: url('http://daix.me/demo/img/reese.jpg') no-repeat fixed;
width: 900px;
height: 600px;
}
.lens {
position: relative;
width: 100px;
height: 100px;
top: 10%;
@NdYAG
NdYAG / $.unparam.js
Created March 6, 2013 08:35
parse document.location.search to obj
$.unparam = function(search) {
var queries = search.split('&')
var retObj = {}
$(queries).each(function(index, query) {
var match = query.match(/([^?&]*)=([^&]*)/i)
if(match) {
retObj[match[1]] = match[2]
}
})
return retObj
@NdYAG
NdYAG / sortList.js
Created January 15, 2013 07:23
drag and sort. require jquery.event.drag-2.0.js
var offsets = [];
var curPos = 0;
$('#list li').each(function(i){
// init : original order
$(this).attr('data-order',i);
$(this).bind('dragstart',function(event){
return $( this ).css({'opacity':.5,'color':'white','border':'1px dashed #ccc'})
.clone().addClass('active')
.insertAfter( this );
@NdYAG
NdYAG / gist:4417587
Created December 31, 2012 05:43
Scalable components 2: dialog. Golden ratio positioned. Usage <div class="dialog">Content goes here</div> scale by set .dialog{ font-size: 120%; }
.dialog {
/* layout */
position: absolute;
top: 38.20%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* presentation */
border: 0.5em solid rgba(0,0,0,0.16);