Join RaGEZONE TODAY! Register

Results 1 to 8 of 8
  1. #1
    Newbie

    Rank
    Member
    Join Date
    Jan 2010
    Posts
    2

    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.  
  3. #2
    Account Upgraded | Title Enabled!

    Rank
    True Member
    Join Date
    Apr 2009
    Posts
    1,248

    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#...

  4. #3
    Newbie

    Rank
    Member
    Join Date
    Jan 2010
    Posts
    2

    Re: Making Spoilers.

    Exactly.

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

    Rank
    Alpha Male
    Join Date
    Jun 2007
    Location
    Next Door
    Posts
    2,028

    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.

    If you like my content here, please comment on my blog.

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

    Rank
    Alpha Male
    Join Date
    Apr 2008
    Posts
    1,727

    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

  7. #6
    Member

    Rank
    Member
    Join Date
    Oct 2009
    Location
    Thailand
    Posts
    30

    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>

  8. #7
    Hm. foxx's Avatar

    Rank
    The Omega
    Join Date
    Sep 2006
    Location
    Czech Republic
    Posts
    5,386

    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?

  9. #8
    Member

    Rank
    Member
    Join Date
    Oct 2009
    Location
    Thailand
    Posts
    30

    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
  •  
HyperFilter
Sponsored by HyperFilter , secured by Incapsula , powered by LiteSpeed.
Mods by DBTech. All times are GMT +1. The time now is 08:30 PM.
Powered by vBulletin® Copyright , Jelsoft Enterprises Ltd.