We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byJolie Holmes
Modified over 2 years ago
© Park University, 2006 Element Positioning Positioning was covered with CSS. –CSS-P is CSS Positioning – where CSS is used to position elements (absolute, relative and static positioning) –CSS-P was released by W3C in 1997 –Completely supported by IE6 and NS7 Review –Please review absolute and relative positioning examples from your CSS presentation in week 5!
© Park University, 2006 Moving Elements If position is set to either absolute or relative, the element can be moved after it is displayed Just change the top and left property values with a script
© Park University, 2006 mover.html Step 1. Open Notepad & type header & the code Type this code Change top & left properties Change src to "stars.gif"
© Park University, 2006 mover.html Step 2. Save and preview in browser Try entering different values for x and y
© Park University, 2006 Element Visibility The visibility property of an element controls whether it is displayed The values are visible and hidden if (dom.visibility == "visible" dom.visibility = "hidden"; else dom.visibility = "visible"; if (dom.visibility == "visible" dom.visibility = "hidden"; else dom.visibility = "visible";
© Park University, 2006 showHide.html Step 1. Open Notepad & type header & the code Type this code Toggle Visibility property Notice the airplane picture was used instead of Saturn!
© Park University, 2006 showHide.html Step 2. Save & preview in a browser
© Park University, 2006 Changing Colors and Fonts Colors –Background color is controlled by the backgroundColor property –Foreground color is controlled by the color property Background color: –The actual parameter this.value works because at the time of the call, this is a reference to the text box (the element in which the call is made) –So, this.value is the name of the new color
© Park University, 2006 dynColors.htm Step 1. Open Notepad & type header & the code Change background color Change text color Type this code
© Park University, 2006 dynColors.htm Step 2. Save & preview in a browser
© Park University, 2006 Changing fonts We can change the font properties of a link by using the mouseover and mouseout events to trigger a script that makes the changes onmouseover = "this.style.color = 'blue'; this.style.font = 'italic 16pt Times';" onmouseout = "this.style.color = 'black'; this.style.font = 'normal 16pt Times';” onmouseover = "this.style.color = 'blue'; this.style.font = 'italic 16pt Times';" onmouseout = "this.style.color = 'black'; this.style.font = 'normal 16pt Times';”
© Park University, 2006 dynLink.html Step 1. Open Notepad & type header & the code
© Park University, 2006 dynLink.html Step 2. Save & preview in a browser Step 3. Mouse over the link to see the new link style!
© Park University, 2006 dynValue.html Step 1. Open Notepad & type header & the code. Type this code Create a string array of helper messages
© Park University, 2006 dynValue.html Step 2. Type the code as shown Type this code Pass the helper number when you call for a help message
© Park University, 2006 dynValue.html Step 3. Save & preview in a browser Notice as you fill out the form, the message in the textarea dynamically changes.
© Park University, 2006 Stacking Elements To change stacking order, –the handler function must change the zIndex property value of the element –A call to the function from an element sets the zIndex value of the new top element to 10 and the zIndex value of the old top element to 0 –It also sets the current top to the new top
© Park University, 2006 stacking.html Step 1. Open Notepad & type header & the code Type this code
© Park University, 2006 stacking.html Step 2. Type the code Type this code
© Park University, 2006 stacking.html Step 3. Save & preview in a browser The image is literally covering the other two images because it’s larger than the other two in this example! Try modifying this page with three of your favorite graphics!
© Park University, 2006 stacking.html If you were to use the original graphics, this is what you should see:
© Park University, 2006 stacking.html After clicking on the second image
© Park University, 2006 stacking.html Sfter clicking on the bottom image
© Park University, 2006 Locating the Mouse Cursor The coordinates of the element that caused an event are available in the clientX and clientY properties of the event object –These are relative to upper left corner of the browser display window – screenX and screenY are relative to the upper left corner of the whole client screen –If we want to locate the mouse cursor when the mouse button is clicked, we can use the click event
© Park University, 2006 where.html Step 1. Open Notepad & type the code Type this code Client Area Coordinates Screen Coordinates
© Park University, 2006 where.html Step 2. Save & preview in a browser Click on the upper right corner, just outside of the image to view the coordinates.
© Park University, 2006 Reacting to a Mouse Click A mouse click can be used to trigger an action, no matter where the mouse cursor is in the display –Use event handlers for onmousedown and onmouseup that change the visibility attribute of the message
© Park University, 2006 anywhere.html Step 1. Open Notepad & type header & the code Type this code By putting the code in the body element it applies to the whole document!
© Park University, 2006 anywhere.html Step 2. Save & preview in a browser Note that this doesn’t work IE!
© Park University, 2006 Slow Movement of Elements Move a text element from its initial –position (100, 100) to a new position (300, 300) –Use the onload attribute of the body element to initialize the position of the element –Use a move function to change the top and left attributes by one pixel in the direction of the destination Problem: –coordinate properties are stored as strings, –which include the units ("150px")
© Park University, 2006 moveText.html Step 1. Open Notepad & type header & the code Type this code Use an external JS file
© Park University, 2006 moveText.html Step 2. Create the external JS file Type this code
© Park University, 2006 moveText.html Step 3. Create the external JS file Type this code
© Park University, 2006 moveText.html Step 4. Save & preview in a browser
© Park University, 2006 Dragging and Dropping We can use mousedown, mousemove, and mouseup events to grab, drag, and drop –We know how to move an element - just change its left and top properties Magnetic poetry –The DOM 2 event model is required (the Event object and its property, currentTarget) –We use both DOM 0 and DOM 2 models (DOM 0 to call the mousedown handler, grabber)
© Park University, 2006 How to Drag & Drop Elements Drag and drop requires 3 processes: 1.Get the dom of the element to be moved when the mouse button is pressed down (onmousedown) while the mouse cursor is over the element to be moved We can get the DOM of the element on which an event occurred with the currentTarget property of the event object 2.Move the element by changing its top and left properties of the element as the mouse cursor is moved (onmousemove) Compute the distance of each move as the difference between the current position (the left and top values) and the mouse click position ( clientX and clientY ) 3.Dropping the element when the mouse button is released by undefining the dom used to carry out the move
© Park University, 2006 dragNDrop.html Step 1. Open Notepad & type header & the code as shown on page 258 – 261. Step 2. Save & preview in a browser –This will not work with IE6!
© Park University, 2006 Now you are all ready to start building interactive web applications! If you need more help, post your questions in the weekly Q & A discussion forum. Ready, Set, Go!
Chapter 6 © 2014 by Pearson Education Introduction Def: A dynamic HTML document is one whose tag attributes, tag contents, or element style properties.
Chapter 6 © 2003 by Addison-Wesley, Inc Introduction - Dynamic HTML is not a new markup language - A dynamic HTML document is one whose tag attributes,
Chapter 6 © 2012 by Addison Wesley Longman, Inc Introduction Def: A dynamic HTML document is one whose tag attributes, tag contents, or element.
Chapter 8 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 8 Sebesta: Programming the World Wide Web.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Cos 381 Day 12.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.
Copyright © Terry Felke-Morris Web Development & Design Foundations with HTML5 8 th Edition CHAPTER 14 KEY CONCEPTS 1 Copyright.
CIS 375—Web App Dev II DHTML. 2 Introduction to DHTML _________ HTML is “a term used by some vendors to describe the combination of HTML, style sheets.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Interactive Client-Side Technologies MMIS 656 Web Design Technologies Acknowledgements: Estrella, S. (2003). The Web Wizard’s Guide to DHTML and CSS.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
Web Development & Design Foundations with XHTML Chapter 14 Key Concepts.
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (NON-Audio version) © Dr. David C. Gibbs WDMD.
Tutorial 4 Creating Special Effects with CSS. Selector Patterns On a Web page, elements are nested within other elements, forming a hierarchical tree.
COS 125 DAY 20. Agenda Assignment 8 not corrected yet Assignment 9 posted Due April 16 New course time line Discussion on Scripts
© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
Programming in HTML. Programming Language Used to design/create web pages Hyper Text Markup Language Markup Language Series of Markup tags
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
DHTML - Introduction Chapter Introduction to DHTML, the DOM, JS review.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Introducing DHTML. Goals Understand the concept of DHTML as a tool for creating dynamic content Understand how to use DOM properties to make changes in.
© 2016 SlidePlayer.com Inc. All rights reserved.