DHTML 1 (cont.) Positioning, Layout, and Movement

Linking to the API Why do this?

Starting Positions Look at page 1.39, Fig What would you see?

placeObjects(); Where is placeIt(); ? Let's look

Move it! Need starting and stopping coordinates Move it so many pixels at a time (175,10) to (175,260) Check out code on page 1.42 Let's look

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

Time-Delays Need to make it less than instantaneous to the eye Since 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 Intervals Perhaps 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 Resolution Look at fig 1-32, page 1.50 Think of a predefined palette rather than the browser window as a whole Netscape window.outerWidth window.outerHeight IE document.body.clientWidth document.body.clientHeight Don't try to evaluate the results within the Header Code on 1.52

Arrays for Non-Linear Can use arrays for non-linear path animation Page 1.55

DHTML 2 Dynamic Content and Styles

Netscape and Layering For all dynamic content after load, you must rely on and Not as flexible as IE in this aspect Netscape has promised to conform to HTML 4.0 and move away from layering Nice manual on layering at ommunicator/dynhtml/contents.htm

Layering is Important If you are going to use dynamic content on a page, you need to use layers for Netscape Perhaps not in the future For class: We will skip application of it in trade-off for time Still need to understand the concepts in textbook

Inner and Outer Properties IE allows you to modify almost any tag Inner Content between opening and closing tags Outer Content *and* the tags themselves (including tag properties)

Example object.innerText = "text"; Digital Equipment Intro.innerText = "Quality Digital Equipment and Accessories"; Quality Digital Equipment and Accessories Intro.innerText = " Quality Digital Equipment and Accessories "; <b>Quality Digital Equipment and Accessories</b> Why?

Need to Use Intro.innerHTML = " Quality Digital Equipment and Accessories "; Here is my Title Title.outerHTML=" Here is my Title ";

Watch Out! This is my Title Title.outerHTML = " This is my Title "; Title.innerText = "This is a new title";

Insert Content into a Tag object.insertAdjacentText("position", text); object.insertAdjacentHTML("position", text); BeforeBegin AfterBegin BeforeEnd AfterEnd

Example ( ) Pixal Cameras Title.insertAdjacentText("BeforeEnd", "and Accessories"); Pixal Camera and Accessories Title.insertAdjacentHTML("AfterBegin", " Introducing "); Introducing Pixal Camera and Accessories (Book is incorrect, 2.15)

Linking to an HTML File Like the Netscape, but it won't adjust content like Netscape will. So if more content than space…content is cropped

Style Attributes in IE A matter of changing a CSS attribute with some JavaScript Much easier than Netscape In IE object.style.styleAttribute = value; Quote.style.fontSize="16pt"; Most JavaScript style is similar to CSS background-image versus backgroundImage

Multiple CSS Changes object.style.cssText=styles; Quote.style.cssText="color:#ff0000 font-size:16pt"; Use a predefined Class setting object.className=class; Quote.className="casual";

Changing StyleSheets h1 {font-size:36pt} h2 {font-size:34pt} h1 {font-size:20pt} h2 {font-size:18pt}

Disable One h1 {font-size:36pt} h2 {font-size:34pt} h1 {font-size:20pt} h2 {font-size:18pt}

Referring to a StyleSheet You can use large small stylesheets(0) stylesheets(1)

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

CSS Display h1 {font-size:36pt} h2 {font-size:34pt}.hide {display:none}.unhide {display:""} Why "display" instead of "visibility"?

Use those DIVs Show or not? Hide Me No, why not?

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

Use a Click Event Overview