Depending on which button is pressed, a different length, different detailed page is being load.
That’s something I very much would like to use for Whonix wiki. A short button for most visitors with easy, basic information. And an alternative detailed, more verbose view.
Does somehow know the required html code?
Yes, we can safely [admins only] using raw html code in Whonix wiki. (We are using mediawiki extension Widgets for that.) Example on how html is being used in Whonix wiki:
depends, do you want to keep the look and feel of Mediawiki or would you really like having such a script heavy solution? Because, this decision changes how accessible the wiki would be for NoScript users, as well as how hard it would be to implement.
A simple and ugly, yet alternative solution would be, to create separate sites on the wiki for “short” and “extensive” and let them select like it’s the case here: Verify Whonix ™ Images Software Signatures This would also be independent of scripts, however it’d look far less appealing, then what is on the page you’ve used as an example.
Would have to look into that in more depth, will try to find some time for that. If someone else is maybe able to find some time and attempt this as well, it would be great though.
as far as I can tell, there is only one possible way to realise this without JS, which would be more a bulky solution then anything else. It would look like this:
Regardless of which setting is chosen, the text for both detailed and simple is always on the page, just made invisible and small (PT: 1, colour: white) according to the selection. If you PX18030 have a way of realising this without using JS at all, I’d like to hear it.
just did some resarch and tried a few ideas, this would actually be possible with an iFrame, an example may be found here: Code Tester You can simply choose which content (in this example pictures are used, though any html code is possible) is visible by clicking and the best part, it doesn’t require JavaScript! I’ll now try to get this working on the sandbox page in the wiki, will post once I’ve succeded and/or failed.
Have a nice day,
Ego
Edit: So, I’ve just build a small code example, which is meant to demonstrate how the whole thing would work. Still needs some polish though, but adding nice looking buttons is easily done after the fact anyway. Here you go:
There are a few problems with this implementation though:
First, since I had to create this without any kind of script, I’m unable to make the size of the iframe dynamic according to the source, which is why the height and width are static. Furthermore, I don’t know how to add this to the wiki. The iframe widget by mediawiki doesn’t support the ability to select the content of the iframe and normal html code is turned of in the wiki, I’m presuming to prevent spam or hijacking… So, if someone could help me with the implementation, I’d be grateful.
Yes you’d have to load up both HTML for simple and advanced. I guess on large pages it could take a long time to load, but it would be simpler for maintenance as it can be all one wiki page broken down into two main sections.
Start with one or both of the elements hidden, then when a button is clicked hide and show the related elements.
A nice explanation of CSS3 hiding, can be found here with a demo.
iFrames, there is a security discussion about using them. Generally they are safe if you link to pages under your domain, but if a page under you domain contains an XSS, then all pages could include it, by pointing an iFrame to that page and including it on all pages.
They also decrease the search engine optimisation for the site, as you’d have one page URL, which serves up n iFrames.
Personally I’d disable iFrames with the header X-Frame-Options: DENY
honestly, wasn’t aware of the fact it could decrease SEO, will have to look into that more. Furthermore, there are only few options possible, if we want to continue making the wiki accessible without JavaScript. Those two were the only one I could really come up with and like you’ve pointed out, the first would also create a few problems…
Maybe I’ll have an idea on how to realise this better, though I doubt it…
I am not concerned about page load times because of the increased page size. The easy versions would be really short, so they should add only negligible weight.
Yes. Raw html has been disabled in the wiki for security reasons. But that should not be an issue, because we have mediawiki extension widgets installed. It allows admins to create widgets, that are just any html code, that can be imported by anyone from normal wiki pages.
One thing you may or may not have in mind yet may be a non-issue. We probably do not have to copy/paste the easy versions into the detailed version. A mediawiki template can be used to avoid this.
{{Split|
easy=easy text goes here
detailed=detailed text goes here
}}}
That should be doable.
The easy text would still be duplicated in the generated html code which may or may not be bad for seo. That could be a reason to rewrite the easy text so it differs from the detailed version.
Another option could be to have the detailed version just expand.
(Similar to the already existing expand buttons we are already using in the wiki. Here is an example: Configure (Private) (Obfuscated) Tor Bridges Just the expand buttons are not that pretty.)
One thing I don’t like about http://www.cssportal.com/css3-preview/demo/css-menu-ex1.html is that it relies on the :focus pseudo-class, which means if you click on “hide” the content gets hidden as expected, but if you click anywhere else after that the element loses its focus and the hidden content appears again.
I assume the content of the short versions would be too long for TL;DR sections?
I could help to implement something like that with JS and if JS is not available display both versions (and maybe a link to skip the short version and go directly to the longer one), I have just never worked with mediawiki.
Can I use jQuery (which seems to be provided by mediawiki) or would you prefer a standalone solution?
I just looked at existing widgets, is it possible to place the CSS in JS code in external files? Otherwise you’ll get a lot of duplicate code in your output.
Let’s see if some forum / mailing list somewhere can suggest a javascript free solution. Unless you are reasonable certain, that this will be futile?
Can I use jQuery (which seems to be provided by mediawiki) or would you prefer a standalone solution?
I have no strong preference either way. Both sound good. Mediawiki jQuery produces less code but a standalone solution could also be used outside of mediawiki?
I don’t know. I guess it should be possible, otherwise the mediawiki widgets extension would be too limited. We can test this if you provide the necessary files for testing this.
You can use jQuery outside of mediawiki, but using jQuery just for that somewhere else would be a bit overkill.
Edit:
I am pretty sure that you can’t implement a “click a button to show/hide” function just in css because that requires to store the information if the element is hidden or not and AFAIK that is not possible with just css alone.