Add Pop-up
This commit is contained in:
parent
94cc78de19
commit
1079ce011c
@ -11,6 +11,21 @@
|
||||
|
||||
/*-----------------------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 {
|
||||
font-family: headersFont;
|
||||
font-size: 80px;
|
||||
|
@ -15,7 +15,14 @@
|
||||
<body>
|
||||
<h1>PLAY && LEARN</h1>
|
||||
<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>
|
||||
</a>
|
||||
<a href="page1.html" class="active">
|
||||
|
20
js/script.js
20
js/script.js
@ -24,13 +24,14 @@ $(document).ready(function() {
|
||||
var positionYPoliceBuildingCornerLeft = $('#police-building').offset().top;
|
||||
var positionXPoliceBuildingCornerRight = $('#police-building').offset().left + $('#police-building').innerWidth();
|
||||
var positionYPoliceBuildingCornerRight = $('#police-building').offset().top + $('#police-building').innerHeight();
|
||||
if(positionXPoliceBuildingCornerRight>positionCharXCornerLeft && positionYPoliceBuildingCornerRight>positionCharYCornerLeft &&
|
||||
|
||||
if(positionXPoliceBuildingCornerRight>positionCharXCornerLeft && positionYPoliceBuildingCornerRight>positionCharYCornerLeft &&
|
||||
positionXPoliceBuildingCornerLeft<positionCharXRightCorner &&
|
||||
positionYPoliceBuildingCornerLeft<positionCharYRightCorner){
|
||||
console.log('jestem na policji');
|
||||
$('#police-building').parent().attr('class', 'active');
|
||||
}
|
||||
|
||||
//tutaj koniec upraszczania kodu
|
||||
}
|
||||
if(e.which == 38){
|
||||
$("#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');
|
||||
}
|
||||
})
|
||||
|
||||
$('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',
|
||||
})
|
||||
|
||||
})
|
||||
});
|
Loading…
Reference in New Issue
Block a user