[jQuery] Re: Announcement: Spoilers plugin
Stephan, That kinda cool, thanks for sharing. On 8/8/07, Stephan Beal [EMAIL PROTECTED] wrote: Hi, all! Yet another plugin: http://jquery.com/plugins/project/Spoilers Demo: http://wanderinghorse.net/computing/javascript/jquery/spoilers/demo.html It is used to hide spoiler text from casual readers, who can reveal the text by mousing over it. See the web site for an example of how this can be useful. The code is based upon this jQuery forum thread: http://groups.google.com/group/jquery-en/browse_thread/thread/9d34cad45e541e36/8f02c8f79b5c7985 Many thanks to Michael Geary and Jay Salvat for doing the detective work in figuring out how this feature works on the imdb.com site. The code is trivial (a couple of lines) and it should work in any jQ- supported browser, though it is untested aside from Firefox 2.x, Konqueror 3.5.x, and Galeon 2.0.x. :) -- Benjamin Sterling http://www.KenzoMedia.com http://www.KenzoHosting.com
[jQuery] Re: Announcement: Spoilers plugin
You like developing plugins don't you? ;)
How about an option to show the spoilers when you click on a link
'show spoilers'. I've seen a few forums (can't think of the exact
URL's off the top of my head though) that have this. e.g. $
('.jqSpoiler').initSpoilers(click) or $
('.jqSpoiler').initSpoilers(hover)
I would think being able to specify the show behavior would be nice. It's
easy to accidentally hover over text or to have the cursor resting in a spot
that would reveal the spoiler text by default.
-Dan
[jQuery] Re: Announcement: Spoilers plugin
On Aug 8, 6:17 pm, Sam Collett [EMAIL PROTECTED] wrote:
You like developing plugins don't you? ;)
:D
jQuery makes it too easy to do. This particular plugin has a trivial
implementation:
jQuery.fn.initSpoilers = function( props ) {
props = jQuery.extend({
revealedClass:'reveal'
},
props ? props : {});
this.hover(
function() { $
(this).addClass( props.revealedClass ); },
function() { $
(this).removeClass( props.revealedClass ); }
);
return this;
};
Most of the real work happens via CSS.
How about an option to show the spoilers when you click on a link
'show spoilers'. I've seen a few forums (can't think of the exact
URL's off the top of my head though) that have this. e.g. $
('.jqSpoiler').initSpoilers(click) or $
('.jqSpoiler').initSpoilers(hover)
i was thinking not only of that, but also of how best to integrate
optional hoverIntent support (since hoverIntent is quite popular). i'm
trying to consolidate the discrepancies between click and hover, so
that the option can be integrated in a unified way (i hate special-
case code).
For the click, i was thinking: clicking on the overlay will unhide the
text, and mouse-out will hide it again, but that might be tedious/
annoying in practice (haven't tried it yet). Your thoughts? Should a
second click be required to re-hide the text? i think re-hiding may
not be necessary: if a click is used to un-hide then the user
obviously wants to reveal the text, and re-hiding it is probably not
desired.
[jQuery] Re: Announcement: Spoilers plugin
On Aug 8, 6:28 pm, Stephan Beal [EMAIL PROTECTED] wrote:
For the click, i was thinking: clicking on the overlay will unhide the
text, and mouse-out will hide it again, but that might be tedious/
@Sam Dan:
i've added click-toggle and hoverIntent support via an optional init
parameter:
$('.jqSpoiler').initSpoilers({method:'click'});
$('.jqSpoiler').initSpoilers({method:'hoverIntent'}); // requires
hoverIntent plugin
The default is method:'hover'.
This doubled the MIN'd size of the code, though. It's now a whopping
424 bytes ;).
These features will be included in tomorrow's release. (i use the date
as the version number, and i've already made a release today, so i've
gotta wait another 5 hours [CET/GMT+1] before i can make a new
release ;).
You can have multiple types of spoiler revealing on one page by simply
using a marker class, like this:
// On-hover spoiler:
$('.jqSpoiler').initSpoilers();
// On-hover spoiler using hoverIntent plugin:
$('.jqSpoilerIntent').initSpoilers({method:'hoverIntent'})
.addClass('jqSpoiler');
// Clickable spoiler:
$('.jqSpoilerClick').initSpoilers({method:'click'})
.addClass('jqSpoiler');
The addClass() is used to ensure that the items marked with the marker
classes get the same CSS treatment.
[jQuery] Re: Announcement: Spoilers plugin
hi stephan,
this is a neat plugin, i see myself using this in some cases.
u mentioned that this functionality was there in imdb.com correct? where
exactly in that site can i get to see this feature?
-GTG
On 8/8/07, Stephan Beal [EMAIL PROTECTED] wrote:
On Aug 8, 6:28 pm, Stephan Beal [EMAIL PROTECTED] wrote:
For the click, i was thinking: clicking on the overlay will unhide the
text, and mouse-out will hide it again, but that might be tedious/
@Sam Dan:
i've added click-toggle and hoverIntent support via an optional init
parameter:
$('.jqSpoiler').initSpoilers({method:'click'});
$('.jqSpoiler').initSpoilers({method:'hoverIntent'}); // requires
hoverIntent plugin
The default is method:'hover'.
This doubled the MIN'd size of the code, though. It's now a whopping
424 bytes ;).
These features will be included in tomorrow's release. (i use the date
as the version number, and i've already made a release today, so i've
gotta wait another 5 hours [CET/GMT+1] before i can make a new
release ;).
You can have multiple types of spoiler revealing on one page by simply
using a marker class, like this:
// On-hover spoiler:
$('.jqSpoiler').initSpoilers();
// On-hover spoiler using hoverIntent plugin:
$('.jqSpoilerIntent').initSpoilers({method:'hoverIntent'})
.addClass('jqSpoiler');
// Clickable spoiler:
$('.jqSpoilerClick').initSpoilers({method:'click'})
.addClass('jqSpoiler');
The addClass() is used to ensure that the items marked with the marker
classes get the same CSS treatment.
[jQuery] Re: Announcement: Spoilers plugin
thanks... -GTG On 8/8/07, Stephan Beal [EMAIL PROTECTED] wrote: On Aug 8, 8:30 pm, Ganeshji Marwaha [EMAIL PROTECTED] wrote: this is a neat plugin, i see myself using this in some cases. :) Michael Geary and Jay Salvat deserve the real credit. When i pointed out this effect a week or two ago they did the detective work to find out how it functions and posted the results in this forum. i simply took that and bundled it into a plugin. u mentioned that this functionality was there in imdb.com correct? where exactly in that site can i get to see this feature? Visit: http://imdb.com/title/tt0084787/faq and scroll way, way down, almost to the very bottom. You'll see red Spoilers! text (an image). Simply mouse-over. The effect is the exact same as this plugin.
