Recent Notes

Displaying keyword search results 1 - 12
Created by James on January 26, 2012 21:23:56    Last update: January 26, 2012 21:23:56
In an HTML page, elements can overlap because of position styles. When there's an overlap, elements coming later in the HTML code are displayed on the top. This can be altered by specifying z-index in the CSS. Elements with higher z-index are placed on the top. However , z-index only works for elements that are not static positioned. Static positioned elements are always at the bottom compared to relative , fixed and absolute positioned elements. This is a test page: <!DOCTYPE html> <html> <head> <style t... Effects of z-index can be tested by adding it to the elements, for example: <div id="bg" class="big" style="z-index: 3"></div>...
Created by James on March 29, 2011 11:37:53    Last update: March 29, 2011 11:37:53
The test page below reports the column and row indexes of the table cell you clicked. <!DOCTYPE html> <html> <head> <title>jQu...
Created by Dr. Xi on August 31, 2008 20:43:44    Last update: January 22, 2011 12:48:08
It's probably more useful to make the JavaScript executor a bookmarklet. That way it gains access to the page on which it is invoked. Therefore, more helpful while debugging. Here's the code: <html> <body> <a href="javascript:(funct... Or, you can add this link to your bookmarks, name it "JS Executor". For a full featured JavaScript console, you may need Jash
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 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 James on October 29, 2010 20:12:28    Last update: October 29, 2010 20:14:17
Some links for layout managers (the widgets that divide your screen into sections with movable separators, like those normally found in IDEs): YUI 2: Layout Manager jQuery UI.Layout Plug-in Also: http://plugins.jquery.com/project/Layout jLayout — jQuery plugin Layout manager - Scripteka :: Prototype extensions library . Demos: http://javascripts.sourceforge.net/html/layoutmanager/layoutmanager-index.html
Created by James on September 10, 2010 23:01:14    Last update: September 10, 2010 23:01:14
By default, heights for jQuery UI tab panels expand or contract depending on the height of each tab. The code snippet here sets the height of all tabs to be equal to that of the container. <!DOCTYPE html> <html> <head> <title>jQu...
Created by Fang on March 23, 2010 03:50:11    Last update: August 18, 2010 21:59:52
This is a simple web application with a single servlet and a single JSP page. It is intended to be a test bed for JSTL tags. You may want to store all syntax, rules, and exceptions in your head, but in my opinion nothing beats a simple test program that allows you play with it all you want. So here it is (build with Maven ). Prerequisites: Maven: http://maven.apache.org/ . You don't need any prior knowledge of Maven, but you need to install the binary. JBoss: http://jboss.org/jbossas/downloads/ , or Tomcat: http://tomcat.apache.org/ if you don't run the SQL tests. You need to know how to deploy a web application (shh! Don't tell your boss it's just copying a file to the deployment folder). Steps: The directory...
Created by Dr. Xi on September 01, 2008 02:19:31    Last update: May 23, 2009 16:50:10
Use this bookmarklet to set or delete cookies in a web page. If you leave the expires date as is, the cookie will be deleted. Add this link to your bookmarks to install the bookmarklet. <html> <body> <a href="javascript:if (!windo...
Created by Dr. Xi on March 02, 2009 23:29:08    Last update: March 28, 2009 21:35:41
An HTML form contains more than what meets the eye. This bookmarklet displays information about form fields in the page. When there are multiple forms on the page, successive invocations of the bookmarklet display each form in turn. Add this link to your bookmarks. Here's the code: <html> <body> <a href="javascript: i...
Created by Dr. Xi on August 28, 2008 22:52:01    Last update: March 28, 2009 16:50:42
As a web developer, a lot of times I need to see the cookies in a page (and copy the value to another test program, sometimes). This is a bookmarklet to display the cookies. You may directly add this link to your bookmarks and name it "show cookies". It doesn't work in IE6 because of the JavaScript length limitations . However, you may try putting the script on a web server and importing it to the bookmarklet. <html> <body> <a href="javascript: i...
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 ...