OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <!-- | |
4 This page attempts to redirect users to a page specific to their | |
5 browser. Contact the Khronos WebGL group to update the URL for | |
6 your browser or add your browser to the list of browsers. | |
7 --> | |
8 <head> | |
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
10 <meta http-equiv="X-UA-Compatible" content="chrome=1"> | |
11 <title>WebGL Troubleshooting</title> | |
12 <script type="text/javascript" src="DoNotCopyOrLinkThisFileElseYouWillNotGetAuto
UpdatedHelpForYourUsers.js"></script> | |
13 <script type="text/javascript"> | |
14 window.onload = main; | |
15 | |
16 function main() { | |
17 var link = document.getElementById("link"); | |
18 var b = BrowserDetect; | |
19 b.init(); | |
20 var name = b.browser; | |
21 if (name == "unknown") { | |
22 name = "your browser"; | |
23 } | |
24 // check if the browser even knows what WebGL is | |
25 if (!window.WebGLRenderingContext) { | |
26 link.innerHTML = "Click Here to learn about upgrading " | |
27 + name + " on " + b.platform + " to a browser that supports WebGL"; | |
28 link.href = b.urls.upgradeUrl || "http://get.webgl.org"; | |
29 return; | |
30 } | |
31 link.innerHTML = "Click Here for WebGL troubleshooting info for " | |
32 + name + " on " + b.platform; | |
33 link.href = b.urls.troubleshootingUrl; | |
34 } | |
35 </script> | |
36 <style> | |
37 /* zero margins */ | |
38 html, body { margin:0; padding:0; background-color: #888;} | |
39 | |
40 /* trigger scolling */ | |
41 p { margin:10em 0; } | |
42 | |
43 /* position:fixed */ | |
44 .outer { position:fixed; top:0; left:0; width:100%; height:100%; } | |
45 | |
46 /* certering */ | |
47 .middle { height:100%; display:table; margin:0 auto; } | |
48 .inner { vertical-align:middle; display:table-cell; } | |
49 | |
50 .msg { | |
51 background-color: white; | |
52 border: 15px solid white; | |
53 border-radius: 15px; | |
54 } | |
55 </style> | |
56 | |
57 <!--[if lte IE 6]> | |
58 <style> | |
59 /* position:fixed for ie6 */ | |
60 html { overflow-x:auto; overflow-y:hidden; } | |
61 body { overflow-y:auto; height:100%; } | |
62 .outer { position:absolute; } | |
63 </style> | |
64 <![endif]--> | |
65 | |
66 <!--[if lte IE 7]> | |
67 <style> | |
68 /* centering for ie6/ie7 */ | |
69 .middle { position:absolute; top:50%; left:50%; height:auto; } | |
70 .inner { position:relative; top:-50%; left:-50%; } | |
71 </style> | |
72 <![endif]--> | |
73 </style> | |
74 </head> | |
75 <body> | |
76 <div class="outer"> | |
77 <div class="middle"> | |
78 <div class="inner"> | |
79 <div class="msg"> | |
80 <a id="link"></a> | |
81 </div> | |
82 </div> | |
83 </div> | |
84 </div></body> | |
85 </html> | |
86 | |
OLD | NEW |