Difference between revisions of "Team:Toronto/Testing"

Line 1: Line 1:
 
<html>
 
<html>
  
−
<div> </div>
+
<div style='background:#6B3C42;'><span>a</span></div>
−
<div> </div>
+
<div style='background:#719E77;'><span>b</span></div>
−
<div> </div>
+
<div style='background:#EFCE89;'><span>c</span></div>
−
<div> </div>
+
<div style='background:#DED3A6;'><span>d</span></div>
−
<div> </div>
+
<div style='background:#C39B8F;'><span>e</span></div>
−
<a class='down-button' href="#"><img href="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/3d-transparent-glass-icons-arrows/006754-3d-transparent-glass-icon-arrows-arrow3-down-solid-circle.png"></a>
+
<a class='down-button' href="#">Down</a>
−
<a class='up-button' href="#"><img href="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-transparent-glass-icons-arrows/006757-3d-transparent-glass-icon-arrows-arrow3-up-solid-circle.png"></a>
+
<a class='up-button' href="#">Up</a>
  
 
<style>
 
<style>
  
 +
/*
 +
Author: Danko Milutinovic
 +
Desctiption: One page scroll
 +
Contact: 
 +
        http://danko-m.github.io/ ,
 +
        dankomilutinovic@gmail.com,
 +
        https://rs.linkedin.com/pub/danko-milutinovic/a3/675/778       
 +
*/
 
body {
 
body {
 
   height: 100%;
 
   height: 100%;
Line 16: Line 24:
 
}
 
}
  
−
div{
+
div,
−
   height: 800px
+
a.dole,
−
  weidth: 1200px
+
a.gore {
 +
   display: none;
 
}
 
}
  
−
.down-button{
+
.down-button,
 +
.up-button {
 +
  display: inline-block;
 
   position: fixed;
 
   position: fixed;
−
   top: 500px;
+
   top: 0;
−
   left: 500px;
+
   left: 100px;
 +
  background: orange;
 +
  padding: 5px;
 +
  text-decoration: none;
 +
  color: #000;
 +
  border-radius: 5px;
 +
  margin-top: 10px;
 +
  border: 2px solid brown;
 +
  box-shadow: 1px 1px 5px #000;
 
}
 
}
  
−
.up-button{
+
span {
−
   position: fixed;
+
   display: inline-block;
−
   bottom: 500px;
+
   padding: 10px 15px;
−
   left: 500px;
+
   background: #F0AC1E;
 +
  box-shadow: 1px 1px 5px #000;
 
}
 
}
  
 +
.up-button {
 +
  left: 170px;
 +
}
  
 
body {
 
body {
Line 39: Line 62:
  
 
</style>
 
</style>
 +
 +
<script>
 +
 +
var wHeight = $(window).height();
 +
var distance = 0;
 +
 +
$('div').height(wHeight);
 +
$('div, a').show();
 +
 +
$('a').on('click', function(event) {
 +
  event.preventDefault();
 +
});
 +
 +
$('.down-button').on('click', function() {
 +
  distance = $(window).scrollTop();
 +
  $("html, body").animate({
 +
    scrollTop: distance + wHeight
 +
  }, 600);
 +
});
 +
 +
$('.up-button').on('click', function() {
 +
  distance = $(window).scrollTop();
 +
  $("html, body").animate({
 +
    scrollTop: distance - wHeight
 +
  }, 600);
 +
});
 +
 +
</script>
  
 
</html>
 
</html>

Revision as of 18:02, 26 August 2016

a
b
c
d
e
Down Up