Hello & Welcome to our community. Is this your first visit? Register
Results 1 to 8 of 8
  1. #1
    Newbie

    Rank
    Member
    Join Date
    Jan 2010
    Posts
    2
    Likes (Received)
    0

    Showoff [JavaScript] Making Spoilers.

    What is a Spoiler?
    A spoiler is like a box, but it has a button on the top. When you click on the button the box will open and you will see the content.

    Why should I use a Spoiler?
    When people view your post, they look foward to opening it and seeing what is inside. It also will make your post look fancy.

    How do I use this Spoiler?
    Copy the code and paste it where you want it. In the code, it has the word, "text". Change that to what text you want in it. Do it to the same as "Bold Title" and the "Title".

    Code:
    <html><head><title>TITLE</title>    <style type="text/css">body,input    {    font-family:"
    Trebuchet ms",arial;font-size:0.9em;    color:#333;    }.spoiler    {    border:1px solid #ddd;    padding:3px;    }.spoiler .inner    {    border:1px solid #eee;    padding:3px;margin:3px;    }    
    </style>    <script type="text/javascript">function showSpoiler(obj)    {    var inner = obj.parentNode.getElementsByTagName("div")[0];    if (inner.style.display == "none")        inner.style.display = "";    else        inner.style.display = "none";    }    </script></head><body><h1>BOLD TITLE</h1><div class="spoiler">    <input type=
    "button" onclick="showSpoiler(this);" value="Show/Hide" />    <div class="inner" style="display:none;">TEXT</div></div></body></html>
    Why should I keep looking back at Spud's posts?
    Everyday he will be on, updating and replying to questions that you may want to know.

  2. #2
    Out with 2d...in with 3d! xSilv3rbullet's Avatar

    Rank
    True Member
    Join Date
    Apr 2009
    Posts
    1,248
    Likes (Received)
    34

    Re: Making Spoilers.

    Quote Originally Posted by Spud View Post
    What is a Spoiler?
    A spoiler is like a box, but it has a button on the top. When you click on the button the box will open and you will see the content.

    Why should I use a Spoiler?
    When people view your post, they look foward to opening it and seeing what is inside. It also will make your post look fancy.

    How do I use this Spoiler?
    Copy the code and paste it where you want it. In the code, it has the word, "text". Change that to what text you want in it. Do it to the same as "Bold Title" and the "Title".

    Code:
    <html><head><title>TITLE</title>    <style type="text/css">body,input    {    font-family:"
    Trebuchet ms",arial;font-size:0.9em;    color:#333;    }.spoiler    {    border:1px solid #ddd;    padding:3px;    }.spoiler .inner    {    border:1px solid #eee;    padding:3px;margin:3px;    }    
    </style>    <script type="text/javascript">function showSpoiler(obj)    {    var inner = obj.parentNode.getElementsByTagName("div")[0];    if (inner.style.display == "none")        inner.style.display = "";    else        inner.style.display = "none";    }    </script></head><body><h1>BOLD TITLE</h1><div class="spoiler">    <input type=
    "button" onclick="showSpoiler(this);" value="Show/Hide" />    <div class="inner" style="display:none;">TEXT</div></div></body></html>
    Why should I keep looking back at Spud's posts?
    Everyday he will be on, updating and replying to questions that you may want to know.
    Pretty much the same thing you'd do for hiding/expanding categories for forums and stuff. :P
    Working on a 3D FPS engine in C#...

  3. #3
    Newbie

    Rank
    Member
    Join Date
    Jan 2010
    Posts
    2
    Likes (Received)
    0

    Re: Making Spoilers.

    Exactly.

  4. #4
    :-) s-p-n's Avatar

    Rank
    Alpha Male
    Join Date
    Jun 2007
    Location
    Next Door
    Posts
    2,018
    Likes (Received)
    385

    Re: [JavaScript] Making Spoilers.

    Your code is unreadable.. Add line breaks and indentation, please. :S

    Also, explain the code more. If you're going to teach or show somebody how to do something, be effective at telling them how. You didn't even mention JavaScript, and it's a tutorial about JavaScript:

    Quote Originally Posted by Spud
    How do I use this Spoiler?
    Copy the code and paste it where you want it. In the code, it has the word, "text". Change that to what text you want in it. Do it to the same as "Bold Title" and the "Title".
    Instead of telling us how to use your spoiler, teach us how we can make our own, by learning the JavaScript.


  5. #5
    Infraction Baɴɴed holthelper's Avatar

    Rank
    Alpha Male
    Join Date
    Apr 2008
    Posts
    1,727
    Likes (Received)
    179

    Re: [JavaScript] Making Spoilers.

    Quote Originally Posted by Spud View Post
    What is a Spoiler?
    A spoiler is like a box, but it has a button on the top. When you click on the button the box will open and you will see the content.

    Why should I use a Spoiler?
    When people view your post, they look foward to opening it and seeing what is inside. It also will make your post look fancy.

    How do I use this Spoiler?
    Copy the code and paste it where you want it. In the code, it has the word, "text". Change that to what text you want in it. Do it to the same as "Bold Title" and the "Title".

    Code:
    <html><head><title>TITLE</title>    <style type="text/css">body,input    {    font-family:"
    Trebuchet ms",arial;font-size:0.9em;    color:#333;    }.spoiler    {    border:1px solid #ddd;    padding:3px;    }.spoiler .inner    {    border:1px solid #eee;    padding:3px;margin:3px;    }    
    </style>    <script type="text/javascript">function showSpoiler(obj)    {    var inner = obj.parentNode.getElementsByTagName("div")[0];    if (inner.style.display == "none")        inner.style.display = "";    else        inner.style.display = "none";    }    </script></head><body><h1>BOLD TITLE</h1><div class="spoiler">    <input type=
    "button" onclick="showSpoiler(this);" value="Show/Hide" />    <div class="inner" style="display:none;">TEXT</div></div></body></html>
    Why should I keep looking back at Spud's posts?
    Everyday he will be on, updating and replying to questions that you may want to know.
    i love your last part "Why should I keep looking back at Spud's posts?"

    PHP Code:
    function spoiler($text) {
        
    $repeat "this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display";
        
    $output =
            
    "<div style=\"margin: 5px 20px 20px;\">" 
            
    "    <div style=\"margin-bottom: 2px;\">" .
            
    "        <u>Spoiler</u>: <input type=\"button\" onclick=\"" 
            
    "            if ({$repeat} != '') {" 
            
    "                {$repeat} = ''; this.innerText = ''; this.value = 'Hide';" 
            
    "            } else {" 
            
    "                {$repeat} = 'none'; this.innerText = ''; this.value = 'Show';" 
            
    "            }\" style=\"margin: 0px; padding: 0px; width: 45px; font-size: 10px;\" value=\"Show\" />" 
            
    "    </div>" 
            
    "    <div style=\"border: 1px inset ; margin: 0px; padding: 6px;\">" 
            
    "        <div style=\"display: none;\">{$text}</div>" 
            
    "    </div>" 
            
    "</div>";
        return 
    $output;

    for php and i may look like a lot of lines but hey its easy to read.
    why did god curse us with the abilities to make search engines but not give us the knowledge on how to use them?

    Fully(?) working v100 GD Character Image Display for MapleStory - Link
    [PHP] Image to HTML - Link

  6. #6
    Member

    Rank
    Member
    Join Date
    Oct 2009
    Location
    Thailand
    Posts
    30
    Likes (Received)
    2

    Re: [JavaScript] Making Spoilers.

    A more readable version. Replace the blah with anything you want.

    Code:
    	<div style="margin: 5px 20px 20px;">
    		<div style="margin-bottom: 2px">
    			<ins>Spoiler</ins>: <input type="button" value="Show" onclick="
    				(function(input, content) {
    					input.value = content.style.display == 'none' ? 'Hide' : 'Show';
    					content.style.display = content.style.display == 'none' ? 'block' : 'none';
    				})(this, this.parentNode.nextSibling.getElementsByTagName('div')[0])" />
    		</div><div style="border: 1px inset; margin: 0px; padding: 6px">
    			<div style="display: none">
    				Blah
    			</div>
    		</div>
    	</div>

  7. #7
    Hm. foxx's Avatar

    Rank
    The Omega
    Join Date
    Sep 2006
    Location
    Czech Republic
    Posts
    5,388
    Likes (Received)
    1368

    Re: [JavaScript] Making Spoilers.

    Quote Originally Posted by holthelper View Post
    i love your last part "Why should I keep looking back at Spud's posts?"

    PHP Code:
    function spoiler($text) {
        
    $repeat "this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display";
        
    $output =
            
    "<div style=\"margin: 5px 20px 20px;\">" 
            
    "    <div style=\"margin-bottom: 2px;\">" .
            
    "        <u>Spoiler</u>: <input type=\"button\" onclick=\"" 
            
    "            if ({$repeat} != '') {" 
            
    "                {$repeat} = ''; this.innerText = ''; this.value = 'Hide';" 
            
    "            } else {" 
            
    "                {$repeat} = 'none'; this.innerText = ''; this.value = 'Show';" 
            
    "            }\" style=\"margin: 0px; padding: 0px; width: 45px; font-size: 10px;\" value=\"Show\" />" 
            
    "    </div>" 
            
    "    <div style=\"border: 1px inset ; margin: 0px; padding: 6px;\">" 
            
    "        <div style=\"display: none;\">{$text}</div>" 
            
    "    </div>" 
            
    "</div>";
        return 
    $output;

    for php and i may look like a lot of lines but hey its easy to read.
    ...what is this?

  8. #8
    Member

    Rank
    Member
    Join Date
    Oct 2009
    Location
    Thailand
    Posts
    30
    Likes (Received)
    2

    Re: [JavaScript] Making Spoilers.

    Quote Originally Posted by foxx View Post
    ...what is this?
    A php function to wrap a text with a spoiler tag.

    PHP Code:
    echo spoiler('text to put in spoiler.'); 
    Note that the output generated by this code will be very unreadable because it sticked all the lines together.

    Using multiline strings will make it easier to read.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

HostKey
Sponsored by HostKey , secured by Incapsula and mods by DBTech.
All times are GMT +1. The time now is 07:40 AM.
Powered by vBulletin® Copyright , Jelsoft Enterprises Ltd.