View
221
Download
2
Category
Preview:
Citation preview
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
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"><b>Quality Digital Equipment and Accessories</b></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>
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"?
Toggle Functionfunction toggleView(Text) { if (Text.className=="hide") { Text.className="unhide" } else { Text.className="hide" }}
Recommended