DHTML 1 (cont.)

Positioning, Layout, and Movement

Linking to the APIWhy do this?

<script language="JavaScript" src="Avalon.js"></script>

Starting PositionsLook at page 1.39, Fig. 1-23What would you see?

placeObjects();Where is placeIt(); ?

Let's look

Move it!Need starting and stopping coordinatesMove it so many pixels at a time

(175,10) to (175,260)

Check out code on page 1.42Let's look

Moving Avalonfunction moveAvalon() { var y = ycoord("avalon"); if (y <= 260) { shiftIt("avalon", 0, 10); shiftIt("books", 0, 10); moveAvalon(); } else { // run moveBooks function; }}

Time-DelaysNeed to make it less than instantaneous to the eyeSince JavaScript has no "pause" command

MAdelay = setTimeout("moveAvalon()", 5);

If you need to cancel a delay (so you can perhaps start it again)

clearTimeout(MAdelay);clearTimeout();

Setting IntervalsPerhaps you want to run a script that executes at specified intervals

checking the seconds on a page….

setInterval("command", interval)In milliseconds

clearInterval();With both set and clear you can use id_variables as well

Monitor ResolutionLook at fig 1-32, page 1.50Think of a predefined palette rather than the browser window as a wholeNetscape

window.outerWidthwindow.outerHeight

IEdocument.body.clientWidthdocument.body.clientHeight

Don't try to evaluate the results within the HeaderCode on 1.52

Arrays for Non-LinearCan use arrays for non-linear path animationPage 1.55

DHTML 2

Dynamic Content and Styles

Netscape and LayeringFor all dynamic content after load, you must rely on <layer> and <ilayer>Not as flexible as IE in this aspectNetscape has promised to conform to HTML 4.0 and move away from layeringNice manual on layering at

http://developer.netscape.com/docs/manuals/communicator/dynhtml/contents.htm

Layering is ImportantIf you are going to use dynamic content on a page, you need to use layers for NetscapePerhaps not in the futureFor class: We will skip application of it in trade-off for time

Still need to understand the concepts in textbook

Inner and Outer PropertiesIE allows you to modify almost any tagInner

Content between opening and closing tags

OuterContent *and* the tags themselves (including tag properties)

Exampleobject.innerText = "text";<div id="Intro">Digital Equipment</div>

Intro.innerText = "Quality Digital Equipment and Accessories";<div id="Intro">Quality Digital Equipment and Accessories</div>

Intro.innerText = "<b>Quality Digital Equipment and Accessories</b>";

<div id="Intro">&lt;b&gt;Quality Digital Equipment and Accessories&lt;/b&gt;</div>

Why?

Need to UseIntro.innerHTML = "<b>Quality Digital Equipment and

Accessories</b>";

<h1 id="Title">Here is my Title</h1>Title.outerHTML="<h2 id=Title>Here is my Title</h2>";

Watch Out!<h1 id="Title>This is my Title</h1>

Title.outerHTML = "<h2>This is my Title</h2>";Title.innerText = "This is a new title";

Insert Content into a Tagobject.insertAdjacentText("position",

text);object.insertAdjacentHTML("position",

text);

BeforeBeginAfterBeginBeforeEndAfterEnd

Example (2.14-2.15)<h1 id="Title">Pixal Cameras</h1>

Title.insertAdjacentText("BeforeEnd", "and Accessories");Pixal Camera and Accessories

Title.insertAdjacentHTML("AfterBegin", "<i>Introducing</i>");

Introducing Pixal Camera and Accessories

(Book is incorrect, 2.15)

Linking to an HTML File<iframe src="url" width="" height="" frameborder="no">

Like the Netscape <layer>, but it won't adjust content like Netscape will. So if more content than space…content is cropped

Style Attributes in IEA matter of changing a CSS attribute with some JavaScriptMuch easier than NetscapeIn IE

object.style.styleAttribute = value;Quote.style.fontSize="16pt";Most JavaScript style is similar to CSS

background-image versus backgroundImage

Multiple CSS Changesobject.style.cssText=styles;

Quote.style.cssText="color:#ff0000 font-size:16pt";

Use a predefined Class settingobject.className=class;Quote.className="casual";

Changing StyleSheets<style id="large"> h1 {font-size:36pt} h2 {font-size:34pt}</style>

<style id="small"> h1 {font-size:20pt} h2 {font-size:18pt}</style>

Disable One<style id="large"> h1 {font-size:36pt} h2 {font-size:34pt}</style>

<style id="small" disabled> h1 {font-size:20pt} h2 {font-size:18pt}</style>

Referring to a StyleSheetYou can use

largesmallstylesheets(0)stylesheets(1)

Using and Manipulatingsmall.disabled=true;small.disabled=false;large.addRule("h3", "font-color:#ff0000");

CSS Display<style id="large"> h1 {font-size:36pt} h2 {font-size:34pt} .hide {display:none} .unhide {display:""}</style>

Why "display" instead of "visibility"?

Use those DIVsShow or not?

<div id="Overview" class="hide>Hide Me</div>

No, why not?

Toggle Functionfunction toggleView(Text) { if (Text.className=="hide") { Text.className="unhide" } else { Text.className="hide" }}

Use a Click Event

<h2 onClick="toggleView(Overview)">Overview</h2>