|
|
| (3 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <p><br />
| | #REDIRECT[[Encyclopedia Dramatica:Collapsing Objects]] |
| ED is using a new Collapsing Objects code. You will see some familiar concepts, but the syntax and end results have been changed around a great deal. Just like before, you can either write the code yourself (much easier than version 1) or use a template.
| |
| </p>
| |
| ==Writing the Code==
| |
| <p>In the previous version of the code, there was a one-to-one ratio between links and collapsing content. This new release allows for greater flexibility in four different ratios.
| |
| </p><p>You pass information to the script using the class tag of the container that will hold the link. Arguments are separated by semicolons and the ordering is mandatory. For instance:
| |
| </p>
| |
| <pre>
| |
| <span class="co;ctext;etext;state;classname;linkcolor"></span>
| |
| | |
| </pre>
| |
| <dl><dd><b>co</b> - This designates a collapsing object. It is mandatory and case sensitive.
| |
| <dd><b>ctext</b> - This is the collapsing link text. It can contain any special characters or spaces except a semicolon.
| |
| <dd><b>etext</b> - This is the expanding link text. It can contain any special characters or spaces except a semicolon.
| |
| <dd><b>state</b> - This is the initial state. 0 is collapsed; 1 is expanded. God help you if you put a 2.
| |
| <dd><b>classname</b> - The target class of this link. See the following sections for an explanation.
| |
| <dd><b>linkcolor</b> - Optional parameter that lets you customize the link's color. Don't include the preceeding semicolon if you're not changing the color.
| |
| | |
| </dl>
| |
| <p>You mark the target object(s) by setting the class equal to <b>classname</b>. For example:
| |
| </p>
| |
| <pre>
| |
| <div class="classname">Content!</div>
| |
| </pre>
| |
| ===One-to-One===
| |
| <p>This is the standard one link to one content region relationship.
| |
| </p><p>Example:
| |
| | |
| </p><p><span class="co;[Collapse];[Expand];0;test1"></span> <span class="test1" style="background-color: red; color: white; padding: 5px;">What's up?</span>
| |
| </p><p>Code:
| |
| </p>
| |
| <pre>
| |
| <span class="co;[Collapse];[Expand];0;test1"></span>
| |
| | |
| <span class="test1">What's up?</span>
| |
| </pre>
| |
| ===One-to-Many===
| |
| | |
| <p>This is one link to multiple content regions.
| |
| </p><p>Example:
| |
| </p><p><span class="co;[Collapse];[Expand];0;test2"></span> <span class="test2" style="background-color: red; color: white; padding: 5px;">What's up?</span> <span class="test2" style="background-color: blue; color: white; padding: 5px;">What's up?</span>
| |
| </p><p>Code:
| |
| </p>
| |
| <pre>
| |
| <span class="co;[Collapse];[Expand];0;test2"></span>
| |
| | |
| <span class="test2">What's up?</span>
| |
| | |
| <span class="test2">What's up?</span>
| |
| </pre>
| |
| ===Many-to-One===
| |
| <p>This is multiple links to one content region.
| |
| </p><p>Example:
| |
| </p><p><span class="co;[Collapse];[Expand];0;test3"></span> <span class="test3" style="background-color: red; color: white; padding: 5px;">What's up?</span> <span class="co;[Collapse];[Expand];0;test3"></span>
| |
| </p><p>Code:
| |
| </p>
| |
| <pre>
| |
| | |
| <span class="co;[Collapse];[Expand];0;test3"></span>
| |
| | |
| <span class="test3">What's up?</span>
| |
| | |
| <span class="co;[Collapse];[Expand];0;test3"></span>
| |
| </pre>
| |
| ===Many-to-Many===
| |
| <p>This is multiple links to multiple content regions.
| |
| </p><p>Example:
| |
| </p><p><span class="co;[Collapse];[Expand];0;test4"></span> <span class="test4" style="background-color: red; color: white; padding: 5px;">What's up?</span> <span class="test4" style="background-color: blue; color: white; padding: 5px;">What's up?</span> <span class="co;[Collapse];[Expand];0;test4"></span>
| |
| </p><p>Code:
| |
| </p>
| |
| <pre>
| |
| <span class="co;[Collapse];[Expand];0;test4"></span>
| |
| | |
| <span class="test4">What's up?</span>
| |
| | |
| <span class="test4">What's up?</span>
| |
| | |
| <span class="co;[Collapse];[Expand];0;test4"></span>
| |
| </pre>
| |
| ===Changing Link Color===
| |
| <p>This collapsing link is red.
| |
| </p><p>Example:
| |
| | |
| </p><p><span class="co;[Collapse];[Expand];0;test5;red"></span> <span class="test5">My link is red.</span>
| |
| </p><p>Code:
| |
| </p>
| |
| <pre>
| |
| <span class="co;[Collapse];[Expand];0;test5;red"></span> <span class="test5">My link is red.</span>
| |
| </pre>
| |
| ==Using Templates==
| |
| | |
| <p>The templates require you to specify a target class name. This allows you to extend the functionality of each template by adding more links or content regions to suit your need. A target class name must be unique to the page and contain no spaces.
| |
| </p>
| |
| ===[[Template:Co|<nowiki>{{co}}</nowiki>]]: Object===
| |
| <p>Generic collapsing object. More or less the same as writing out the one-to-one code by hand.
| |
| </p>
| |
| <pre>
| |
| {{co|A|B|C|D|E|F}}
| |
| | |
| A: Unique name to the page, no spaces.
| |
| B: The text to be displayed on the collapse link.
| |
| C: The text to be displayed on the expand lnk.
| |
| D: The initial state. 0 = collapsed, anything else = expanded.
| |
| E: The content to collapse and expand.
| |
| F: Style information for the collapsing content.
| |
| </pre>
| |
| <p>For instance,
| |
| </p>
| |
| <pre>{{co|qwerty|[Collapse Me]|[Expand Me]|1|Here's some stuff.|color: red; background-color: black; padding: 5px;}}</pre>
| |
| <p>gives you:
| |
| </p><p><br />
| |
| | |
| <span class="co;[Collapse Me];[Expand Me];1;qwerty"></span>
| |
| </p>
| |
| <div class="qwerty" style="color: red; background-color: black; padding: 5px;">Here's some stuff.</div>
| |
| <p><br />
| |
| </p>
| |
| ===[[Template:Cs|<nowiki>{{cs}}</nowiki>]]: Section===
| |
| <p>Level 2 collapsing section header.
| |
| </p>
| |
| <pre>
| |
| {{cs|A|B|C|D}}
| |
| | |
| A: Unique name to the page, no spaces. Hint: The section name with no spaces works.
| |
| B: The section name.
| |
| C: The section content. May contain nested collapsable sections.
| |
| D: The initial state. 0 = collapsed, anything else = expanded.
| |
| </pre>
| |
| <p>For instance,
| |
| </p>
| |
| | |
| <pre>
| |
| {{cs|testSectionOne|Test Section One|Here's some sample content under a large header.|0}}
| |
| </pre>
| |
| <p>gives you:
| |
| </p><p><br />
| |
| </p>
| |
| {{cs|testSectionOne|Test Section One|Here's some sample content under a large header.|0}}
| |
| <div class="testSectionOne">Here's some sample content under a large header.</div>
| |
| ===[[Template:Cs2|<nowiki>{{cs2}}</nowiki>]]: Subsection===
| |
| <p>Level 3 collapsing section header.
| |
| </p>
| |
| | |
| <pre>
| |
| {{cs2|A|B|C|D}}
| |
| | |
| A: Unique name to the page, no spaces. Hint: The section name with no spaces works.
| |
| B: The section name.
| |
| C: The section content. May contain nested collapsable sections.
| |
| D: The initial state. 0 = collapsed, anything else = expanded.
| |
| </pre>
| |
| <p>For instance,
| |
| </p>
| |
| <pre>
| |
| {{cs2|testSectionTwo|Test Section Two|Here's some sample content under a small header.|0}}
| |
| </pre>
| |
| <p>gives you:
| |
| </p><p><br />
| |
| </p>
| |
| {{cs2|testSectionTwo|Test Section Two|Here's some sample content under a small header.|0}}<div class="testSectionTwo">Here's some sample content under a small header.</div>
| |
| | |
| ===[[Template:Cg|<nowiki>{{cg}}</nowiki>]]: Gallery===
| |
| <pre>
| |
| {{cg|A|B|C|D|E}}
| |
| | |
| A: Gallery title to be displayed in the black box
| |
| B: Unique name to the page. Hint: The gallery title with no spaces works fine.
| |
| C: Horizontal alignment of gallery on page. "left", "right", or "center".
| |
| D: Teaser gallery images. Must be enclosed in <gallery></gallery> tags and should be a multiple of four images.
| |
| E: Remaining gallery images. Must be enclosed in <gallery></gallery> tags.
| |
| | |
| </pre>
| |
| <p>Example:
| |
| </p>
| |
| <pre>
| |
| {{cg|Galleria de Furfaggotry|furryGallery|center|<gallery>
| |
| Image:Sickfuckfurryhumor1.jpg|Typical furry's daily comic strip
| |
| Image:Lolanimalsex.jpg|Furries like sex with animals, as drawn by Arania
| |
| Image:Yiffinhellfurfag.jpg|Pro-yiffer propaganda disguised as harmless kiddie comics. WAKE UP AMERICA
| |
| Image:Judge Doom M 03.jpg|Scientists are currently thinking of ways to exterminate furfags.
| |
| </gallery>|<gallery>
| |
| Image:Furrybarf.jpg|Neutered furry without spaceballs?
| |
| Image:Times Travelled.jpg
| |
| Image:FurrySuck.jpg|Suck the furry's [[cock|rod]], [[bitch]]!
| |
| Image:Wheregodfurry.jpg|Where is your [[God]] now?
| |
| ...
| |
| </gallery>}}
| |
| </pre>
| |
| <p>gives you:
| |
| | |
| </p><p><br />
| |
| </p>
| |
| {{cg|Galleria de Furfaggotry|furryGallery|center|<gallery>
| |
| Image:Sickfuckfurryhumor1.jpg|Typical furry's daily comic strip
| |
| Image:Lolanimalsex.jpg|Furries like sex with animals, as drawn by Arania
| |
| Image:Yiffinhellfurfag.jpg|Pro-yiffer propaganda disguised as harmless kiddie comics. WAKE UP AMERICA
| |
| Image:Judge Doom M 03.jpg|Scientists are currently thinking of ways to exterminate furfags.
| |
| </gallery>|<gallery>
| |
| Image:Furrybarf.jpg|Neutered furry without spaceballs?
| |
| Image:Times Travelled.jpg
| |
| Image:FurrySuck.jpg|Suck the furry's [[cock|rod]], [[bitch]]!
| |
| Image:Wheregodfurry.jpg|Where is your [[God]] now?
| |
| ...
| |
| </gallery>}}<p><br />
| |
| <br style="clear: both;" />
| |
| </p>
| |
| | |
| ==See Also==
| |
| *[[ED:Morphing Objects|Morphing Objects]]
| |
