FMCodes • All-in-one Webmasters community
Would you like to react to this message? Create an account in a few clicks or log in to continue.

You are not connected. Please login or register

FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials »  Hidden text and images like in Discord

Hidden text and images like in Discord

Valid
Niko
  • Forum Administrator

    Team contributor
    You have been part of the community team
    Community veteran
    You belong to this community since its ancient time
    Active Contributor
    The user has wrote more than 100 posts and comments
    Passioned user
    You have participated in 50+ different topics, a true fan!
    Post lover
    You have liked more than 50 posts!
    Beta Tester
    You have been part of the Beta-Testing team
    Forumotion expert
    This user is an expert with Forumotion free forum hosting
    10th Anniversary (Grand Re-open)
    Thanks for being part of our grand re-opening
    Merry Christmas 2022
    Thanks for having been with us during Christmas season!
    Forum Writer
    You have opened more than 20 topics on the forum
    The Life of the Party
    You have made more than 20 members in our community, wow!
    Members Guru
    You have received more than 50 likes on your posts. Our members really what you have to say!
      Posts : 3614
      Points : 129507
    Hidden text and images like in Discord


    Overview

    Description

    This is a trick to make hidden texts and images that are revealed when you click them, exactly like in Discord. It's basically an alternative to the "Spoiler" button.
    It's pretty simple, so it works in all versions.

    The text can be multi-line and will look exactly like in Discord.

    Examples of usage:

    - A sudoku/crossword forum where users post their puzzles, and others comment their solution path (or images about it) but don't want to accidentally spoil it to the other users.
    - A forum about videogames where users review a certain game but could want to hide some plot-related things for those who haven't played the game yet.

    Demonstration

    Hidden text and images like in Discord Discord-example

    Technical limitations

    › This tutorial is dedicated to the forums powered by Forumotion free forum service
    › It works with all Forumotion forums' versions

    Installation

    Introduction

    The way it works is by defining two new types of table class, which is the same method this forum uses for inline code.

    Code:
    [table class="hide-text"​]​[tr​]​[td​]Hidden text​[​/td​]​[​/tr​]​[​/table​]
    [table class="hide-img"​]​[tr​]​[td​​]​[img​](IMAGE LINK)​[/img​]​[​/td​]​[​/tr​]​[​/table​]

    Of course with that alone users won't be able to use it directly, so I recommend defining a new button for the SCEditor (see below).

    CSS

    In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:

    You need to reply to the topic in order to see the code resources



    CSS Customization

    Provide information (if relevant) about what can be changed and CSS classes

    Javascript & jQuery

    For the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

    • Title: free choice - does not influence the code effect
    • Where: In topics
    • Code:

      You need to reply to the topic in order to see the code resources



    Javascript Customization

    You can replace the content in
    Code:
    var revealText = "SPOILER";
    with your own reveal text.

    Additional: Editor button to add the content

    Description

    This optional code creates a new SCEditor button to automatically add the BBCode.
    If you want to use it, paste it at the very end of the Javascript code I posted before.

    Depending on what you currently have selected on the text content it will generate one tag or the other, so a single button works with both cases.

    Javascript content

    For the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

    • Title: free choice - does not influence the code effect
    • Where: In topics
    • Code:

      You need to reply to the topic in order to see the code resources



    Javascript customization

    I added it after the strike button, but you can add it after the spoiler by changing the line 26 to this:
    Code:
    toolbar = toolbar.replace(/faspoiler/, 'faspoiler,hidden')

    You can also change the spoiler button to the new one:
    Code:
    toolbar = toolbar.replace(/faspoiler/, 'hidden')

    Additional CSS

    You can change the button icon adding this on the CSS:
    Code:
    .sceditor-button-hidden div {
      background-image: url(https://i.postimg.cc/nrRGNczN/hidden-button.png);
    }

    Notes

    Approved byNiko
    Approved on January 29th 2022
    Tested on Most recent browsers - All forum versions
    Difficulty level  / 
    Source (1) Hidden text and images like in Discord

    This resource belong to this community unless differently stated.
    No reproduction possible without our agreement, in accordance with article L122-1 of the CPI.



    Topic Actions

    Sponsored




    FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials »  Hidden text and images like in Discord

    ©phpBB | Contact | Report an abuse | Cookies