Encyclopedia Dramatica:Cycling Objects

Encyclopedia Dramatica editors can create a cycle of objects. This page documents the script used in Template:Morphquote and Template:Videoframe.

How Does It Work?

The script used for cycling objects is as follows:

/* Cycle forwards or backwards through elements one at a time via click */

$(function(){
    $(".cyclesequence").find(".cyclesequencelinknext").click(function(){
        if ($(this).closest(".cyclesequence").find(".cyclesequenceitem:visible").next(".cyclesequenceitem").length === 0) {
            $(this).closest(".cyclesequence").find(".cyclesequenceitem:first").removeClass("hiddentext").siblings(".cyclesequenceitem").addClass("hiddentext");
       }
       else {
           $(this).closest(".cyclesequence").find(".cyclesequenceitem:visible").next(".cyclesequenceitem").removeClass("hiddentext").siblings(".cyclesequenceitem").addClass("hiddentext");
         }
    });
});

$(function(){
    $(".cyclesequence").find(".cyclesequencelinkprev").click(function(){
        if ($(this).closest(".cyclesequence").find(".cyclesequenceitem:visible").prev(".cyclesequenceitem").length === 0) {
            $(this).closest(".cyclesequence").find(".cyclesequenceitem:last").removeClass("hiddentext").siblings(".cyclesequenceitem").addClass("hiddentext");
       }
       else {
           $(this).closest(".cyclesequence").find(".cyclesequenceitem:visible").prev(".cyclesequenceitem").removeClass("hiddentext").siblings(".cyclesequenceitem").addClass("hiddentext");
         }
    });
});

This basically translates to: When a HTML element with the class cyclesequencelinknext (or cyclesequencelinkprev) within an element with the cyclesequence class is click, the hiddentext class is removed from the element succeeding (or preceding) the visible cyclesequenceitem-class element while hiddentext class is added to the sibling cyclesequenceitem-class element. Also, if the visible cyclesequenceitem-class element (the one that was visible prior to the click) is the last (or first) cyclesequenceitem-class element in the sequence, the click would remove the hiddentext class from the the first (or last) cyclesequenceitem-class in the sequence (in effect, cycling back to the beginning (or end)).

As such, the "next" link or button must have the cyclesequencelinknext class, while the "previous" link or button must have the cyclesequencelinkprev class. The elements being cycled through must have the cyclesequenceitem class. The elements with the cyclesequencelinknext class, the cyclesequencelinkprev class, and the cyclesequenceitem class must be contained within an element with the cyclesequence class. The hiddentext class should be added to all cyclesequenceitem elements that are not initially displayed by default.

Example

Here's the first slide.

Here's the second slide.

Here's the third slide.

Prev Slide | Next Slide

[Click to Hide CodeClick to View Code]

<div class="cyclesequence" style="border: 1px solid black; padding: 5px;">
<div class="cyclesequenceitem">Here's the first slide.</div>
<div class="cyclesequenceitem hiddentext">Here's the second slide.</div>
<div class="cyclesequenceitem hiddentext">Here's the third slide.</div>
<p><span class="cyclesequencelinkprev showhidetext">Prev Slide</span> | <span class="cyclesequencelinknext showhidetext">Next Slide</span></p>
</div>

See also

• Encyclopedia Dramatica:Collapsing Objects
• Encyclopedia Dramatica:Morphing Objects