Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 2: Using scalable vector graphics CHAPTER 12 499 FIGURE 12-24 he rendered car using <T path> and <circle> ele ...

500 CHAPTER 12 Drawing with HTML5 Making the SVG scalable The SVG file currently has the contents from the <svg> element, ...

Lesson 2: Using scalable vector graphics CHAPTER 12 501 FIGURE 12-25 The <img> element automatically resizing the <svg& ...

502 CHAPTER 12 Drawing with HTML5 Lesson review Answer the following questions to test your knowledge of the information in this ...

Practice exercises CHAPTER 12 503 In the CanvasPage.html file, add a reference to the default.css, jQuery library, and default. ...

504 CHAPTER 12 Drawing with HTML5 In the default.css file, set the border on the canvas as follows. canvas { border: 1px solid ...

Suggested practice exercises CHAPTER 12 505 Suggested practice exercises The following additional exercises are designed to give ...

Answers This section contains the answers to the lesson review questions in this chapter. Lesson 1 Correct answer: C A. Incorre ...

507 Chapter 13 Drag and drop CHAPTER 13 Drag and drop P rior to HTML5, the ability to drag and drop operations was possible with ...

508 CHAPTER 13 Drag and drop To illustrate the drag and drop technique, consider the following HTML page, which defines a large ...

Lesson 1: Dragging and dropping CHAPTER 13 509 -ms-user-select: none; user-select: none; } The first style rule is for the conta ...

510 CHAPTER 13 Drag and drop </div> <div id="hole2" class="hole"> <div id="item2" draggable="true" class="item"&g ...

Lesson 1: Dragging and dropping CHAPTER 13 511 The following code is placed in the MicroScramble.js file and shows the use of th ...

512 CHAPTER 13 Drag and drop The drop event removes the dropped item from the document object model (DOM) and then adds it back ...

Lesson 1: Dragging and dropping CHAPTER 13 513 Quick check ■■Which two events’ default operations must be prevented to allow the ...

514 CHAPTER 13 Drag and drop You can pass data to the drop event by using the dataTransfer property. The DataTransfer object has ...

Lesson 1: Dragging and dropping CHAPTER 13 515 $('#favoriteCars').on('drop', dropItem); }); function dragging(e) { var val = e.t ...

516 CHAPTER 13 Drag and drop FIGURE 13-4 Completed drag and drop with list items Lesson summary ■■The drag and drop functionalit ...

Lesson 2: Dragging and dropping files CHAPTER 13 517 E. dragover F. dragleave G. drop Which of the following events are associa ...

518 CHAPTER 13 Drag and drop The following HTML document has a <div> element onto which files can be dropped and a <tab ...