Recent Notes
Displaying keyword search results 1 - 10
Created by James on May 03, 2012 14:54:46
Last update: May 03, 2012 14:54:46
History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. For HTML4 browsers it will revert back to using the old onhashchange functionality. All major browsers are supported.
This is a simple test page to get started:
<html>
<head>
<title>Test History</title>
...
Note: state url must be provided for IE to generate a unique hash. YOu can prefix the state url with '?' ('#' does not work).
Created by James on April 24, 2012 13:50:05
Last update: April 24, 2012 13:50:05
The this object can be changed when calling a JavaScript function with func.call(theObject) . This is an example:
<!DOCTYPE html>
<html>
<head>
<title>jQu...
The JavaScript console logs:
[Global log] this is: [object Window]
[log.cal...
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: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 March 03, 2011 20:50:51
Last update: March 03, 2011 20:51:54
This function parses the querystring and returns the query parameters as a map. It calls the string replace function with a function replacement and uses the side effects of the replacement function call to populate the parameter map.
function getQueryParameters() {
var result ...
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...
Created by Dr. Xi on January 29, 2009 23:27:46
Last update: January 30, 2011 14:53:17
Both document.body.onload and window.onload worked for IE7. Firefox 3 doesn't recognize document.body.onload .
<!doctype html>
<html>
<body>
<h1...
<!doctype html>
<html>
<body>
<h1...
Created by Dr. Xi on August 14, 2008 20:22:20
Last update: January 23, 2011 18:51:55
http://expsharing.blogspot.com/2007/09/documentbody-doctype-scroll-bar-height.html
Offers good explanation of:
clientWidth, clientHeight
offsetWidth, offsetHeight
scrollWidth, scrollHeight
scrollTop, scrollLeft
with doctype on and off.
I'm adding two test pages, one without doctype , one with doctype .
Without doctype (quirks mode):
<html>
<head>
<title>Quirks Mode</title>
...
With doctype (standard mode):
<!doctype html>
<html>
<head>
<title>Qui...
Created by Dr. Xi on January 22, 2011 20:26:05
Last update: January 22, 2011 20:26:05
Deciding which one to use is not that easy. Chrome and Safari always use document.body.scrollTop , while IE and Firefox use document.body.scrollTop for quirks mode and document.documentElement.scrollTop for standard mode.
Your best bet may be something like:
var scrollTop = document.body.scrollTop || doc...
Test page for quirks mode:
<html>
<head>
<title>Quirks Mode</title>
...
Test page for standard mode:
<!doctype html>
<html>
<head>
<title>Sta...
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
