master
*anna* 4 years ago
parent d52f88100f
commit a23378d5a9

@ -7,7 +7,9 @@
</head> </head>
<body class="readme"> <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../script.js" ></script> <script type="text/javascript" src="../script.js" ></script>

@ -1,10 +1,9 @@
///////////////////////////////
// all jQuery stuff here
// all jQuery stuff here
$(document).ready(function() { $(document).ready(function() {
//newspaper passage iframes
$(document).on('click', '#paper_1', function(){ $(document).on('click', '#paper_1', function(){
$("#readme_1").show(); $("#readme_1").show();
}); });
@ -20,7 +19,9 @@ $(document).ready(function() {
});; });;
$(document).ready(function() { $(document).ready(function() {
//switch story divs
$("#switchTo2_newspaper").click (function(){ $("#switchTo2_newspaper").click (function(){
$("#2_park_newspaper").show(); $("#2_park_newspaper").show();
$("#1_park").hide(); $("#1_park").hide();
@ -35,13 +36,52 @@ $("#switchTo1_news").click (function(){
$("#switchTo2_walk").click (function(){ $("#switchTo2_walk").click (function(){
$("#2_park_walk").show(); $("#2_park_walk").show();
$("#1_park").hide(); $("#1_park").hide();
$("#gardenSpace").show();
}); });
$("#switchTo1_walk").click (function(){ $("#switchTo1_walk").click (function(){
$("#2_park_walk").hide(); $("#2_park_walk").hide();
$("#1_park").show(); $("#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);
});; });;

@ -17,7 +17,7 @@
<div id="container"> <div id="container">
<div id="1_park" style="display: block;"> <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. 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 . <button>Just relax</button> there if you feel like it .
</div> </div>
@ -40,6 +40,12 @@ Maybe you want to <button id="paper_1">read</button>,<button id="paper_2">read</
</div> </div>
<div id="gardenSpace" style="display:none">
<div id="pane">
<div id ="square"></div>
</div>
</div>
<div id="papers"> <div id="papers">
<div id="readme_1" style="display: none;"> <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://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> <script type="text/javascript" src="script.js" ></script>
</body> </body>

@ -13,6 +13,7 @@ body {
position:fixed; position:fixed;
padding: 2% 2% 2% 2%; padding: 2% 2% 2% 2%;
margin-bottom: 2%; margin-bottom: 2%;
z-index: 0;
} }
@ -25,30 +26,79 @@ body {
top:5%; top:5%;
} }
#readme_1:hover {
z-index: 3;
}
#readme_2 { #readme_2 {
position:absolute; position:absolute;
z-index: 1; z-index: 1;
left: 25%; left: 25%;
top:15%; top:15%;
} }
#readme_2:hover {
z-index: 3;
}
#readme_3 { #readme_3 {
position:absolute; position:absolute;
z-index: 2; z-index: 2;
left: 40%; left: 40%;
top:25%; top:25%;
} }
#readme_3:hover {
z-index: 4;
}
#readme_4 { #readme_4 {
position:absolute; position:absolute;
z-index: 3; z-index: 3;
right:13%; right:13%;
top:35%; top:35%;
} }
#readme_4:hover {
z-index: 3;
}
body.readme{ body.readme{
background-color: white; background-color: white;
color:red; 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;
}

Loading…
Cancel
Save