Initial commit (2285b1d0) · Commits · examples / Dynamic HTML The Definitive Reference 2nd Edition

9780596003166

0 → 120000

+1 −0

Changes for 9780596003166: 1 added line, 0 removed lines.
Original line number	Diff line number	Diff line
		9780596003166
		No newline at end of file

DHTMLTDR2 Examples Files/DHTMLapi.js

0 → 100644

+229 −0

Changes for DHTMLTDR2 Examples Files/DHTMLapi.js: 229 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		/* ***********************************************************
		Example 4-3 (DHTMLapi.js)
		"Dynamic HTML:The Definitive Reference"
		2nd Edition
		by Danny Goodman
		Published by O'Reilly & Associates ISBN 1-56592-494-0
		http://www.oreilly.com
		Copyright 2002 Danny Goodman. All Rights Reserved.
		************************************************************ */
		// DHTMLapi.js custom API for cross-platform
		// object positioning by Danny Goodman (http://www.dannyg.com).
		// Release 2.0. Supports NN4, IE, and W3C DOMs.

		// Global variables
		var isCSS, isW3C, isIE4, isNN4;
		// initialize upon load to let all browsers establish content objects
		function initDHTMLAPI() {
		if (document.images) {
		isCSS = (document.body && document.body.style) ? true : false;
		isW3C = (isCSS && document.getElementById) ? true : false;
		isIE4 = (isCSS && document.all) ? true : false;
		isNN4 = (document.layers) ? true : false;
		isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
		}
		}
		// set event handler to initialize API
		window.onload = initDHTMLAPI;

		// Seek nested NN4 layer from string name
		function seekLayer(doc, name) {
		var theObj;
		for (var i = 0; i < doc.layers.length; i++) {
		if (doc.layers[i].name == name) {
		theObj = doc.layers[i];
		break;
		}
		// dive into nested layers if necessary
		if (doc.layers[i].document.layers.length > 0) {
		theObj = seekLayer(document.layers[i].document, name);
		}
		}
		return theObj;
		}

		// Convert object name string or object reference
		// into a valid element object reference
		function getRawObject(obj) {
		var theObj;
		if (typeof obj == "string") {
		if (isW3C) {
		theObj = document.getElementById(obj);
		} else if (isIE4) {
		theObj = document.all(obj);
		} else if (isNN4) {
		theObj = seekLayer(document, obj);
		}
		} else {
		// pass through object reference
		theObj = obj;
		}
		return theObj;
		}

		// Convert object name string or object reference
		// into a valid style (or NN4 layer) reference
		function getObject(obj) {
		var theObj = getRawObject(obj);
		if (theObj && isCSS) {
		theObj = theObj.style;
		}
		return theObj;
		}

		// Position an object at a specific pixel coordinate
		function shiftTo(obj, x, y) {
		var theObj = getObject(obj);
		if (theObj) {
		if (isCSS) {
		// equalize incorrect numeric value type
		var units = (typeof theObj.left == "string") ? "px" : 0
		theObj.left = x + units;
		theObj.top = y + units;
		} else if (isNN4) {
		theObj.moveTo(x,y)
		}
		}
		}

		// Move an object by x and/or y pixels
		function shiftBy(obj, deltaX, deltaY) {
		var theObj = getObject(obj);
		if (theObj) {
		if (isCSS) {
		// equalize incorrect numeric value type
		var units = (typeof theObj.left == "string") ? "px" : 0
		theObj.left = getObjectLeft(obj) + deltaX + units;
		theObj.top = getObjectTop(obj) + deltaY + units;
		} else if (isNN4) {
		theObj.moveBy(deltaX, deltaY);
		}
		}
		}

		// Set the z-order of an object
		function setZIndex(obj, zOrder) {
		var theObj = getObject(obj);
		if (theObj) {
		theObj.zIndex = zOrder;
		}
		}

		// Set the background color of an object
		function setBGColor(obj, color) {
		var theObj = getObject(obj);
		if (theObj) {
		if (isNN4) {
		theObj.bgColor = color;
		} else if (isCSS) {
		theObj.backgroundColor = color;
		}
		}
		}

		// Set the visibility of an object to visible
		function show(obj) {
		var theObj = getObject(obj);
		if (theObj) {
		theObj.visibility = "visible";
		}
		}

		// Set the visibility of an object to hidden
		function hide(obj) {
		var theObj = getObject(obj);
		if (theObj) {
		theObj.visibility = "hidden";
		}
		}

		// Retrieve the x coordinate of a positionable object
		function getObjectLeft(obj) {
		var elem = getRawObject(obj);
		var result = 0;
		if (document.defaultView) {
		var style = document.defaultView;
		var cssDecl = style.getComputedStyle(elem, "");
		result = cssDecl.getPropertyValue("left");
		} else if (elem.currentStyle) {
		result = elem.currentStyle.left;
		} else if (elem.style) {
		result = elem.style.left;
		} else if (isNN4) {
		result = elem.left;
		}
		return parseInt(result);
		}

		// Retrieve the y coordinate of a positionable object
		function getObjectTop(obj) {
		var elem = getRawObject(obj);
		var result = 0;
		if (document.defaultView) {
		var style = document.defaultView;
		var cssDecl = style.getComputedStyle(elem, "");
		result = cssDecl.getPropertyValue("top");
		} else if (elem.currentStyle) {
		result = elem.currentStyle.top;
		} else if (elem.style) {
		result = elem.style.top;
		} else if (isNN4) {
		result = elem.top;
		}
		return parseInt(result);
		}

		// Retrieve the rendered width of an element
		function getObjectWidth(obj) {
		var elem = getRawObject(obj);
		var result = 0;
		if (elem.offsetWidth) {
		result = elem.offsetWidth;
		} else if (elem.clip && elem.clip.width) {
		result = elem.clip.width;
		} else if (elem.style && elem.style.pixelWidth) {
		result = elem.style.pixelWidth;
		}
		return parseInt(result);
		}

		// Retrieve the rendered height of an element
		function getObjectHeight(obj) {
		var elem = getRawObject(obj);
		var result = 0;
		if (elem.offsetHeight) {
		result = elem.offsetHeight;
		} else if (elem.clip && elem.clip.height) {
		result = elem.clip.height;
		} else if (elem.style && elem.style.pixelHeight) {
		result = elem.style.pixelHeight;
		}
		return parseInt(result);
		}


		// Return the available content width space in browser window
		function getInsideWindowWidth() {
		if (window.innerWidth) {
		return window.innerWidth;
		} else if (isIE6CSS) {
		// measure the html element's clientWidth
		return document.body.parentElement.clientWidth
		} else if (document.body && document.body.clientWidth) {
		return document.body.clientWidth;
		}
		return 0;
		}
		// Return the available content height space in browser window
		function getInsideWindowHeight() {
		if (window.innerHeight) {
		return window.innerHeight;
		} else if (isIE6CSS) {
		// measure the html element's clientHeight
		return document.body.parentElement.clientHeight
		} else if (document.body && document.body.clientHeight) {
		return document.body.clientHeight;
		}
		return 0;
		}

DHTMLTDR2 Examples Files/example03-01.html

0 → 100644

+1 −0

<!-- ***********************************************************Example 3-1"Dynamic HTML:The Definitive Reference"2nd Editionby Danny GoodmanPublished by O'Reilly & Associates  ISBN 0-596-00316-1http://www.oreilly.comCopyright 2002 Danny Goodman.  All Rights Reserved.************************************************************ --><html><head><title>Class Society</title><style type="text/css">    p {font-size:14px; margin-left:2em; margin-right:2em}    p.narrow {color:red; margin-left:5em; margin-right:5em}    body {font-family:Arial, sans-serif}</style></head><body><p>This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. </p><p class="narrow">This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color.</p><p>This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. </p><p class="narrow">This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color.</p></body></html>

 No newline at end of file

DHTMLTDR2 Examples Files/example03-02.html

0 → 100644

+1 −0

<!-- ***********************************************************Example 3-2"Dynamic HTML:The Definitive Reference"2nd Editionby Danny GoodmanPublished by O'Reilly & Associates  ISBN 1-56592-494-0http://www.oreilly.comCopyright 2003 Danny Goodman.  All Rights Reserved.************************************************************ --><html><head><title>Free Range Class</title><style type="text/css">    p {font-size:14px; margin-left:2em; margin-right:2em}    p.narrow {color:red; margin-left:5em; margin-right:5em}    .hot {color:red; text-decoration:underline}    body {font-family:Arial, sans-serif}</style></head><body><h1 class="hot">Get a Load of This!</h1><p>This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. </p><div class="hot"><p class="narrow">This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color.</p></div><p>This is a normal paragraph. This is a normal paragraph <span class="hot">but with a red-hot spot</span>. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. </p><p class="narrow">This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color.</p></body></html>

 No newline at end of file

DHTMLTDR2 Examples Files/example03-03.html

0 → 100644

+1 −0

<!-- ***********************************************************Example 3-3"Dynamic HTML:The Definitive Reference"2nd Editionby Danny GoodmanPublished by O'Reilly & Associates  ISBN 1-56592-494-0http://www.oreilly.comCopyright 2003 Danny Goodman.  All Rights Reserved.************************************************************ --><html><head><title>ID Selector</title><style type="text/css">    p {font-size:14px; margin-left:2em; margin-right:2em}    p.narrow {color:red; margin-left:5em; margin-right:5em}    #special4 {border:5px ridge red}    body {font-family:Arial, sans-serif}</style></head><body><h1>Get a Load of This!</h1><p>This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. </p><p class="narrow" id="special4">This is a paragraph to be set apart with wider margins, red color AND a red border. This is a paragraph to be set apart with wider margins, red color AND a red border.</p><p>This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. This is a normal paragraph. </p><p class="narrow">This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color. This is a paragraph to be set apart with wider margins and red color.</p></body></html>

 No newline at end of file