last

4 years ago · a23378d5a9
parent d52f88100f
commit a23378d5a9
4 changed files with 105 additions and 6 deletions
--- a/readme/readme_1.html
+++ b/readme/readme_1.html
@ -7,7 +7,9 @@
    
 </head>
 <body class="readme">
-<div>message 1</div>
+<div class="readme">
+Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello
+</div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="../script.js" ></script>
--- a/script.js
+++ b/script.js
@ -1,10 +1,9 @@

-///////////////////////////////
-// all jQuery stuff here

+// all jQuery stuff here

 $(document).ready(function() {
-  
+  //newspaper passage iframes
  $(document).on('click', '#paper_1', function(){ 
    $("#readme_1").show();
  });
@ -20,7 +19,9 @@ $(document).ready(function() {

 });;

+
 $(document).ready(function() {
+//switch story divs 
 $("#switchTo2_newspaper").click (function(){ 
  $("#2_park_newspaper").show();
  $("#1_park").hide(); 
@ -35,12 +36,51 @@ $("#switchTo1_news").click (function(){
 $("#switchTo2_walk").click (function(){ 
  $("#2_park_walk").show();
  $("#1_park").hide();
+  $("#gardenSpace").show();
+ 
 });

  $("#switchTo1_walk").click (function(){ 
    $("#2_park_walk").hide();
    $("#1_park").show();
+    $("#gardenSpace").hide();
+});
+
+//readme 1 salmonRoll
+$('.readme').hover(
+  function(){ $('.salmonRoll1').addClass('pink')}, 
+  function(){ $('.salmonRoll1').removeClass('pink')
+});
+
+
+
+// garden moving box 
+var pane = $('#pane'),
+    box = $('#square'),
+    w = pane.width() - box.width(),
+    d = {},
+    x = 3;
+
+function newv(v,a,b) {
+    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
+    return n < 0 ? 0 : n > w ? w : n;
+}
+
+$(window).keydown(function(e) { d[e.which] = true; });
+$(window).keyup(function(e) { d[e.which] = false; });
+
+setInterval(function() {
+    box.css({
+        left: function(i,v) { return newv(v, 37, 39); },
+        top: function(i,v) { return newv(v, 38, 40); }
    });
+}, 20);
+
+
+
+
+
+


 });;
--- a/start.html
+++ b/start.html
@ -17,7 +17,7 @@
 <div id="container">
 <div id="1_park" style="display: block;">
    It's Sunday. You are sit on a bench in the park. Your friend seems to be really late. You need a way to kill time until she arrives.
-    You can either <button id="switchTo2_newspaper">read a copy of today's newspaper</button> that someone left on the bench or <button id="switchTo2_walk">go for a walk</button>. 
+    You can either <button id="switchTo2_newspaper">read a copy of today's newspaper</button> that someone left on the bench or <button id="switchTo2_walk">go for a little walk</button>. 
    <button>Just relax</button> there if you feel like it .
 </div>

@ -40,6 +40,12 @@ Maybe you want to <button id="paper_1">read</button>,<button id="paper_2">read</

 </div>

+<div id="gardenSpace" style="display:none">
+    <div id="pane">
+        <div id ="square"></div>
+    </div>
+</div>
+
 <div id="papers"> 

    <div id="readme_1" style="display: none;">
@ -58,6 +64,7 @@ Maybe you want to <button id="paper_1">read</button>,<button id="paper_2">read</


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript" src="script.js" ></script>
    
 </body>
--- a/style_1.css
+++ b/style_1.css
@ -13,6 +13,7 @@ body {
    position:fixed;
    padding: 2% 2% 2% 2%;
    margin-bottom: 2%;
+    z-index: 0;

 }

@ -25,30 +26,79 @@ body {
    top:5%;

 }
+#readme_1:hover {
+    z-index: 3;
+}
+
 #readme_2 {
    position:absolute;
    z-index: 1;
    left: 25%;
    top:15%;
-
 }
+#readme_2:hover {
+    z-index: 3;
+}
+
 #readme_3 {
    position:absolute;
    z-index: 2;
    left: 40%;
    top:25%;
 }
+#readme_3:hover {
+    z-index: 4;
+}
+
 #readme_4 {
    position:absolute;
    z-index: 3;
    right:13%;
    top:35%;
 }
+#readme_4:hover {
+    z-index: 3;
+}

 body.readme{
    background-color: white;
    color:red;
+}
+
+.pink{    
+    background-color: yellow;
+}
+
+div.readme::selection{ 
+    background-color: fuchsia;
+
+}
+
+/* garden/walk*/
+
+#gardenSpace {
+width: 100%;
+height: 100%;
+background-color:violet;
+position:absolute;
+z-index: -1;

+}

+#pane {
+    position:relative;
+    width:800px;
+    height:800px;
+    border:2px solid red;
 }

+#square {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border: 2px solid black;
+
+
+}
+
+