MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 08:04, 27 Oct 2009 by rberinger
MindTouch Community Portal > MindTouch Community Portal > Knowledge Base > Create a Spoiler without an extension
Page Notifications Off
Was this page helpful?

Create a Spoiler without an extension

     Table of Contents

    1. 1. Introduction
    2. 2. History
    3. 3. Requirements
    4. 4. How do I install it?
      1. 4.1. The Template
      2. 4.2. The Custom Style "Spoiler"
    5. 5. A quick note about the examples on this page
    6. 6. How do I use it?
    7. 7. Arguments
    8. 8. Examples
    9. 9. Reference(s)
    10. 10. Credits/Special Thanks
    11. 11. Template/Extension Source Code
    12. 12. Disclaimers
    		 This Page was viewed: 4110 Times

    Introduction

    I wanted an easy way for my users to insert spoiler text in a page so I designed this template to be as easy and flexible as possible.  All you need to once this is setup is include a call to the template somewhere on the page and use the style menu to create your spoiler tags.  All question and comments should be directed to this forum thread.

    History

    Version Date Author Description
    1.1  10/27/2009  rberinger  Added the "text" parameter that allows you to easily edit the Spoiler Tag Text. 
    1.0   10/26/2009  rberinger  Initial Release

    Requirements

    • This template requires MindTouch version: Lyons 9.02 or above
    • jQuery Extension

    How do I install it?

    The Template
    1. Create a template, call it "Template:SpoilerAlert" (or rename as you desire).  You must have UNSAFECONTENT permission for this to work.
    2. Create a "DekiScript" block on the template page (use the "Style" menu in the editor")
    3. Copy the code from the end of this page and paste it into the DekiScript block.  To copy, click "expand source", then mouse over the top right corner of the source code, and click the "view source" button.  This will pop up a window with the source code.  Select all, then copy to clipboard.
    4. Make sure there isn't an extra blank paragraph after the DekiScript block! Do this every time you edit!!!  
    5. Save.
    The Custom Style "Spoiler"

    Ok, one of the things we will need to do is create the custom style for the style drop down menu in the editor.

    1. Goto the MindTouch Control Panel.
    2. Click Editor
    3. Insert this text for your custom Spoiler Style:
      1. FCKConfig.CustomStyles.Spoiler = { Element : 'span', Attributes : { 'class' : 'spoileralert' } }
    4. Save it.
    5. Clear the cache on your browser.
    6. Done.

     

    A quick note about the examples on this page

    For all the examples on this page, the code is shown before the working example.  The code is shown with the syntax extension, and looks like this:

    SpoilerAlert()

    This means that the actual code on the page should be enclosed in a DekiScript block.  If you want to copy the code from this page, then use the same procedure as described in steps 2-4 above. 

    How do I use it?

     From within the editor you can select your text you wish to hide and from the Style drop down menu click "Spoiler".  Then somewhere on the page include a call to the template like this:  {{ SpoilerAlert(); }} Thats it your done.  It does not matter where you call the template and you can have multiple spoilers on the same page without including the template more than the one time.

    Arguments

    Name
    		 Type
    		 Default
    		 Description
    text str  << Spoiler Alert! >>   Sets the Text of the Spoiler Tag 

    Examples

     

    {{ SpoilerAlert(); }}

     This is some text that I would Like to Hide.

    Here is some more text
    That extends across
    Multiple Lines.

     

    str is not valid; expected num: /content/body/div[8]/pre[2], line 11, column 19 (click for details)

    Reference(s)

     Please direct all question and comments to this forum thread.

    Credits/Special Thanks

     Chris Coyier Whos code was adapted to this template.

    Template/Extension Source Code

    // This has been setup to utilize a custom style within the FCKeditor Instuction below:
// To setup the custom style Go to Control Panel and Editor
// Insert the below text in the set FCKeditor Configuration:
// FCKConfig.CustomStyles.Spoiler = { Element : 'span', Attributes : { 'class' : 'spoileralert' } }

// Now just select the text you wish to hide and select the Spoiler style from the drop down.
// Ensure to include a call to this template somewhere on the page: {{ SpoilerAlert(); }}


// This Template Parameter Sets the Text of the Spoiler Link
var SpoilerText = ($text ?? $0 ?? '<< Spoiler Alert! >>');

<script type="text/javascript">"
$(document).ready(function() { 

	$('span.spoileralert').hide();

         var SpoilTxt = "..json.emit(SpoilerText)..";
	 $('<a class=\"spoilit\" title=\"Click to Reveal\">' + SpoilTxt + '</a>').insertBefore('.spoileralert');

	$('a.spoilit').click(function(){
		$(this).parents('p').children('a.spoilit').fadeOut(600);
                $(this).parents('p').children('span.spoileralert').fadeIn(2500);
	});
});
"</script>
<style type="text/css">"
a.spoilit {
	font-size: 1em;
	padding: 3px;
	background: #FF0000;
	color: white;
	font-family: Georgia, serif;
	font-style: italic;
	cursor: pointer;
        text-decoration:none;        
}
"</style>

    Disclaimers

    None.

    Was this page helpful?
    Tag page
    What links here

    Files 0

    Attach file or image
     
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by