s434585/3Dstudy
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Pop-up

Browse Source
This commit is contained in:
Paweł Kawczyński 2017-12-13 13:12:55 +01:00
parent 94cc78de19
commit 1079ce011c
3 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/style.css
View File

@ -11,6 +11,21 @@
/*-----------------------Character CSS high-resolution--------------------------------*/ /*-----------------------Character CSS high-resolution--------------------------------*/
/* HOVER STYLES */
div#pop-up-police {
display: none;
visibility: hidden;
position: absolute;
width: 90%;
max-width: 15rem;
background: #FFF;
font-family: headersFont;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
h1 { h1 {
font-family: headersFont; font-family: headersFont;
font-size: 80px; font-size: 80px;

9
index.html
View File

@ -15,7 +15,14 @@
<body> <body>
<h1>PLAY &amp;&amp; LEARN</h1> <h1>PLAY &amp;&amp; LEARN</h1>
<div id="game-container"></div> <div id="game-container"></div>
<a href="page1.html" class="not-active"> <!-- popup police -->
<div id="pop-up-police">
<h3>Zagraj w nasze gry!</h3>
<p>
Wejdz, zagraj i zdobądź dodatkowe punkty z przedmiotu
</p>
</div>
<a href="page1.html" class="active">
<div id="police-building" class="building"><img src="img/006-police.png"></div> <div id="police-building" class="building"><img src="img/006-police.png"></div>
</a> </a>
<a href="page1.html" class="active"> <a href="page1.html" class="active">

16
js/script.js
View File

@ -24,13 +24,14 @@ $(document).ready(function() {
var positionYPoliceBuildingCornerLeft = $('#police-building').offset().top; var positionYPoliceBuildingCornerLeft = $('#police-building').offset().top;
var positionXPoliceBuildingCornerRight = $('#police-building').offset().left + $('#police-building').innerWidth(); var positionXPoliceBuildingCornerRight = $('#police-building').offset().left + $('#police-building').innerWidth();
var positionYPoliceBuildingCornerRight = $('#police-building').offset().top + $('#police-building').innerHeight(); var positionYPoliceBuildingCornerRight = $('#police-building').offset().top + $('#police-building').innerHeight();
if(positionXPoliceBuildingCornerRight>positionCharXCornerLeft && positionYPoliceBuildingCornerRight>positionCharYCornerLeft && if(positionXPoliceBuildingCornerRight>positionCharXCornerLeft && positionYPoliceBuildingCornerRight>positionCharYCornerLeft &&
positionXPoliceBuildingCornerLeft<positionCharXRightCorner && positionXPoliceBuildingCornerLeft<positionCharXRightCorner &&
positionYPoliceBuildingCornerLeft<positionCharYRightCorner){ positionYPoliceBuildingCornerLeft<positionCharYRightCorner){
console.log('jestem na policji'); console.log('jestem na policji');
$('#police-building').parent().attr('class', 'active'); $('#police-building').parent().attr('class', 'active');
} }
//tutaj koniec upraszczania kodu
} }
if(e.which == 38){ if(e.which == 38){
$("#char-arm-left-up").attr('id','char-arm-left'); $("#char-arm-left-up").attr('id','char-arm-left');
@ -64,5 +65,18 @@ $(document).ready(function() {
$("#char-arm-right").attr('id','char-arm-right-up'); $("#char-arm-right").attr('id','char-arm-right-up');
} }
}) })
$('div#police-building').mouseover(function(e){
$('#pop-up-police').css({
'display' : 'inline',
'visibility' : 'visible',
left: e.pageX + 1,
top: e.pageY + 1,
'z-index' : '2',
})
}).mouseout(function(){
$('#pop-up-police').css({
'visibility' : 'hidden',
})
})
}); });