Recent Notes
Displaying keyword search results 1 - 9
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 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...
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...
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 -->
...
Created by Dr. Xi on September 01, 2008 02:19:31
Last update: May 23, 2009 16:50:10
Use this bookmarklet to set or delete cookies in a web page. If you leave the expires date as is, the cookie will be deleted. Add this link to your bookmarks to install the bookmarklet.
<html>
<body>
<a href="javascript:if (!windo...
Created by Dr. Xi on March 02, 2009 23:29:08
Last update: March 28, 2009 21:35:41
An HTML form contains more than what meets the eye. This bookmarklet displays information about form fields in the page. When there are multiple forms on the page, successive invocations of the bookmarklet display each form in turn. Add this link to your bookmarks.
Here's the code:
<html>
<body>
<a href="javascript:
i...
Created by Dr. Xi on August 28, 2008 22:52:01
Last update: March 28, 2009 16:50:42
As a web developer, a lot of times I need to see the cookies in a page (and copy the value to another test program, sometimes). This is a bookmarklet to display the cookies. You may directly add this link to your bookmarks and name it "show cookies". It doesn't work in IE6 because of the JavaScript length limitations . However, you may try putting the script on a web server and importing it to the bookmarklet.
<html>
<body>
<a href="javascript:
i...
Created by Dr. Xi on August 10, 2007 21:05:26
Last update: August 10, 2007 21:05:26
This style sheet transforms the struts-config.xml into HTML for easy viewing in a browser. It uses the DHTML JavaScript tooltip from http://www.walterzorn.com/tooltip/tooltip_e.htm .
<?xml version="1.0" encoding="UTF-8"?>
<xsl...
