-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathiframe-carousel-r3.html
97 lines (67 loc) · 3.24 KB
/
iframe-carousel-r3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>iframe-carousel-r3.html</title>
<meta name=viewport content='width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0' />
</head>
<body>
<script>
var interval = 15000;
var timer;
var editor = 'https://jaanga.github.io/cookbook-html/templates/code-edit-view/code-edit-view-r2.html#';
var sites = [
// ['Spherical Wave', editor + 'https://exploratoria.github.io/exhibits/waves/spherical-wave/spherical-wave.html' ],
// ['Plane Wave', editor + 'https://exploratoria.github.io/exhibits/waves/plane-wave/plane-wave.html' ],
// ['Cylindrical Wave', editor + 'https://exploratoria.github.io/exhibits/waves/cylindrical-wave/cylindrical-wave.html' ],
// ['Random Walk', editor + 'https://exploratoria.github.io/exhibits/heat/random-walk/random-walk.html' ]
// ['Moon Voyager Gamer', editor + 'https://jaanga.github.io/moon/voyager/gamer/moon-voyager-gamer-r2-1.html' ],
// ['Mars Rover 128P', editor + 'https://jaanga.github.io/mars/rover/128p/mars-rover-128p-multi-tile-r3-1.html' ],
// ['Star Spotter', editor + 'https://jaanga.github.io/outer-space/star-spotter/star-spotter-r1.html' ],
// ['NASA 3D Objects Viewer', editor + 'https://jaanga.github.io/outer-space/nasa-3d-objects-viewer/nasa-3d-objects-viewer-v-0-1-1.html#https://rawgit.com/nasa/NASA-3D-Resources/master/3D%20Models/Cassini%20(A)/cassini.stl' ]
[ 'Mars Voyager Gamer', editor + 'https://jaanga.github.io/mars/voyager/gamer/mars-voyager-gamer-r1-1.html' ],
[ 'Mars Rover 128P', editor + 'https://jaanga.github.io/mars/rover/128p/mars-rover-128p-multi-tile-r3-1.html' ],
]
var index = Math.floor( Math.random() * sites.length );
init();
function init() {
var css = document.body.appendChild( document.createElement( 'style' ) );
css.innerHTML = 'body { font: 12pt monospace; margin: 0; overflow: hidden; }' +
'button { background-color: white; border-width: 1px; margin-right: 5px; }' +
'p { width: ' + window.innerWidth + 'px; }' +
'#ifr { border: 0px solid; } ' +
'';
var content = document.body.appendChild( document.createElement( 'div' ) );
content.innerHTML =
'<iframe id=ifr width=100% height=' + ( window.innerHeight - 40 ) + 'px ></iframe>' +
'<center><p id=buttons ></p></center>' +
'';
for ( var i = 0; i < sites.length; i++ ) {
button = buttons.appendChild( document.createElement( 'button' ) );
button.innerHTML = sites[ i ][ 0 ];
button.id = i;
button.onclick = function () {
ifr.src = sites[ this.id ][ 1 ];
clearInterval( timer );
};
}
but = document.getElementById( index );
but.style.backgroundColor = 'lightgreen';
ifr.src = sites[ index ][ 1 ];
timer = setInterval( displayNext, interval );
window.addEventListener( 'resize', onWindowResize, false );
}
function displayNext() {
var but = document.getElementById( index );
but.style.backgroundColor = 'white';
index = ++index >= sites.length ? 0 : index;
ifr.src = sites[ index ][ 1 ];
but = document.getElementById( index );
but.style.backgroundColor = 'lightgreen';
}
function onWindowResize() {
parent.ifr.style.cssText += ' width: ' + parent.parent.window.innerWidth + 'px; ';
}
</script>
</body>
</html>