Welcome to Our Community

Registration on our forums are now open for some days! Feel free to sign up today.

[Answered] Easy to read rules and FAQs

Discussion in 'General XenForo Discussion' started by negative, Jan 10, 2017 at 9:16 PM.

  1. negative

    negativeLifetime VIP
    +Lifetime VIP+ ViP True Member +Member+ Registered

    Joined:
    Nov 2, 2016
    Messages:
    72
    Likes Received:
    12
    Since Wiki is not a *perfect* solution for me
    I'd like to know any addon (or HTML code) which can be used to do the following

    [​IMG]

    and have it's own pages like wiki

    I'm positive that an HTML code will work for me just fine if I integrate it with my wiki
     
    #1 negative, Jan 10, 2017 at 9:16 PM
    Last edited: Jan 10, 2017 at 9:21 PM
  2. Caldexi

    CaldexiAdministrator
    Team Member Administrator Moderator +Lifetime VIP+ Contributor ViP True Member +Member+ Suppliers Registered

    Joined:
    May 22, 2015
    Messages:
    452
    Likes Received:
    1,472
  3. negative

    negativeLifetime VIP
    +Lifetime VIP+ ViP True Member +Member+ Registered

    Joined:
    Nov 2, 2016
    Messages:
    72
    Likes Received:
    12
    hello @Caldexi

    It's the rules page for a private tracker 'IPTorrents'

    Yes. It allows using html in pages
     
  4. Caldexi

    CaldexiAdministrator
    Team Member Administrator Moderator +Lifetime VIP+ Contributor ViP True Member +Member+ Suppliers Registered

    Joined:
    May 22, 2015
    Messages:
    452
    Likes Received:
    1,472
    Hey again @negative.

    I created this simple example to help you get started, take a look here: JSFiddle or here:
    HTML:
    <script type="text/javascript">
    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){e.style.display="block"}
    else{e.style.display="none"}return true;}
    </script>
    
    <a href="javascript:void(0)" role="button" onclick="return toggleMe('open_1')">Some text here!</a>
    <div id="open_1" style="display: none;">
    Glorious text here!
    </div>
    
    <br><br>
    
    <a href="javascript:void(0)" role="button" onclick="return toggleMe('open_2')">Another one!</a>
    <div id="open_2" style="display: none;">
    Glorious text here!.. Perhaps something more?
    </div>
    Feel free to continue this discussion, we can develop it even further if you like to.
    EDIT://Updated the code and the JSFiddle link.
     
    #4 Caldexi, Jan 11, 2017 at 1:55 AM
    Last edited: Jan 11, 2017 at 1:29 PM
  5. negative

    negativeLifetime VIP
    +Lifetime VIP+ ViP True Member +Member+ Registered

    Joined:
    Nov 2, 2016
    Messages:
    72
    Likes Received:
    12
    thanks @Caldexi but the it gives one problem in the URL.

    refer to the image below

    also please don't mind the censor. I just don't want everyone to know about it

    [​IMG]
     
  6. Caldexi

    CaldexiAdministrator
    Team Member Administrator Moderator +Lifetime VIP+ Contributor ViP True Member +Member+ Suppliers Registered

    Joined:
    May 22, 2015
    Messages:
    452
    Likes Received:
    1,472
    Good morning @negative.

    Thanks for the feedback, I updated the code to properly work on Xenforo boards and in addition the links does no longer get marked as read by the browser when clicked.

    Let us know if you need more assistance with this.
    ~Updated JSFiddle.
     
  7. negative

    negativeLifetime VIP
    +Lifetime VIP+ ViP True Member +Member+ Registered

    Joined:
    Nov 2, 2016
    Messages:
    72
    Likes Received:
    12
    Works Perfectly. Just two more doubts

    -Can I add a bullet to the link text?
    -Can I change the color or the link text? Because it seems to be using the global link color

    PS: I tried it using in the regular thread with [parsehtml] code and it worked perfectly too
     
  8. Caldexi

    CaldexiAdministrator
    Team Member Administrator Moderator +Lifetime VIP+ Contributor ViP True Member +Member+ Suppliers Registered

    Joined:
    May 22, 2015
    Messages:
    452
    Likes Received:
    1,472
    Hey again @negative!

    I fixed a better syntax for the code and added in the features you requested, as per say here is the new JSFiddle link and the code can also be found below:
    HTML:
    <style type="text/css">
    #wikiLinkList{
    color:#ff0000;
    }
    </style>
    <script type="text/javascript">
    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){e.style.display="block"}
    else{e.style.display="none"}return true;}
    </script>
    
    <ol type="1">
        <li>
            <a id="wikiLinkList" href="javascript:void(0)" role="button" onclick="return toggleMe('open_1')">Some text here!</a>
            <div id="open_1" style="display: none;">
                Glorious text here!
            </div>
        </li>
    
        <br><br>
    
        <li>
            <a id="wikiLinkList" href="javascript:void(0)" role="button" onclick="return toggleMe('open_2')">Another one!</a>
            <div id="open_2" style="display: none;">
                Glorious text here!.. Perhaps something more?
            </div>
        </li>
    </ol>

    If you have any questions or other thoughts then let us know ;)!
     
  9. negative

    negativeLifetime VIP
    +Lifetime VIP+ ViP True Member +Member+ Registered

    Joined:
    Nov 2, 2016
    Messages:
    72
    Likes Received:
    12
    Awesome :D

    the rounded bullets instead of numbers?
     
  10. Caldexi

    CaldexiAdministrator
    Team Member Administrator Moderator +Lifetime VIP+ Contributor ViP True Member +Member+ Suppliers Registered

    Joined:
    May 22, 2015
    Messages:
    452
    Likes Received:
    1,472
    Hey again @negative.

    Yes, that can be done. Simply replace the <ol> with <ul>, like this:
    HTML:
    <style type="text/css">
    #wikiLinkList{
    color:#ff0000;
    }
    </style>
    <script type="text/javascript">
    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){e.style.display="block"}
    else{e.style.display="none"}return true;}
    </script>
    
    <ul style="list-style-type:disc">
        <li>
            <a id="wikiLinkList" href="javascript:void(0)" role="button" onclick="return toggleMe('open_1')">Some text here!</a>
            <div id="open_1" style="display: none;">
                Glorious text here!
            </div>
        </li>
    
        <br><br>
    
        <li>
            <a id="wikiLinkList" href="javascript:void(0)" role="button" onclick="return toggleMe('open_2')">Another one!</a>
            <div id="open_2" style="display: none;">
                Glorious text here!.. Perhaps something more?
            </div>
        </li>
    </ul>

    As usual I uploaded this to JSFiddle/1/. Let us know if you need help with anything else!
     
    • Winner Winner x 1
    • negative

      negativeLifetime VIP
      +Lifetime VIP+ ViP True Member +Member+ Registered

      Joined:
      Nov 2, 2016
      Messages:
      72
      Likes Received:
      12

    Share This Page