Notes by James
Displaying keyword search results 1 - 10
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
Created by James on February 02, 2012 16:09:05
Last update: February 02, 2012 16:09:17
flowplayer is another way to embed Flash in a web page. The code looks like this:
<object width="6400" height="380" data="swf/flowpl...
You need to download two swf files:
http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf
http://releases.flowplayer.org/swf/flowplayer.controls-3.2.0.swf
Created by James on February 02, 2012 16:00:15
Last update: February 02, 2012 16:00:15
Video for Everybody seems to be a generic way to embed video in a web page, even without flash. This code snippet comes from that site.
<!-- first try HTML5 playback: if serving as XML, ...
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",
...
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 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...
Created by James on September 06, 2010 03:09:35
Last update: January 11, 2011 21:24:36
With the following code, the body occupies the whole height (100%) of the browser window:
<html>
<head>
<title>100% body height</title...
However, when you add <!doctype html> to the top of the file, the browser renders the page in Full Standards Mode instead of Quirks Mode :
<!doctype html>
<html>
<head>
<title>100%...
In Full Standards Mode , the body no longer occupies the whole browser height. Why? Because body 's parent is html and the browser does not know the height of html ! Adding a height to html fixes the problem:
html {
height: 100%;
}
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 May 24, 2009 20:14:25
Last update: January 11, 2011 20:07:38
In the following HTML code, I attached an inline handler to the text field input and added two event handlers with addEventListener / attachEvent . Both IE and Firefox called the inline handler first. But the order in which the added event handlers were called are different between IE and Firefox (IE calls attached_click2 first). Further, if I add the same event handler multiple times, IE calls the handler the same number of times. But Firefox only calls the same handler once, no matter how many times it was added.
<html> <body> <form> Input: <input type="... You can attach an event handler to an HTML element either inline , with JavaScript , or by calling addEventListener (DOM level 2), or attachEvent (IE specific). When you...
Created by James on January 10, 2011 16:37:20
Last update: January 10, 2011 16:37:20
The following page injects CSS rules with JavaScript. It works fine in Firefox and Chrome.
<html>
<head>
<script type="text/javascrip...
But in IE, it breaks with "Unknown runtime error" (seemed like it's trying to interpret the curly brackets in the CSS as JavaScript blocks!):
In order to make it work in IE, the code need to be changed to:
<html>
<head>
<script type="text/javascrip...
The tricks to identify IE and insert new CSS rules came from Paul Irish .
