A common feature of modern websites is widespread user interactivity enabled by extensive use of CSS and JavaScript. This allows applications that run inside a web browser to offer the kind of responsiveness that was once reserved for native applications.
In Dreamweaver CS3, Adobe added a library of widgets to enable web builders to make their sites look like cutting-edge destinations. This library—also referred to as a framework—was named Spry. In Dreamweaver CS5, Adobe expanded the program’s ability to use other, more popular frameworks (Spry never really caught on outside Dreamweaver), such as jQuery. In Dreamweaver CC, Spry has been eliminated in favor of widgets drawn from the jQuery UI project. No matter the framework, you don’t need to know anything about CSS or JavaScript to use widgets.
In this chapter, we’ll focus on working with jQuery UI widgets, showing you three examples. We’ll end the chapter by showing you CSS3 transitions, which allow fancy dynamic effects without any JavaScript at all.
Before you start using jQuery widgets, it helps to know a little bit more about JavaScript frameworks and how they work behind the scenes.
When people first started adding JavaScript to pages, they quickly realized that a lot of the work they were doing was the same stuff over and over and over again. In recent years, it’s become common to let JavaScript handle more and more of the user interface (UI) duties. This means that websites have become smarter and more flexible, but it’s also been a lot more work for people who write code. Programmers tend to hate writing new code when they know someone else has already solved that particular problem. Instead, they go looking for free code offered by others, and in return offer their own solutions. The result is shared libraries of code that can handle most of the usual user interface requirements.
However, programmers also tend to have definite (and idiosyncratic) opinions about the “right” way to write code, and the result of that has been the creation of many different frameworks. If you’ve ever heard of libraries such as Dojo, YUI, or Prototype, they’re all more or less the same thing, built by developers who thought that their way of doing things was better than what already existed. Originally, Adobe jumped on the framework bandwagon by creating their own framework, called Spry, with the hope that it would be taken up by the programmer community. That didn’t happen, for a variety of reasons. So Adobe had a problem: Dreamweaver needed a framework, and their homegrown framework hadn’t caught on.
Adobe’s answer to this challenge was to embrace the most popular of the frameworks, jQuery, and add a user interface for jQuery widgets in Dreamweaver CC. A widget is a collection of code snippets (both CSS and JavaScript) that when added to your pages creates some standard effects.
The jQuery framework (jquery.com) is a freely downloadable, open-source set of utilities and controls that help you build interactive web applications. We think it’s one of the best, and since it’s become the most popular framework, it appears most other folks agree. These are some of jQuery’s strengths:
Lightweight: It’s considerably smaller than many of its competitors, which means sites using it load more quickly.
Pre-made user interface widgets: A related open-source project, jQuery UI (jqueryui.com) is a set of user interface interactions and widgets built on top of the jQuery framework. Dreamweaver CC adds several of the jQuery UI widgets to a new category of the Insert panel, making it easy to add the widgets to your pages without any coding at all.
Ubiquitous: It’s very easy to integrate jQuery into your websites. You can host it on your own server, but many people prefer to use a link to jQuery hosted on one of the content delivery networks (CDNs), which are systems of servers spread throughout the Internet’s infrastructure, connected by fast pipes. When the user needs jQuery, the CDN serves it up from the closest server to them, making the page more responsive. Google and Microsoft both host the latest version (and some older versions) of jQuery on their CDNs. Best of all, if the user has recently visited a page that uses jQuery, they may already have some of the jQuery files cached, making your site appear to be amazingly fast.
Active development community: If you have a question, you can ask it in their forum and get a fast response, or you can search the archives to see if it’s a FAQ.
Plug-in architecture: If you need a feature that isn’t in jQuery, there’s a good chance that someone’s written it as a plug-in. An additional benefit of plug-ins is that you’re only adding them to your site when they’re needed—that is, you don’t have their added weight on every page.
Speed: Even in tests created by its competition, jQuery comes out ahead.
Ease of use for non-geeks: Because its selection queries are based on CSS, someone who isn’t a full-time professional programmer can easily drop into jQuery, add some functionality to their site, and have it work the way they expect.
For all of the above reasons, jQuery has become one of the—if not the—most popular JavaScript frameworks available.
Tip
If after working with jQuery you decide that you want to learn more about JavaScript, we recommend another book we’ve written: JavaScript: Visual QuickStart Guide, Eighth Edition (Peachpit, 2012).
New to Dreamweaver CC is a set of jQuery UI widgets, which you can find in the new jQuery UI category of the Insert panel. Some of the widgets can work alone on a page, such as the Accordion, Tabs, and Dialog widgets. Others are meant to help you add extra interactive zing to forms, such as the Datepicker, Autocomplete, and Button widgets. We don’t have the space to document all of the widgets, so we’ve picked three as good examples: Accordion (as an informational element on the page), Autocomplete (to help fill out a form), and Datepicker (to easily choose a date in a form).
An Accordion widget is a set of panels in which one (and only one) is displayed at a time. When the user clicks a panel control, the panel opens or closes, with an animated effect. It’s a handy way to present several discrete chunks of information in a limited space.
1. In Design view, decide where you want the accordion on your page, and click the Accordion button in the jQuery UI category of the Insert panel .
The accordion appears on the page . By default, the accordion has three sections, each with a header and content area. If you click the accordion’s blue tab to select it, the Property inspector changes to show the widget’s specific controls .
The first thing you need to do is change the section names. To do that, you select and type over each name.
2. Select and type over the first content section .
3. To close the first content section and open the second content section for editing, move the mouse pointer to the right edge of the second header until the eye icon appears, with the tool tip “Click to show panel content.” Click the eye icon .
The second content area appears .
4. Select and type over the second content section.
5. Repeat steps 3 and 4 for the third content section.
6. To see your work, click the Live View button or preview in a browser.
Tip
The Accordion widget doesn’t automatically take on the styling of the rest of the page; you have to style it to match using the CSS Designer panel.
The Property inspector changes to show the Accordion controls . These controls are as follows:
ID: Shows the name of the accordion, for use in targeting CSS and JavaScript.
Panels: Shows the names of each of the accordion’s panels, based on entries in each panel’s section areas.
Panel move buttons: Moves selected panels up or down in the list.
Panel add or remove buttons: Adds or removes panels from the accordion.
Active: the panel to be displayed by default. Numbering begins at 0, as is the way in JavaScript, so if you want the first panel to be active when the page loads, this field must contain 0.
Event: What user event you want to trigger a panel animation. Your choices are click and mouseover.
Height Style: Controls the height of the accordion and each panel. Your choices are auto, in which all panels will be set to the height of the tallest panel; fill, which makes each panel expand to the available height based on the accordion’s parent height; and content, which sets each panel to be only as tall as its content.
Disabled: Selecting this disables the accordion’s actions. Useful if you want to have an accordion on the page but disable it in certain circumstances, perhaps using a script to enable it when certain conditions are met. Note that selecting this does not remove the accordion from the page; it just keeps it from working.
Collapsible: If this is selected, then the user will be able to collapse all sections of the accordion. If unselected, one section will always remain open. We prefer to have this selected; the first section will always appear open when the page loads.
Animate: Allows you to choose the kind of animation the accordion uses.
Duration: The animation duration, in milliseconds. The default is 400 milliseconds, or four tenths of a second.
Icons: Allows you to choose the header and active header icons.
2. Adjust the controls in the Property inspector to make the changes you want. To move a panel up or down in the accordion, select its name in the Panels list and click the up or down buttons. To add more panels, click the plus (+) button, then enter the section name and content.
Tip
To remove an Accordion widget, click its blue tab to select it and then press Delete.
Tip
If you need more information about any of the jQuery UI widgets, you can find it at the jQuery UI website (jqueryui.com). In fact, clicking the Help button in the Property inspector when you have a jQuery UI widget selected takes you not to the Adobe site for more information, as is usual, but to the jQuery UI site. If you look at a particular widget’s page and click the link to see the API documentation, you’ll get detailed information on the widget’s options, methods, and events.
The jQuery Autocomplete widget consists of a form field that has a pre-populated list of values. As a user types in the field, the list appears and the number of items in the list filter down and shrink to match the user’s entries . In Dreamweaver, you can either supply a list of values for the autocomplete list, or you can pull the data in from a remote source by supplying its URL.
1. In Design view, decide where you want the autocomplete field within a form on your page, and click the Autocomplete button in the jQuery UI category of the Insert panel .
The autocomplete field appears in your layout , and the Property inspector changes . The controls in the Property inspector are as follows:
ID: Shows the name of the autocomplete field, for use in targeting CSS and JavaScript.
Source: The values of the autocomplete list, either typed into the field or a URL to a list of values.
Min Length: The minimum number of characters a user must type before a search is performed.
Delay: The delay in milliseconds between when a keystroke occurs and when a search is performed.
Append To: The element the menu should be appended to. The default is body.
Auto Focus: If this is selected, the first item in the list will automatically be selected when the menu is shown.
Position: These controls set the position of the suggestions menu in relation to the autocomplete field.
2. You must specify a source for the autocomplete widget to work. In the Source field, enter a list of values in the form ["value1", "value2", "value3"]. In our example, we used the following values: ["Amazon Trekking", "Patagonian Expedition", "Whale Watching in Baja"].
or
Enter a URL in quotes, such as "http://www.example.com". The URL resource must be able to return data in JSON format.
3. To see your work, click the Live View button or preview in a browser.
Tip
The values list automatically filters as the user types, but the user can also do the following: click the arrow keys to move the selection up and down the list; press the Enter (Return) key to close the list; and press the Enter key to select the current item and close the list.
The Datepicker widget makes an interactive calendar appear in a small overlay next to a form input field . The user can navigate in the calendar, and when they select a date by clicking it, the date appears in the form field. You can choose how many months appear in the overlay, and you can control the date formatting and several other aspects of the calendar.
1. In Design view, decide where you want the datepicker field within a form on your page, and click the Datepicker button in the jQuery UI category of the Insert panel .
The autocomplete field appears in your layout, and the Property inspector changes . The controls in the Property inspector are as follows:
ID: Shows the name of the datepicker field, for use in targeting CSS and JavaScript.
Date Format: Pick the date format you want from this pop-up menu.
Locale: Pick the calendar language.
Button Image: If this is selected, you can then specify an image to use for the button that appears with the form field. Clicking the button makes the calendar appear.
Change Month: If this is selected, the month name in the calendar becomes a pop-up menu that allows the user to select any month.
Change Year: If this is selected, the year in the calendar becomes a pop-up menu that allows the user to select a range of years.
Inline: If this is selected, the calendar appears instead of the form field.
Show Button Panel: If this is selected, a panel with Today and Done buttons appears below the calendar.
Min Date: The minimum selectable date, in the number of days. For example, if you wanted to prevent the selection of a date more than two days ago, you would enter –2; days previous to that will not be selectable in the calendar. If this field is empty, there is no minimum.
Max Date: The maximum selectable date, in the number of days. For example, if you want to prevent the selection of a date more than two weeks in the future, you would enter 14; subsequent days will not be selectable in the calendar. If this field is empty, there is no maximum.
Number Of Months: Allows you to choose to show more than one month in the calendar pop-up.
2. Adjust the settings in the Property inspector so the calendar appears as you want.
3. To see your work, click the Live View button or preview in a browser.
You’ve seen how you can change a CSS property when the user performs some action. For example, in Chapter 8, you saw how to use CSS to make navigation menus without needing JavaScript. In that case, when the user hovered the cursor over a menu, the CSS property was changed instantly and the menu appeared or disappeared. But what if you wanted to have the CSS change from one property to another over time, creating an animation effect? You can do that with a CSS3 feature introduced with Dreamweaver CS6: CSS transitions. Transitions are designed to smoothly change properties when triggered by the user’s interactions (hovering, clicking, and the like), and you have a lot of control over the effect’s duration and how the effect changes over time.
Here’s a page with a lovely gallery of alpacas , but we’d like to allow viewers to see an image at a larger scale when they hover the cursor over it. The image smoothly grows from its initial size to its final size. Here’s how to make it happen.
1. Open the gallery page in Dreamweaver, and choose Window > CSS Transitions.
The CSS Transitions panel appears . It may appear as a floating panel. You can use it in this way, or you can drag it into the same tab group as the CSS Designer panel, as we’ve done here.
2. In the CSS Transitions panel, click the + to bring up the New Transition dialog, which is where all the work gets done .
3. As always with CSS, start by figuring out the target rule. In this case, the action should happen on all images that are inside paragraphs, so the target rule is p img .
4. Transition On is the pop-up menu where you set when you want your transition to occur :
active is triggered when an element is engaged or activated.
checked is triggered when an element (such as a check box or radio button) is selected.
disabled is triggered when a UI element is disabled.
enabled is triggered when a UI element is enabled.
focus is triggered when an element on the page is given focus.
hover is triggered when a user moves the cursor over an element but has not yet clicked it.
indeterminate is triggered when the browser can’t tell if a UI element has been enabled or disabled.
target allows one element on the page to modify another.
We want things to happen when users hover over the images, so we set Transition On to hover.
5. We could make the image’s height and width expand and shrink at different rates, but that would be obnoxious, so we’ll leave the default, “Use the same transition for all properties,” selected .
6. The Duration setting is how long an effect takes to complete, and the Delay setting is how long the browser should wait before beginning the effect. Either can be set in seconds or microseconds; we’ll set Duration to 2 seconds and leave Delay alone .
7. Unless you can handle how Bezier curves work in your sleep, the Timing Function setting can be a little complex . Here’s a high-level cheat sheet:
cubic-bezier(x1,y1,x2,y2): Allows more technical users to set their own values.
ease: Transition starts moderately slowly, picks up speed, and then slows down gradually. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in: Transition starts slowly, then speeds up at the end. Equivalent to cubic-bezier(0.42, 0.0, 1.0, 1.0).
ease-in-out: Transition starts slowly, speeds up in the middle, and then slows down again at the end. Equivalent to cubic-bezier(0.42, 0.0, 0.58, 1.0).
ease-out: Transition starts quickly, then slows down at the end. Equivalent to cubic-bezier(0.0, 0.0, 0.58, 1.0).
linear: Transition occurs at a steady rate. Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).
The default is ease, so that’s what we’ll stick with.
8. Property is where you choose the properties that you want to modify. Click the + button under Property to select your choice from the pop-up menu . Dreamweaver lets you set each property’s end value, so the choices available on the right will vary depending on which property you’re changing (for example, the visibility property has the end values shown in the pop-up menu in ).
Here, we’re going to set two properties (height and width), and our end values will be three times the size of the current value. That is, our image width of 256 pixels and image height of 192 pixels become 768 and 576, respectively .
Repeat this step for each property of the target rule that needs a transition.
9. Finally, decide where you want to create the transition—in the current page, or in a new or existing external style sheet . When you’re done, click Create Transition.
10. Switch into Live view or load the page in your browser , and view the resulting beauty of the gentle members of the camelid family .
Tip
If you’re not sure about which Timing Function setting to use, play around with them! The best way to decide is to just try different values and see which one works best for you.
Tip
If you want a rule that applies to a particular ID or class and you’re having trouble remembering the name, click the Target Rule pop-up, and you’ll get a list of every CSS property currently in use.
Tip
The end values of properties aren’t always sizes. Because of the varying nature of properties that support transitions, you can have anything from color pickers on up. The choices for text-shadow, for instance, are fairly complex .
3.143.203.96