Soyjak Wiki:Morphing objects

This doesn't work with the 2010 editor's splitscreen preview feature.

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 clicked, 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">
    <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 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

[Click to Hide CodeClick 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:Soyak.png|60px]]</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

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.

[Click to Hide CodeClick to View Code]

<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>

Soyjak Wiki Guides and Policies Guides: Manual of Style (Template Manual of Style) - Beginner's guide - About - Staff - Coal articles - Collapsing objects - Morphing objects Policies: Rules - Moderation - Privacy policy - Policy - Approver policy - Copyright