NATION

PASSWORD

Does JavaScript have to be used for spoilers?

Bug reports, general help, ideas for improvements, and questions about how things are meant to work.
User avatar
Rebeka23
Civilian
 
Posts: 1
Founded: Sep 28, 2020
Democratic Socialists

Does JavaScript have to be used for spoilers?

Postby Rebeka23 » Mon Sep 28, 2020 8:39 am

I use NoScript to speed up websites on an old computer I have, but it makes it impossible to view the content of any spoiler here. Is that something tightly integrated into phpBB or can that be fixed somehow?

User avatar
Comfed
Envoy
 
Posts: 291
Founded: Apr 09, 2020
Psychotic Dictatorship

Postby Comfed » Mon Sep 28, 2020 3:07 pm

Not an admin, but I believe that spoiler buttons use Javascript, yes.
From The North Pacific. Join our forums, apply for citizenship, join our discord, the executive staff, and the North Pacific Army
Reploid Productions wrote:Dear gods, Nationstates has officially been around long enough to spark generation arguments. "You kids and your Discords too lazy to make forum accounts! In MY day we only had IRC and regional forums and WE LIKED IT!"
Bobberino wrote:You tagged your name in our hearts.
Mallorea and Riva wrote:Couping isn't about creating something greater. It's about control. You don't reconcile with those you can simply exile.
Unibot III wrote:(Image)

User avatar
Doge Land
Spokesperson
 
Posts: 109
Founded: Feb 15, 2019
Inoffensive Centrist Democracy

Postby Doge Land » Mon Sep 28, 2020 4:50 pm

Comfed wrote:Not an admin, but I believe that spoiler buttons use Javascript, yes.


That wasn't the question. The question was if the spoilers have to be tied to JS as a part of the integrity of the forums.

Now for OP: I'd think so. Spoilers are a pretty major part of the forums, and if the whole forums is written in something dependent on JS, they'd have to rewrite the whole thing.
Last edited by Doge Land on Mon Sep 28, 2020 4:51 pm, edited 1 time in total.
The Democratic Republic of Doge Land
Founder, President | Potato Place
NS Policies smothered with shibes.
Made you look.

S o c i a l d i s t a n c e

"We ALL know that phantom menance is boring, but it gets better." - Archron Empire
"dont" - Cenagrad
"[Politically incorrect joke removed.]" - Kowenian States
"...but your mod repellent doesn't seem to work." - Moderator Telegram
"snort giggle" - Artaecus

User avatar
[violet]
Site Admin
 
Posts: 14646
Founded: Antiquity

Postby [violet] » Mon Sep 28, 2020 5:00 pm

JavaScript is required for most kinds of interactivity on the web, yes. It's not possible to implement that feature in a sensible way without it.

User avatar
Trotterdam
Powerbroker
 
Posts: 8950
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Mon Sep 28, 2020 6:02 pm

It's actually possible with HTML 5, which is recognized by most modern browsers.
Code: Select all
<details><summary>Spoiler</summary><blockquote>You should only see this if you click on the header.</blockquote></details>
Testing suggests that my browser recognizes this even if the document is still incorrectly marked as using an older version of HTML, so it shouldn't cause issues with old forum software.

A more low-tech method used by some websites is to set the text foreground and background colors to the same color, so it's only visible when selected.
Code: Select all
<blockquote style="color:transparent">You should only see this if you select the text.</blockquote>
Last edited by Trotterdam on Mon Sep 28, 2020 6:08 pm, edited 1 time in total.

User avatar
Doge Land
Spokesperson
 
Posts: 109
Founded: Feb 15, 2019
Inoffensive Centrist Democracy

Postby Doge Land » Mon Sep 28, 2020 6:03 pm

Trotterdam wrote:It's actually possible with HTML 5, which is recognized by most modern browsers.
Code: Select all
<details><summary>Spoiler</summary><blockquote>You should only see this if you click on the header.</blockquote></details>


A more low-tech method used by some websites is to set the text foreground and background colors to the same color, so it's only visible when selected.[code]<blockquote style="color:transparent">You should only see this if you select the text.</blockquote>[code]


I know what you're talking about, and it is not the same. Even if the admins did implement that, it'd call for a major design overhaul i.e. it looks bad
The Democratic Republic of Doge Land
Founder, President | Potato Place
NS Policies smothered with shibes.
Made you look.

S o c i a l d i s t a n c e

"We ALL know that phantom menance is boring, but it gets better." - Archron Empire
"dont" - Cenagrad
"[Politically incorrect joke removed.]" - Kowenian States
"...but your mod repellent doesn't seem to work." - Moderator Telegram
"snort giggle" - Artaecus

User avatar
Trotterdam
Powerbroker
 
Posts: 8950
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Mon Sep 28, 2020 6:11 pm

Doge Land wrote:I know what you're talking about, and it is not the same. Even if the admins did implement that, it'd call for a major design overhaul i.e. it looks bad
You'd need a little custom CSS to make the "<summary>" part look more like a button. Other than that it'd look identical to the current system.

Maybe not even that. Just using
Code: Select all
<summary><button>Spoiler</button></summary>
or
Code: Select all
<summary><input type="button" value="Spoiler"></summary>
seems to work, which would allow using the already-existing forum code with minimum hassle.

A major difference it that it would fail-open rather than fail-closed on browsers that don't support it, but that's probably a good thing (now, opening spoilers on browsers with JavaScript disabled requires mucking around with "Inspect Element"), and there shouldn't be many of those left[citation].
Last edited by Trotterdam on Mon Sep 28, 2020 6:27 pm, edited 3 times in total.

User avatar
[violet]
Site Admin
 
Posts: 14646
Founded: Antiquity

Postby [violet] » Mon Sep 28, 2020 8:02 pm

Trotterdam wrote:It's actually possible with HTML 5, which is recognized by most modern browsers.

Oh my! I was unaware of that one. I'll check it out. It looks like a great solution.

User avatar
[violet]
Site Admin
 
Posts: 14646
Founded: Antiquity

Postby [violet] » Mon Sep 28, 2020 8:39 pm

A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:
This is the secret content of a traditional spoiler.


Proposed replacement spoiler:
Show Spoiler
This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.


Testing line one two
Show Spoiler
Inline contents
three four.

Traditional titled spoiler.

Click Me Too
Testing new titled spoiler.
Last edited by [violet] on Tue Sep 29, 2020 4:46 pm, edited 2 times in total.

User avatar
Holland DS6
Attaché
 
Posts: 69
Founded: Dec 06, 2019
Inoffensive Centrist Democracy

Postby Holland DS6 » Mon Sep 28, 2020 9:04 pm

I don't really use spoilers that much, it almost feels like the suggested spoiler is less obvious that you can click on it, I mean it has that triangle, but you could probably get it with special characters
If you want to send me any cards, best if you send it to one of my other nations like Mini Me For Cards 3, I just need more bank on this account if I want to upgrade the limit, but I just keep wanting to buy cards worth more, cards I like or cards for a collection that I am working on, I already had a lot of cards in the catagory, so mind as well make it an official collection that I could possibly already complete. I try not to break the rules, so if I do it by accident, please just tell me mods, although it would have to be through the TG only for mods, like Ransium had to due to class region. I didn't really check for spellings, so it may be a little unclear, sorry. :P More in my factbook on card+gifts. Finally getting my own card soon!

User avatar
Merni
Ambassador
 
Posts: 1311
Founded: May 03, 2016
Democratic Socialists

Postby Merni » Mon Sep 28, 2020 9:30 pm

Holland DS6 wrote:I don't really use spoilers that much, it almost feels like the suggested spoiler is less obvious that you can click on it, I mean it has that triangle, but you could probably get it with special characters

It is also a button exactly the same as the previous one, just with the triangle inside, so I don't really see the problem.

One problem I do see is the contents of the spoiler seem to appear on the same line as the spoiler button itself. (using an iPad on iPad OS version 13.3.1, will check on desktop and phone later).

Edit: OK, it looks like it's pretty inconsistent. On Android (v 10, Nokia 4.2) I got:
With DuckDuckGo browser v 5.65.0 it works entirely correctly, puts the contents on the next line, also with the arrow inside the button.
With Firefox v Daylight 80.1.3 it shows the content on the same line as the button and the triangle is also missing inside the button.

On Windows 10 (v 1909 build 18363.1082):
With Firefox (v 78.0.1) it's the same as Firefox on mobile (ie. no arrow and the content appears on the same line as the button)
With Internet Explorer 11: The spoiler is permanently open and cannot be closed. The content appearsappearance similar to Firefox.
Last edited by Merni on Mon Sep 28, 2020 10:02 pm, edited 3 times in total.
COVID19 still exists! | Donate your free time | OOC unless I say so
The Labyrinth | GA Committee List | Who isn't endorsing you

Admins: Please allow blocking WA TGs!
E -7.75 S -3.64
Fora
Economics = greed.
meth
I've noticed that everybody that is for abortion has already been born. — Ronald Reagan
When the people are being beaten with a stick, they are not much happier if it is called 'the People’s Stick.' — Mikhail Bakunin (to Karl Marx)
You're supposed to be employing the arts of diplomacy, not the ruddy great thumping sledgehammers of diplomacy. — Ardchoille
The West won the world not by the superiority of its ideas or values or religion [...] but rather by its superiority in applying organised violence. — Samuel P. Huntington (even he said that!)

User avatar
Trotterdam
Powerbroker
 
Posts: 8950
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Mon Sep 28, 2020 10:24 pm

[violet] wrote:Proposed replacement spoiler:
Show Spoiler
This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.
You need to enclose the spoilered text in <div> so it doesn't open on the same line as the button, but otherwise it works great.

Merni wrote:It is also a button exactly the same as the previous one, just with the triangle inside, so I don't really see the problem.
I don't even see the triangle. I do see them on unstyled <details><summary> examples, so I guess the forum CSS overrode it somehow.

Not a problem, I'd think, considering the old spoiler buttons didn't have triangles and nobody ever complained about that.

On inspection it seems to be the "display:inline-block" part confusing the browser somehow. Remove it makes the triangle reappear, but also makes the button as wide as the page rather than being shrunken to fit the text.

If you really want the triangle (or cross-browser consistency), you could fix this easily enough by applying the button CSS to a separate tag placed inside the <summary>, rather than the <summary> itself, and then leave the <summary> with the browser default style (mine appears to use "display:list-item"). This should also fix the "spoilered text appears on same line" problem without needing the <div>. The triangle would appear outside the button though.

Merni wrote:With Internet Explorer 11: The spoiler is permanently open and cannot be closed. The content appearsappearance similar to Firefox.
Who still uses Internet Explorer? Even Microsoft has phased it out in favor of Microsoft Edge.
Last edited by Trotterdam on Mon Sep 28, 2020 10:25 pm, edited 1 time in total.

User avatar
Merni
Ambassador
 
Posts: 1311
Founded: May 03, 2016
Democratic Socialists

Postby Merni » Mon Sep 28, 2020 10:36 pm

Trotterdam wrote:
Merni wrote:With Internet Explorer 11: The spoiler is permanently open and cannot be closed. The content appearsappearance similar to Firefox.
Who still uses Internet Explorer? Even Microsoft has phased it out in favor of Microsoft Edge.

2.6 - 5.3% of desktop browser users, apparently. Certainly I know of a few people who still use it on Win XP or 7. But I agree supporting it shouldn't be a priority, I just tested it out because I had it.

I also agree regarding the triangle - it isn't necessary, but it appearing on some browsers and not others is weird and should ideally be fixed. The bigger issue is the inconsistent placement of the content, though.
COVID19 still exists! | Donate your free time | OOC unless I say so
The Labyrinth | GA Committee List | Who isn't endorsing you

Admins: Please allow blocking WA TGs!
E -7.75 S -3.64
Fora
Economics = greed.
meth
I've noticed that everybody that is for abortion has already been born. — Ronald Reagan
When the people are being beaten with a stick, they are not much happier if it is called 'the People’s Stick.' — Mikhail Bakunin (to Karl Marx)
You're supposed to be employing the arts of diplomacy, not the ruddy great thumping sledgehammers of diplomacy. — Ardchoille
The West won the world not by the superiority of its ideas or values or religion [...] but rather by its superiority in applying organised violence. — Samuel P. Huntington (even he said that!)

User avatar
Trotterdam
Powerbroker
 
Posts: 8950
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Mon Sep 28, 2020 10:45 pm

Merni wrote:I also agree regarding the triangle - it isn't necessary, but it appearing on some browsers and not others is weird and should ideally be fixed.
I've done some tests. The only way I can find that put the arrow inside the button while also sizing the button to the label was to mark the <summary> with "float:left" (and then put the spoilered text in a "<div>" with "clear:left" or "clear:both"), which seems a bit inelegant.

Putting the arrow outside the button is easier.

Merni wrote:The bigger issue is the inconsistent placement of the content, though.
That's very easy to fix.
Last edited by Trotterdam on Mon Sep 28, 2020 10:49 pm, edited 1 time in total.

User avatar
Comfed
Envoy
 
Posts: 291
Founded: Apr 09, 2020
Psychotic Dictatorship

Postby Comfed » Tue Sep 29, 2020 7:01 am

[violet] wrote:A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:
This is the secret content of a traditional spoiler.


Proposed replacement spoiler:
Show Spoiler
This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

That looks... not the best, and it takes up more space than a traditional spoiler, which is problematic for people who have lots of content in their sigs and use the spoiler tag to get around the rules. But, I’m not an admin, that’s just my opinion. But I would like to see what it looks like in sigs.
From The North Pacific. Join our forums, apply for citizenship, join our discord, the executive staff, and the North Pacific Army
Reploid Productions wrote:Dear gods, Nationstates has officially been around long enough to spark generation arguments. "You kids and your Discords too lazy to make forum accounts! In MY day we only had IRC and regional forums and WE LIKED IT!"
Bobberino wrote:You tagged your name in our hearts.
Mallorea and Riva wrote:Couping isn't about creating something greater. It's about control. You don't reconcile with those you can simply exile.
Unibot III wrote:(Image)

User avatar
The Unified Missourtama States
Envoy
 
Posts: 256
Founded: Jul 30, 2019
Democratic Socialists

Postby The Unified Missourtama States » Tue Sep 29, 2020 7:08 am

[violet] wrote:A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:
This is the secret content of a traditional spoiler.


Proposed replacement spoiler:
Show Spoiler
This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

I mean if it works it works! I do agree with others in that the styling doesn't fit with the rest of the site, but yay! all praise due.

User avatar
Doge Land
Spokesperson
 
Posts: 109
Founded: Feb 15, 2019
Inoffensive Centrist Democracy

Postby Doge Land » Tue Sep 29, 2020 7:28 am

[violet] wrote:A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:
This is the secret content of a traditional spoiler.


Proposed replacement spoiler:
Show Spoiler
This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.


That actually looks interesting. I think that could work.

Cross-browser support would be needed though, because as said here:

Merni wrote:On Windows 10 (v 1909 build 18363.1082):
With Firefox (v 78.0.1) it's the same as Firefox on mobile (ie. no arrow and the content appears on the same line as the button)
The Democratic Republic of Doge Land
Founder, President | Potato Place
NS Policies smothered with shibes.
Made you look.

S o c i a l d i s t a n c e

"We ALL know that phantom menance is boring, but it gets better." - Archron Empire
"dont" - Cenagrad
"[Politically incorrect joke removed.]" - Kowenian States
"...but your mod repellent doesn't seem to work." - Moderator Telegram
"snort giggle" - Artaecus

User avatar
Gandoor
Powerbroker
 
Posts: 9423
Founded: Sep 23, 2008
Civil Rights Lovefest

Postby Gandoor » Tue Sep 29, 2020 7:40 am

Comfed wrote:
[violet] wrote:A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:
This is the secret content of a traditional spoiler.


Proposed replacement spoiler:
Show Spoiler
This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

That looks... not the best, and it takes up more space than a traditional spoiler, which is problematic for people who have lots of content in their sigs and use the spoiler tag to get around the rules. But, I’m not an admin, that’s just my opinion. But I would like to see what it looks like in sigs.

Eh? Maybe it's different on your browser (cause it seems like there are different appearances on different browsers) but on Chrome, it actually takes up less space than the regular spoiler tag.

Image

Like that is actually somewhat smaller than the current tag.
OOC - Call me Viola
IC Flag|Gandoor Wiki|Q&A|National Currency Database
Reminder that true left-wing politics are incompatible with authoritarianism, totalitarianism, and dictatorship in all forms.
Flag is currently Arale Norimaki from Dr. Slump.
I'm female.
OOC Info
Twitter: @Sailor_Viola
Steam: Princess Viola
TGs are welcome

User avatar
Leppikania
Minister
 
Posts: 2331
Founded: Apr 13, 2015
Left-wing Utopia

Postby Leppikania » Tue Sep 29, 2020 7:56 am

Gandoor wrote:
Comfed wrote:That looks... not the best, and it takes up more space than a traditional spoiler, which is problematic for people who have lots of content in their sigs and use the spoiler tag to get around the rules. But, I’m not an admin, that’s just my opinion. But I would like to see what it looks like in sigs.

Eh? Maybe it's different on your browser (cause it seems like there are different appearances on different browsers) but on Chrome, it actually takes up less space than the regular spoiler tag.

-snip-

Like that is actually somewhat smaller than the current tag.

You need to clear your caches. Your browser hasn't seen the updated stylesheet yet.

Also, TIL you can do this in plain HTML.
Last edited by Leppikania on Tue Sep 29, 2020 7:57 am, edited 1 time in total.
INTP, -4.25 Economic Left/Right, -4.1 Social Libertarian/Authoritarian, tastes like chicken.
I do use NS stats, thank you very much.
Funny Quotes
Pie charts for industries
Request an Embassy

User avatar
Gandoor
Powerbroker
 
Posts: 9423
Founded: Sep 23, 2008
Civil Rights Lovefest

Postby Gandoor » Tue Sep 29, 2020 8:14 am

Leppikania wrote:
Gandoor wrote:Eh? Maybe it's different on your browser (cause it seems like there are different appearances on different browsers) but on Chrome, it actually takes up less space than the regular spoiler tag.

-snip-

Like that is actually somewhat smaller than the current tag.

You need to clear your caches. Your browser hasn't seen the updated stylesheet yet.

Also, TIL you can do this in plain HTML.

So I did and it's like 0,5 milímetros bigger than the old style.

Wow such a massive difference.
OOC - Call me Viola
IC Flag|Gandoor Wiki|Q&A|National Currency Database
Reminder that true left-wing politics are incompatible with authoritarianism, totalitarianism, and dictatorship in all forms.
Flag is currently Arale Norimaki from Dr. Slump.
I'm female.
OOC Info
Twitter: @Sailor_Viola
Steam: Princess Viola
TGs are welcome

User avatar
Almonaster Nuevo
Senator
 
Posts: 4684
Founded: Mar 11, 2007
Left-wing Utopia

Postby Almonaster Nuevo » Tue Sep 29, 2020 12:20 pm

[violet] wrote:A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:
This is the secret content of a traditional spoiler.


Proposed replacement spoiler:
Show Spoiler
This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.


Fwiw: These look almost identical and work correctly on the latest Firefox/Ubuntu combo.
Christian Democrats wrote:Would you mind explaining what's funny? I'm not seeing any humor.
The Blaatschapen wrote:I'll still graze the forums with my presence
Please do not TG me about graphics requests. That's what the threads are there for.

User avatar
Trotterdam
Powerbroker
 
Posts: 8950
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Tue Sep 29, 2020 2:20 pm

The difference between those two buttons probably can be fixed with a close audit of the relevant CSS, if that's really something we're interested in.

User avatar
[violet]
Site Admin
 
Posts: 14646
Founded: Antiquity

Postby [violet] » Tue Sep 29, 2020 4:47 pm

A couple of little updates. The main difference is that Firefox will put spoiler text on its own line now.

I don't see any need to force different browsers to make their spoiler buttons look the same; if Chrome wants to add an arrow, that's fine with me.

User avatar
[violet]
Site Admin
 
Posts: 14646
Founded: Antiquity

Postby [violet] » Tue Sep 29, 2020 4:51 pm

Merni wrote:
Trotterdam wrote:Who still uses Internet Explorer?

2.6 - 5.3% of desktop browser users, apparently.

Only 0.8% on NationStates. And a good chunk of those are using IE versions even older than 11, soooo...

User avatar
Doge Land
Spokesperson
 
Posts: 109
Founded: Feb 15, 2019
Inoffensive Centrist Democracy

Postby Doge Land » Tue Sep 29, 2020 5:05 pm

Haha, just cleared my browser cache. The new spoilers look a lot better, I'm going to be honest.

I like how the letters are sleeker and the triangle looks nice.
The Democratic Republic of Doge Land
Founder, President | Potato Place
NS Policies smothered with shibes.
Made you look.

S o c i a l d i s t a n c e

"We ALL know that phantom menance is boring, but it gets better." - Archron Empire
"dont" - Cenagrad
"[Politically incorrect joke removed.]" - Kowenian States
"...but your mod repellent doesn't seem to work." - Moderator Telegram
"snort giggle" - Artaecus

Next

Advertisement

Remove ads

Return to Technical

Who is online

Users browsing this forum: No registered users

Advertisement

Remove ads