Notes by James
Displaying keyword search results 1 - 11
Created by James on March 11, 2011 08:53:31
Last update: January 30, 2012 09:33:56
Both delegate and live allow you to bind event handlers to elements created in the future, but there are some differences: For .delegate , the event bubbles up to the element on which it is called. For .live , the event bubbles up to the root of the DOM tree, or, as of jQuery 1.4, optionally stop at a DOM element context. DOM traversal methods are not supported for finding elements to send to .live() . Rather, the .live() method should always be called directly after a selector. The opposite of .live is .die . The opposite of .delegate is .undelegate . Note: As of jQuery 1.7, the .live() method is deprecated . Use .on() to attach event handlers. Users of older versions of jQuery...
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 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 James on March 03, 2011 20:29:52
Last update: March 03, 2011 20:30:36
The general syntax for JavaScript string replace is:
str.replace(regexp|substr, newSubStr|function[, |n...
i.e.,
The substring to be replaced can be either a string or a regular expression (regex)
The replacement string can be a string, or a function which returns the replacement.
If the second parameter is a function, the function will be invoked after the match has been performed. The parameters passed to the function are: the matched (to be replaced) substring, the parenthesized submatch strings, offset of the match, and the whole string on which replace is being called.
It can take an optional flags argument, but that's not standard .
Examples:
// replace apples with oranges
// only the ...
Created by James on September 03, 2010 15:52:12
Last update: January 11, 2011 20:22:40
Use the siblings function to find all siblings of the current jQuery object:
$(this).siblings()
which is equivalent to:
$(this).parent().children().not(this)
Or, use an optional selector to further limit the selection of siblings:
$(this).siblings('li .hilighted')
Test page:
<!DOCTYPE html>
<html>
<head>
<title>jQu...
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 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 October 06, 2010 20:54:39
Last update: October 06, 2010 20:55:00
When a JavaScript call is taking too much time, Firefox pops up this message: Of course the solution is to speed up your script. But suppose it really needs to exceed the preset timeout, you can delay the popup by following these steps: Enter about:config in the address bar Ignore the warning and proceed Enter dom.max_chrom in the filter input Change the value of dom.max_chrome_script_run_time to a bigger value (default is 20). For IE, there's a similar dialog with this message: "A script on this page is causing Internet Explorer to run slowly". But rather than counting elapsed time, IE counts the number of statements executed , which is controlled by the registry key HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Styles . You need to create a DWORD value named...
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 James on October 11, 2009 21:15:53
Last update: October 11, 2009 21:19:39
Many techniques for making rounded corners do not work well when the element being rounded is displayed on a background with a different color (or multiple colors).
Example 1: Nifty Cube with JavaScript
<html>
<head>
<base href="http://www.html.i...
Example 2: modx Simple Rounded Corner Box
<html>
<head>
<title>Round Corner</title>
...
Example 3: CSS3 (does not work in IE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
Example 4: This is one that actually works ! The nifty corner technique can be tweaked to be background friendly, although the JavaScript version didn't work for some reason.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
Created by James on July 05, 2009 02:21:15
Last update: July 05, 2009 02:25:20
This is a JavaScript wrapper for Bare Naked App's progress bar.
As usual, download their images and add this to the CSS:
img.progressBar {
background: white url(images...
Then, add my JavaScript function, which takes a parent HTML element as input and returns the progress bar object with a setValue method:
function createProgressBar(elem) {
var img = d...
Test code:
<html>
<head>
<!-- setup code START -->
...
