I'm currently coding a simple game in javascript. The game takes place in a div, called #box. And the enemy is a div called #enemy .
<div id="box">
<div id="prepend">
<div id="hero"></div>
</div>
<div id="enemy"></div>
</div>
Inside this #box the #enemy will move about using a setInterval() function generating random numbers (animating to x, y) . However, when I do this, somehow the point of origin where the coordinates start is at top left hand corner of the window when it should be in the top left hand corner in the #box. This is how I have been trying to generate random numbers to keep the #enemy inside the #box
var test = Math.floor(Math.random() * (1500 - $("#box").offset().left) + 0),
test2 = Math.floor(Math.random() * (750 - $("#box").offset().top) + 0);
But the problem I obviously have is that it keeps animating outside the #box.
CSS :
#box{
width:640px;
height:400px;
float: left;
background:url(../png/space.jpg);
margin: 0 0 0 100px;
}
#enemy {
width: 69px;
height: 50px;
position: absolute;
margin: 100px 0 0 100px;
background:url(../png/target2.png);
z-index:2;
}
The container div needs to have position: relative. Otherwise the position of the window, or the closest parent element with a relative position will be used in determining the inner div's position. By making the parent have a relative position, the child div will position itself relative to its parent as opposed to relative to the window.
You need:
position: relative;
in your #box CSS, for the absolute position on your #enemy to be relative to the box.
Add position: relative; to #box to make #enemy position relative to #box.
To make #boxes children position relative to it, you can use any of the following depending on your requirements:
#box { position: absolute; }
#box { position: relative; }
#box { position: fixed; }
Related
div
{
width:200px;
height:200px;
position: absolute;
}
.first-container
{
background-color: #9AD0EC;
}
.second-container
{
background-color: red;
left: 200px;
}
.third-container
{
background-color: blue;
left:400px;
}
Even if I override the display property to block, it still gives the same output.
Why isn't the division element blocking the space ahead of it?
Output :
Rather than :
An absolutely positioned element no longer exists in the normal document flow.
Instead, it sits on its own layer separate from everything else.
Rather than positioning the element based on its relative position within the normal document flow, they specify the distance the element should be from each of the containing element's sides. developer.mozilla.org/en-US/docs/Web/CSS/position
(the "containing element" is the initial containing block.)
top, bottom, left, and right use to position that relative to containing block.
explain reason with your code ---
/* when you give 'div' style like this nested div's also get position absolute*/
/* absolute positioned elements positions relative to its nearest positioned element.*/
/* then each container div's positioned relative to its nearest div */
/* comment this div style and use below div for solution. */
div {
width: 200px;
height: 200px;
position: absolute;
}
/* positioned relative to upper div */
.first-container {
background-color: #9ad0ec;
}
/* positioned relative to nearest positioned (first-container) div */
.second-container {
background-color: red;
left: 200px;
}
/* positioned relative to nearest positioned (second-container) div */
.third-container {
background-color: blue;
left: 200px;
top: 200px;
}
<body>
<div>
<div class="first-container" />
<div class="second-container" />
<div class="third-container" />
</div>
</body>
need to set 'top' or 'bottom' to container-style to display required output.
check this sandbox
I'm trying to replicate this overlay phone effect from this website:
https://www.beemit.com.au/
Basically, when you scroll down, the contents inside the fixed div (phone) also change.
I cannot grasp my head around the revealing effect created when you scroll down. I have only managed to create the fixed div and the various sections on the webpage.
Here's a simple version of the overlay-on-scroll.
There are 3 elements, the first image you want to be shown in the 'phone', the second image which gradually gets revealed and the footer element. They have different z-indexes so footer is behind both first and second and second is behind first.
The phone has a fixed position so it doesn't move on scrolling. The footer is placed relative to the body (or whatever container you have) just out of view at 100%.
We introduce a simple event listener on scrolling which tests whether there is an overlap between the footer and the phone. If there is then we set the height of the first image element to be its original height minus the overlap. This reveals the bottom part of the second element.
Without seeing your code I can't tell whether you need more sophistication (for example, you have to be aware of stacking contexts if your phone and footer are not in the same one).
const footer = document.querySelector('.footer');
const first = document.querySelector('.first');
const firstBottom = first.getBoundingClientRect().bottom;
const firstHeight = firstBottom - first.getBoundingClientRect().top;
function checkOverlay() {
const top = footer.getBoundingClientRect().top;
if ( top < firstBottom) {
first.style.height = firstHeight - firstBottom + top + 'px';
}
}
body {
width:100vw;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.first, .second {
position: fixed;
top: 50%;
left: 50%;
border: 1px solid black;
width: 20vmin;
height: 30vmin;
overflow:hidden;
}
.first {
background-image: linear-gradient(magenta, pink);
z-index: 0;
}
.second {
background-image: linear-gradient(cyan, lime);
z-index: -1;
}
.footer {
width: 100%;
height: 50%;
background-image: linear-gradient(red,blue);
position: relative;
top: 100%;
z-index: -2;
}
<body onscroll="checkOverlay();">
<div class="first"></div>
<div class="second"></div>
<div class="footer"></div>
</body>
What I am trying to achieve is a tooltip like positioning of an element that's inside the same contain as the element that when clicked will display a div that contains a table.
The full code can be found here:
http://jsbin.com/xihebol
When somebody clicks on .child-table-link the .child-data-table-container is supposed to be positioned relative to the clicked link.
I am doing this inside the click handler of the .child-table-link:
var _this = $(this);
$(".child-data-table-container").css({
"left": _this.offset().left - ($(this).width / 2),
"top": _this.offset().top
})
top works but left doesn't. How I do make it work? In general way to position an element relative to another element in the view-port is what I am looking for.
The problem is you are calculating the left position wrong, "left" will be the position of the left edge of the tooltip container, so if you want it to sit just to the left of your link, it only needs to be set to the negative width of the tooltip container. Check this out:
.canvas {
display: flex;
align-items: center;
justify-content: center;
}
.linkContainer {
position: relative;
background: #000;
}
.tooltip {
position: absolute;
width: 100px;
height: 100px;
background: green;
top: 0;
left: -100px;
}
<div class='canvas'>
<div class='linkContainer'>
<a href='#'>LINK</a>
<div class='tooltip'></div>
</div>
</div>
Notice how the tooltip width is 100px, and the left is set to -100px.
I am trying to use the new top and left of the child div inside a rotated parent to limit the draggable area of the rotated parent. Im using jquery draggable for this.
EDIT :
Here is the jsfiddle . Im planning to use the red dot on the rotated div to use as marker to check if it collided with the boundaries of the container. I need to get the new position(top and left) of that red marker to make use of my ready made function to contain the draggable.
In order to calculate the top or left offset for any element, you need to use .getBoundingClientRect(), in addition to accounting for the window scroll.
This is also the case for rotated elements, as can be seen in the following example:
function findTopLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return {
top: rec.top + window.scrollY,
left: rec.left + window.scrollX
};
}
console.log(findTopLeft('inner'));
#outer {
position: absolute;
top: 25%;
left: 25%;
width: 100px;
height: 50px;
border: 1px solid black;
transform: rotate(90deg);
}
<div id="outer">
<div id="inner">Text</div>
</div>
Hope this helps! :)
I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working
I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.
Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..
You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2