Os Detection

By GabrysGabrys

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

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by Gabrys

Rate this solution

If you think this solution is useful — rate it up!

rating: +4+x
Add a New Comment
downloadosos-specificsystem
page revision: 6, last edited: 16 Feb 2012 01:27
Edit Rate (+4) Tags Discuss (8) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License