Categories
JavaScript Tips & Tutorials

DOM event detection: event bubbling and event capturing

There’s essentially 2 ways for the DOM to detect any events, namely event capturing and event bubbling.

Event capturing is a method that the browser captures the event from the top elements to the bottom where the event actually takes place. For example, the moment you click on an <img> which is the child of a <p> which is further spawned from a <div>, the document element namely <body> captures the event first before it gets down the path to the eventual source of the event, that is the <img>.

Event bubbling is just the other way around where the event propagation actually goes inside out. Picture the sound waves travelling in air. With an <img> inside a <p> which is inside a <div>, a click on the image would first be seen and processed from the original target first, then the <p>, and the <div>, finally the document element at the root.

events bubbling and events capturing

Internet Explorer doesn’t have an implementation of event capturing, so events triggered in it can only travel from bottom to the top, a.k.a the bubbling way.

Categories
JavaScript Tips & Tutorials

Stop / Disable JavaScript Error Warnings

Use the following line to keep the browser or console from warning the user of your program errors.

window.onerror = function( ) { return true; }

That’s it! 🙂

Categories
JavaScript Tips & Tutorials

JavaScript: Changing Browser Window Width / Height

This petite JavaScript snippet defines several functions in the namespace of Geometry that will come handy when you need to manipulate window geometry, freeing you from the depressing chores of distinguishing different browsers for their distinct implementations of virtually the same features.

/**
 * This module defines functions for querying window and document geometry.
 *
 * Geometry.getWindowX/Y( ): return the position of the window on the screen
 * Geometry.getViewportWidth/Height( ): return the size of the browser viewport area
 * Geometry.getDocumentWidth/Height( ): return the size of the document
 * Geometry.getHorizontalScroll( ): return the position of the horizontal scrollbar
 * Geometry.getVerticalScroll( ): return the position of the vertical scrollbar
 *
 * Note that there is no portable way to query the overall size of the
 * browser window, so there are no getWindowWidth/Height( ) functions.
 *
 * IMPORTANT: This module must be included in the <body> of a document
 *            instead of the <head> of the document.
 */

var Geometry = {};

if (window.screenLeft) { // IE and others
    Geometry.getWindowX = function( ) { return window.screenLeft; };
    Geometry.getWindowY = function( ) { return window.screenTop; };
}
else if (window.screenX) { // Firefox and others
    Geometry.getWindowX = function( ) { return window.screenX; };
    Geometry.getWindowY = function( ) { return window.screenY; };
}

if (window.innerWidth) { // All browsers but IE
    Geometry.getViewportWidth = function( ) { return window.innerWidth; };
    Geometry.getViewportHeight = function( ) { return window.innerHeight; };
    Geometry.getHorizontalScroll = function( ) { return window.pageXOffset; };
    Geometry.getVerticalScroll = function( ) { return window.pageYOffset; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
    // These functions are for IE 6 when there is a DOCTYPE
    Geometry.getViewportWidth =
        function( ) { return document.documentElement.clientWidth; };
    Geometry.getViewportHeight =
        function( ) { return document.documentElement.clientHeight; };
    Geometry.getHorizontalScroll =
        function( ) { return document.documentElement.scrollLeft; };
    Geometry.getVerticalScroll =
        function( ) { return document.documentElement.scrollTop; };
}
else if (document.body.clientWidth) {
    // These are for IE4, IE5, and IE6 without a DOCTYPE
    Geometry.getViewportWidth =
        function( ) { return document.body.clientWidth; };
    Geometry.getViewportHeight =
        function( ) { return document.body.clientHeight; };
    Geometry.getHorizontalScroll =
        function( ) { return document.body.scrollLeft; };
    Geometry.getVerticalScroll =
        function( ) { return document.body.scrollTop; };
}

// These functions return the size of the document. They are not window
// related, but they are useful to have here anyway.
if (document.documentElement && document.documentElemnet.scrollWidth) {
    Geometry.getDocumentWidth =
        function( ) { return document.documentElement.scrollWidth; };
    Geometry.getDocumentHeight =
        function( ) { return document.documentElement.scrollHeight; };
}
else if (document.body.scrollWidth) {
    Geometry.getDocumentWidth =
        function( ) { return document.body.scrollWidth; };
    Geometry.getDocumentHeight =
        function( ) { return document.body.scrollHeight; };
}