|
|
(31 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{:Team:Edinburgh/ethicsstyle}}
| + | <html> |
| | | |
| <head> | | <head> |
- | <meta http-equiv="Content-Type" content="text/html; charset=koi8-r" />
| + | |
- | <title>Ethical interactive element</title> | + | <style type="text/css"> |
- | <link href="styles.css" rel="stylesheet" type="text/css">
| + | |
- | <script language="JavaScript" type="text/javascript">
| + | #title_bg { |
- | <!--
| + | background-image: url(https://static.igem.org/mediawiki/2009/b/bd/EthicsMain1.jpg); |
- | //v1.7
| + | height: 27px; |
- | // Flash Player Version Detection
| + | width: 264px; |
- | // Detect Client Browser type
| + | |
- | // Copyright 2005-2008 Adobe Systems Incorporated. All rights reserved.
| + | |
- | var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
| + | |
- | var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
| + | |
- | var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
| + | |
- | function ControlVersion()
| + | |
- | {
| + | |
- | var version;
| + | |
- | var axo;
| + | |
- | var e;
| + | |
- | // NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry
| + | |
- | try {
| + | |
- | // version will be set for 7.X or greater players
| + | |
- | axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
| + | |
- | version = axo.GetVariable("$version");
| + | |
- | } catch (e) {
| + | |
- | }
| + | |
- | if (!version)
| + | |
- | {
| + | |
- | try {
| + | |
- | // version will be set for 6.X players only
| + | |
- | axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
| + | |
- |
| + | |
- | // installed player is some revision of 6.0
| + | |
- | // GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
| + | |
- | // so we have to be careful.
| + | |
- |
| + | |
- | // default to the first public version
| + | |
- | version = "WIN 6,0,21,0";
| + | |
- | // throws if AllowScripAccess does not exist (introduced in 6.0r47)
| + | |
- | axo.AllowScriptAccess = "always";
| + | |
- | // safe to call for 6.0r47 or greater
| + | |
- | version = axo.GetVariable("$version");
| + | |
- | } catch (e) {
| + | |
- | }
| + | |
- | } | + | |
- | if (!version)
| + | |
- | {
| + | |
- | try {
| + | |
- | // version will be set for 4.X or 5.X player
| + | |
- | axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
| + | |
- | version = axo.GetVariable("$version");
| + | |
- | } catch (e) {
| + | |
- | }
| + | |
- | } | + | |
- | if (!version)
| + | |
- | {
| + | |
- | try {
| + | |
- | // version will be set for 3.X player
| + | |
- | axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
| + | |
- | version = "WIN 3,0,18,0";
| + | |
- | } catch (e) {
| + | |
- | }
| + | |
- | }
| + | |
- | if (!version)
| + | |
- | {
| + | |
- | try {
| + | |
- | // version will be set for 2.X player
| + | |
- | axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
| + | |
- | version = "WIN 2,0,0,11";
| + | |
- | } catch (e) {
| + | |
- | version = -1;
| + | |
- | }
| + | |
- | }
| + | |
- |
| + | |
- | return version;
| + | |
| } | | } |
- | // JavaScript helper required to detect Flash Player PlugIn version information
| + | |
- | function GetSwfVer(){
| + | #info_bg { |
- | // NS/Opera version >= 3 check for Flash plugin in plugin array | + | background-image: url(https://static.igem.org/mediawiki/2009/7/73/EthicsMain2.jpg); |
- | var flashVer = -1;
| + | height: 251px; |
- |
| + | width: 264px; |
- | if (navigator.plugins != null && navigator.plugins.length > 0) {
| + | |
- | if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
| + | |
- | var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
| + | |
- | var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
| + | |
- | var descArray = flashDescription.split(" ");
| + | |
- | var tempArrayMajor = descArray[2].split(".");
| + | |
- | var versionMajor = tempArrayMajor[0];
| + | |
- | var versionMinor = tempArrayMajor[1];
| + | |
- | var versionRevision = descArray[3];
| + | |
- | if (versionRevision == "") {
| + | |
- | versionRevision = descArray[4];
| + | |
- | }
| + | |
- | if (versionRevision[0] == "d") {
| + | |
- | versionRevision = versionRevision.substring(1);
| + | |
- | } else if (versionRevision[0] == "r") {
| + | |
- | versionRevision = versionRevision.substring(1);
| + | |
- | if (versionRevision.indexOf("d") > 0) {
| + | |
- | versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
| + | |
- | }
| + | |
- | }
| + | |
- | var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
| + | |
- | }
| + | |
- | }
| + | |
- | // MSN/WebTV 2.6 supports Flash 4
| + | |
- | else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
| + | |
- | // WebTV 2.5 supports Flash 3
| + | |
- | else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
| + | |
- | // older WebTV supports Flash 2
| + | |
- | else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
| + | |
- | else if ( isIE && isWin && !isOpera ) { | + | |
- | flashVer = ControlVersion();
| + | |
- | } | + | |
- | return flashVer;
| + | |
| } | | } |
- | // When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
| + | |
- | function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
| + | #textarea_bg { |
- | { | + | background-image: url(https://static.igem.org/mediawiki/2009/a/a0/EthicsMain3.jpg); |
- | versionStr = GetSwfVer(); | + | height: 251px; |
- | if (versionStr == -1 ) {
| + | width: 676px; |
- | return false;
| + | |
- | } else if (versionStr != 0) {
| + | |
- | if(isIE && isWin && !isOpera) {
| + | |
- | // Given "WIN 2,0,0,11"
| + | |
- | tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
| + | |
- | tempString = tempArray[1]; // "2,0,0,11"
| + | |
- | versionArray = tempString.split(","); // ['2', '0', '0', '11']
| + | |
- | } else {
| + | |
- | versionArray = versionStr.split(".");
| + | |
- | }
| + | |
- | var versionMajor = versionArray[0];
| + | |
- | var versionMinor = versionArray[1];
| + | |
- | var versionRevision = versionArray[2];
| + | |
- | // is the major.revision >= requested major.revision AND the minor version >= requested minor
| + | |
- | if (versionMajor > parseFloat(reqMajorVer)) {
| + | |
- | return true;
| + | |
- | } else if (versionMajor == parseFloat(reqMajorVer)) {
| + | |
- | if (versionMinor > parseFloat(reqMinorVer))
| + | |
- | return true;
| + | |
- | else if (versionMinor == parseFloat(reqMinorVer)) {
| + | |
- | if (versionRevision >= parseFloat(reqRevision))
| + | |
- | return true;
| + | |
- | }
| + | |
- | }
| + | |
- | return false;
| + | |
- | }
| + | |
| } | | } |
- | function AC_AddExtension(src, ext)
| + | |
- | {
| + | </style> |
- | if (src.indexOf('?') != -1)
| + | |
- | return src.replace(/\?/, ext+'?');
| + | <meta http-equiv="Content-Type" content="text/html; charset=koi8-r" /> |
- | else
| + | <title>Ethical interactive element</title> |
- | return src + ext;
| + | <link href="styles.css" rel="stylesheet" type="text/css"> |
- | }
| + | |
- | function AC_Generateobj(objAttrs, params, embedAttrs)
| + | |
- | {
| + | |
- | var str = '';
| + | |
- | if (isIE && isWin && !isOpera)
| + | |
- | {
| + | |
- | str += '<object ';
| + | |
- | for (var i in objAttrs)
| + | |
- | {
| + | |
- | str += i + '="' + objAttrs[i] + '" ';
| + | |
- | }
| + | |
- | str += '>';
| + | |
- | for (var i in params)
| + | |
- | {
| + | |
- | str += '<param name="' + i + '" value="' + params[i] + '" /> ';
| + | |
- | }
| + | |
- | str += '</object>';
| + | |
- | }
| + | |
- | else
| + | |
- | {
| + | |
- | str += '<embed ';
| + | |
- | for (var i in embedAttrs)
| + | |
- | {
| + | |
- | str += i + '="' + embedAttrs[i] + '" ';
| + | |
- | }
| + | |
- | str += '> </embed>';
| + | |
- | }
| + | |
- | document.write(str);
| + | |
- | }
| + | |
- | function AC_FL_RunContent(){
| + | |
- | var ret =
| + | |
- | AC_GetArgs
| + | |
- | ( arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
| + | |
- | , "application/x-shockwave-flash"
| + | |
- | );
| + | |
- | AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
| + | |
- | }
| + | |
- | function AC_SW_RunContent(){
| + | |
- | var ret =
| + | |
- | AC_GetArgs
| + | |
- | ( arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
| + | |
- | , null
| + | |
- | );
| + | |
- | AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
| + | |
- | }
| + | |
- | function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
| + | |
- | var ret = new Object();
| + | |
- | ret.embedAttrs = new Object();
| + | |
- | ret.params = new Object();
| + | |
- | ret.objAttrs = new Object();
| + | |
- | for (var i=0; i < args.length; i=i+2){
| + | |
- | var currArg = args[i].toLowerCase();
| + | |
- | switch (currArg){
| + | |
- | case "classid":
| + | |
- | break;
| + | |
- | case "pluginspage":
| + | |
- | ret.embedAttrs[args[i]] = args[i+1];
| + | |
- | break;
| + | |
- | case "src":
| + | |
- | case "movie":
| + | |
- | args[i+1] = AC_AddExtension(args[i+1], ext);
| + | |
- | ret.embedAttrs["src"] = args[i+1];
| + | |
- | ret.params[srcParamName] = args[i+1];
| + | |
- | break;
| + | |
- | case "onafterupdate":
| + | |
- | case "onbeforeupdate":
| + | |
- | case "onblur":
| + | |
- | case "oncellchange":
| + | |
- | case "onclick":
| + | |
- | case "ondblclick":
| + | |
- | case "ondrag":
| + | |
- | case "ondragend":
| + | |
- | case "ondragenter":
| + | |
- | case "ondragleave":
| + | |
- | case "ondragover":
| + | |
- | case "ondrop":
| + | |
- | case "onfinish":
| + | |
- | case "onfocus":
| + | |
- | case "onhelp":
| + | |
- | case "onmousedown":
| + | |
- | case "onmouseup":
| + | |
- | case "onmouseover":
| + | |
- | case "onmousemove":
| + | |
- | case "onmouseout":
| + | |
- | case "onkeypress":
| + | |
- | case "onkeydown":
| + | |
- | case "onkeyup":
| + | |
- | case "onload":
| + | |
- | case "onlosecapture":
| + | |
- | case "onpropertychange":
| + | |
- | case "onreadystatechange":
| + | |
- | case "onrowsdelete":
| + | |
- | case "onrowenter":
| + | |
- | case "onrowexit":
| + | |
- | case "onrowsinserted":
| + | |
- | case "onstart":
| + | |
- | case "onscroll":
| + | |
- | case "onbeforeeditfocus":
| + | |
- | case "onactivate":
| + | |
- | case "onbeforedeactivate":
| + | |
- | case "ondeactivate":
| + | |
- | case "type":
| + | |
- | case "codebase":
| + | |
- | case "id":
| + | |
- | ret.objAttrs[args[i]] = args[i+1];
| + | |
- | break;
| + | |
- | case "width":
| + | |
- | case "height":
| + | |
- | case "align":
| + | |
- | case "vspace":
| + | |
- | case "hspace":
| + | |
- | case "class":
| + | |
- | case "title":
| + | |
- | case "accesskey":
| + | |
- | case "name":
| + | |
- | case "tabindex":
| + | |
- | ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
| + | |
- | break;
| + | |
- | default:
| + | |
- | ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
| + | |
- | }
| + | |
- | }
| + | |
- | ret.objAttrs["classid"] = classid;
| + | |
- | if (mimeType) ret.embedAttrs["type"] = mimeType;
| + | |
- | return ret;
| + | |
- | }
| + | |
- | // -->
| + | |
- | </script>
| + | |
- | <script language="JavaScript" type="text/javascript">
| + | |
- | <!--
| + | |
- | // -----------------------------------------------------------------------------
| + | |
- | // Globals
| + | |
- | // Major version of Flash required
| + | |
- | var requiredMajorVersion = 9;
| + | |
- | // Minor version of Flash required
| + | |
- | var requiredMinorVersion = 0;
| + | |
- | // Revision of Flash required
| + | |
- | var requiredRevision = 115;
| + | |
- | // -----------------------------------------------------------------------------
| + | |
- | // -->
| + | |
- | </script>
| + | |
| </head> | | </head> |
- | <body bgcolor="#d6e4d5">
| |
| | | |
- | Use the fullscreen button to experience the most of the interactive element. <br /><br />
| + | <body bgcolor="#84c5c6"> |
| | | |
- | <!--url's used in the movie--> | + | <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ID=movie WIDTH=950 HEIGHT=600 allowFullScreen="true"> |
- | <!--text used in the movie-->
| + | <PARAM NAME=movie VALUE="https://static.igem.org/mediawiki/2009/e/ed/Main.swf"> |
- | <!--
| + | <PARAM NAME=menu VALUE=false> |
- | <p align="left"><font face="Square721 BT" size="24" color="#ffffff" letterSpacing="0.000000" kerning="0">PhotoGalleryCreator</font></p>
| + | <PARAM NAME=quality VALUE=best> |
- | <p align="left"><font face="Semplice Regular_8pt_st" size="8" color="#ffffff" letterSpacing="0.000000" kerning="0">E-MAIL</font></p> | + | <PARAM NAME=bgcolor VALUE=#333366> |
- | -->
| + | <embed src="https://static.igem.org/mediawiki/2009/e/ed/Main.swf" quality="best" bgcolor="#333366" allowFullScreen="true" menu="false" WIDTH="950" HEIGHT="550" TYPE="application/x-shockwave-flash"></EMBED> |
- | <script language="JavaScript" type="text/javascript"> | + | </OBJECT> |
- | <!-- | + | |
- | var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
| + | |
- | if(hasRightVersion) { // if we've detected an acceptable version
| + | |
- | // embed the flash movie
| + | |
- | AC_FL_RunContent(
| + | |
- | 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0',
| + | |
- | 'width', '950px',
| + | |
- | 'height', '600px',
| + | |
- | 'src', 'main',
| + | |
- | 'quality', 'high',
| + | |
- | 'pluginspage', 'http://www.adobe.com/go/getflashplayer',
| + | |
- | 'align', 'middle',
| + | |
- | 'play', 'true',
| + | |
- | 'loop', 'true',
| + | |
- | 'scale', 'noscale',
| + | |
- | 'wmode', 'window',
| + | |
- | 'devicefont', 'false',
| + | |
- | 'id', 'main',
| + | |
- | 'bgcolor', '#000000',
| + | |
- | 'name', 'main',
| + | |
- | 'menu', 'false',
| + | |
- | 'allowFullScreen', 'true',
| + | |
- | 'allowScriptAccess','sameDomain',
| + | |
- | 'movie', 'main',
| + | |
- | 'salign', ''
| + | |
- | ); //end AC code
| + | |
- | } else { // flash is too old or we can't detect the plugin
| + | |
- | var alternateContent = 'Alternate HTML content should be placed here.'
| + | |
- | + 'This content requires the Adobe Flash Player.'
| + | |
- | + '<a href="http://www.adobe.com/go/getflashplayer/">Get Flash</a>';
| + | |
- | document.write(alternateContent); // insert non-flash content
| + | |
- | }
| + | |
- | // -->
| + | |
- | </script>
| + | |
- | <noscript>
| + | |
- | // Provide alternate content for browsers that do not support scripting
| + | |
- | // or for those that have scripting disabled.
| + | |
- | Alternate HTML content should be placed here. This content requires the Adobe Flash Player.
| + | |
- | <a href="http://www.adobe.com/go/getflashplayer/">Get Flash</a>
| + | |
- | </noscript> | + | |
| | | |
- | <br />
| |
| <br /> | | <br /> |
| | | |
Line 353: |
Line 45: |
| </div> | | </div> |
| | | |
- | <table border="0"> | + | <form name="comment"> |
- | <tr> | + | <table border="0" bgcolor="#84c5c6"> |
- | <td> | + | <tr bgcolor="#84c5c6"> |
- | <div id="info_bg"> | + | <td bgcolor="#84c5c6"> |
- | <form name="comment"> | + | <div id="info_bg"> |
- | <table border="0">
| + | <table border="0" bgcolor="#84c5c6" cellspacing="0" cellpadding="0"> |
- | <tr>
| + | <tr bgcolor="#84c5c6"> |
- | <td>
| + | <td bgcolor="#84c5c6"> |
- | <div style="margin-left:5px;margin-top:10px">
| + | <div style="margin-left:5px;margin-top:10px"> |
- | <font family="Arial" style="font-size:12px">Your name:</font>
| + | <font family="Arial" style="font-size:12px">Your name:</font> |
- | </div>
| + | </div> |
- | </td>
| + | </td> |
- | <td>
| + | <td bgcolor="#84c5c6"> |
- | <div style="margin-top:9px;"
| + | <div style="margin-top:9px;" |
- | <input type="text" size="25" style="background-color:#a7dfde;border:0">
| + | <input type="text" size="25" style="background-color:#a7dfde;border:0"> |
- | </div>
| + | </div> |
- | </td>
| + | </td> |
- | </tr>
| + | </tr> |
- |
| + | |
- | <tr>
| + | |
- | <td>
| + | |
- | <div style="margin-left:5px">
| + | |
- | <font family="Arial" style="font-size:12px">Story card:</font>
| + | |
- | </div>
| + | |
- | </td>
| + | |
| | | |
- | <td> | + | <tr bgcolor="#84c5c6"> |
- | <div size="25" style="margin-top:0px;"> | + | <td bgcolor="#84c5c6"> |
- | <select style="border:0px;width:173px;background-color:#a7dfde;">
| + | <div style="margin-left:5px"> |
- | <option> Story card 1 (Title) </option>
| + | <font family="Arial" style="font-size:12px">Story card:</font> |
- | <option> Stroy card 2 (Title) </option>
| + | </div> |
- | </select>
| + | </td> |
- | </div>
| + | |
- | </td>
| + | <td bgcolor="#84c5c6"> |
- | </tr>
| + | <div size="25" style="margin-top:0px;"> |
- |
| + | <select style="border:0px;width:173px;background-color:#a7dfde;"> |
- | <tr height="20px">
| + | <option> Story card 1 (Title) </option> |
- | <td colspan="2">
| + | <option> Stroy card 2 (Title) </option> |
- | </td>
| + | </select> |
- | </tr>
| + | </div> |
- |
| + | </td> |
- | <tr>
| + | </tr> |
- | <td colspan="2">
| + | |
- | <input type="radio" name="main" checked="true" onClick="document.comment.sub[0].disabled = true;document.comment.sub[1].disabled = true"><font family="Arial" style="font-size:12px">Comment</font></a>
| + | <tr height="20px" bgcolor="#84c5c6"> |
- | <input type="radio" name="main" onClick="document.comment.sub[0].disabled = false;document.comment.sub[1].disabled = false"><font family="Arial" style="font-size:12px">Pro/Contra</font></a>
| + | <td colspan="2" bgcolor="#84c5c6"> |
- | </td>
| + | </td> |
- | </tr>
| + | </tr> |
- |
| + | |
- | <tr>
| + | <tr bgcolor="#84c5c6"> |
- | <td colspan="2">
| + | <td colspan="2" bgcolor="#84c5c6"> |
- | <input type="radio" name="sub" disabled="true"><font family="Arial" style="font-size:12px">Pro</font></a>
| + | <input type="radio" name="main" checked="true" onClick="document.comment.sub[0].disabled = true;document.comment.sub[1].disabled = true"><font family="Arial" style="font-size:12px">Comment</font></a> |
- | <input type="radio" name="sub" disabled="true"><font family="Arial" style="font-size:12px">Contra</font></a>
| + | <input type="radio" name="main" onClick="document.comment.sub[0].disabled = false;document.comment.sub[1].disabled = false"><font family="Arial" style="font-size:12px">Pro/Contra</font></a> |
- | </td>
| + | </td> |
- | </tr>
| + | </tr> |
- | | + | |
- | </table>
| + | <tr bgcolor="#84c5c6"> |
- | </form> | + | <td colspan="2" bgcolor="#84c5c6"> |
- | </div> | + | <input type="radio" name="sub" disabled="true"><font family="Arial" style="font-size:12px">Pro</font></a> |
- | </td>
| + | <input type="radio" name="sub" disabled="true"><font family="Arial" style="font-size:12px">Contra</font></a> |
- | <td>
| + | </td> |
- | <div id="textarea_bg">
| + | </tr> |
- | <textarea cols="81" rows="14" style="border:0px;margin-left:2px;margin-top:5px;background-color:#a7dfde;">
| + | |
- | </textarea>
| + | </table> |
- | </div>
| + | </div> |
- | </td>
| + | </td> |
- | </tr>
| + | <td bgcolor="#84c5c6"> |
- | </table> | + | <div id="textarea_bg"> |
| + | <textarea cols="81" rows="14" style="border:0px;margin-left:2px;margin-top:5px;background-color:#a7dfde;"> |
| + | </textarea> |
| + | </div> |
| + | </td> |
| + | </tr> |
| + | </table> |
| + | </form> |
| + | |
| | | |
| </body> | | </body> |
| </html> | | </html> |