|
Replies:
1
-
Pages:
1
-
Last Post:
Jun 21, 2010 4:45 AM
by: ustb
|
|
|
Posts:
64
From:
NJ
Registered:
7/1/09
|
|
|
|
Ch 8 termifier - enhancement exercises
Posted:
Dec 11, 2009 3:17 PM
|
|
Section 8.5.3 has some suggested exercises. Here's what I came up with for a few of them. Please share your solutions too.
1. Add a timeout to make the flyout automatically go away after a period of time:
First, add .stop() to click() -- this stops the animate we will add next:
.click(function() {
$(this).stop().fadeOut(1500,function(){$(this).remove();}); })
Then use animate to cause a delay of 3 seconds, followed by the same fadeOut:
.animate({opacity: 1.0}, 3000, function(){$(this).fadeOut(1500,function(){$(this).remove();});})
With the above code, the user can click on the flyout to make it fade away, or it will fade away automatically after a delay of 3 seconds.
2. Close the flyout when the user clicks anywhere on the page EXCEPT on the flyout:
First, remove the .click handler from the ajax callback:
// .click(...
// $this()...
Then add the following before the "this.attr('title'..." line:
$(document).click(function(event) {
if (!$(event.target).hasClass(options.flyoutClass)) {
$(options.flyoutClass).remove();
}
});
3. Remove any existing flyouts before displaying a new one:
Just before the $('< div>< /div>') line, add
$(options.flyoutClass).remove();
4. This is my own idea: fade flyout when mouse leaves flyout:
.mouseout(function() { $(this).fadeOut(1500, function(){$(this).remove();}); })
-- Mark
|
|
Posts:
1
Registered:
6/21/10
|
|
|
|
Re: Ch 8 termifier - enhancement exercises
Posted:
Jun 21, 2010 4:45 AM
in response to:
mraj
|
|
there is a bug
// a dot lost
$(options.flyoutClass).remove();
// should be
$('.' + options.flyoutClass).remove();
|
|
|
Legend
|
|
Gold: 300
+
pts
|
|
Silver: 100
- 299
pts
|
|
Bronze: 25
- 99
pts
|
|
Manning Author
|
|
Manning Staff
|
|
