You also still need to ensure that the withhelp
class name is added and removed as before.
Returning to application.js, you now need to create the effects objects that you can use
to perform the animations. You can keep the effects you need inside the fx property of the
Help object and you need to create them only once??”as soon as the DOM is available. To do
this, use Low Pro??™s Event.onReady() method:
Event.onReady(function() {
Help.fx = {
openHelp: new fx.Style('help', 'width', {
onStart : function() {
$(document.body).addClassName('with-help');
}
}),
closeHelp: new fx.Style('help', 'width', {
onComplete : function() {
$(document.body).removeClassName('with-help');
}
}),
slideBody: new fx.Style(document.body, 'margin-right')
};
});
Here three effects are defined. First is openHelp, which operates on the width property
of the help element??”the sidebar. You use the onStart callback of the effect to add withhelp.
Second, closeHelp is very similar, but you use onComplete to remove with-help when
the effect has finished. Finally, you define slideBody, which operates on the margin-right
property of the document.body. Now update the open and close methods to use these
effects:
Help = {
SIDEBAR_WIDTH: 350,
SIDEBAR_MARGIN: 30,
openWith : function(url) {
this.request(url, function() {
if ($(document.body).hasClassName('with-help') == false) this.open();
});
},
open : function() {
Help.
Pages:
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284