|
|
Line 6: |
Line 6: |
| </style> | | </style> |
| </html> | | </html> |
| <html> | | <gallery caption="Getting Started: Visit the links below to explore what interests you!" mode=packed heights=100px> |
| <style> | | File:energymain.jpg|link=energy|[[Energy]], [[fuel]]s, [[flow]]s, [[TPES]], [[TFC]] |
| | File:electrical-863402_1280.jpg|link=electrical grid|[[Electrical generation#World_electricity_generation|Generation]], [[Electrical grid|grid]], [[Access to electricity]] |
| | File:Hopetoun_falls.jpg|link=environment|[[Environment]], [[Hydrologic cycle]], [[Carbon cycle]] |
| | File:Littah.jpg|link=pollution|[[Pollution]], [[Smog]], [[Nitrogen oxide|NOx]], [[Sulfur oxides|SOx]] |
| | </gallery> |
| | <gallery mode=packed heights=100px> |
| | File:Fermi NPP.jpg|link=Power plant|[[Power plant]]s: [[Nuclear power plant|Nuclear]], [[Hydroelectric facility|Hydro]], [[Coal-fired power plant|Coal]], [[Solar panel|Solar]], [[Wind power|Wind]], [[Natural gas power plant|Natural Gas]] |
| | File:atomic.png|link=Fundamental force|'''Fundamental physics''': [[Fundamental force|Force]]s, [[Kinetic energy|Motion]], [[Temperature]], [[radiant energy|Light]] |
| | File:earth-sun.jpg|link=climate|[[Climate]], [[Greenhouse gases]], [[Feedback cycle]]s, [[Earth's heat balance]] |
| | File:traffic.jpg|link=transportation energy use|[[Transportation energy use]], [[Transportation]], [[Motor vehicle]]s, [[Internal combustion engine]]s |
| | </gallery> |
|
| |
|
| #images-holder
| | You can also try a [[Special:Random|random page]], and find something fun! |
| {
| |
| overflow: hidden;
| |
| width: 800px;
| |
| height: 400px;
| |
| position: relative;
| |
| display: block;
| |
| }
| |
|
| |
|
| | | We have a related project on the [http://energyeducation.ca/simulations/nuclear/nuclidechart.html chart of the nuclides] that is under development. |
| | |
| #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>
| |
| var mousetime = false;
| |
| var number_of_slots = 5
| |
| var timer = window.setTimeout(image_fade_forward, 6000);
| |
| | |
| var which_slot_vis = 1;
| |
| | |
| | |
| | |
| 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);
| |
| | |
| }
| |
| }
| |
|
| |
| function nav_image_fade(clicked_id){
| |
| just_clicked = clicked_id.substr(clicked_id.length - 1);
| |
|
| |
| if (just_clicked == which_slot_vis){
| |
| }else{
| |
|
| |
| document.getElementById("slot" + just_clicked).classList.add('notransition');
| |
| document.getElementById("slot" + just_clicked).style.opacity = 1;
| |
| document.getElementById("slot" + just_clicked).classList.remove('notransition');
| |
| document.getElementById("slot" + (which_slot_vis).toString()).style.opacity = 0
| |
|
| |
| 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);
| |
| | |
| }
| |
|
| |
| }
| |
| | |
| 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>
| |
| | |
| <center>
| |
| <div id="images-holder" onmouseover = "mouseTimePause()" onmouseout = "mouseTimeReset()">
| |
| | |
|
| |
| <div class = "button next" id="next-button-1" onclick="image_fade_forward()">
| |
| <span class="arrow"> ›</span>
| |
| </div>
| |
| <div class = "button previous" id="previous-button-1" onclick="image_fade_back()">
| |
| <span class= "arrow">‹</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>
| |
| </center>
| |
| </html>
| |