vb.org Archive - Spoiler tag without javascript?

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)

pjkcards

02-13-2015 12:51 AM

Spoiler tag without javascript?

A few users have said the spoiler tag isn't working, and I suspect it is because their phone doesn't allow it. Is it possible to do it without javascript? Or what is the best way to handle this issue?

Right now this is what we're using:

Code:

<div style="margin:20px; margin-top:5px">

<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b>: <input type="button" value="Show" style="width:45px;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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">

</div>

<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">

<div style="display: none;">

{param}

</div>

</div>

</div>

Thanks.

OUTL4W

02-13-2015 06:53 AM

I'm sure you'll see many different variations for this but here's what I use

Code:

<div style="margin:20px; margin-top:5px">

<div class="smallfont" style="margin-bottom:2px; width:852; height:26"><right><font color="red"><b>&nbsp;</b></font></right>  

<input type="button" value="Spoiler" style="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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Spoiler'; }">

</div>

<div>

<div style="display: none;">

{param}

</div>

</div>

</div>

Works just fine on mobile....

Edit: didn't look at the entire code but it looks exact same almost but I have no issues on either vb3 or vb4 forum on mobile.

Dave	02-13-2015 08:07 AM

It's not possible to do this without JavaScript, it needs to catch the onclick event on the button so it can then open/close the div with the content.

pjkcards

02-13-2015 03:46 PM

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?

Dave	02-13-2015 04:14 PM

It's highly unlikely that someone has JavaScript disabled. JavaScript is enabled on pretty much all desktop and mobile browsers nowadays, unless they manually disabled it in the settings.

OUTL4W

02-14-2015 08:20 AM

Quote:

Originally Posted by pjkcards (Post 2537296)

Guess it all depends what they were trying to show. If it was flash related then it would show as blank image. Only certain mobile web browser's will show flash content.

pjkcards

03-10-2015 05:07 PM

Looks like it is the mobile theme disabling it.

When using the desktop version the spoilers work fine. When using mobile the mobile theme, it doesn't. What's the quickest way to solve this issue? Thanks.

kh99	03-10-2015 06:01 PM

I don't really understand what's going on there, but it seems like in the mobile style, the big area that say "Show" is not the thing that needs to be clicked to show it. There's another <input> tag that's not showing up at all.

pjkcards

03-10-2015 07:10 PM

Quote:

Originally Posted by kh99 (Post 2540046)

The example posted is 3 different kinds of spoiler tags, including the one I posted above, and the one Outl4w posted. What is the best way to resolve this? No idea why when clicked the input doesn't show. Thanks.

pjkcards

03-19-2015 04:10 AM

bump, thanks.

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)

Try this: http://codepen.io/AngelKrak/pen/FojxE

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)

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 04:03 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01146 seconds Memory Usage 1,764KB 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 (6)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (17)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 bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: