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 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 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:37:20
Last update: January 10, 2011 16:37:20
The following page injects CSS rules with JavaScript. It works fine in Firefox and Chrome.
<html>
<head>
<script type="text/javascrip...
But in IE, it breaks with "Unknown runtime error" (seemed like it's trying to interpret the curly brackets in the CSS as JavaScript blocks!):
In order to make it work in IE, the code need to be changed to:
<html>
<head>
<script type="text/javascrip...
The tricks to identify IE and insert new CSS rules came from Paul Irish .
Created by Dr. Xi on September 11, 2008 23:06:18
Last update: October 06, 2010 03:16:13
Firefox and Google chrome has native support for the trim function for a String. IE (as of IE 8.0) does not provide a trim function for String. Using the JavaScript Executor , if you execute:
'abcd '.trim
you get:
function trim() { [native code] }
in Firefox and Google Chrome. But you get nothing in IE. If you try to execute the trim method on a String:
'abcd '.trim()
you get this in IE:
TypeError: Object doesn't support this property or...
In order to have the trim function across all browsers, define this function:
if(typeof String.prototype.trim !== 'function') {
...
Or, if you use jQuery, you can use $.trim()
Created by Dr. Xi on November 18, 2009 22:53:33
Last update: November 18, 2009 22:56:17
The "View Source" function in browsers displays the HTML source as it is received from the server. It does not show the HTML source after the DOM structure has been altered by JavaScript. Sometimes you want to see the HTML source as it is currently rendered in the browser. For Firefox: Without using any extension: select an area of the page, right click and select "View Selection Source" Using Firebug : click the HTML tab double click the body tag to edit copy all text in the edit panel and paste to your favorite editor. Using View Source Chart : right click and select "View Source Chart" For IE: Use View Rendered Source by Bill Friedrich: right click and select "View Rendered Source" For all...
