You can use CSS to rectify this. The help panel will have two states:
closed (which is the default) and open. When closed, you simply need to hide the panel
altogether. To this end, add this style rule to your CSS:
#help {
display: none;
}
When the panel is open the main panel needs to make space on the right for the panel,
and the panel needs to be shown in that space. You could do this by manipulating the element??™s
style property with JavaScript, but it??™s much better to use the right tool for the right
job. CSS is for presentation, so you can use a class on the body to denote whether the page
has help open or closed. If the body of the document has the class name with-help you can
apply the relevant styles to show the help panel. Add the following to the CSS:
body.with-help {
margin-right: 350px;
}
CHAPTER 9 n A DYNAMIC HELP SYSTEM 195
body.with-help #help {
background: #F4EEBC;
border: 1px solid #000;
border-color: #CCC #333 #333 #CCC;
width: 320px;
position: absolute;
top: 0;
right: 0;
margin: 8px 30px;
padding: 10px;
overflow: hidden;
}
If you have Firebug installed in your browser you can test the open and closed states by
opening the console and typing the following:
document.body.className = "with-help";
Enter Prototype and Low Pro
Prototype was the first of the current generation of JavaScript libraries that are powering many
of the latest applications on the Web.
Pages:
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274