Chapter 8. Exploiting JavaScript and DHTML
Working with interactive buttons
Using SharePoint Designer behaviors
Using page transitions
Most of the Web sites on the Internet don't really have static content. Instead, the Web pages are mostly live with dynamics such as dropdown and popup menus, hover-over tabs and buttons, expanding and collapsing content, etc. While HTML is a great technology for developing static Web pages, if you combine it with a client-side scripting technology, such as JavaScript, you can really bring your Web pages to life. Using DHTML effects to enable and disable content on Web pages is recommended by many as a key strategy to structure and simplify access to key areas inside Web sites.
Dynamic effects on Web pages are driven by events. An event is an action that a user who browses to the Web page takes. For example, a user may move the mouse over a certain area or section of the Web page or click a certain HTML tag on the Web page. Most such user actions are categorized into events that can be associated with an HTML tag. When such an event happens, the Web site designer is given control on the operation that needs to be performed for that event. Most common events are onmouseover, onmouseout, onclick, onkeydown, ondlbclick, etc. Using a client-side script, a designer can program what operation should be performed when an event occurs.
SharePoint Designer carries forward one of the key features of dynamic Web page development from FrontPage 2003 called behaviors. Behaviors combined with layers offer limitless capabilities in creating dynamic effects on Web pages. In the back end, behaviors are mostly driven by JavaScript functions. However, SharePoint Designer hides the complexity of these functions from Web designers and offers an intuitive user interface to use JavaScript as a means to vitalize content on Web pages. The SharePoint Designer user doesn't really need to possess understanding of client-side scripting technologies and can just use the interface to use JavaScript for inserting dynamic effects on select HTML content.
In this chapter, I discuss how you can use the SharePoint Designer behaviors to create dynamic Web content. I take you through steps and exercises that help you develop an understanding about how to exploit behaviors in SharePoint Designer. Later in this chapter, I also talk about some legacy FrontPage DHTML effects that you might want to use on your Web sites.
But first, I begin by familiarizing you with one of the other cool features that SharePoint Designer inherited from FrontPage 2003. This feature, called interactive buttons, uses JavaScript at the back end to provide you with a set of buttons that become active when a user hovers over them. Interactive buttons were introduced in FrontPage 2003 and replaced the FrontPage hover buttons.