Encyclopedia Dramatica:Morphing Objects
Early in 2008, Encyclopedia Dramatica's Collapsing Objects went back in time and raped a Power Ranger. This unholy union resulted in a terrifying new breed of dynamic content known as Mighty Morphing Power Objects, or Morphing Objects for short.
In 2017, ED at long last upgraded from MediaWiki 1.16 to MediaWiki 1.28 and adopted jQuery, causing the old Morphing Objects to cease functioning. A new jQuery-based script was then written to replace it.
How Does It Work?
The new script used for morphing objects is as follows:
/* Click link to show one item and hide sibling items */
$(function(){
$(".morphlink").click(function(){
$("#"+$(this).data("correspondingcontent")).removeClass("hiddentext").siblings(".morphcontent").addClass("hiddentext");
});
});
This basically translates to: When a HTML element with the class morphlink is click, an element with an id corresponding to the data-correspondingcontent attribute of the clicked element has its hiddentext class removed while sibling elements with the morphcontent class has the hiddentext class added to them.
As such, the toggle links or buttons must have the morphlink class, and the content that is morphed in and out of view must have the morphcontent class. The morphlink element must possess the data-correspondingcontent attribute, and that data-correspondingcontent attribute must correspond to the id of the morphcontent element that is supposed to be showed. The hiddentext class should be added to all morphcontent elements that are not initially displayed by default.
<span class="morphlink showhidetext" data-correspondingcontent="uniqueNameContent1">Link to Show uniqueNameContent1</span>
<p id="uniqueNameContent1" class="morphcontent hiddentext">Content object 1 is a paragraph!</p>
<span class="morphlink showhidetext" data-correspondingcontent="uniqueNameContent2">Link to Show uniqueNameContent2</span>
<div id="uniqueNameContent2" class="morphcontent hiddentext">Content object 2 is a div!</div>
<span class="morphlink showhidetext" data-correspondingcontent="uniqueNameContent3">Link to Show uniqueNameContent3</span>
<table id="uniqueNameContent3" class="morphcontent hiddentext">Content object 3 is a table!</table>
<tr>
<td>Content object 3 is a table!</td>
</tr>
</table>
Important: Newline Issue
The morphcontent class can be assigned to span elements, but since the script depends on .siblings, the span elements might be located on the same line or in the same paragraph. This is because the MediaWiki software transforms two newlines into a paragraph.
For example:
<div style="border: 1px solid black; padding: 5px;"> <span id="someContent1" class="morphlink showhidetext">Here's the first content pane.</span> <span id="someContent2" class="morphlink showhidetext">Here's the second content pane.</span> <span id="someContent3" class="morphlink showhidetext">Here's the third content pane.</span> </div>
Needs to become:
<div style="border: 1px solid black; padding: 5px;"> <span id="someContent1" class="morphlink showhidetext">Here's the first content pane.</span> <span id="someContent2" class="morphlink showhidetext">Here's the second content pane.</span> <span id="someContent3" class="morphlink showhidetext"> Here's the third content pane.</span> </div>
Other elements (div, ul, table, etc.) are not affected by this issue.
Tab Example
 |
Morphing Objects is part of a series on Gaming. |
Games •
Consoles •
Portables •
Developers |
|
|
[Click to View Code]
<table width="80%" cellpadding="0" cellspacing="0" border="0" style="background-color: #FFCC66; border-top: 1px black solid; border-left: 1px black solid; border-right: 1px black solid;">
<tr>
<td width="58" height="42" align="center">[[Image:Gamecontroller.gif]]</td>
<td style="font-size: 12pt; padding: 5px;"><b>{{PAGENAME}}</b> is part of a series on [[Gaming]].</td>
<td style="text-align: right; padding: 5px; font-size: 8pt; vertical-align: middle;">
<span id="gamingTemplateLink1" class="morphlink showhidetext" data-correspondingcontent="gamingTemplateContent1">Games</span> •
<span id="gamingTemplateLink2" class="morphlink showhidetext" data-correspondingcontent="gamingTemplateContent2">Consoles</span> •
<span id="gamingTemplateLink3" class="morphlink showhidetext" data-correspondingcontent="gamingTemplateContent3">Portables</span> •
<span id="gamingTemplateLink4" class="morphlink showhidetext" data-correspondingcontent="gamingTemplateContent4">Developers</span><br />
<span id="gamingTemplateLink5" class="morphlink showhidetext" data-correspondingcontent="gamingTemplateContent5">Comics</span> •
<span id="gamingTemplateLink6" class="morphlink showhidetext" data-correspondingcontent="gamingTemplateContent6">Websites</span> •
<span id="gamingTemplateLink7" class="morphlink showhidetext" data-correspondingcontent="gamingTemplateContent7">Related</span>
</td>
</tr>
</table>
<table width="80%" cellpadding="0" cellspacing="0" border="0" style="background-color: #FFCC66; border-left: 1px black solid; border-right: 1px black solid; border-bottom: 1px black solid;">
<tr>
<td style="padding: 5px;">
<table cellpadding="5" id="gamingTemplateContent1" class="morphcontent hiddentext" cellspacing="0" border="0" width="100%" style="border: 1px black solid;">
<tr valign="top" style="background-color: navajowhite;">
<td style="text-align: justify; font-size: 10pt;">THE LIST OF GAMES</td>
</tr>
</table>
<table cellpadding="5" id="gamingTemplateContent2" class="morphcontent hiddentext" cellspacing="0" border="0" width="100%" style="border: 1px black solid;">
<tr valign="top" style="background-color: blanchedalmond;">
<td style="text-align: left; font-size: 10pt;">THE LIST OF CONSOLES</td>
</tr>
</table>
<table cellpadding="5" id="gamingTemplateContent3" class="morphcontent hiddentext" cellspacing="0" border="0" width="100%" style="border: 1px black solid;">
<tr valign="top" style="background-color: navajowhite;">
<td style="text-align: left; font-size: 10pt;">THE LIST OF PORTABLES</td>
</tr>
</table>
<table cellpadding="5" id="gamingTemplateContent4" class="morphcontent hiddentext" cellspacing="0" border="0" width="100%" style="border: 1px black solid;">
<tr valign="top" style="background-color: blanchedalmond;">
<td style="text-align: left; font-size: 10pt;">THE LIST OF DEVELOPERS</td>
</tr>
</table>
<table cellpadding="5" id="gamingTemplateContent5" class="morphcontent hiddentext" cellspacing="0" border="0" width="100%" style="border: 1px black solid;">
<tr valign="top" style="background-color: navajowhite;">
<td style="text-align: left; font-size: 10pt;">THE LIST OF COMICS</td>
</tr>
</table>
<table cellpadding="5" id="gamingTemplateContent6" class="morphcontent hiddentext" cellspacing="0" border="0" width="100%" style="border: 1px black solid;">
<tr valign="top" style="background-color: blanchedalmond;">
<td style="text-align: left; font-size: 10pt;">THE LIST OF WEBSITES</td>
</tr>
</table>
<table cellpadding="5" id="gamingTemplateContent7" class="morphcontent hiddentext" cellspacing="0" border="0" width="100%" style="border: 1px black solid;">
<tr valign="top" style="background-color: navajowhite;">
<td style="text-align: left; font-size: 10pt;">RELATED CONTENT</td>
</tr>
</table>
</td>
</tr>
</table>
Slideshow Example
[]
<div style="border: 1px solid black; padding: 5px;"> <div id="slideContent1" class="morphcontent">Here's the first slide. <span id="slideLink2" class="morphlink showhidetext" data-correspondingcontent="slideContent2">Here's the link to the second slide.</span> </div> <div id="slideContent2" class="morphcontent hiddentext">Here's the second slide. <span id="slideLink3" class="morphlink showhidetext" data-correspondingcontent="slideContent3">Here's the link to the third slide.</span></div> <div id="slideContent3" class="morphcontent hiddentext">Here's the third slide. <span id="slideLink1" class="morphlink showhidetext" data-correspondingcontent="slideContent1">Here's the link to the first slide.</span></div> </div>