Energy Education

Main Page: Difference between revisions

No edit summary
No edit summary
 
(13 intermediate revisions by one other user not shown)
Line 5: Line 5:
}
}
</style>
</style>
</html>
<html>
<style>
#images-holder
{
    overflow: hidden;
    width: 800px;
    height: 400px;
    position: relative;
    display: block;
}
#images-slider
{
    z-index: 1;
    right: 0px;
    width: 100%;
    height: 100%;
    position: relative;
}
.image-slot
{
-moz-transition: all 1.5s ease-in;
    -webkit-transition: all 1.5s ease-in;
    -o-transition: all 1.5s ease-in;
    -ms-transform: all 1.5s ease-in;
    transition: all 1.5s ease-in;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%;
    height: 100%;
    background-color: rgba(126,126,126,0.5);
   
}
.images{
    position: absolute;
    right: -10000px;
    left: -10000px;
    top: -10000px;
    bottom: -10000px;
    margin: auto;
}
#slot1
{
    position: absolute;
    margin-left: 0%;
opacity: 1;
}
#slot2
{
    position: absolute;
    margin-left: 0%;
opacity: 0;
}
#slot3
{
    position: absolute;
    margin-left: 0%;
opacity: 0;
}
#slot4
{
    position: absolute;
    margin-left: 0%;
opacity: 0;
}
#slot5
{
    position: absolute;
    margin-left: 0%;
opacity: 0;
}
.button
{
    z-index: 2;
    width: 60px;
    height: 80px;
    position: absolute;
    background: black;
    opacity: 0;
    cursor; default;
    -moz-transition: opacity .4s;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    top: 40%;
    text-align: center;
    text-align: center;
    line-height: 60px; 
 
}
#images-holder:hover  .button
{
    opacity: 0.75;
}
.button:hover .arrow{
    color: #880000;
}
.next
{
    right: 0px;
}
.previous
{
    left: 0px;
}
.arrow{
    color: #FFF;
    font-size: 100pt;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: inline-block;
}
.caption{
    position: absolute;
    color: #f0f0f0;
    font-size: 20pt;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    bottom: 0px;
    width: 100%;
    height: 80px;
left: 0px;
    background-color: rgba(126,126,126,0.75);
    padding: 5px;
    text-align: left;
    box-sizing: border-box;
    line-height: 120%;
}
.notransition{
-moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
    -ms-transform: none !important;
transition: none !important;
}
.nav-holder{
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 10px;
   
}
.navigation{
position: absolute;
width: 20px;
height: 20px;
    border-radius: 50%;
bottom: 10%;
    z-index: 2;
display: inline-block;
    background: black;
}
.navigation:hover{
    background: #880000 !important;;
}
#dot-1{
    left: 80%;
    background: #880000;
   
}
#dot-2{
    left: 84%;
}
#dot-3{
    left: 88%;
}
#dot-4{
    left: 92%;
}
#dot-5{
    left: 96%;
}
</style>
<script>
<script>
var mousetime = false;
var page;
var number_of_slots = 5
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var timer = window.setTimeout(image_fade_forward, 6000);
  page = 'https://energyeducation.ca/simulations/frontpage/FrontPageMobile.html';
 
} else {
var which_slot_vis = 1;
  page = 'https://energyeducation.ca/simulations/frontpage/FrontPage.html';
 
 
 
function image_fade_forward(){
if(which_slot_vis == number_of_slots){
document.getElementById("slot1").classList.add('notransition');
document.getElementById("slot1").style.opacity = 1
document.getElementById("slot1").classList.remove('notransition');
document.getElementById("slot" + which_slot_vis.toString()).style.opacity = 0
document.getElementById("dot-1").style.background = '#880000'
document.getElementById("dot-" + which_slot_vis.toString()).style.background = 'black'
which_slot_vis = 1
update_link(which_slot_vis);
}else{
document.getElementById("slot" + (which_slot_vis+1).toString()).classList.add('notransition');
document.getElementById("slot" + (which_slot_vis+1).toString()).style.opacity = 1
document.getElementById("slot" + (which_slot_vis+1).toString()).classList.remove('notransition');
document.getElementById("slot" + which_slot_vis.toString()).style.opacity = 0
document.getElementById("dot-" + (which_slot_vis+1).toString()).style.background =  '#880000'
document.getElementById("dot-" + which_slot_vis.toString()).style.background = 'black'
which_slot_vis ++;
update_link(which_slot_vis);
}
if( !mousetime){
window.clearTimeout(timer);
timer = window.setTimeout(image_fade_forward, 6000);
 
    }
}
 
function image_fade_back(){
if(which_slot_vis == 1){
document.getElementById("slot" + number_of_slots.toString()).classList.add('notransition');
document.getElementById("slot" + number_of_slots.toString()).style.opacity = 1
document.getElementById("slot" + number_of_slots.toString()).classList.remove('notransition');
document.getElementById("slot1").style.opacity = 0
document.getElementById("dot-" + number_of_slots.toString()).style.background = '#880000'
document.getElementById("dot-1").style.background = 'black'
which_slot_vis = number_of_slots
update_link(which_slot_vis);
}else{
document.getElementById("slot" + (which_slot_vis-1).toString()).classList.add('notransition');
document.getElementById("slot" + (which_slot_vis-1).toString()).style.opacity = 1
document.getElementById("slot" + (which_slot_vis-1).toString()).classList.remove('notransition');
document.getElementById("slot" + which_slot_vis.toString()).style.opacity = 0
document.getElementById("dot-" + (which_slot_vis-1).toString()).style.background = '#880000'
document.getElementById("dot-" + which_slot_vis.toString()).style.background = 'black'
which_slot_vis --;
update_link(which_slot_vis);
}
if(!mousetime){
window.clearTimeout(timer);
timer = window.setTimeout(image_fade_forward, 6000);
 
    }
}
}
var xhr= new XMLHttpRequest();
function nav_image_fade(clicked_id){
xhr.open('GET', page, true);
just_clicked  = clicked_id.substr(clicked_id.length - 1);
xhr.onreadystatechange= function() {
       
    if (this.readyState!==4) return;
        if (just_clicked == which_slot_vis){
    if (this.status!==200) return;  
        }else{
    document.getElementById('mw-content-text').innerHTML= this.responseText;
    if (page == 'https://energyeducation.ca/simulations/frontpage/FrontPage.html') {
document.getElementById("slot" + just_clicked).classList.add('notransition');
        var script = document.createElement('script');
document.getElementById("slot" + just_clicked).style.opacity = 1;
        script.src = 'https://energyeducation.ca/simulations/frontpage/FrontPage.js';
document.getElementById("slot" + just_clicked).classList.remove('notransition');
        document.head.appendChild(script);
document.getElementById("slot" + (which_slot_vis).toString()).style.opacity = 0
        document.getElementById('imagelink').href = "https://energyeducation.ca/encyclopedia/Electrical_generation";
document.getElementById("dot-" + just_clicked).style.background = '#880000'
document.getElementById("dot-" + (which_slot_vis).toString()).style.background = 'black'
which_slot_vis = parseInt(just_clicked)
update_link(which_slot_vis);
        }
if(!mousetime){
window.clearTimeout(timer);
timer = window.setTimeout(image_fade_forward, 6000);
 
     }
     }
};
}
xhr.send();
 
</script>
function mouseTimeReset(){
    timer = window.setTimeout(image_fade_forward, 6000);
    mousetime = false;
}
 
function mouseTimePause(){
    window.clearTimeout(timer);
    mousetime = true
}
 
function set_first_link(){
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Electrical_generation"
}
 
function update_link(visible){
if(visible == 1){
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Electrical_generation"
}else if(visible==2){
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Environmental_impact"
}else if(visible==3){
document.getElementById('imagelink').href = "http://www.energyeducation.ca/encyclopedia/End_use_energy"
}else if(visible==4){
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Total_final_consumption"
}else if(visible==5){
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Reserve"
}
}
 
window.onload = set_first_link;
</script>
 
 
<div id="images-holder" onmouseover = "mouseTimePause()" onmouseout = "mouseTimeReset()">
 
   
      <div class = "button next" id="next-button-1" onclick="image_fade_forward()">
<span class="arrow"> &#x203a;</span>
      </div>
      <div  class = "button previous" id="previous-button-1" onclick="image_fade_back()">
<span class= "arrow">&#x2039;</span>
      </div>
  <div class = "nav-holder">
<div class = "navigation" id = "dot-1" onClick="nav_image_fade(this.id)"></div>
<div class = "navigation" id = "dot-2" onClick="nav_image_fade(this.id)"></div>
<div class = "navigation" id = "dot-3" onClick="nav_image_fade(this.id)"></div>
<div class = "navigation" id = "dot-4" onClick="nav_image_fade(this.id)"></div>
<div class = "navigation" id = "dot-5" onClick="nav_image_fade(this.id)"></div>
  </div>
 
     
    <div id="images-slider">
<a  id = "imagelink">
<div class="image-slot" id="slot1">
<img src = "http://energyeducation.ca/wiki2develop/images/e/ee/SlideImage1.jpg" id="image1" class="images" />
<div class = "caption" id="cap1">Different countries get electricity from different sources. Where does your electricity come from?</div>
</div>
<div class="image-slot" id="slot2">
<img src="http://energyeducation.ca/wiki2develop/images/9/92/SlideImage2.jpg" id="image2" class="images" />
<div class = "caption" id="cap2"> Energy use impacts the environment. How do different sources of energy impact the environment differently?</div>
</div>
 
<div class="image-slot" id="slot3">
<img src="http://energyeducation.ca/wiki2develop/images/8/81/SlideImage3.jpg" id="image3" class="images" />
<div class = "caption" id="cap3">Consumers in different countries use different types of energy. How is your country different from other countries?</div>
</div>
<div class="image-slot" id="slot4">
<img src="http://energyeducation.ca/wiki2develop/images/9/9f/SlideImage4.jpg" id="image4" class="images" />
<div class = "caption" id="cap4">Different sectors require different energy. What uses the most energy in your country?</div>
</div>
<div class="image-slot" id="slot5">
<img src="http://energyeducation.ca/wiki2develop/images/8/8d/SlideImage5.jpg" id="image5 class="images" />
<div class = "caption" id="cap5">We've been using fossil fuels for hundreds of years. When will we run out?</div>
</div>
      </div>
 
    </a>
    </div>
</html>
</html>

Latest revision as of 05:19, 9 January 2019

Retrieved from "https://energyeducation.ca/wiki/index.php?title=Main_Page&oldid=8802"