By
Gabrys
Description
This snippet allows creating custom software download list, that links to files depending on the OS running by visitor.
Code
This is basically done by having a code block with custom HTML inside:
use [[code type="HTML"]]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Download product for you OS!</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://jquery.com/src/jquery-latest.min.js"></script> <script type="text/javascript" src="http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/jqbrowser-uncompressed.js"></script> <script type="text/javascript"> $(function() { if ($.browser.win()) { $("#mac, #linux").hide(); } else if ($.browser.mac()) { $("#linux, #win").hide(); } else if ($.browser.linux()) { $("#mac, #win").hide(); } else { $("#all").hide(); } $("#all a").click(function() { $("#mac, #linux, #win").show(); $("#all").hide(); }); }); </script> </head> <body> <h1>Download</h1> <div id="win"><a href="win.exe">Windows</a></div> <div id="mac"><a href="mac.dmg">Mac OS</a></div> <div id="linux"><a href="linux.tar.gz">Linux</a></div> <div id="all"><a href="javascript:;">Show all systems</a></div> </body> </html>
You can wrap it in some div that does not render, or hide it somewhere off the screen.
Then you need to iframe this with:
[[iframe http://snippets.wikidot.com/code:os-detection/code ]]
The iframe can be then style to match your site.
Optionally instead embedding the iframe source in the wiki page you can upload the HTML as a file attached to the wiki page and then use the file URL in the iframe destination.
In action
Rate this solution
If you think this solution is useful — rate it up! Or dump it otherwise.






This looks really useful but it seems to use undocumented features - I don't see anything in the iframe section about showing code blocks.
So this is another iframe feature I'm not aware of. I'm reading http://www.wikidot.com/doc:wiki-syntax#toc44. Is there more documentation on iframe?
Lastly, the example in fact shows Windows, Mac OS, and Linux… rather than one choice. Maybe it does not work on this box.
Sorry if I missed something with putting arbitrary HTML content in iframes, I thought this was insecure and thus not allowed.
The Wikidot Blog | My other works
As I understand I can see which OS I run on the machine of the browsing session…( no idea if this can be important later)
And about the html-usages in iframe:
"Iframe" in conjunction with html scripting is a powerful tool now!
Have a look on
http://community.wikidot.com/howto:use-html-scripting or
http://snippets.wikidot.com/code:use-any-html-code-on-a-page ( looks like the same )
http://community.wikidot.com/blog:html-within-wikidot-type-2
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Try now. It has been somewhat wrong for some time. Also notice, that the script nicely degrades, i.e. shows all systems if:
The arbitrary HTML is now run from *.wdfiles.com domains and as as so, cannot access any content or page attributes (or run JavaScript code) from *.wikidot.com domains.
Piotr Gabryjeluk
visit my blog
@Piotr: it works now. I'll have to explore this iframe+HTML later, it looks really useful.
Thanks! This is going to be very useful.
The Wikidot Blog | My other works
You're welcome.
Piotr Gabryjeluk
visit my blog
in the Download section insert my Wikidot pages - URL's with the separated OS-dependetnt Doanload files….
And a click on the Operating system would "surfe" to the OS-dependent Download pages…
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
I have a question to ask for a simple password ( or more for decisions into some different target links) on the community forum:
http://community.wikidot.com/forum/t-131175/if-then-statements#post-387757
Is it possible to change to create a little html / js code ( I am not html or better .js proofed) to ask for a little text and than "show" this only one allowed link ( div) and hide all others?
Hope my question is clear?
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?