Click-To-View Text

by Darkovercast October 11th 2009, 12:51 pm

Hello, and nice to meet you. (^^/

While I was working on a post, I came on an issue I'm stuck on figuring out, and need a little push in the right direction.

I'm making quite long posts about a handful of topics, and I need to be able to have some sort of "Click-To-View" text. Much like the [spoiler ] [/spoiler ] code. But I would like it to say "Click Here" (or something along the lines) and if possible, not that long black bar under it.

I would also like to be able to color and italize it. So it stands out to viewers. Any suggestions or things to try?

by Darkovercast October 12th 2009, 8:32 am

Bump.

by keerthana October 12th 2009, 1:59 pm

click here to know more Hello

by errik October 12th 2009, 2:25 pm

i want to know to about this.whow did you do that keerthana ?please tell me

by Darkovercast October 13th 2009, 1:41 am

/facepalm

by Rok October 13th 2009, 1:57 am

Enable HTML in both the forum and your profile, then try this out in a post :

Code:: <html> <head> <title>Spoiler HTML code</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> <div class="spoiler"> <input type="button" onclick="showSpoiler(this);" value="Show/Hide" /> <div class="inner" style="display:none;"> TYPE YOUR MESSAGE HERE!!!!!!!!!!!!!!!! </div> </div> </body> </html>

Edit 'TYPE YOUR MESSAGE HERE!!!!!!!!!!!!!!!!' with what you want to show up as the spoiler.

by Blofeld October 13th 2009, 1:59 am

keerthana wrote:click here to know more

Oh you did that here too did you ? as well as my forum? Rolling Eyes

by Darkovercast October 13th 2009, 6:54 am

I started doing what you said to do Rok, and I think i'm on the right steps here, I kinda got it, but i'm getting this. Click-To-View Text Error

by Darkovercast October 13th 2009, 7:21 am

Blofeld wrote:
keerthana wrote:click here to know more

Oh you did that here too did you ? as well as my forum?

Yeah helpful -.- I prefer asking people questions to get better then search engines, you can't say thank you to google.

by Rok October 16th 2009, 3:03 am

Can you try it out in a post on your forum and send me the link to that post?

And by the way, when you click on the Show/Hide button, does anything appear correctly?

by Darkovercast October 16th 2009, 8:06 am

Rok wrote:Can you try it out in a post on your forum and send me the link to that post?

And by the way, when you click on the Show/Hide button, does anything appear correctly?

No the Show/Hide box dosnt show anything, ;_; Check your PM box for a pass into the site.

by Rok October 17th 2009, 1:45 am

Apparently, I got some jank script from some place on Google.

Here, this is an accurate script:

Code:: <div style="margin:20px; margin-top:5px"><div class="quotetitle"><input type="button" value="Click here to view Spoiler!" style="width:130px;height:30px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Click here to view Spoiler!'; }" /></div><div class="quotecontent"><div style="display: none;">{ENTER YOUR TEXT HERE!}</div></div></div>

It should appear like this.

by Darkovercast October 17th 2009, 8:08 am

Well this box works semi-okay.
Inside my forum, it cuts out the last few letters on the button, kinda looks like "Click here to view spoi-"
But with some tinkering it should be fine.

But the strange thing is, in a new post it works just fine, but the text i'm trying to put inside the button breaks the code and just displays all the text, now I made sure I put it in the right spot and all that, so i'm thinking something inside the text set the button off? Any characters I should'nt have inside the "Enter text here" area?

by Rok October 19th 2009, 4:13 pm

You can insert anything as the title of the spoiler as long as you change the width of the spoiler prior to the amount of characters in the title of the spoiler.

Look for style="width:130px;height:30px;font-size:10px at the beggining of the script. You can tick/edit the width, height, and even the font size for the spoiler.

by **Ape** October 19th 2009, 6:30 pm

Rok wrote:Apparently, I got some jank script from some place on Google.

Here, this is an accurate script:
Code:
<div style="margin:20px; margin-top:5px"><div class="quotetitle"><input type="button" value="Click here to view Spoiler!" style="width:130px;height:30px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Click here to view Spoiler!'; }" /></div><div class="quotecontent"><div style="display: none;">{ENTER YOUR TEXT HERE!}</div></div></div>

It should appear like this.

I used this code Thank you Rok :wouhou: