Recent Notes

Displaying keyword search results 1 - 9
Created by Dr. Xi on September 20, 2013 11:58:32    Last update: September 20, 2013 11:58:32
Some tools for debugging under Android mobile browser. Firebug : I can install firebug in Firefox for Android, but there doesn't seem to be a way to invoke it. Firebug Lite might be a better choice. Crossfire seems to enable remote debugging through FIrebug, but it seemed like in early stage (stalled?). Google's remote debugging tool for Chrome jsonsole.com remote debugging tool. Need to inject some JavaScript into the page being debugged.
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 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 James on September 07, 2010 03:11:39    Last update: January 11, 2011 20:28:33
I didn't know how hard it was to vertically align something to the middle until I had to do it. An excellent writeup about the various techniques (or should I say hacks?) to achieve this is here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ Here I present a technique with the help of jQuery. To make it simple, what I'm doing is to display a single line of text in the middle of the page instead of at the top. The markup is made simple because the logic is moved to JavaScript. There are two requirements to make this work: The parent container uses relative positioning jQuery code added to re-position the content with absolute positioning <!doctype html> <html> <head> <title>Vert... For some reason, the following code did not work although...
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 Dr. Xi on April 26, 2007 23:00:25    Last update: January 10, 2011 22:15:32
If you ever wonder how those "cool" dialog boxes are made, copy and paste the following code to a file and test it with your browser. This is probably the simplest code for such effects. If you don't know what I mean, try it anyway. <html> <head> <title>Test Overlay</ti...
Created by Fang on April 01, 2010 22:24:58    Last update: April 02, 2010 02:49:38
In this note I'll show you how to create and package a JSP custom tag. The purpose of this tag is to display a random splash image for a home page, among a set of images. We should be able to add or delete candidate splash images from the WAR archive without the need to change the JSP. This is the intended use of the tag: <%@ taglib uri="http://custom.tag.com/demo" prefix... In the above example you provide a set of images named splash*.png (e.g., splash1.png, spalsh2.png, ...), and the tag will pick a random one to display when the JSP is rendered. Let's get started. I'll use Maven for this purpose. Create the standard Maven directory structure ./pom.xml ./src ./src/main ./src/main/jav... pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0"... SplashTag.java package tagdemo; import java.util.ArrayList......
Created by James on October 11, 2009 21:15:53    Last update: October 11, 2009 21:19:39
Many techniques for making rounded corners do not work well when the element being rounded is displayed on a background with a different color (or multiple colors). Example 1: Nifty Cube with JavaScript <html> <head> <base href="http://www.html.i... Example 2: modx Simple Rounded Corner Box <html> <head> <title>Round Corner</title> ... Example 3: CSS3 (does not work in IE) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ... Example 4: This is one that actually works ! The nifty corner technique can be tweaked to be background friendly, although the JavaScript version didn't work for some reason. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
Created by Dr. Xi on September 07, 2008 21:14:46    Last update: September 07, 2008 21:14:46
In the simplest form, JavaScript debugging is simply looking at the JavaScript error messages. For IE, there's a yellow mark at the left bottom screen of the browser when a JavaScript error occurs. For Firefox, you need to enter javascript: in the address bar to see the JavaScript errors. These simple tools aren't enough when your JavaScript s become less simple. For IE, you can use the "Microsoft Script Debugger" or "Microsoft Script Editor", which comes with Microsoft Office. This is a pretty good tutorial on the subject: http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html For Firefox, I use firebug , which not only allows you to debug JavaScript, but also to inspect the HTML, DOM and CSS on the page. I use it a lot to modify the CSS on...