Recent Notes

Displaying keyword search results 1 - 10
Created by James on November 09, 2013 20:54:03    Last update: November 09, 2013 20:54:03
This page draws an interactive parabola on HTML5 Canvas. <!DOCTYPE HTML> <html> <head> <...
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 January 10, 2011 12:35:53    Last update: November 04, 2011 19:28:03
The events mouseover and mouseout are fired when the mouse enters/leaves the element where the event handlers are registered, and any nested elements which do not handle these events (because of event bubbling ). The events mouseenter and mouseleave are fired only when the mouse enters/leaves the specified element. Nested elements do not come into play. This following is a test page. You need Firebug to view the console output. Or use the JavaScript Executor bookmarklet. If none of these are available, an alert will popup (but you won't be able to fully test with alert.). <!DOCTYPE HTML> <html> <head> <title>jQu... For the above test page, when you move the mouse through both the outer and inner areas of the mouseover/mouseout rectangle, the output is...
Created by James on May 01, 2011 21:57:33    Last update: May 01, 2011 21:57:33
Both visibility:hidden and display:none hides an element in the DOM. But elements with visibility:hidden still takes up space, while display:none does not. Example (click the divs to hide or show): <!doctype html> <html> <head> <style t...
Created by James on April 30, 2011 21:28:06    Last update: May 01, 2011 13:00:35
This script moves a paragraph inside a div and then move it out. <!doctype html> <html> <head> <title>M...
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 March 02, 2011 12:29:38    Last update: March 11, 2011 08:42:50
jQuery event delegation allows you to bind event handlers to elements not yet created, under these conditions: The DOM element must nest inside the element to which the event is delegated to The inner element must not stop event bubbling The opposite of delegate is undelegate . <!DOCTYPE HTML> <html> <head> <title>jQu...
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...
Previous  1 2 Next