1 / 40

tutorial 8 dynamic html and animation section b ...

Jimmy
Download Presentation

tutorial 8 dynamic html and animation section b ...

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

    1. JavaScript Tutorial 8 - Dynamic HTML and Animation 1 Tutorial 8

    2. JavaScript Tutorial 8 - Dynamic HTML and Animation 2 Tutorial 8B Topics Section B - Animation and Cascading Style Sheets About cascading style sheets How to use JavaScript with styles in Netscape and Internet Explorer About cascading style sheet positioning How to use positioning in Netscape and Internet Explorer About cross-browser compatibility

    3. JavaScript Tutorial 8 - Dynamic HTML and Animation 3 Animation and Cascading Style Sheets Cascading Style Sheets Standard set by the W3C for managing the formatting information of HTML documents A single piece of formatting information is called a style CSS separates document content from its appearance

    4. JavaScript Tutorial 8 - Dynamic HTML and Animation 4 Animation and Cascading Style Sheets Cascading Style Sheets DHTML uses JavaScript to manipulate CSS to dynamically change appearance of tags and position of elements in HTML documents CSS styles are created using name/value pairs separated by a colon Name portion refers to a specific CSS style attribute known as a property

    5. JavaScript Tutorial 8 - Dynamic HTML and Animation 5

    6. JavaScript Tutorial 8 - Dynamic HTML and Animation 6 Animation and Cascading Style Sheets Cascading Style Sheets Two types of CSS styles: Inline styles Determine the appearance of individual tags in an HTML document Document-level style sheets Determine global formatting for HTML tags

    7. JavaScript Tutorial 8 - Dynamic HTML and Animation 7 Animation and Cascading Style Sheets Cascading Style Sheets Inline styles Defined using style attribute along with a string containing the name/value pairs for each style included Multiple properties are separated by semicolons Example: <h1 style=“font-family: serif; font-weight: bold”> text</h1>

    8. JavaScript Tutorial 8 - Dynamic HTML and Animation 8 Animation and Cascading Style Sheets Cascading Style Sheets Document-level style sheets Created within the <style> tag pair placed in the <head> section of a document Style instructions for specific tags are applied to all associated tags contained in the body of the document Tag to which specific style rules in a style sheet apply is called a selector

    9. JavaScript Tutorial 8 - Dynamic HTML and Animation 9 Animation and Cascading Style Sheets Cascading Style Sheets Document-level style sheets Example: <style> h1 {color: red; font-family: “serif”; font-weight: bold} h2 {color: black; font-family: “serif”; font-weight: bold} </style>

    10. JavaScript Tutorial 8 - Dynamic HTML and Animation 10 Animation and Cascading Style Sheets Cascading Style Sheets Class attribute Identifies various elements as part of the same group Can be applied to any HTML tag Syntax: <tag class=“class_name”> e.g., <h1 class=“myClass”>

    11. JavaScript Tutorial 8 - Dynamic HTML and Animation 11 Animation and Cascading Style Sheets Cascading Style Sheets Class attribute Two types of CSS classes Regular class Used to define different style instructions for the same tag Generic class Is similar to a regular class, but it isn’t associated with any particular tag

    12. JavaScript Tutorial 8 - Dynamic HTML and Animation 12 Animation and Cascading Style Sheets Cascading Style Sheets Class attribute Regular class Example: h1.level1 {color: red; font-family: “serif”} h1.level2 {color: black; font-family: “serif”} <h1 class=“level1”>This is red text</h1>

    13. JavaScript Tutorial 8 - Dynamic HTML and Animation 13 Animation and Cascading Style Sheets Cascading Style Sheets Class attribute Generic class Example: .level1 {color: red; font-family: “serif”} <h1 class=“level1”>This is red text</h1>

    14. JavaScript Tutorial 8 - Dynamic HTML and Animation 14 Animation and Cascading Style Sheets Cascading Style Sheets ID attribute Value of an ID attribute uniquely identifies individual tags in an HTML document Syntax: <tag id=“unique_name”> Example: #level1 {color: red; font-family: “serif”} <h1 id=“level1”>This is red text</h1>

    15. JavaScript Tutorial 8 - Dynamic HTML and Animation 15

    16. JavaScript Tutorial 8 - Dynamic HTML and Animation 16

    17. JavaScript Tutorial 8 - Dynamic HTML and Animation 17

    18. JavaScript Tutorial 8 - Dynamic HTML and Animation 18

    19. JavaScript Tutorial 8 - Dynamic HTML and Animation 19 Animation and Cascading Style Sheets Using JavaScript with CSS CSS functionality standardized in DOM Level 2 Browser level support for DOM Level 2 Netscape Navigator ? Version 6 MS Internet Explorer ? Version 5 Older browsers may require specialized code

    20. JavaScript Tutorial 8 - Dynamic HTML and Animation 20 Animation and Cascading Style Sheets Using JavaScript with CSS Using JavaScript and Styles in Older Versions of Navigator DOM in older versions accesses styles for selectors using Document object properties: tags property ? provides access to tag styles classes property ? provides access to class styles ids property ? provides access to id styles Must append to Document object with a period

    21. JavaScript Tutorial 8 - Dynamic HTML and Animation 21 Animation and Cascading Style Sheets Using JavaScript with CSS Using JavaScript and Styles in Older Versions of Navigator Example: document.write(“<h1>H1 tag before defining style properties</h1>”); document.tags.h1.color = “red”; document.tags.h1.fontSize = “24pt”; document.tags.h1.fontFamily = “arial”; document.write(“<h1>H1 tag after defining style properties</h1>”); …

    22. JavaScript Tutorial 8 - Dynamic HTML and Animation 22

    23. JavaScript Tutorial 8 - Dynamic HTML and Animation 23 Animation and Cascading Style Sheets Using JavaScript with CSS Using JavaScript and Styles in Older Versions of Navigator Cannot easily change style values dynamically More useful prior to rendering Can be changed, but may not appear until user resizes the screen

    24. JavaScript Tutorial 8 - Dynamic HTML and Animation 24 Animation and Cascading Style Sheets Using JavaScript with CSS Using JavaScript and Styles in Older Versions of Internet Explorer DOM in older versions accesses styles for selectors using Document object properties and methods: all property ? array of elements in HTML document style property ? style for particular tag or id attribute tags(tag_name) method ? returns array of elements represented by tag name Must append to Document object with a period

    25. JavaScript Tutorial 8 - Dynamic HTML and Animation 25 Animation and Cascading Style Sheets Using JavaScript with CSS Using JavaScript and Styles in Older Versions of Internet Explorer Example: <h1>Assign to allH1Tags[0]</h1> <h1>Assign to allH1Tags[1]</h1> var allH1Tags = document.all.tags(“h1”); Example: document.all.tags(“h1”)[2].style.color = “red”;

    26. JavaScript Tutorial 8 - Dynamic HTML and Animation 26 Animation and Cascading Style Sheets Using JavaScript with CSS Using JavaScript and Styles with W3C DOM getElementByID(ID) method Returns the HTML element represented by ID getElementByTagName(tag_name) method Returns the HTML element represented by tag_name Append to document object with period

    27. JavaScript Tutorial 8 - Dynamic HTML and Animation 27 Animation and Cascading Style Sheets Using JavaScript with CSS Using JavaScript and Styles with W3C DOM Example: var curStyle = document.getElementByID(“bigGreenLine”); curStyle.style.color = “green”; Example: document.getElementByID(“bigGreenLine”).style.color = “green”;

    28. JavaScript Tutorial 8 - Dynamic HTML and Animation 28 Animation and Cascading Style Sheets Using JavaScript with CSS Using JavaScript and Styles with W3C DOM Example: <h1>Assign to allH1Tags[0]</h1> <h1>Assign to allH1Tags[1]</h1> var allH1Tags = document. getElementByTagName(“h1”) allH1Tags[1].stlye.color = “red” Example: document. getElementByTagName(“h1”)[1].stlye.color = “red”

    29. JavaScript Tutorial 8 - Dynamic HTML and Animation 29 Animation and Cascading Style Sheets CSS Positioning Used to position or lay out elements on a Web page Two types Relative Places an element according to other elements on a page Absolute Places an element in a specific location on a page

    30. JavaScript Tutorial 8 - Dynamic HTML and Animation 30

    31. JavaScript Tutorial 8 - Dynamic HTML and Animation 31 Animation and Cascading Style Sheets CSS Positioning Older Navigator browser versions do not recognize CSS positioning for elements that aren’t container elements Encapsulate element to be positioned inside a container element Example: <span style=“position:absolute; left:150; top:165”> <img src =“sun.gif”> </span>

    32. JavaScript Tutorial 8 - Dynamic HTML and Animation 32

    33. JavaScript Tutorial 8 - Dynamic HTML and Animation 33 Animation and Cascading Style Sheets CSS Positioning Dynamic Positioning in Older Versions of Internet Explorer Can dynamically change CSS styles to implement traveling animation Example: document.all.sampleimage.style.left = “3.00in”; Moves element with an ID of sampleimage three inches to the right by changing its left property

    34. JavaScript Tutorial 8 - Dynamic HTML and Animation 34 Animation and Cascading Style Sheets CSS Positioning Dynamic Positioning in Navigator Older versions of Navigator do not use CSS positioning, instead they use layers Layers Used to arrange HTML elements in sections that can be placed on top of one another and moved individually Not part of CSS protocol

    35. JavaScript Tutorial 8 - Dynamic HTML and Animation 35 Animation and Cascading Style Sheets CSS Positioning Dynamic Positioning in Navigator The Layer object contains several properties and methods for manipulating layers in JavaScript moveto() method moves a layer to a specified position accepts two arguments ? #pixels from left side of window and # pixels from top of window offset() method moves a layer a specified number of pixels accepts two arguments ? # pixels horizontally and # pixels vertically

    36. JavaScript Tutorial 8 - Dynamic HTML and Animation 36 Animation and Cascading Style Sheets CSS Positioning Dynamic Positioning with W3C DOM-Compliant Browsers Similar to positioning with JavaScript in IE DOM Difference Replace the all property with a call to getElementByID() or getElementsByTagName() or by variable assigned the return value of one of these methods

    37. JavaScript Tutorial 8 - Dynamic HTML and Animation 37 Animation and Cascading Style Sheets Cross-Browser Compatibility Basic strategy Create DHTML code for DOM in which the code is expected to run Implement “master” document that checks which browser is running and opens the appropriate file Master document typically referred to as a browser sniffer

    38. JavaScript Tutorial 8 - Dynamic HTML and Animation 38 Animation and Cascading Style Sheets Cross-Browser Compatibility Sniffing process Test which DOM being used Check DOM for: Layers property (for older Netscape versions) All property (for older IE versions) getElementsByID() method (for W3C DOM compliant browsers) Test using conditional statements

    39. JavaScript Tutorial 8 - Dynamic HTML and Animation 39

    40. JavaScript Tutorial 8 - Dynamic HTML and Animation 40

More Related