I am trying to make my character move diagonally. My aim is to make him move towards the door depending on which door I click. There are two doors on the screen; top-left door and top-right door. Right now when I click on the top-left door he moves towards that door, but when I click on the top-right door he moves straight. I don't know where I'm going wrong with this and I could really use some help.
Here is the code that I have so far:
$(document).ready(function() {
//center the character
function centreThing(obj) {
//this is the height and width of heartless
h = $(obj).height();
w = $(obj).width();
$(obj).css({
//this is the height and width of the stage
//height and width of stage by 2 - height and width of heartless by 2
top: $('#stage').height() / 2 - h / 2,
left: $('#stage').width() / 2 - w / 2,
right: $('#stage').width() / 2 - w / 2
})
}
centreThing('#character');
//speech
var progress = 0;
var txt;
//click the door to go to next page
//animate character to the left door
$('#door1').click(function() {
$('#character').animate({
top: 0,
left: 150
}, {
duration: 1000,
complete: function() {
alert("entered");
}
});
});
//click the door to go to next page
//animate character to the right door
$('#door2').click(function() {
$('#character').animate({
top: 0,
right: 150
}, {
duration: 1000,
complete: function() {
alert("entered");
}
});
});
}); // do not delete this line
#character {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 99;
}
#door1 {
background-image: url("https://placehold.it/50x50?text=closeddoor");
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 130px;
z-index: 5;
}
#door1:hover {
background-image: url("https://placehold.it/50x50?text=opendoor");
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 130px;
}
#door2 {
background-image: url("https://placehold.it/50x50?text=closeddoor");
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 510px;
}
#door2:hover {
background-image: url("https://placehold.it/50x50?text=opendoor");
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 510px;
z-index: 5;
}
#stage {
position: relative;
width: 720px;
height: 480px;
margin: auto;
margin-top: 100px;
background-color: black;
border-style: solid;
border-width: 5px;
border-color: white;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAS340</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="stage">
<img src="https://placehold.it/50x50?text=character" id="character" class="center">
<div id='door1'></div>
<div id='door2'></div>
</div>
</body>
</html>
Try it like this.Reset the left position on clicking the #door2.It happens baecause you have set the left position of the character in centreThing().So on clicking the #door2 the character has left,right and top value.So it is starting at the left value.I have removed the left value on clicking on #door2 and it worked
$(document).ready(function() {
//center the character
function centreThing(obj) {
//this is the height and width of heartless
h = $(obj).height();
w = $(obj).width();
$(obj).css({
//this is the height and width of the stage
//height and width of stage by 2 - height and width of heartless by 2
top: $('#stage').height()/2-h/2,
left: $('#stage').width()/2-w/2,
right: $('#stage').width()/2-w/2
})
}
centreThing('#character');
//speech
var progress = 0;
var txt;
//click the door to go to next page
//animate character to the left door
$('#door1').click(function() {
$('#character').animate({
top: 0,
left: 150
}, {
duration: 1000,
complete: function() {
alert("entered");
}
});
});
//click the door to go to next page
//animate character to the right door
$('#door2').click(function() {
$('#character').css({
'left':''
}).animate({
top: 0,
right: 150
}, {
duration: 1000,
complete: function() {
alert("entered on 2");
}
});
});
}); // do not delete this line
#character {
position: absolute;
/* bottom: 0px;
left: 0px;
right: 0px;*/
z-index: 99;
}
#door1 {
background:#F00;
background-image: url(images/closeddoor.png);
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 130px;
z-index: 5;
}
#door1:hover {
background-image: url(images/opendoor.png);
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 130px;
}
#door2 {
background:#FF0;
background-image: url(images/closeddoor.png);
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 510px;
}
#door2:hover {
background-image: url(images/opendoor.png);
position: absolute;
width: 80px;
height: 60px;
top: -3px;
left: 510px;
z-index: 5;
}
#stage {
position: relative;
width: 720px;
height: 480px;
margin: auto;
margin-top: 100px;
background-color: black;
border-style: solid;
border-width: 5px;
border-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAS340</title>
<link href="styles.css" rel="stylesheet" />
<script src="jquery-3.1.1.min.js"></script>
<script>
</script>
</head>
<body>
<div id="stage">
<img src="images/character.png" id="character" class="center">
<div id='door1'></div>
<div id='door2'></div>
</div>
</body>
</html>
Related
How to detect top right bottom left screen area JavaScript? I have four arrow for slider but I wanna display only when mouse hover on particular area.
$('.container').mousemove(function (e) {
if (e.clientY < $('.container').height() / 2) {
console.log('top');
} else {
console.log('bottom');
}
if (e.client X < $('.container').width() / 2) {
console.log('left');
} else {
console.log('right');
}
});
Would you consider a CSS :hover suggestion? It may be simpler. Added font awesome arrows as example.
html,
body {
height: 100%;
width: 100%;
}
.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: lightgray;
}
.left {
position: absolute;
top: 40px;
left: 0;
bottom: 40px;
width: 40px;
background: lightgray;
}
.right {
position: absolute;
top: 40px;
right: 0;
bottom: 40px;
width: 40px;
background: lightgray;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 40px;
background: lightgray;
}
.top:hover,
.left:hover,
.right:hover,
.bottom:hover {
cursor: pointer;
background: gray;
}
.top:hover i,
.left:hover i,
.right:hover i,
.bottom:hover i {
display: block;
}
i.fa {
display: none;
text-align: center;
line-height: 40px;
font-size: 24px;
}
i.fa.fa-arrow-right,
i.fa.fa-arrow-left {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="top"><i class="fa fa-arrow-up"></i></div>
<div class="left"><i class="fa fa-arrow-left"></i></div>
<div class="right"><i class="fa fa-arrow-right"></i></div>
<div class="bottom"><i class="fa fa-arrow-down"></i></div>
// define the rectangular areas
var areas = {
top: [0, 0, 500, 100], // [startX, startY, endX, endY]
left: [0, 0, 100, 500],
right: [100, 0, 500, 500],
bottom: [0, 400, 500, 500]
};
function getArea(x, y) {
for (var key in areas) {
var area = areas[key];
if (x <= area[0] && x >= area[2] && y <= area[1] && y >= area[3]) return key;
}
return null;
}
$('.container').mousemove(function (e) {
console.clear && console.clear();
console.log(getArea(e.clientX, e.clientY));
});
Hello wonderful people of the internet,
I am having a problem with a website that I am building.
I am seeing some strange behavior with aligning an image in the center of an element while also applying a smooth "move upwards" animation.
It is perfectly centered in chrome, but not in internet explorer and edge.
I think this has to do with setting the CSS property, top: 0;. Because if I do that, it isn't centered in Chrome aswell.
Here is the jsfiddle.
https://jsfiddle.net/p4souo8d/2/
// project div animation on hover
$(".project").bind({
mouseenter: function() {
var image = $(this).find(".project-inner img"), projectInner = $(this).find(".project-inner");
var bottomMargin = (projectInner.height() - image.height()) / 2;
projectInner.fadeIn(400);
image.animate({ bottom: Math.round(bottomMargin) }, 300);
},
mouseleave: function() {
$(this).find(".project-inner").fadeOut(200).promise().done(function(){
$(this).find("img").css({
bottom: 0
});
});
}
});
.project {
width: 360px;
height: 260px;
background-color: #2C3E50;
float: left;
margin: 10px 15px;
position: relative
}
.project .project-inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3498DB;
display: none
}
.project .project-inner img {
width: 64px;
height: 64px;
position: absolute;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="project">
<img src="http://lorempixel.com/360/260/" alt="" />
<div class="project-inner">
<img src="http://lorempixel.com/400/200" alt="Meer informatie" />
<div class="project-information">
Hello there! :)
</div>
</div>
</div>
P.S. Sorry about the pictures, they are randomly generated.
This should work
.project .project-inner img {
width: 64px;
height: 64px;
position: absolute;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
margin: 0 auto;
}
When I have loaded my page my containers: '.lightbox-prev, .lightbox-next' load however I only want them to be visible when the '.lightbox-trigger' is clicked.
My HTML:
<div class="lightboxbg"></div>
<div class="lightbox-prev"></div>
<div class="lightbox-next"></div>
<div class="lightbox"></div>
My CSS:
div.lightbox{
position: absolute;
top: 25%;
left: 45%;
background: center no-repeat #fff;
width: 400px;
height: 600px;
padding: 10px;
z-index: 1001;
display: none;
}
div.directionslightbox{
position: absolute;
top: 10%;
left:18%;
background:url("../Map_Background_Web.png"); center;
background-repeat: no-repeat;
background-size: cover;
width: 65%;
height: 80%;
padding: 10px;
z-index: 1001;
display: none;
}
div.lightboxbg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
z-index: 1000;
display: none;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 0;
bottom: 0;
width: 250px;
background: center no-repeat red;
z-index: 1001;
cursor: pointer;
}
.lightbox-prev {
left: 0;
background-image: url("../previous.png");
}
.lightbox-next {
right: 0;
background-image: url("../next.png");
}
My JS:
<script type="text/javascript">
var lightboxcounter;
$(document).ready(function(){
$('.lightbox-trigger').click(function() {
lightboxcounter = $(this).attr('data-counter');
var image = $(this).attr('data-img')
$('.lightbox').css('background-image', 'url(' + image + ')');
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeIn(800);
});
$('.lightboxbg').click(function() {
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeOut(800);
});
$('.lightbox-prev').click(function() {
lightboxcounter--;
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
$('.lightbox-next').click(function() {
lightboxcounter++;
console.log(lightboxcounter);
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
});
</script>
If anyone could help, I would most appreciate it, it's been bugging me all day!
Cheers
You are already using fadeIn to display the controls so all you need to do is hide them initially.
Add this to your CSS...
.lightbox-prev, .lightbox-next {
display: none;
}
I am coding a loading screen with a div that slowly moves out of the screen. But it is twitching for reasons I do not know.
This is the code I am talking about:
function fadeLoadingScreen() {
$('#loadingBanner').animate({
bottom: "-15%",
opacity: 0
},
2000,
function() {
$('#loadingDiv').hide();
});
}
$(document).ready(function() {
fadeLoadingScreen();
});
#loadingDiv {
position: fixed;
width: 100%;
height: 100%;
background-color: white;
z-index: 10000;
}
#loadingBanner {
background-image: url("http://images.gofreedownload.net/thumps/crown-pattern-banner-erected-europeanstyle-vector-89228.jpg");
background-size: auto 100%;
background-repeat: repeat-x;
position: fixed;
bottom: 0;
height: 15%;
width: 100%;
z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadingDiv">
<div id="loadingBanner"></div>
</div>
https://jsfiddle.net/71btwr2j/
can anyone explain this behavior?
How to refactor below given preloader script to be modular and used in many sections in a page:
JS
$(window).load(function() {
var preloaderDelay = 200,
preloaderFadeOutTime = 800;
function hidePreloader() {
var loadingAnimation = $('#loading-animation'),
preloader = $('#preloader');
loadingAnimation.fadeOut();
preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
CSS
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; z-index: 9999; }
#loading-animation { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background: url(asset-path('assets/loading-animation.gif')) center center no-repeat; margin: -100px 0 0 -100px; }
I think you can do this way:
JS
$(function () {
$.fn.preloader = function () {
var objPreloader = $(this)
objPreloader.prepend('<div class="preloader"> <div class="loading-animation"></div> </div>');
$(window).load(function () {
var preloaderDelay = 200,
preloaderFadeOutTime = 800;
function hidePreloader() {
var loadingAnimation = objPreloader.find('.loading-animation') ,
preloader = objPreloader.find('.preloader');
loadingAnimation.fadeOut();
preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
};
$('.section-a').preloader();
$('.section-b').preloader();
});
CSS
.preloader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f4f3f3; z-index: 9999; }
.loading-animation { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; background: url(asset-path('loading-animation.gif')) center center no-repeat; margin: -100px 0 0 -100px; }