RegEx: Get number and unit from a css property string in JavaScript
April 4th, 2011 by jeremychone | No Comments »var numeric = "12px".match(/\d+/); var unit = "12px".match(/\D+$/);
Source: stackoverflow: convert css units
CSS3: Preserve 3D for iOS, iPhone, iPad hardware acceleration
April 4th, 2011 by jeremychone | No Comments »To have the iOS WebKit browser accelerate your html element, put the following css property to it
-webkit-transform-style: preserve-3d;
CSS3: Cool glowing form border all in CSS3
April 2nd, 2011 by jeremychone | No Comments »JavaScript: Aspect (AOP) in JavaScript
March 28th, 2011 by jeremychone | No Comments »Great javascript lib for AOP: jQuery-AOP jQuery-AOP-Reference (just use the jQuery namespace)
before
jQuery.aop.before( {target: String, method: 'replace'},
function(regex, newString) {
alert("About to replace string '" + this +
"' with '" + newString + "' using regEx '" + regex + "'");
}
);
arround
jQuery.aop.around( {target: String, method: 'indexOf'},
function(invocation) {
alert('Searching: ' + invocation.arguments[0] + ' on: ' + this);
return invocation.proceed();
}
);
CSS3: Cool Twitter like Button (3D like)
March 23rd, 2011 by jeremychone | No Comments »The Result:
The HTML:
<a href="#" class="btn"><span>Press this!</span></a>
The CSS:
.btn {
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
-moz-box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
box-shadow:
0 8px 0 #1a74a1,
0 15px 20px rgba(0,0,0,.35);
-webkit-transition: -webkit-box-shadow .2s ease-in-out;
-moz-transition: -moz-box-shadow .2s ease-in-out;
-o-transition: -o-box-shadow .2s ease-in-out;
transition: box-shadow .2s ease-in-out;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family: "cooper-black-std-1", "cooper-black-std-2", Helvetica, Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px rgba(19,65,88,.8);
background: #3194c6;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
background: -moz-linear-gradient(#3194c6, #5bacd6);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
.btn:active {
-webkit-box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
-moz-box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
box-shadow:
0 8px 0 #1a74a1,
0 12px 10px rgba(0,0,0,.3);
}
.btn:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}
Source: Type Study: An All CSS Button
JavaScript: Sort an array of objects
March 13th, 2011 by jeremychone | No Comments »The data:
var myData = new Array();
myData[0] = {FirstName:"John", LastName:"Doe", Age:40};
myData[1] = {FirstName:"Fred", LastName:"Smith", Age:41};
The sort function:
function sortByFirstName(a, b) {
var x = a.FirstName.toLowerCase();
var y = b.FirstName.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
Sorting:
myData.sort(sortByFirstName);
jQuery: How to test if an Object is a jQuery object
February 25th, 2011 by jeremychone | No Comments »if (obj.jquery){
//it is a jquery object (and .jquery is the version)
}else{
//it is not a jquery object
}
source jQuery Forum
iOS: WebKit UIWebView remove tap/click highlight/border with CSS
February 10th, 2011 by jeremychone | No Comments »-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; /* disable text select */ -webkit-touch-callout: none; /* disable callout, image save panel (popup) */ -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
Source: YUIBlog
Git: Ignoring a folder tree except a particular sub-folder
February 7th, 2011 by jeremychone | No Comments »So, this will exclude any sub-folders form a but will include the sub-sub-sub-folder a/b/c and exclude the file a/b/c/file.xml
a/* !b a/b/* !c a/b/c/file.xml
jQuery: Bind and unbind the Esc key
February 4th, 2011 by jeremychone | No Comments »Let’s say you want to allow your dialog boxes to be close when the user press “esc.”
$("body").bind("keyup.myDialog", function(event){
// 27 == "esc"
if (event.which == 27) {
// TODO: close the dialog
// unbind the event
$("body").unbind("keyup.myDialog");
}
});