Difference between revisions of "Team:BostonU/HomeOne"

Line 33: Line 33:
 
<body>
 
<body>
  
−
<div style = "width:100%; height:400px; background-color:white; display:none;" id = "one" class = "show"></div>
+
<div style = "width:100%; height:400px; background-color:yellow;" id = "one" class = "show"></div>
 
<div style = "width:100%; height:400px; background-color:purple; display:none;" id = "two"></div>
 
<div style = "width:100%; height:400px; background-color:purple; display:none;" id = "two"></div>
 
<div style = "width:100%; height:400px; background-color:black; display:none;" id = "three"></div>
 
<div style = "width:100%; height:400px; background-color:black; display:none;" id = "three"></div>
 
<div style = "width:100%; height:400px; background-color:green; display:none;" id = "four"></div>
 
<div style = "width:100%; height:400px; background-color:green; display:none;" id = "four"></div>
 
</div>
 
</div>
−
<div style = "width:200px; height:100px; background-color:red;" id = "forward"></div>
+
<div style = "width:200px; height:100px; background-color:red; text-align:center; font-size:300%;" id = "forward">></div>
−
<div style = "width:200px; height:100px; background-color:blue;" id = "reverse"></div>
+
<div style = "width:200px; height:100px; background-color:blue; text-align:center; font-size:300%;" id = "reverse"><</div>
 
<div style = "background-color:black;"><div class = 'one'><p style = "opacity:1.5; text-align:center; color:white; font-size:200%;">Project</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Human Practices</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Team</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Other</p></div>
 
<div style = "background-color:black;"><div class = 'one'><p style = "opacity:1.5; text-align:center; color:white; font-size:200%;">Project</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Human Practices</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Team</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Other</p></div>
 
<div style = "background-color:white;">
 
<div style = "background-color:white;">
Line 53: Line 53:
 
   $("#forward").click(function () {
 
   $("#forward").click(function () {
 
       n = n+1;
 
       n = n+1;
 +
      if (n > 5) {
 +
      $("#one").css('display', 'block');
 +
      $("#two").css('display', 'none');
 +
      $("#three").css('display', 'none');
 +
      $("#four").css('display', 'none');
 +
      n = 2;}     
 +
      else if (n == 2) {
 +
      $("#one").css('display', 'block');
 +
      $("#two").css('display', 'none');
 +
      $("#three").css('display', 'none');
 +
      $("#four").css('display', 'none'); }
 +
      else if (n==3) {
 +
      $("#two").css('display', 'block');
 +
      $("#one").css('display', 'none');
 +
      $("#three").css('display', 'none');
 +
      $("#four").css('display', 'none');}
 +
      else if (n==4) {
 +
      $("#three").css('display', 'block');
 +
      $("#one").css('display', 'none');
 +
      $("#two").css('display', 'none');
 +
      $("#four").css('display', 'none');}
 +
      else if (n==5) {
 +
      $("#four").css('display', 'block');
 +
      $("#one").css('display', 'none');
 +
      $("#two").css('display', 'none');
 +
      $("#three").css('display', 'none');}
 +
        });
 +
 +
  $("#reverse").click(function () {
 +
      n = n-1;
 +
      if (n < 2) {
 +
      $("#one").css('display', 'none');
 +
      $("#two").css('display', 'none');
 +
      $("#three").css('display', 'none');
 +
      $("#four").css('display', 'block');
 +
      n = 5;}
 
       if (n == 2) {
 
       if (n == 2) {
−
       $("#one").css('display', 'block'); }
+
       $("#one").css('display', 'block');
−
       else if (n==3) {$("#two").css('display', 'block');}
+
      $("#two").css('display', 'none');
−
       else if (n==4) {$("#three").css('display', 'block');}
+
      $("#three").css('display', 'none');
−
       else {$("#four").css('display', 'block');}
+
      $("#four").css('display', 'none'); }
 +
       else if (n==3) {
 +
      $("#two").css('display', 'block');
 +
      $("#one").css('display', 'none');
 +
      $("#three").css('display', 'none');
 +
      $("#four").css('display', 'none');}
 +
       else if (n==4) {
 +
      $("#three").css('display', 'block');
 +
      $("#one").css('display', 'none');
 +
      $("#two").css('display', 'none');
 +
      $("#four").css('display', 'none');}
 +
       else {
 +
      $("#four").css('display', 'block');
 +
      $("#one").css('display', 'none');
 +
      $("#two").css('display', 'none');
 +
      $("#three").css('display', 'none');}
 
         });
 
         });
 +
 
   });
 
   });
 
</script>
 
</script>
  
 
</html>
 
</html>

Revision as of 16:26, 14 August 2016

>
<

Project

Human Practices

Team

Other