Recent Notes
Displaying keyword search results 1 - 12
Created by Dr. Xi on February 25, 2011 08:43:40
Last update: February 28, 2011 11:16:10
If you think the JavaScript code below is simple, think again. Try it in different browsers and see if you can explain what you see.
What is displayed in the browser window with this HTML page?
<!doctype html>
<html>
<body>
<p>befor...
What is displayed inside the iframe? Try different browsers.
<!doctype html>
<html>
<head>
<style t...
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 August 14, 2008 20:22:20
Last update: January 23, 2011 18:51:55
http://expsharing.blogspot.com/2007/09/documentbody-doctype-scroll-bar-height.html
Offers good explanation of:
clientWidth, clientHeight
offsetWidth, offsetHeight
scrollWidth, scrollHeight
scrollTop, scrollLeft
with doctype on and off.
I'm adding two test pages, one without doctype , one with doctype .
Without doctype (quirks mode):
<html>
<head>
<title>Quirks Mode</title>
...
With doctype (standard mode):
<!doctype html>
<html>
<head>
<title>Qui...
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 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 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 James on June 30, 2010 19:04:45
Last update: July 03, 2010 21:24:33
Technically, file upload cannot be handled by Ajax, because XMLHttpRequest (XHR) does not handle file inputs. All techniques not using Flash rely on an invisible iframe as the upload form submit target. JavaScript then grabs the response content from the iframe and present it, giving the same illusion as Ajax. webtoolkit AIM The technique by webtoolkit is very simple. It involves 3 simple steps: include the AIM script, implement the start/finish JavaScript functions, and add an onsubmit handler to the normal file upload form. The hooked up form looks like:
<head> <script type="text/javascript" src="webt... The AIM script is also quite simple: /** * * AJAX IFRAME METHOD (AIM) * http... The above code only supports HTML responses. In order to support JSON responses, the above...
Created by Dr. Xi on September 07, 2008 22:10:21
Last update: September 07, 2008 22:15:51
When you use window.open to open a page in a new browser window, the new window is not modal, i.e., focus on the new window can be lost when the parent window is clicked. IE provides window.showModalDialog but it doesn't have the full power of a real browser window, and it's IE specific. This is a JavaScript that makes the popup window modal. The central trick is to check focus periodically with window.setInterval and request focus when it's lost. In IE, when an input on the page gets focus, the window thinks that it lost focus and requests focus back, thus taking focus away from any input fields - making it impossible to enter data into input fields in the modal dialog. This problem is...
Created by Dr. Xi on December 12, 2007 20:30:01
Last update: December 12, 2007 20:32:23
This is a script to tail a log file through the web browser. It uses AJAX, apache web server, mod_python, UNIX utilities tail (requires the --lines switch) and wc . The log file may reside on the web server or any other host accessible from the web server through SSH.
Although it's written in python, it should be easy to port to other languages such as Perl.
Apache httpd.conf :
LoadModule python_module modules/mod_python.so
...
Python script:
import time, os
from os.path import basename
...
Created by Dr. Xi on November 28, 2007 20:20:44
Last update: November 28, 2007 20:20:44
When you want to run some JavaScript when the document loads, you usually set the onload attribute of the <body> tag:
<html>
<body onload="myHandler();">
<scr...
Or, you can use JavaScript to attach the onload handler:
<html>
<body>
<script language="JavaScri...
However, this only works in IE, not Firefox. In Firefox, you have to use window.onload = myHandler .
// This only works for IE
document.body.onl...
Created by Dr. Xi on October 01, 2007 22:26:33
Last update: October 01, 2007 22:27:51
Main window code:
<html>
<body>
<script language="JavaS...
Child window code:
<html>
<script language="JavaScript">
...
In the parent window, it's important to return false from the onclick handler - to avoid the form from being submitted.
Of course, there are sexier ways to do the trick. But you may want to do it this way for the sake of being consistent, for example.
Created by Dr. Xi on August 10, 2007 20:43:10
Last update: August 10, 2007 20:43:10
IE and firefox both support client side XSLT.
This can be done by inserting an xml-stylesheet into the XML file, which would trigger the browser to apply the XSL to the XML document and generate a transformed page:
<?xml version="1.0" encoding="utf-8" ?>
<?...
Or, it can be done more dynamically with client side JavaScript. However, IE and FF offer different APIs for XSLT. Below is my attempt to bridge the differences. It's been tested to work for IE 7.0, FF 2.0 and Opera 9.0.2.
function XSLT(url) {
var xslt = false;
...
The following HTML page shows how to use it:
<HTML>
<HEAD>
<SCRIPT language="JavaS...
