Recent Notes
Displaying keyword search results 1 - 10
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 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 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 Captain on November 22, 2010 04:34:37
Last update: July 22, 2012 20:36:26
HDTV modeline example:
1920x1080 148.5 1920 2008 2052 2200 1080 1084 1088...
MythTV modeline database: http://www.mythtv.org/wiki/Modeline_Database
<!DOCTYPE html>
<html>
<head>
<style ...
Reference:
Custom Resolutions on Intel Graphics
Created by Fang on February 21, 2012 20:54:23
Last update: February 21, 2012 20:57:57
Tomcat gzip compression filter can be turned on with " compression=on " in server.xml :
<Connector port="8080" protocol="HTTP/1.1"
...
The default compressed MIME types are: text/html,text/xml,text/plain .
It would be nice to add other types:
<Connector
port="8080"
protocol="HTT...
Created by James on January 11, 2011 22:08:26
Last update: February 03, 2012 11:23:25
By default Firefox puts a dotted line box around the link or button label when you click them. Sometimes it's annoying and makes your sexy buttons look ugly. You can get rid of the dotted lines for links with outline:none in CSS, but that doesn't work for buttons.
<!doctype html>
<html>
<head>
<style t...
For buttons you need " button::-moz-focus-inner { border: 0; } ":
<!doctype html>
<html>
<head>
<style t...
I've also seen this:
/* get rid of those system borders being generated...
For more information :
Remove Button Focus Outline Using CSS
Created by James on January 26, 2012 21:23:56
Last update: January 26, 2012 21:23:56
In an HTML page, elements can overlap because of position styles. When there's an overlap, elements coming later in the HTML code are displayed on the top. This can be altered by specifying z-index in the CSS. Elements with higher z-index are placed on the top.
However , z-index only works for elements that are not static positioned. Static positioned elements are always at the bottom compared to relative , fixed and absolute positioned elements.
This is a test page:
<!DOCTYPE html>
<html>
<head>
<style t...
Effects of z-index can be tested by adding it to the elements, for example:
<div id="bg" class="big" style="z-index: 3"></div>...
Created by zhidao on January 26, 2012 20:37:45
Last update: January 26, 2012 20:37:45
There are 4 positioning styles in CSS: static : this is the default positioning style. Elements are positioned according to the normal flow of the page. fixed : the element position is fixed relative to the browser window, i.e., when you scroll, the element does not move with other contents in the page. relative : the element is positioned relative to its normal position (i.e., static position). You can use relative positioning to offset an element from its normal position. Other elements are positioned as if the relative positioned element were in its normal position. absolute : the element is positioned relative to the first ancestor element that is not static positioned. If all ancestor elements are static positioned, the element is positioned relative to...
Created by James on September 23, 2010 20:30:55
Last update: November 16, 2011 14:51:23
jQuery button set where one button can be pressed "down" at a time.
<!DOCTYPE html>
<html>
<head>
<title>jQu...
Created by James on January 10, 2011 12:35:53
Last update: November 04, 2011 19:28:03
The events mouseover and mouseout are fired when the mouse enters/leaves the element where the event handlers are registered, and any nested elements which do not handle these events (because of event bubbling ). The events mouseenter and mouseleave are fired only when the mouse enters/leaves the specified element. Nested elements do not come into play. This following is a test page. You need Firebug to view the console output. Or use the JavaScript Executor bookmarklet. If none of these are available, an alert will popup (but you won't be able to fully test with alert.).
<!DOCTYPE HTML> <html> <head> <title>jQu... For the above test page, when you move the mouse through both the outer and inner areas of the mouseover/mouseout rectangle, the output is...
