forked from jeuelc/mworld-flat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
sub-naturalworld-volcanoes-krackawhata.html
165 lines (146 loc) · 7.63 KB
/
sub-naturalworld-volcanoes-krackawhata.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!-- i-C-a -->
<div data-role="page" id="krackawhata">
<script src="js/hammer.js"></script>
<script src="js/jquery.hammer.js"></script>
<script src="js/slidebarnat.js"></script>
<div class="menuhousing"></div>
<div class="homebtnholder"><div class="homebtnnat"></div></div>
<div class="mpbtnholder"><div class="mpbtnnat"></div></div>
<div class="cpbtnholder"><div class="cpbtnnat"></div></div>
<div class="infobtnholder"><div class="infobtnnat"></div></div>
<div class="credsbtnholder"><div class="credsbtnnat"></div></div>
<div class="menubtnholder"><div class="menubtnnat"></div></div>
<div class="bptitleholder-huff" style="padding-top:14px;"><h1>Krak-a-what-a?</h1></div>
<div id="spacechar">
<div data-role="content" class="kidzcontent">
<div class="v-spacer"></div>
<div class="sidebarleft-half">
<a id="krakatulink" style="visibility:hidden;" href="JavaScript:html5Lightbox.showLightbox(0, 'css/images/9-12/The_Natural_World/Volcanoes/Biggest_and_Baddest/krakatu.jpg', 'An artist\'s impression of what the 1883 Krakatau eruption in Indonesia might have looked like. This was a colossal VEI 6 eruption!');">click here</a>
<div id="f1_container" style="visibility:hidden;position:absolute;left:100px;top:270px;">
<div id="f1_card">
<div class="front face">
<img id="dopple" src="css/images/9-12/The_Natural_World/Volcanoes/Biggest_and_Baddest/rockquizpol.png">
</div>
<div id="backofcard" class="back face center" style="background:url(css/images/9-12/The_Natural_World/Volcanoes/Biggest_and_Baddest/rockquizpol-reverse.png) no-repeat;">
</div>
</div><!--/f1+card-->
</div><!--/f1_container-->
<div id="zoomwrapper">
<div id="pol1" class="pPiece" style="left:100px;top:270px;">
<img src="css/images/9-12/The_Natural_World/Volcanoes/Biggest_and_Baddest/krakatupol.png" alt="" />
</div>
<div id="pol2"class="pPiece" style="left:75px;top:290px;">
<img src="css/images/9-12/The_Natural_World/Volcanoes/Biggest_and_Baddest/rockquizpol.png" alt="" />
</div>
</div><!--/zoomwrapper-->
</div>
<div class="bpcontent-huff">
<p>Did you know that Indonesia has more volcanoes than any other country? One of its historically nasty eruptions occurred from a volcano known as Krakatau or you may have heard it referred to as Krakatoa. It erupted in 1883 and was so loud it was probably heard in the Maldives! If you check your atlas you'll see that's a long way so either the Maldivians have really good hearing or it really was very loud!</p>
<p>During the eruption most of the island of Krakatau collapsed into the underlying magma chamber, forming a giant crater or hole known as a 'caldera'. It sent flying tens' of cubic kilometres of material (don't forget one cubic kilometre = 1 km x 1 km x 1 km = pretty big). It also caused large tsunamis, or giant waves, as the volcano collapsed a bit like what happens when you plonk into the bath! The eruption was so big that it sadly killed more than 36,000 people. </p>
</div>
<div class="botlogoholder"><a href="home.html" class="homelinkbh"><img src="css/images/9-12/The_Natural_World/bottomhomenat.png"></a></div>
</div> <!-- end content -->
</div><!--/spacechar-->
<!-- <div class="audiopanel"> -->
<!-- images are in slidebarnat.js
note: change the ids to be able play the narration
-->
<div class="micbtnholder"><div class="micbtnnat" id="playstopkrackawhata"></div></div>
<div class="bnat"><div class="rwnat" id="krackawhataaudiobbtn"></div></div>
<div class="plnat"><div class="plpsnat" id="krackawhataaudioplbtn"></div></div>
<div class="fnat"><div class="fwnat" id="krackawhataaudiofbtn"></div></div>
<div id="actualaudio-krackawhata" style="visibility:hidden;"></div>
<!-- </div> -->
<script>
// sound setup is in home.html and index.js
sound = new Audio(); // 'sound' is now an audio object
var playing;
var paused;
(function() {
$('div#pol1').css("z-index", 3);
$('div#pol2').css("z-index", 2);
$('div#pol1 > img').css("-webkit-transform", "rotate(0deg)");
$('div#pol2 > img').css("-webkit-transform", "rotate(5deg)");
playing = false;
if(sound.canPlayType('audio/mpeg')) {
$('#actualaudio-krackawhata').html('<audio id="krackawhataaudio" controls preload onpause="playvol()" onplay="pausevol()"><source src="narrations/volcanoes_krackawhata.mp3" type="audio/mpeg"></audio>');
}
$("#krackawhata").swipe( { swipeRight:goBack, allowPageScroll:"auto"} );
})();
$('.homelinkbh').on('tap', function() { mainaudiobg.play(); bgsoundvol.pause(); bgsoundvol.currentTime = 0;});
function goBack() {
$.mobile.changePage("sub-naturalworld-volcanoes-biggestbaddest.html", {transition: "slide", reverse: true });
// prev page plays the same bgmusic so comment this out
//bgsoundvol.pause();
//bgsoundvol.currentTime = 0;
//bgsoundvol.play();
}
$("#backofcard").on('tap', function() {
$('#f1_card').css({"-webkit-transform": "rotateY(0deg)"});
$('#f1_card').css({"-moz-transform": "rotateY(0deg)"});
$('#f1_card').css({"-o-transform": "rotateY(0deg)"});
$('#f1_card').css({"transform": "rotateY(0deg)"});
setTimeout(function() {
$("#pol2").css({"visibility":"visible", "z-index":3});
$('#f1_container').css({"visibility":"hidden", "z-index":0});
}, 1000);
//$("#hittites").swipe( { swipeRight:goBack, allowPageScroll:"auto"} );
//$("#hittites").swipe("enable");
});
$("#pol2").on('tap', function() {
$('#f1_container').css({"visibility":"visible", "z-index":10});
$(this).css({"visibility":"hidden"});
$('#f1_card').css({"-webkit-transform": "rotateY(180deg)"});
$('#f1_card').css({"-moz-transform": "rotateY(180deg)"});
$('#f1_card').css({"-o-transform": "rotateY(180deg)"});
$('#f1_card').css({"transform": "rotateY(180deg)"});
});
$("#pol1").on('tap', function() {
$('#krakatulink')[0].click();
});
function pausedaudio() {
bgsoundvol.play();
}
function pausebg() {
bgsoundvol.pause();
}
/* ******************** */
/* this is the microphone button */
$("#playstopkrackawhata").on('tap', function() {
if(!playing) {
krackawhataaudio.play();
$('.micbtnnat').css('background-position-x', '-81px');
playing = true;
paused = false;
} else {
krackawhataaudio.pause(); krackawhataaudio.currentTime = 0;
$('.micbtnnat').css('background-position-x', '0px');
playing = false;
paused = true;
}
});
$("#krackawhataaudioplbtn").on('tap', function() {
if(!paused) {
krackawhataaudio.pause();
paused = true;
} else {
krackawhataaudio.play();
paused = false;
}
//$(".audiopanel").css({"backgroundPosition":"-197px 0px"});
});
$("#krackawhataaudiofbtn").on('tap', function() {
var ctime = krackawhataaudio.currentTime;
krackawhataaudio.currentTime = ctime + 10;
});
$("#krackawhataaudiobbtn").on('tap', function() {
var ctime = krackawhataaudio.currentTime;
krackawhataaudio.currentTime = ctime - 10;
});
$("#huffaudiopsbtn").on('tap', function() {
huffaudio.pause();
//$(".audiopanel").css({"backgroundPosition":"0px 0px"});
});
</script>
<script src="js/twocardLogic.js"></script> <!-- for card dragging effects -->
</div> <!--//home-->