Rev 17770 | Go to most recent revision | Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 17748 | georgesk | 1 | |
| 2 | /* Script to enhance the interactivity of the periodic table */ |
||
| 3 | |||
| 4 | function add_interaction(){ |
||
| 5 | var elements = $("div.element"); |
||
| 6 | elements.each(function(i, elt){ |
||
| 7 | elt = $(elt); |
||
| 8 | elt.css("cursor", "help"); |
||
| 9 | var symbol = elt.find(".symbol").text(); |
||
| 10 | var Z = elt.find(".Z").text(); |
||
| 11 | var mass = elt.find(".mass").text(); |
||
| 12 | var struct = elt.find(".struct").html(); |
||
| 13 | elt.click( |
||
| 14 | function make_callback(o){ |
||
| 15 | return function (evt){ |
||
| 16 | var x = elt.css("top"), y = elt.css("top"); |
||
| 17 | o.html(""); /* erase all previous contents */ |
||
| 18 | var p; |
||
| 19 | p = $("<p>").text("Element: " + symbol); |
||
| 20 | o.append(p); |
||
| 21 | p = $("<p>").text("Atomic number: " + Z); |
||
| 22 | o.append(p); |
||
| 23 | p = $("<p>").text("Molar mass: " + mass); |
||
| 24 | o.append(p); |
||
| 25 | p = $("<p>").html("Electronic structure: " + struct); |
||
| 26 | o.append(p); |
||
| 27 | o.dialog(); |
||
| 28 | var top = parseInt(elt.css("top")); |
||
| 29 | if (top > 250){ |
||
| 30 | /* the element is low enough, let us animate above */ |
||
| 31 | top -= 250; |
||
| 32 | } else { |
||
| 33 | top += 60; |
||
| 34 | } |
||
| 35 | var left = parseInt(elt.css("left")); |
||
| 36 | if (left > 320){ |
||
| 37 | /* the element is right enough, let us go to the left */ |
||
| 38 | left -= 320; |
||
| 39 | } else{ |
||
| 40 | left +=50; |
||
| 41 | } |
||
| 42 | o.parents(".ui-dialog").animate( |
||
| 43 | {top: top+"px", left: left+"px"}); |
||
| 44 | } |
||
| 45 | }($("#one_element"))); |
||
| 46 | }); |
||
| 47 | $("#wait").fadeOut(); |
||
| 48 | } |
||
| 49 | |||
| 50 | /** |
||
| 51 | * imports jQuery (JS), jQuery-UI (JS and CSS) |
||
| 52 | * parametes url1 .. url3 are for jquery.js, jquery-ui.js, jquery-ui.css |
||
| 53 | **/ |
||
| 54 | function importScript(url1, url2, url3){ |
||
| 55 | var script1, script2, link; |
||
| 56 | script1 = document.createElement('script'); |
||
| 57 | script1.src = url1; |
||
| 58 | document.head.appendChild(script1); |
||
| 59 | script2 = document.createElement('script'); |
||
| 60 | script2.src = url2; |
||
| 61 | document.head.appendChild(script2); |
||
| 62 | link = document.createElement('link'); |
||
| 63 | link.rel = "stylesheet"; |
||
| 64 | link.type = "text/css"; |
||
| 65 | link.href = url3; |
||
| 66 | document.head.appendChild(link); |
||
| 67 | } |
||
| 68 | |||
| 69 | function jQueryIsHere(){ |
||
| 70 | result = true; |
||
| 71 | try { |
||
| 72 | if (! jQuery) result = false; |
||
| 73 | } |
||
| 74 | catch(e) { |
||
| 75 | if(e.name == "ReferenceError") { |
||
| 76 | result = false; |
||
| 77 | } |
||
| 78 | } |
||
| 79 | return result |
||
| 80 | } |
||
| 81 | |||
| 82 | function tryLocal(){ |
||
| 83 | importScript( |
||
| 84 | "http://localhost/javascript/jquery/jquery.js", |
||
| 85 | "http://localhost/javascript/jquery-ui/jquery-ui.js", |
||
| 86 | "http://localhost/javascript/jquery-ui/css/smoothness/jquery-ui.css" |
||
| 87 | ); |
||
| 88 | } |
||
| 89 | |||
| 90 | function tryRemote(){ |
||
| 91 | importScript( |
||
| 92 | "https://code.jquery.com/jquery-1.11.3.js", |
||
| 93 | "https://code.jquery.com/ui/1.13.2/jquery-ui.js", |
||
| 94 | "https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" |
||
| 95 | ); |
||
| 96 | |||
| 97 | } |
||
| 98 | |||
| 99 | window.onload = function(){ |
||
| 100 | setTimeout(function(){ |
||
| 101 | if (!jQueryIsHere()) tryLocal(); |
||
| 102 | }, 1000); |
||
| 103 | setTimeout(function(){ |
||
| 104 | if (!jQueryIsHere()) tryRemote(); |
||
| 105 | }, 3000); |
||
| 106 | setTimeout(function(){ |
||
| 107 | add_interaction(); |
||
| 108 | }, 5000); |
||
| 109 | }; |