Hoặc, chính xác hơn, chúng ta có thể hợp nhất các yếu tố font chữ: . robot {font mới đậm 14pt chuyển phát nhanh, chuyển phát nhanh, monospace, màu sắc: màu xám;} | Indicating freshness of data 243 name Venus distance diameter facts 0 Figure The modified Objectviewer displaying a recently edited value for the diameter property which is styled to have a colored background. The styling will disappear after a short period of time when the edit is no longer new and noteworthy. Because of the limitations of the JavaScript setTimeout method we assign a unique ID to the DOM node being styled to allow us to find it again when the timer calls the age function Q. age also tidies up the ID and other temporary references. Figure shows the ObjectViewer with a recently edited value. The user s eye will be drawn toward the recently edited value because of the change in color. Another way of drawing the user s attention is to use animation and we ll see how simple that can be in the next section. Highlighting with the Scriptaculous Effects library We ve created a simple styling effect by hand here in part because it s easy to display in the static medium of a printed book with screen shots. For production we recommend the Scriptaculous library s Effect objects as a simple way of adding sparkle to your inline notifications. We briefly introduced this library in section where we noted that it provides one-line calls for styling DOM elements with a variety of animated effects and transitions. We can easily rewrite our setStatus method from listing to make use of Scriptaculous Effects. Let s say that we want to make recently edited entries pulsate using the object. This will make them fade in and out repeatedly in a way that certainly catches the eye but unfortunately can t be captured in a screen shot. Listing shows the changes necessary to make this work. Listing Styling recent edits with Scriptaculous function status status if null if status new .
