forked from jeuelc/mworld-flat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
sub-ac-greece-romans.html
144 lines (119 loc) · 7.08 KB
/
sub-ac-greece-romans.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
<!-- i-C-a -->
<div data-role="page" id="romans">
<script src="js/hammer.js"></script>
<script src="js/jquery.hammer.js"></script>
<script src="js/slidebar.js"></script>
<div class="menuhousing"></div>
<div class="homebtnholder"><img class="homebtn" src="css/images/5-8/Ancient_Civilizations/Greece/homebtn.png"></div>
<div class="cpbtnholder"><img class="cpbtn" src="css/images/5-8/Ancient_Civilizations/Greece/cpbtn.png"></div>
<div class="buildbtnholder"><img class="buildbtn" src="css/images/5-8/Ancient_Civilizations/Greece/buildbtn.png"></div>
<div class="mpbtnholder"><img class="mpbtn" src="css/images/5-8/Ancient_Civilizations/Greece/mpbtn.png"></div>
<div class="menubtnholder"><img class="menubtn" src="css/images/5-8/Ancient_Civilizations/Greece/menubtn.png"></div>
<div class="bptitleholder" style="padding-top:14px;"><h1>The Romans</h1></div>
<div id="anisold"><div id="animatedsoldier"></div><div id="acgreecechar">
<div data-role="content" class="kidzcontent">
<div class="v-spacer"></div>
<div class="sidebarleft-half">
<a id="rome" style="visibility:hidden;" href="JavaScript:html5Lightbox.showLightbox(0, 'css/images/5-8/Ancient_Civilizations/Greece/World_around_Greece/rome.jpg', 'Remains of Ancient Rome in the city of… modern Rome!');">click here</a>
<a id="Taormina" style="visibility:hidden;" href="JavaScript:html5Lightbox.showLightbox(0, 'css/images/5-8/Ancient_Civilizations/Greece/World_around_Greece/taormina.jpg', 'Ancient Roman ruins on the coast of Sicily');">click here</a>
<a id="Paestum" style="visibility:hidden;" href="JavaScript:html5Lightbox.showLightbox(0, 'css/images/5-8/Ancient_Civilizations/Greece/World_around_Greece/paestum_3.jpg', 'Remains of an Ancient Greek temple at Paestum, in southern Italy');">click here</a>
<div id="zoomwrapper">
<div id="pol1" class="pPiece" style="left:100px;top:270px;">
<img src="css/images/5-8/Ancient_Civilizations/Greece/World_around_Greece/romepol.jpg" alt="" />
</div>
<div id="pol2"class="pPiece" style="left:75px;top:290px;">
<img src="css/images/5-8/Ancient_Civilizations/Greece/World_around_Greece/taorminapol.jpg" alt="" />
</div>
<div id="pol3"class="pPiece" style="left:80px;top:270px;">
<img src="css/images/5-8/Ancient_Civilizations/Greece/World_around_Greece/paestum_3pol.jpg" alt="" />
</div>
</div><!--/zoomwrapper-->
</div>
<div class="bpcontent">
<p>The Romans emerged from the federation of small muddy villages in central Italy in the 8th century BCE. Their early culture was heavily influenced by their neighbours, the <a href="#etruscans" data-rel="popup">Etruscans</a>, who ruled the Romans for many years. Eventually, the Romans expelled the Etruscans, and began to develop their own power and influence.</p>
<p>The Romans also came into contact with the ancient Greeks, who established numerous cities in southern Italy and Sicily. Although the Romans eventually conquered the Greeks, the Greeks also ‘captured’ the Romans since their culture had a huge influence on the Romans.</p>
<p>You see, ancient civilisations influenced each other in many ways – trade, technology, and war, even sometimes when they lost the war!</p>
</div>
<div data-role="popup" id="etruscans" data-position-to="window" data-overlay-theme="a" style="text-align:center;">
<div id="node-pop-etruscans">
<p>The Etruscans were based in the region of Italy now called Tuscany, but were probably originally Mycenaean immigrants.</p>
<p>The Etruscans influenced many aspects of Roman society including the formation of Roman cities and buildings, military, and commerce.</p>
</div>
</div>
<div class="botlogoholder"><a href="home.html" class="homelinkag"><img src="css/images/5-8/bottomhome.png"></a></div>
</div> <!-- end content -->
</div></div><!--/anisold-->
<div class="audiopanel">
<div class="bbh"><img id="romansaudiobbtn" src="css/images/audio/audio-back.png"></div>
<div class="plbh"><img id="romansaudioplbtn" src="css/images/audio/audio-play.png"></div>
<div class="psbh"><img id="romansaudiopsbtn" src="css/images/audio/audio-pause.png"></div>
<div class="fbh"><img id="romansaudiofbtn" src="css/images/audio/audio-forw.png"></div>
<div id="actualaudio-romans" style="visibility:hidden;"></div>
</div>
<script>
sound = new Audio(); // 'sound' is now an audio object
(function() {
if(sound.canPlayType('audio/mpeg')) {
$('#actualaudio-romans').html('<audio id="romansaudio" controls preload onpause="playagbg()" onplay="pauseagbg()"><source src="http://back.uvmate.com/sites/default/files/subjectsaudio/Page23.mp3" type="audio/mpeg"></audio>');
}
$("#romans").swipe( { swipeRight:goBack, allowPageScroll:"auto"} );
})();
(function() {
$('div#pol1 > img').css("-webkit-transform", "rotate(0deg)");
$('div#pol1').css("z-index", 2);
$('div#pol2').css("z-index", 1);
$('div#pol2 > img').css("-webkit-transform", "rotate(5deg)");
$('div#pol3 > img').css("-webkit-transform", "rotate(-3deg)");
var url = "http://back.uvmate.com/jeuel_services/educ.json?nid=83";
$.getJSON( url, function( data ) {
//$('#node-pop-etruscans').html(data[0].Body);
});
})();
(function() {
var url = "http://back.uvmate.com/jeuel_services/educ.json?nid=80";
$.getJSON( url, function( data ) {
$('#node-pop-delphic').html(data[0].Body);
});
})();
$('#start-romans').on('click', function() {
$('#actualaudio-romans').show();
var oldHeight = $('#node-body-holder').height();
var newHeight = oldHeight - $('#actualaudio-romans').height();
$('#node-body-holder').height(newHeight);
});
function goBack() {
$.mobile.changePage("sub-ac-greece-aroundag.html");
}
$('.homelinkag').on('tap', function() {
mainaudiobg.play(); agsoundbg.pause(); agsoundbg.currentTime = 0;
});
$("#pol3").on('tap', function() {
$('#Paestum')[0].click();
});
$("#pol2").on('tap', function() {
$('#Taormina')[0].click();
});
$("#pol1").on('tap', function() {
$('#rome')[0].click();
});
/* ******************** */
$("#romansaudioplbtn").on('tap', function() {
romansaudio.play();
agsoundbg.pause(); agsoundbg.currentTime = 0;
$(".audiopanel").css({"backgroundPosition":"-197px 0px"});
});
$("#romansaudiofbtn").on('tap', function() {
var ctime = romansaudio.currentTime;
romansaudio.currentTime = ctime + 10;
});
$("#romansaudiobbtn").on('tap', function() {
var ctime = romansaudio.currentTime;
romansaudio.currentTime = ctime - 10;
});
$("#romansaudiopsbtn").on('tap', function() {
romansaudio.pause();
$(".audiopanel").css({"backgroundPosition":"0px 0px"});
});
</script>
<script src="js/threecardLogic.js"></script>
</div> <!--//home-->