Recent Notes

Displaying keyword search results 1 - 10
Created by James on November 01, 2012 13:51:42    Last update: November 01, 2012 13:51:42
One way to vertically center a line of text in a container div is to set line-height to be the same as the height of the container. But that requires specifying line-height in pixels. This technique avoids that. <!doctype html> <html> <head> <style typ...
Created by Fang on October 31, 2011 21:10:10    Last update: October 31, 2011 21:13:10
In this example I'll add a parameter to a facelets template. The example contains three tabs, each tab points to a different page. The tab control is shared among all pages, therefore, it is put in the template. Starting from the simple facelet example , make these additions: Create a new template WEB-INF/templates/tabs.xhtml : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric... Add a page for the about tab ( about.xhtml ): <?xml version="1.0" encoding="UTF-8"?> <ui:comp... Add a page for the news tab ( news.xhtml ): <?xml version="1.0" encoding="UTF-8"?> <ui:comp... Add a page for the partner tab ( partner.xhtml ): <?xml version="1.0" encoding="UTF-8"?> <ui:comp... Build and re-deploy the application. Launch the browser and load page http://localhost:8080/facelet-demo/about.jsf . This is a screenshot:
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 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 October 15, 2010 20:10:26    Last update: October 15, 2010 20:10:26
Download the Cufon Javascript and save it as cufon-yui.js . Generate the font JavaScript and save it as myfont.js (upload the font file through http://cufon.shoqolate.com/generate/ ). Add these lines to the header element: <script type="text/javascript" src="cufon-yui.js">... Replace selected elements with JavaScript like this: <script type="text/javascript"> Cufon.rep... Full HTML page: <!DOCTYPE html> <html> <head> <title>C... Reference: Cufonize Your Pages – How to add Cufon to your Web Design
Created by James on September 20, 2010 22:30:46    Last update: September 20, 2010 22:30:46
<html> <head> <style type="text/css"> ...
Created by voodoo on July 11, 2009 15:14:55    Last update: July 29, 2010 22:45:48
cURL is a command line tool for transferring files with URL syntax. The main purpose and use for cURL is to automate unattended file transfers or sequences of operations. It's really easy to see HTTP headers with curl: C:\>curl --head http://www.google.com HTTP/1.0 ... or, headers and page together (dump headers to stdout): $ curl --dump-header - http://www.google.com HTTP/... Download openssl from openssl.org: curl http://www.openssl.org/source/openssl-0.9.6m.... C:\>curl --help Usage: curl [options...] <url> ...
Created by James on May 07, 2010 04:13:14    Last update: May 07, 2010 04:35:03
It seems that the key to aligning a checkbox with its label lies in the line-height property of the label. This simple HTML snippet aligns well: <!DOCTYPE HTML> <html> <head> <style typ... which is rendered like this: Change the font size of the label to 12px throws off the alignment: label.checkbox { font-size: 12px; di... In case 1, the height of the checkbox is 13px with 3px top and bottom margin, for a total of 19px , which is exactly the height of the label div. As can be seen from Firebug : Checkbox layout Label layout In case 2, the height of the label div shrinks to 15px , while the height of the checkbox remains the same: Checkbox layout Label layout And...
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......
Previous  1 2 Next