-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathiframe-carousel-r2.html
90 lines (64 loc) · 2.71 KB
/
iframe-carousel-r2.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
<!doctype html>
<html>
<head>
<meta charset=utf-8 >
<title>iframe-carousel-r2.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 = 20000;
var timer;
var editor = 'https://exploratoria.github.io/lib/code-edit-view/code-edit-view.html#';
var sites = [
['Moon Voyager Gamer', editor + 'https://jaanga.github.io/moon/voyager/gamer/moon-voyager-gamer-r2-1.html' ],
['Moon Voyager Image Map', editor + 'https://jaanga.github.io/moon/voyager/image-map/moon-voyager-image-map-r1-2.html' ],
['Moon Voyager Shaded', editor + 'https://jaanga.github.io/moon/voyager/shaded/moon-voyager-shaded-r1-1.html' ],
['Moon Voyager Altitude', editor + 'https://jaanga.github.io/moon/voyager/altitude/moon-voyager-altitude-r1-1.html' ],
['Moon Rover Mobile', editor + 'https://jaanga.github.io/moon/rover-mobile/moon-rover-mobile-r5-4.html' ],
['Moon Rover 64P', editor + 'https://jaanga.github.io/moon/rover-64p/moon-rover-64p-multi-tile-r2.html' ],
['Moon Rover 256P', editor + 'https://jaanga.github.io/moon/rover-256p/moon-rover-256p-multi-tile-r1.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 - 50 ) + '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>