Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

[JavaScript] Making Spoilers.

Initiate Mage
Joined
Jan 30, 2010
Messages
2
Reaction score
0
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.
 
Legendary Battlemage
Member
Joined
Apr 7, 2009
Messages
647
Reaction score
25
Re: 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.

Pretty much the same thing you'd do for hiding/expanding categories for forums and stuff. :p
 
Joined
Jun 8, 2007
Messages
1,985
Reaction score
490
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:

Spud said:
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.

:thumbup1:
 
Infraction Baɴɴed
Member
Joined
Apr 9, 2008
Messages
1,416
Reaction score
169
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:
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.
 
Initiate Mage
Joined
Oct 30, 2009
Messages
30
Reaction score
2
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>
 
Joined
Sep 10, 2006
Messages
2,817
Reaction score
1,417
i love your last part "Why should I keep looking back at Spud's posts?"

PHP:
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?
 
Initiate Mage
Joined
Oct 30, 2009
Messages
30
Reaction score
2
...what is this?

A php function to wrap a text with a spoiler tag.

PHP:
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.
 
Back
Top