source: ether_iasi/trunk/web/resources/js/OpenLayers-2.12/examples/browser.html @ 738

Last change on this file since 738 was 738, checked in by vmipsl, 11 years ago

OpenLayers?
File size: 6.4 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6    <meta name="apple-mobile-web-app-capable" content="yes">
7    <title>OpenLayers Browser Detection</title>
8    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
9    <link rel="stylesheet" href="style.css" type="text/css">
10    <script type="text/javascript" src="browser.js"></script>
11    <style type="text/css">
12        .olControlAttribution {
13            bottom: 5px;
14        }
15
16        .tester {
17            margin: 3px;
18        }
19    </style>
20    <script type="text/javascript">
21        function init() {
22            var result = document.getElementById('result');
23            result.innerHTML = result.innerHTML + "Browser CodeName: " + navigator.appCodeName + '<br>';
24            result.innerHTML = result.innerHTML + "Browser Name: " + navigator.appName + '<br>';
25            result.innerHTML = result.innerHTML + "Browser Version: " + navigator.appVersion + '<br>';
26            result.innerHTML = result.innerHTML + "Cookies Enabled: " + navigator.cookieEnabled + '<br>';
27            result.innerHTML = result.innerHTML + "Platform: " + navigator.platform + '<br>';
28            result.innerHTML = result.innerHTML + 'User agent: ' + navigator.userAgent + '<br>';
29            divResult('mouse', 'click', null, result);
30            divResult('mouse', 'dblclick', null, result);
31            divResult('mouse', 'mousedown', null, result);
32            divResult('mouse', 'mouseup', null, result);
33            divResult('mouse', 'mouseover', null, result);
34            divResult('mouse', 'mousemove', null, result);
35            divResult('mouse', 'mouseout', null, result);
36
37            divResult('key', 'keypress', null, result);
38            divResult('key', 'keydown', null, result);
39            divResult('key', 'keyup', null, result);
40
41            divResult('HTML', 'load', null, result);
42            divResult('HTML', 'unload', window, result);
43            divResult('HTML', 'abort', null, result);
44            divResult('HTML', 'error', null, result);
45
46            divResult('view', 'resize', window, result);
47            divResult('view', 'scroll', null, result);
48
49            divResult('form', 'submit', null, result);
50            divResult('form', 'reset', null, result);
51
52            divResult('form control', 'select', null, result);
53            divResult('form control', 'change', null, result);
54
55            divResult('activation', 'focus', null, result);
56            divResult('activation', 'blur', null, result);
57
58            divResult('touch', 'touchstart', null, result);
59            divResult('touch', 'touchend', null, result);
60            divResult('touch', 'touchmove', null, result);
61            divResult('touch', 'touchcancel', null, result);
62
63            divResult('gesture', 'gesturestart', null, result);
64            divResult('gesture', 'gesturechange', null, result);
65            divResult('gesture', 'gestureend', null, result);
66
67            divResult('HTML5', 'hashchange', document.body, result);
68            divResult('HTML5', 'online', document.body, result);
69            divResult('HTML5', 'offline', document.body, result);
70            divResult('HTML5', 'message', window, result);
71            divResult('HTML5', 'undo', document.body, result);
72            divResult('HTML5', 'redo', document.body, result);
73            divResult('HTML5', 'storage', window, result);
74            divResult('HTML5', 'popstate', window, result);
75            divResult('HTML5', 'canplay', document.createElement('video'), result);
76            divResult('HTML5', 'seeking', document.createElement('video'), result);
77            divResult('HTML5', 'seekend', document.createElement('video'), result);
78
79            divResult('orientation', 'deviceorientation', window, result);
80            divResult('orientation', 'mozorientation', window, result);
81            divResult('orientation', 'devicemotion', window, result);
82        }
83    </script>
84</head>
85<body onload="init()">
86<h1 id="title">Browser detection</h1>
87
88<div id="tags">
89    browser, vendor, mobile, events, HTML5, gesture, touch
90</div>
91
92<p id="shortdesc">
93    The goal of this script is to inform about the capacity of the browser used by the user.
94</p>
95
96<div id="docs">
97    <p>
98        See the <a href="browser.js" target="_blank">
99        browser.js source</a> to see how this is done.
100    </p>
101</div>
102
103<h1>Your browser information</h1>
104
105<div id="result">
106</div>
107
108<h1>Click or touch the red square to get information about the selected events</h1>
109
110<div>
111    <div class="tester">
112        <INPUT TYPE=CHECKBOX ID="clickID" checked>click<BR>
113        <INPUT TYPE=CHECKBOX ID="dblclickID">dblclick<BR>
114        <INPUT TYPE=CHECKBOX ID="mousedownID">mousedown<BR>
115        <INPUT TYPE=CHECKBOX ID="mouseupID">mouseup<BR>
116        <INPUT TYPE=CHECKBOX ID="mouseoverID">mouseover<BR>
117        <INPUT TYPE=CHECKBOX ID="mousemoveID">mousemove<BR>
118        <INPUT TYPE=CHECKBOX ID="mouseoutID">mouseout<BR>
119        <INPUT TYPE=CHECKBOX ID="touchstartID">touchstart<BR>
120        <INPUT TYPE=CHECKBOX ID="touchendID">touchend<BR>
121        <INPUT TYPE=CHECKBOX ID="touchmoveID">touchmove<BR>
122        <INPUT TYPE=CHECKBOX ID="touchcancelID">touchcancel<BR>
123        <INPUT TYPE=CHECKBOX ID="gesturestartID">gesturestart<BR>
124        <INPUT TYPE=CHECKBOX ID="gesturechangeID">gesturechange<BR>
125        <INPUT TYPE=CHECKBOX ID="gestureendID">gestureend<BR>
126    </div>
127
128    <div style="height: 200px;width: 200px;" class="tester">
129        <div id="box" style="height: 200px; width: 200px; background: none repeat scroll 0% 0% red; "
130             onclick="click(event)"
131             ondblclick="dblclick(event)"
132             onmousedown="mousedown(event)"
133             onmouseup="mouseup(event)"
134             onmouseover="mouseover(event)"
135             onmousemove="mousemove(event)"
136             onmouseout="mouseout(event)"
137             ontouchstart="touchstart(event)"
138             ontouchend="touchend(event)"
139             ontouchmove="touchmove(event)"
140             ontouchcancel="touchcancel(event)"
141             ongesturestart="gesturestart(event)"
142             ongesturechange="gesturechange(event)"
143             ongestureend="gestureend(event)">
144        </div>
145    </div>
146
147    <div id="log" class="tester"></div>
148</div>
149
150
151</body>
152</html>
Note: See TracBrowser for help on using the repository browser.