Recent Notes
Displaying keyword search results 91 - 100
Created by James on July 06, 2010 15:27:28
Last update: January 11, 2011 20:20:03
This example shows three jQuery icons with hover effects.
<!DOCTYPE html>
<html>
<head>
<title>jQu...
Hint: mouseover an icon on the ThemeRoller page to get the CSS classname.
Created by James on March 29, 2010 03:11:38
Last update: January 11, 2011 20:19:39
This is an age old problem. Since it comes up time and time again, I'm writing this down for future reference. Let's start with a two-column layout generated by the 2 Column Layout Generator :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans... It renders like this: The left column is shorter than the right column. How to make the left and right column the same height? Adding height: 100% to the style sheet of the left column doesn't cut it. There are several hacks, none of them are straightforward: In search of the One True Layout Faux Columns Creating Liquid Layouts with Negative Margins In short, there's no instruction in CSS that tells a DIV that its height should be 100% of that of the...
Created by James on November 18, 2009 23:11:48
Last update: January 11, 2011 20:16:08
It turned out the removing the underline decoration from an element is not that trivial. The underline could have been introduced by any containing element up in the DOM tree! Try this page:
<!doctype html>
<html>
<head>
<style t...
Created by James on July 19, 2009 20:51:23
Last update: January 11, 2011 20:14:18
If CSS3 border-image is properly supported, making a rounded corner box is very easy. You just need a round corner image like this: The following markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ... would render like this (try it in Firefox 3.5 and Google Chrome): However, IE as of version 8.0 does not support border-image . So until border-image is reliably supported in all major browsers, we still have to rely on tried and true tricks to make it work. In general, I found three general categories of tricks to make rounded corners: Good old tables. This trick creates a table of 9 cells and uses the 8 cells on the perimeter to render the borders and rounded corners. The central cell is used for...
Created by James on May 24, 2009 20:14:25
Last update: January 11, 2011 20:07:38
In the following HTML code, I attached an inline handler to the text field input and added two event handlers with addEventListener / attachEvent . Both IE and Firefox called the inline handler first. But the order in which the added event handlers were called are different between IE and Firefox (IE calls attached_click2 first). Further, if I add the same event handler multiple times, IE calls the handler the same number of times. But Firefox only calls the same handler once, no matter how many times it was added.
<html> <body> <form> Input: <input type="... You can attach an event handler to an HTML element either inline , with JavaScript , or by calling addEventListener (DOM level 2), or attachEvent (IE specific). When you...
Created by James on April 17, 2009 01:15:01
Last update: January 11, 2011 20:05:36
You can still turn the checkbox or radio button on and off even when the readonly attribute is set:
<html>
<body>
<form method="GET">
<inp...
Created by James on April 07, 2009 03:29:45
Last update: January 11, 2011 20:04:31
This is a test HTML form with almost all kinds of input types.
It is weird that both IE and Firefox list the fieldset in the forms[0].elements array as an element with undefined name , type and value .
<html>
<body>
<form name="MyTestForm">
...
Created by Dr. Xi on October 26, 2010 04:47:37
Last update: January 11, 2011 20:00:36
The code presented here is a simple implementation of a tab set. It is used to demo how a tab set could be implemented. The code is stand alone and does not depend on any JavaScript libraries. Multiple tab sets within the same page is supported.
The HTML markup is fairly simple:
Tabs sets are contained within a DIV element with class name "tabsContainer".
Define a UL list for the tabs.
Follow the UL list with equal number of DIVs for the tab contents.
The Nifty Corners Cube technique is used to draw the rounded corners (original form, not the enhanced JavaScript form).
HTML, CSS and JavaScript:
<!doctype html>
<html>
<head>
<style typ...
Created by Dr. Xi on October 07, 2010 19:20:55
Last update: January 11, 2011 19:59:17
Like the string trim function, Firefox provides a native implementation for array map, IE doesn't. So we have to create our own map function for Array :
if(typeof Array.prototype.map !== 'function') {
...
Test page:
<html>
<head>
<title>Array Map</...
Created by Dr. Xi on July 07, 2009 23:38:03
Last update: January 11, 2011 19:58:18
Demo page for HTML modal dialog.
<html>
<body>
<button onclick="window.showM...
