Author: Brian P. Hogan
Pub Date: 2013
Size: 10 Mb
HTML5 and CSS3 are more than just buzzwords–they’re the foundation for today’s web applications. This book gets you up to speed on the HTML5 elements and CSS3 features you can use right now in your current projects, with backwards compatible solutions that ensure that you don’t leave users of older browsers behind. This new edition covers even more new features, including CSS animations, IndexedDB, and client-side validations.
HTML5 and CSS3 power today’s web applications, with semantic markup, better forms, native multimedia, animations, and powerful APIs. You’ll get hands-on with all the new features with practical example projects, and find what you need quickly with this book’s modular structure. “Falling Back” sections show you how to create solutions for older browsers, and “The Future” sections at the end of each chapter get you excited about the possibilities when features mature.
Creating Interactive Web Applications
Many of these APIs started out as part of the HTML5 specification and were eventually spun off into their own projects. Others were never part of HTML5 proper, but have become so associated with HTML5 that sometimes it’s hard for developers to really tell the difference. But by combining what you ’ve already learned with these new features, you ’ll be able to provide better experiences for your users. Let’s start with a look at the History API.
The message from the server comes back to us via the event object’s data property. We just add it to our chat window. We ’ll prepend a break so each response falls on its own line, but you could mark this up any way you want. On line 3, we use jQuery to make the chat window scroll so we can see the new message at the bottom.
Before we write the code to make the cards sortable, let’s go over how it’s going to work. When we drag one card over another card, the card we dragged will be inserted after the card we drag it over. To do that, we ’ll pass the ID of the card we ’re dragging to the element we ’re dropping the card on. When the card is dropped, we ’ll use jQuery to locate the original element by its ID and move it into the proper position.