DoubleYou Posted August 29, 2014 Posted August 29, 2014 Discussion topic: Template:Spoiler Purpose & Usage This template allows text to be clicked like a spoiler to show hidden text immediately underneath it. Examples Code: {{Spoiler|shown=Click Me!|hidden=Where did this come from?}} Known Issues Incompatible with CSS extension The entire line for the text to click to reveal the text will be clickable instead of only the text. /fixed
TechAngel85 Posted August 29, 2014 Posted August 29, 2014 The second issue is a limitation of the JS/CSS. Since S4N isn't willing to edit the code due to it being part of the core wiki files, it's just there to stay. I would think it would be simple enough to copy the code and make a new file that simply overrides the core code and that we'd be able to edit completely without messing with the core files; however, this is wiki we're talking about. I seem just about anything simple to do on a normal HTML webpage is rather complicated to do on the wiki. Still that is a nice implementation without having the annoy "[Expand]" text added to the line. Good work!
DoubleYou Posted August 29, 2014 Author Posted August 29, 2014 Well, I'm not entirely convinced that the second issue is that unfix-able. The limitation is merely there because I don't know what width the word will be for the "Click Me!" text. If there is a way to dynamically change the width based on the length of the word (probably 1em per character), we could have a somewhat elegant solution. I think there may be a way via wiki code to do it, but I don't know yet. The first issue is simply an annoyance. It also makes it so I can't make the "Click Me!" text act change upon hover (well, I can't think of a way besides using the css :hover selector or jquery). It also means if you want to use spoilers, you simply can't use the CSS extension, which means if we implement it on the STEP Guide, we're going to need to remove the custom css file. I'm not sure, however, that everything in that css file might not be doable via in-line css. Now, if we could figure out the incompatibility between the CSS extension and the collapsible functions, we might be able to hack ourselves a solution. The CSS extension hasn't been updated since 2012, so it likely is abandoned, so s4n might not even mind having to modify it.
TechAngel85 Posted August 29, 2014 Posted August 29, 2014 width=100% This will make the width as width as it needs to be to contain the word...or should. It'll either do that or be the width of the parent element.
DoubleYou Posted August 29, 2014 Author Posted August 29, 2014 Nope, I think that makes it 100% the width of the element. I know if I set it to 50%, it will occupy only half the page width. At anyrate, tried it and no effect.
DoubleYou Posted August 29, 2014 Author Posted August 29, 2014 Added parameter width to help alleviate the second issue. There doesn't seem to be any way to automate the width with current functions on our wiki according to my research. Wiki editors should find it a minor grievance at most.
DoubleYou Posted May 7, 2015 Author Posted May 7, 2015 Fixed the "unfix-able" 2nd issue! All that was needed was to add display:inline-block to the style.
z929669 Posted May 7, 2015 Posted May 7, 2015 I am not sure what the issue was as stated: "The entire line for the text to click to reveal the text will be clickable instead of only the text."
DoubleYou Posted May 7, 2015 Author Posted May 7, 2015 Instead of just the Click Me text being the "link" to open the hidden text, it would be clickable for the full horizontal length of the page.
z929669 Posted May 7, 2015 Posted May 7, 2015 Instead of just the Click Me text being the "link" to open the hidden text, it would be clickable for the full horizontal length of the page.On the template page, only "Click Me!" is hyperlinked, not the entire length of the horizontal line, so still confused ... or do you mean that it used to be the entire line (even blank) that was underlined and clickable?
DoubleYou Posted May 7, 2015 Author Posted May 7, 2015 Used to be the entire line that was clickable.This. And I fixed it.
z929669 Posted August 3, 2021 Posted August 3, 2021 Added background, padding, and border to make these more obvious from non-spoiler text. See a recent Step guide for examples.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now