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.

Morphing Objects can yield the same results as Collapsing Objects with a little work, but Collapsing Objects do their particular job better and aren't being replaced by this change.

How Does It Work?

Unlike collapsing Objects, there is no rigid structure to follow. After placing a mandatory "morph master" span on the page, you can make as many link-content pairs as you'd like, as long as you follow a few simple rules.

The morph master span is as such:

<span class="morphMaster" id="uniqueNameMaster"></span>

Simply replace uniqueName with a name unique to the page. See the ED:Collapsing Objects page if you don't know how this works. Then, create link-content pairs ordered sequentially starting at 1. The link must be a span or div but the content object can be any type of container object, including spans, divs, tables, etc:

<span id="uniqueNameLink1">Link to Show uniqueNameContent1</span>
<span id="uniqueNameContent1">Content object 1 is a span!</span>

<span id="uniqueNameLink2">Link to Show uniqueNameContent2</span>

<div id="uniqueNameContent2">Content object 2 is a div!</div>

<span id="uniqueNameLink3">Link to Show uniqueNameContent3</span>
<table id="uniqueNameContent3">
  <tr>

    <td>Content object 3 is a table!</td>
  </tr>
</table>

The Morphing Objects script iterates until it reaches a counter value where a link and content object don't both exist. To prevent exploits, it will not start looking at higher values, so if you miss a number early on, the rest of the links and content will not be displayed.

Optional: Paging Support

If desired, the Morphing Objects script can generate paging controls for your Morphing content. When paging is active, you are no longer required to have a corresponding uniqueNameLink for every uniqueNameContent, BUT the same rules on the script's stopping point for creating the links still apply. For instance, if you have 10 elements and you create links for 1 to 6 and then 8 to 10, the links for 8 to 10 simply will not display.

To add paging support, you must create the pair of paging Objects as such:

<span id="uniqueNameLinkPrev">Previous Content Pane</span>
<span id="uniqueNameLinkNext">Next Content Pane</span>

Additionally, you must have at least one content pane or the paging controls will not be displayed.

Important: Whitespace Issues

In the examples on this page, the HTML was properly formatted in order to be easy to read and understand. Different browsers, however, handle whitespace inbetween HTML elements differently. In order to make sure that your fancy new thing looks good on every browser, you should remove extra whitespace between content panes and any containers surrounding the content panes. For example:

<div style="border: 1px solid black; padding: 5px;">

<div id="someContent1">Here's the first content pane.</div>

<div id="someContent2">Here's the second content pane.</div>

<div id="someContent3"> Here's the third content pane.</div>

</div>

Needs to become:

<div style="border: 1px solid black; padding: 5px;"><div id="someContent1">Here's the first content pane.</div><div id="someContent2">Here's the second content pane.</div><div id="someContent3"> Here's the third content pane.</div></div>

PROTIP: Write the code in legible HTML and, when it's working (except for whitespace issues), then remove all the excess spacing.

Tab Example

Morphing Objects is part of a series on Gaming.

Games • Consoles • Portables • Developers Comics • Websites • Related

THE LIST OF GAMES THE LIST OF CONSOLES THE LIST OF PORTABLES THE LIST OF DEVELOPERS THE LIST OF COMICS THE LIST OF WEBSITES RELATED CONTENT

<span class="morphMaster" id="gamingTemplateMaster"></span>

<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">Games</span> • 
<span id="gamingTemplateLink2">Consoles</span> • 
<span id="gamingTemplateLink3">Portables</span> • 
<span id="gamingTemplateLink4">Developers</span><br />
<span id="gamingTemplateLink5">Comics</span> • 
<span id="gamingTemplateLink6">Websites</span> • 
<span id="gamingTemplateLink7">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" cellspacing="0" border="0" width="100%" style="border: 1px black solid; display: none;">

      <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" cellspacing="0" border="0" width="100%" style="border: 1px black solid; display: none;">

      <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" cellspacing="0" border="0" width="100%" style="border: 1px black solid; display: none;">

      <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" cellspacing="0" border="0" width="100%" style="border: 1px black solid; display: none;">

      <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" cellspacing="0" border="0" width="100%" style="border: 1px black solid; display: none;">

      <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" cellspacing="0" border="0" width="100%" style="border: 1px black solid; display: none;">

      <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" cellspacing="0" border="0" width="100%" style="border: 1px black solid; display: none;">

      <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

Here's the first slide. Here's the link to the second slide.

Here's the second slide. Here's the link to the third slide.

Here's the third slide. Here's the link to the first slide.

<span class="morphMaster" id="slideMaster"></span>

<div style="border: 1px solid black; padding: 5px;">

<div id="slideContent1">
Here's the first slide. <span id="slideLink2">Here's the link to the second slide.</span> 

</div>

<div id="slideContent2">
Here's the second slide. <span id="slideLink3">Here's the link to the third slide.</span>
</div>

<div id="slideContent3"> 

Here's the third slide. <span id="slideLink1">Here's the link to the first slide.</span>
</div>

</div>

Slideshow Example with Paging

Here's the first slide.

Here's the second slide.

Here's the third slide.

Prev Slide | Next Slide

<span class="morphMaster" id="slidePagingMaster"></span>

<div style="border: 1px solid black; padding: 5px;">

<div id="slidePagingContent1">Here's the first slide.</div>

<div id="slidePagingContent2">Here's the second slide.</div>

<div id="slidePagingContent3">Here's the third slide.</div>

<p><span id="slidePagingLinkPrev">Prev Slide</span> | <span id="slidePagingLinkNext">Next Slide</span></p>

</div>