vb.org Archive
Page 2 of 2 1 2
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)
-   -   Spoiler tag without javascript? (https://vborg.vbsupport.ru/showthread.php?t=317299)

Black Snow 03-22-2015 05:03 PM
Try this: http://codepen.io/AngelKrak/pen/FojxE

OUTL4W 03-27-2015 12:24 PM
Quote:
Originally Posted by Black Snow (Post 2541196)
its a lil wonky but I did find this...

replacement:
Code:
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
{param}
</div></div>

additional.css:
Code:
.spoilerbutton {
  display:block;
  margin:5px 0;
}
.spoiler {
  overflow:hidden;
  background: transparent;
}
.spoiler > div {
  -webkit-transition: all 0.75s ease;
  -moz-transition: margin 0.75s ease;
  -o-transition: all 0.75s ease;
  transition: margin 0.75s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
  margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler {
  padding:5px;
}
change the items in red to your preference....

pjkcards 04-22-2015 03:09 PM
Thanks for the replies, but still not working. This is the result of the original, the one Black Snow recommended, and the last one is OutL4w:
http://i.imgur.com/nVkQ2Yv.png

Perhaps the theme is somehow messing with the show/hide. What's the best way to troubleshoot this?

Thanks.

pjkcards 06-01-2015 03:12 AM
Bump. Just got a new mobile theme going and the Show button still does nothing. Anyone have a spoiler working on mobile themes?

Thanks.

pjkcards 08-24-2015 12:35 AM
Still haven't been able to get this to work, see screenshot here:
http://i.imgur.com/nVkQ2Yv.png

Just tried this one too with the same result:
https://vborg.vbsupport.ru/showthread.php?t=289968

Any ideas to get a spolier working on mobile would be appreciated, thanks.

pjkcards 09-07-2015 12:46 AM
Edit: Problem solved. This works on mobile:
https://vborg.vbsupport.ru/showthread.php?t=279069

I modified it a bit for the option tag, and to make all content 80% width. But if you're having issue with the spoiler on mobile, the above will work. Thanks guys, hope that helps.

akz645 09-08-2015 03:52 PM
Quote:
Originally Posted by pjkcards (Post 2554446)
Edit: Problem solved. This works on mobile:
Replacement:
Code:
<div style="margin: 5px 20px 20px;">
<div style="smallfont" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;"> <b>Spoiler:</b>            <spa                                   
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.innerHTML = '<a href=\'#\' onClick=\'return false;\'>Hide</a>'; }
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerHTML = '<a href=\'#\' onClick=\'return false;\'>Show</a>'; }" /><a href="#" onClick="return false;">Show</a></span>
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
{param}
</div></div></div>
That one I personally made work.
I had to change a couple of things, until I finally got it to work. I tried to make it resemble the classic spoiler button.
Code:
<input type="button"
I think it's the 'button' feature that makes it not work on the mobile skin.
Every single spoiler that I've seen which uses button, doesn't work on the mobile skin.

Quote:
Originally Posted by pjkcards (Post 2537296)
Thanks for the replies. For anyone using a spoiler, have you ever had any complaints about people who click and nothing happens? I suspect it is due to their browser not allowing javascript. Is this the case?
The best way to test, is by going to the mobile skin from your PC and then trying yourself.


All times are GMT. The time now is 01:53 PM.
Page 2 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01047 seconds
  • Memory Usage 1,738KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_code_printable
  • (3)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (7)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete