Spoiler module
nav_first.pngFirst: package:1
Easy Logo and Header
Edited: 04 Jan 2010 13:54 by: pieterh
Comments: 7
Tags: prize-winner
nav_prev.pngPrevious: package:4
"Fonting" a Page!
Edited: 04 Jan 2010 13:55 by: pieterh
Comments: 3
Tags: prize-winner
Last: package:17
Mobile iPod
Edited: 02 Feb 2010 17:15 by: pieterh
Comments: 2
Tags:
nav_last.png
Next: package:7
Page Manager No Sidebar
Edited: 04 Jan 2010 13:55 by: pieterh
Comments: 0
Tags: prize-winner
nav_next.png

Spoiler module
Package submitted by leiger
22 Dec 2009 00:46

rating: +2+x

This CSI module can be used to show spoilers in forums that use page-based comments (e.g. NoComment Forum) and in regular pages on your website.

Include files

spoiler By leiger 22 Dec 2009 00:48

Instructions

This is an update to the spoiler tags located on the code snippets website.

It uses webkit, which means that there's a slightly better transition effect in Apple Safari and Google Chrome than in other popular browsers.

When you hover the mouse over the spoiler button, the box will expand to show the hidden text. If the text doesn't fit in the 200px-high box, a scrollbar will be added automatically.

To install this package in your site, add this code to your page:


[[include :css-competition:include:spoiler
|text=TEXT TO HIDE IN THE SPOILER
|image=IMAGE URL
|id=SPOILER ID
]]

Attributes

(required) text

  • Any plain text that you would like to hide in the spoiler box
  • Cannot use Wikidot syntax
  • Cannot use the pipe symbol "|"

(optional) image

  • If you would like to use an alternative image, enter the URL
  • Must be width 80px, height 20px

(optional) id

  • When using an alternative image, an id will avoid affecting other spoilers on the same page
  • When two spoiler modules have the same ID, the one lowest down on the page will take effect

Feature requests can be made on the blog or CSS Competition website.

Examples

[!-- Spoiler module - default image --]

[[include :css-competition:include:spoiler
|text=Lorem ipsum dolor sit amet ...
]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum adipiscing dolor eu elementum. Curabitur molestie cursus ultricies. Suspendisse faucibus interdum lectus, quis pharetra leo faucibus egestas. Phasellus nec massa vel turpis congue malesuada sed a sem. Quisque blandit lorem sit amet lacus egestas commodo. Integer mollis adipiscing fringilla. Maecenas imperdiet posuere tellus eget aliquam. Ut congue hendrerit nunc non cursus. Quisque sed nunc tincidunt enim blandit vehicula in eu purus. Nunc mi eros, aliquet at venenatis a, venenatis vel nisi. Fusce consectetur augue sed diam interdum mattis. Vivamus aliquam metus dui. Aenean cursus lacus nec purus fermentum venenatis. Nulla ullamcorper lacus erat, vel tempor tortor. Nulla tempus nisi ac sapien mattis ac rhoncus diam porta. Aenean eleifend augue et elit tincidunt dictum. Cras lobortis porttitor eleifend. Cras tristique adipiscing luctus. Donec tincidunt, augue quis pellentesque adipiscing, nulla risus fermentum tortor, at pellentesque libero magna et mi. Morbi ultrices dui sapien.

Vestibulum sollicitudin, nisi non pulvinar aliquet, mauris metus convallis nunc, at cursus lorem est non ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at ipsum justo, et tempus tortor. Donec diam est, pulvinar at tempus quis, lacinia quis justo. Praesent sapien ligula, venenatis eu scelerisque vel, consectetur a enim. Suspendisse leo tortor, rhoncus vitae pulvinar iaculis, sodales a velit. Sed malesuada, velit adipiscing convallis cursus, nibh lacus tincidunt sapien, id feugiat ipsum diam condimentum purus. Integer eleifend fermentum ante, in porta risus luctus vitae. Aenean cursus eleifend dolor, a adipiscing felis tristique sit amet. Pellentesque a orci et sapien hendrerit pulvinar eu sit amet velit. Sed consequat nisl sit amet lacus sodales laoreet. Pellentesque tempus auctor consequat. Mauris a quam id ipsum malesuada gravida eget quis mauris.

[!-- Spoiler module - alternative image --]

[[include :css-competition:include:spoiler
|text=Lorem ipsum dolor sit amet ...
|image=http://blog.shane-smith.com/local--files/module:spoiler/Spoiler2.jpg
|id=2
]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum adipiscing dolor eu elementum. Curabitur molestie cursus ultricies. Suspendisse faucibus interdum lectus, quis pharetra leo faucibus egestas. Phasellus nec massa vel turpis congue malesuada sed a sem. Quisque blandit lorem sit amet lacus egestas commodo. Integer mollis adipiscing fringilla. Maecenas imperdiet posuere tellus eget aliquam. Ut congue hendrerit nunc non cursus. Quisque sed nunc tincidunt enim blandit vehicula in eu purus. Nunc mi eros, aliquet at venenatis a, venenatis vel nisi. Fusce consectetur augue sed diam interdum mattis. Vivamus aliquam metus dui. Aenean cursus lacus nec purus fermentum venenatis. Nulla ullamcorper lacus erat, vel tempor tortor. Nulla tempus nisi ac sapien mattis ac rhoncus diam porta. Aenean eleifend augue et elit tincidunt dictum. Cras lobortis porttitor eleifend. Cras tristique adipiscing luctus. Donec tincidunt, augue quis pellentesque adipiscing, nulla risus fermentum tortor, at pellentesque libero magna et mi. Morbi ultrices dui sapien.

Vestibulum sollicitudin, nisi non pulvinar aliquet, mauris metus convallis nunc, at cursus lorem est non ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at ipsum justo, et tempus tortor. Donec diam est, pulvinar at tempus quis, lacinia quis justo. Praesent sapien ligula, venenatis eu scelerisque vel, consectetur a enim. Suspendisse leo tortor, rhoncus vitae pulvinar iaculis, sodales a velit. Sed malesuada, velit adipiscing convallis cursus, nibh lacus tincidunt sapien, id feugiat ipsum diam condimentum purus. Integer eleifend fermentum ante, in porta risus luctus vitae. Aenean cursus eleifend dolor, a adipiscing felis tristique sit amet. Pellentesque a orci et sapien hendrerit pulvinar eu sit amet velit. Sed consequat nisl sit amet lacus sodales laoreet. Pellentesque tempus auctor consequat. Mauris a quam id ipsum malesuada gravida eget quis mauris.

Comments: 2

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License