Recent Notes

Displaying keyword search results 1 - 10

Use Google hosted jQuery

Created by James on June 22, 2010 18:56:40 Last update: February 13, 2012 10:25:47

Version 1.6.4:

<!-- jQuery -->
 
 <script type="text/javascript" ...

Version 1.7.1: <script type="text/javascript" src="https://ajax.g... Google URL: http://code.google.com/apis/ajaxlibs/documentation/#jquery

jQuery validate select required example

Created by James on February 02, 2012 09:20:22 Last update: February 02, 2012 09:20:22

This example came from the jQuery validation documentation. The required rule can be used to validate a required selection box when you set the value of the first option to empty.

<!DOCTYPE HTML> 
 
 <html>
 
 <head>
 
     <scrip...

The error message is the title since no error message is specified. A more fully defined validation check would look like this:

$('#my-form').validate({
 
 		errorElement: "p",
 ...

CSS element overlap and z-index

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>...

Embed JavaScript in JSF Facelets

Created by Fang on November 28, 2011 21:04:15 Last update: November 28, 2011 21:04:15

Some innocent looking JavaScript may cause a fatal error in a Facelet page. For example:

<script type="text/javascript">
 
 if (items.lengt...

<script type="text/javascript">
 
 // jQuery code ...

Because Facelet is strict XML, therefore, < and > must be escaped. There are several ways to deal with this: Do not embed JS code directly in the page. Put the code in .js files and include it in the page with the src attribute. Put JS code in a CDATA section:

<h:outputScript target="head">
 
         <![CDATA...

Use XML entities:

<script type="text/javascript">
 
 // jQuery code ...

JavaScript: onclick ondblclick on same element

Created by James on May 01, 2011 21:40:35 Last update: May 01, 2011 21:47:18

It's a shame that double click events are always accompanied by click events in JavaScript. When you double click on an element, JavaScript fires two click events followed by one double click event. So if you attach both click and double click event handlers to the same element, both event handlers will be called when you double click. This is a utility function to alleviate the problem somewhat: <!doctype html> <html> <head> <script ... Note that there's still a possibility that both clicks and double clicks fired at the same time. This is because the timer used above may not be identical to the double click timer configured at the OS level. It's impossible to fix this problem in application code since each user may...

Test your (or your browser's) JavaScript knowledge with a simple HTML page

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...

JavaScript string escape special characters

Created by Dr. Xi on February 08, 2011 14:45:13 Last update: February 08, 2011 14:45:50

The ECMAScript defines these single character escape sequences: Escape Sequence Code Unit Value Name Symbol \b \u0008 backspace <BS> \t \u0009 horizontal tab <HT> \n \u000A line feed (new line) <LF> \v \u000B vertical tab <VT> \f \u000C form feed <FF> \r \u000D carriage return <CR> \" \u0022 double quote " \' \u0027 single quote ' \\ \u005C backslash \ Escape sequences can also be: \0 (backspash zero): the <NUL> character. \xdd (x followed by two hexadecimal digits): a Latin-1 character whose code unit value is the value of the hexadecimal number. \udddd (u followed by 4 hexadecimal digits): A Unicode character whose code unit value equals the value of the hexadecimal number. \ddd (backslash followed by 3 octal digits): a Latin-1 character specified as...

A simple JavaScript executor

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

Bookmarklet length limits

Created by Dr. Xi on August 27, 2008 19:40:19 Last update: January 14, 2011 09:33:20

There's a limit to the number of characters a bookmarklet can contain. Browser Max chars Netscape > 2000 Firefox > 2000 Opera > 2000 IE 4 2084 IE 5 2084 IE 6 508 IE 6 SP 2 488 IE 7 ~2084 IE 8 ~2200-2300 I tried it in the IE6 browser. The following code (573 characters) doesn't work as a bookmarklet. However, <a href="alert('Hi');">Short Bookmarklet</a> works. Actually, you don't have to save the link as a bookmark in order to test, just click the link, nothing happens if the length limit is exceeded. <a href='javascript:alert("var c = document.create... If the bookmarklet code is too long, you can save the JavaScript code on a server and use this function to bring it back to the page:...

CSS vertical-align middle with jQuery

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...

Previous 1 2 3 4 Next

Ξ Notes

Recent Notes

Keywords