Recent Notes
Displaying keyword search results 1 - 10
Created by James on May 03, 2012 14:54:46
Last update: May 03, 2012 14:54:46
History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. For HTML4 browsers it will revert back to using the old onhashchange functionality. All major browsers are supported.
This is a simple test page to get started:
<html>
<head>
<title>Test History</title>
...
Note: state url must be provided for IE to generate a unique hash. YOu can prefix the state url with '?' ('#' does not work).
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 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 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 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 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 September 28, 2010 19:16:22
Last update: September 28, 2010 19:16:22
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.
URL: http://processingjs.org/
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...
