Jump to content

Spoiler tag


Guest JoeKuboj

Recommended Posts

It's nice to see that we got a spoiler tag, but could it be tweaked a little bit :unsure:

It's ok for hidding text

It's ok for hidding text



But, what if I want to hide airplane.gif some airplane.gif pictures too :blink:

some pictures too :blink:

But, what if I want to hide

airplane.gifairplane.gif



Can it be changed to something like

Link to comment
Share on other sites

  • Replies 123
  • Created
  • Last Reply

I did a javascript rollover, I bet you can do something yourself.

Mainly put a container inside, on rollover set inside display to visible, on out set it to invisible, may look kinda crudy though.


It is very simple (few lines of Javascript and CSS), and there is a mod for spoiler like that...so it is

possible

:thumbsup:



Oh that one is very nice, anyone got some base code to work with? I'd like to integrade that with mine make it REALLY fancy and cool like that. :D
Link to comment
Share on other sites

I almost got the code done for a cool one, but I can't get control of the 2nd div! Damn Javascript. You'd think "parent.parent.getElementsByTagName('div')[1]" would go: div(parent)->main div(parent)->2nd div(for spoiler info)

Grr such a pain.

^I'm being a dope, I should KNOW that method wouldn't work...

Fixed:

<div>
<div style="background: #B7E5CE;border: 1px dotted #000; border-bottom: 0; border-left: 4px solid #429E6F; color: #000; font-weight: bold; font-size: 10px; margin: 8px auto 0 auto; padding: 3px;">
Spoiler! <a href="java script:void(0);" onclick="java script:if(parentNode.parentNode.getElementsByTagName('div')[1].style.display=='block'){parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';this.innerHTML='--Click here to view--';}else {parentNode.parentNode.getElementsByTagName('div')[1].style.display='block';this.innerHTML='--Click here to hide--';}">--Click here to view--</a>
</div>
<div style="color: #000000; background: #FAFCFE; border: 1px dotted #000; border-left: 4px solid #429E6F; border-top: 0; padding: 4px; margin: 0 auto 8px auto;display:none;">{content}</div>
</div>


Ah geez, it's automatically putting a space between java and script, I think I found a bug in IPB (for security?) Remove it manually! There are 2 instances of "java script" make sure you get them both to "javascript"!

:D

Add that to the custom BBCode for spoiler :D a little credit would be nice in the description too :thumbsup:

Point out any mistakes I made, I just finished it. (is <a href=""...> propper? <a href="#"...> makes it jump to the top. :()

View it Here :D

So far IE6 and Firefox 1.5.0.7 work fine.

Link to comment
Share on other sites

It looks nice :)


Try

<a href="java script:;">....</a>

or

<a href="java script:void(0)">....</a>

Isn't javascript one word?

Fixed the code. :D
Ah geez, it's automatically putting a space between java and script, I think I found a bug in IPB (for security?) Remove it manually!

Also it seems to be leaving a huge space, is there a CSS property that is like visibility that will not just hide it, but make it not take up the room on the page as if it was visible?
Link to comment
Share on other sites

damn never relised wot the spoiler looked like on the new ipb as i never used it. I think just blacking it out so people have to highlight it is horrible idea. Firstly to newbs its not even clear its a spoiler tag i think alot more thought could have gone into it from ipbs point of view.

Link to comment
Share on other sites

damn never relised wot the spoiler looked like on the new ipb as i never used it. I think just blacking it out so people have to highlight it is horrible idea. Firstly to newbs its not even clear its a spoiler tag i think alot more thought could have gone into it from ipbs point of view.



Hence my code, don't like IPB's use it, tweaking colors and such is easy too.
Link to comment
Share on other sites

I really like that, strange_Will. The only thing that doesnt seem to work is "nesting". It does properly hide text and images, but you apparently can not nest other spoilers within the spoiler. That is really the only thing missing which is in ym current spoiler code (and also no image in editor, but I assume we can get it into the insert special now).

Link to comment
Share on other sites

Found this code some time ago and it works perfect for text / pictures ...

<span onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" onclick="this.nextSibling.style.display='';"><a href='java script:;'>


<div class='quotetop' >Spoiler : click to shox/hide</div>


</a></span><span style='display:none;'>


<div class='quotemain' >{content}</div>


</span>

Link to comment
Share on other sites

It is possible. We done this over at IZE (Click to Show, and Click to Hide aswel as hiding images / smileys in the tag). Pita did it :)



Can we have the code?

<div class='quotetop' >Spoiler : click to shox/hide</div></a></span><span style='display:none;'><div class='quotemain' >{content}</div></span>

<span onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" onclick="this.nextSibling.style.display='';"><a href='java script:;'>





That screws up in Firefox, use this one instead (same effect, just fixes that bug):

<div class='quotetop' >Spoiler : click to show/hide</div></span><span style='display:none;'> <div class='quotemain' >{content}</div> </span>

<span onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" onclick="this.nextSibling.style.display='';">



Link to comment
Share on other sites

I really like that, strange_Will. The only thing that doesnt seem to work is "nesting". It does properly hide text and images, but you apparently can not nest other spoilers within the spoiler. That is really the only thing missing which is in ym current spoiler code (and also no image in editor, but I assume we can get it into the insert special now).



Okay I'll get to work on finding out how to make sure that works then. :D


... It seems to be a bug of IPB 2.1.7:
http://forums.wolfram-studios.com/index.ph...st=0#entry10539

If you see, the background an extremely simple BBCode will not nest either, it's not processing it correctly. I don't think any user made BBCode will nest (correct me if you got a link to prove me wrong though)

If anyone can confirm I'll put in a bug report.

I was confused, being as the code all has to do with related to the current element, so nesting shouldn't be a problem at all, if the BBCode parser worked fully as expected.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...