Recent Notes
Displaying keyword search results 1 - 10
Created by James on November 27, 2011 16:02:11
Last update: November 27, 2011 16:02:11
This is an example that uses the XSLTProcessor jQuery plugin for client side XSLT. Unfortunately it didn't work in IE or Chrome. It worked in Firefox but somehow disable-output-escaping="yes" was ignored.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/...
Created by James on May 19, 2011 16:02:40
Last update: May 19, 2011 16:05:05
Finally, MathJax makes showing math equations in the browser a reality! Here are some simple demos.
A simple example:
<!doctype html>
<html>
<head>
<title>Math...
Add HTML styling for Firefox:
<!doctype html>
<html>
<head>
<title>Math...
Created by Dr. Xi on January 29, 2009 23:27:46
Last update: January 30, 2011 14:53:17
Both document.body.onload and window.onload worked for IE7. Firefox 3 doesn't recognize document.body.onload .
<!doctype html>
<html>
<body>
<h1...
<!doctype html>
<html>
<body>
<h1...
Created by Dr. Xi on January 22, 2011 20:26:05
Last update: January 22, 2011 20:26:05
Deciding which one to use is not that easy. Chrome and Safari always use document.body.scrollTop , while IE and Firefox use document.body.scrollTop for quirks mode and document.documentElement.scrollTop for standard mode.
Your best bet may be something like:
var scrollTop = document.body.scrollTop || doc...
Test page for quirks mode:
<html>
<head>
<title>Quirks Mode</title>
...
Test page for standard mode:
<!doctype html>
<html>
<head>
<title>Sta...
Created by Dr. Xi on August 27, 2008 19:40:19
Last update: January 14, 2011 09:33:20
There's a limit to the number of characters a bookmarklet can contain. Browser Max chars Netscape > 2000 Firefox > 2000 Opera > 2000 IE 4 2084 IE 5 2084 IE 6 508 IE 6 SP 2 488 IE 7 ~2084 IE 8 ~2200-2300 I tried it in the IE6 browser. The following code (573 characters) doesn't work as a bookmarklet. However, <a href="alert('Hi');">Short Bookmarklet</a> works. Actually, you don't have to save the link as a bookmark in order to test, just click the link, nothing happens if the length limit is exceeded.
<a href='javascript:alert("var c = document.create... If the bookmarklet code is too long, you can save the JavaScript code on a server and use this function to bring it back to the page:...
Created by James on July 04, 2009 16:30:40
Last update: January 11, 2011 21:21:59
If you are looking for a solution for a progress bar, I direct you to the following resources: Bare Naked App provides a simple and elegant solution based on pure CSS with two images. You control the percentage of completion through the background-position attribute of the CSS. HTML:
<img src="/images/percentImage.png" alt="... CSS: img.percentImage { background: white url(/imag... Images: (percentImage.png) (percentImage_back.png) WebAppers extended the above solution with JavaScript. They also added several colored images: JQuery UI has a built-in progress bar widget. However, if you want to get to understand some of the foobar needed to get CSS to work (in general) through this example, stay with me for the rest of this note. Initially I was thinking, a progress bar should be easy: just make...
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 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 James on January 10, 2011 16:41:46
Last update: January 10, 2011 16:41:46
It seems that in IE, " \v " has no special meaning, while in other browsers it meant vertical tab . I tested these in three browsers:
'\v' == '\013'; // true in Chrome and Firefox,...
