Notes by James
Displaying notes 1 - 10
Created by James on January 16, 2013 19:57:11
Last update: January 16, 2013 19:59:26
This is handy for looking at compressed js files:
http://jsbeautifier.org/
works pretty well.
Created by James on November 01, 2012 13:51:42
Last update: November 01, 2012 13:51:42
One way to vertically center a line of text in a container div is to set line-height to be the same as the height of the container. But that requires specifying line-height in pixels. This technique avoids that.
<!doctype html>
<html>
<head>
<style typ...
Created by James on October 19, 2012 09:50:08
Last update: October 19, 2012 09:50:08
Use window.location.hash to get the page fragment identifier in the URL. For example, if the URL is:
http://www.mysite.com/#frag1
window.location.hash is " #frag1 ".
Created by James on September 21, 2012 12:18:10
Last update: September 21, 2012 12:23:07
When one element overlaps another, which one gets the event when you click on it? The top one, of course! Not so for IE. If the top element is transparent, the click falls through on areas in the bottom element where there's "content".
Try the simple HTML below. When you click on the letter "A", the bottom DIV gets the event in IE.
<!doctype html>
<html>
<head>
<style ...
There's a CSS property pointer-events which controls click through behavior in case of overlay, but it doesn't have any effect in IE.
Created by James on September 20, 2012 15:08:15
Last update: September 21, 2012 11:55:58
The idea is simple: duplicate the input field and position one on top of the other. The top one will take the input, while the bottom one will serve the placeholder. The top one will have a transparent background so the value of the placeholder field will show through. The placeholder field is disabled so that it's value is not submitted with the form. Here's the code:
(function($) { $.fn.placeholder = function(... But in practice, it's tricky. Notice that I used 'background-color': 'rgba(255, 255, 255, 0)' for the background transparency. This is because 'background-color': 'transparent' does not work for IE9. Even though the input is on top of the placeholder, the placeholder always gets the event when you click on the field. That might be...
Created by James on September 20, 2012 10:22:58
Last update: September 20, 2012 10:22:58
This is a simple jQuery placeholder plugin that can be used on both text and password fields. I've been using the Mathias Bynens plugin for a while and it has been quite useful. I decided to create my own plugin because of two problems: The interaction between the Mathias Bynens plugin and jQuery validation can be quite intricate. Placeholder text is lost once the input field gets focus. This can be a problem when I want to auto-focus on a field, say user id on a log in form. I must mention that although it worked for me, this plugin has not been thoroughly tested. Feel free to provide feedback if you see problems.
(function($) { $.fn.placeholder = function(... Since it uses absolute positioning, you...
Created by James on September 18, 2012 20:46:12
Last update: September 18, 2012 20:46:12
There's no easy way in jQuery (like one or two lines) to copy all CSS properties (inline, inherited, native, etc.) from one element to another. Such as, create a <p> element that has the same CSS as an existing <div> element.
Upshots provides a simple jQuery plugin that seemed to work. I copy the code below.
$.fn.copyCSS = function(source){
var dom = ...
Created by James on September 18, 2012 20:35:10
Last update: September 18, 2012 20:35:10
The " border-width " CSS property returns empty string:
$('input').css('border-width'); // returns ""
You have to give a specific border in order to get the width:
$('input').css('border-left-width');
$('inp...
Created by James on September 18, 2012 12:14:13
Last update: September 18, 2012 20:28:46
This is an example of IIFE (Immediately Invoked Function Expression) from jQuery Plugins Authoring :
(function( $ ) {
$.fn.myPlugin = function() {...
Created by James on August 27, 2012 10:01:07
Last update: August 27, 2012 10:01:07
Some ways to get the tag name of a jQuery object:
Use the prop() function:
$('<a/>').prop('tagName');
$('<a/>').prop('node...
Get tagName from the DOM element:
$('<a/>').get(0).tagName
nodeName from the DOM element seems to do the same:
$('<a/>').get(0).nodeName;
Use the is() function:
$('<a/>').is('A');
$('<a/>').is('a');
