Recent Notes
Displaying keyword search results 1 - 10
Created by James on January 11, 2011 22:08:26
Last update: February 03, 2012 11:23:25
By default Firefox puts a dotted line box around the link or button label when you click them. Sometimes it's annoying and makes your sexy buttons look ugly. You can get rid of the dotted lines for links with outline:none in CSS, but that doesn't work for buttons.
<!doctype html>
<html>
<head>
<style t...
For buttons you need " button::-moz-focus-inner { border: 0; } ":
<!doctype html>
<html>
<head>
<style t...
I've also seen this:
/* get rid of those system borders being generated...
For more information :
Remove Button Focus Outline Using CSS
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 Fang on December 05, 2011 12:41:21
Last update: December 05, 2011 12:41:21
Use the varStatus.first property and EL to assign a different CSS class for the first element:
<ui:repeat var="name" varStatus="status" value="#{...
Created by Fang on November 22, 2011 10:40:16
Last update: November 22, 2011 10:40:16
This is an example that uses tag handler, UI component and renderer together to support a custom taglib. The main purpose is to show how these components play together.
The tag renders
<ui:param name="extra" value="el interpreted"/>
...
as
<h3>my:foreach</h3>
<ul class="css class" extra...
These are the files:
The tag handler ( src/main/java/com/example/ForeachTagHandler.java ):
package com.example;
import java.util.Map;
...
The UI component ( src/main/java/com/example/UIForeach.java ):
package com.example;
import java.io.IOExcep...
The renderer ( src/main/java/com/example/ForeachRenderer.java ):
package com.example;
import java.io.IOExcep...
Faces config ( src/main/resources/META-INF/faces-config.xml ):
<?xml version="1.0" encoding="UTF-8"?>
<faces-c...
Taglib config ( src/main/resources/META-INF/foreach.taglib.xml ):
<?xml version="1.0" encoding="UTF-8"?>
<facelet...
Created by Fang on November 10, 2011 20:33:46
Last update: November 10, 2011 20:33:46
The stack trace is like this:
java.lang.IllegalArgumentException: Component prop...
You get this error because you are using the class attribute with a JSF UI component, for which the class attribute cannot be altered. Of course you meant CSS class, not Java class! You can use the styleClass attribute instead of the class attribute. The styleClass attribute becomes the class attribute when the component is rendered.
If you can add a tag handler to the UI component, you can alias class to styleClass , which will allow you to use the class attribute on the UI component:
import javax.faces.view.facelets.*;
pub...
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 March 13, 2011 13:44:37
Last update: March 21, 2011 11:30:55
This is a jQuery input control that lets you enter any number of input rows of name and value pairs.
<!DOCTYPE html>
<html>
<head>
<title>jQu...
Created by James on February 14, 2011 12:10:19
Last update: February 14, 2011 20:22:05
I have long noticed that IE8 displays a "broken page" icon while showing my web pages, but didn't pay much attention. Since the world in general considers IE to be broken, it's not so unlogical for IE to see much of the world as broken. Until one day I noticed that the Google home page was not "broken". Then I thought may be I should fix my pages also. So I moused over the "broken page" icon, and this is what I saw: Compatibility View: websites designed for older browsers will often look better, and problems such as out-of-place menus, images, or text will be corrected. Very descriptive indeed! Older browsers? Such as Firefox 1.5? When it comes to MS products, I often had better...
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 October 11, 2010 19:01:28
Last update: January 11, 2011 20:38:56
Test page (click the "new window" icon to see the transition):
<!DOCTYPE html>
<html>
<head>
<title>jQu...
