Postion wont be editable by javascript if it is inherited - javascript

When the position of my div called player is styled to position:absolute; I can move its position with JavaScript but if it's inherited or fixed so its position is fixed to the parent div I cannot control it with JavaScript anymore.
html of the divs that.
<div id="game">
<div id="player"></div>
<div id="scores"><h1 id="playersScore"> 0</h1><h1 id="pcScore"> 0</h1></div>
</div>
javascript that updates the top position of the div
function readMouseMove(e){
if(e.clientY < 500){
var player = document.getElementById('player');
player.style.top = e.clientY + "px";
}
document.onmousemove = readMouseMove;
the css of the player is
#player{
border:1px solid black;
position:absolute;
left:50px;
top:50px;
background-color:#00FF00;
width:8px;
height:50px;
}
the parent div css is
#game{
margin:150px auto;
border:3px solid black;
background-color:black;
width:1000px;
height:500px;
}
Now this player div is been controlled by the javascript but if I change the position to positon:inherit I cannnot control the div with javascript anymore. I need to have the player divs positon to relate to its parent div.

Related

Positioning of element with JS transform properties (CSS get's overwritten by JS)

I'm trying to position two images on top of eachother, and having one of them rotate on scroll while the other one is not rotating - which works, except i'm unable to position and scale my elements in my CSS. As soon as i start scrolling, the image with the JS jumps into the corner while the other one remains where it is. I believe it's because my JS overwrites my CSS properties, but is there any way of working around this? Can i position my two elements while maintaining my JS?
var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
var value = window.scrollY * 0.25;
elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`;
});
body {
height: 200vh;
background: darkblue;
}
.guide {
width:150px;
height:150px;
margin-top:50px;
margin-bottom:-300px;
margin-left:50px;
}
<div class="guide" style="position:relative">
<img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/>
<img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/>
</div>
Remove translate from your code.
var elem = document.getElementById("rotatelogo");
window.addEventListener('scroll', function() {
var value = window.scrollY * 0.25;
elem.style.transform = `rotate(${value}deg)`;
});
body {
height: 200vh;
background: darkblue;
}
.guide {
width:150px;
height:150px;
margin-top:50px;
margin-bottom:-300px;
margin-left:50px;
}
<div class="guide" style="position:relative">
<img src="http://jakobnatorp.com/wp-content/uploads/2021/10/ARROW.png" style="position:fixed;"/>
<img class="portfolio" id="rotatelogo" src="http://jakobnatorp.com/wp-content/uploads/2021/10/SELECTED-WORK-BEIGE.png" style="position:fixed"/>
</div>
I am not sure what you want to achieve by usingtranslatex(-50%) translatey(-50%), but this is causing the images center to be positioned on the top left corner of the parent element.
If you just use elem.style.transform = `rotate(${value}deg)`; it will rotate in place.

HTML5 Drag and Drop with Coordinates

i'm new in Javascript and i got a task which i can't even solve..
I have to get a HTML 5 Drag and Drop, which can add Elements as much as i want, and if i want to edit one of the new elements or change the Position it has to be easy.
This is what it look like now:
http://picul.de/view/HRO
at the moment this don't work as i need..
who can help me?
var dragok = false;
var pos;
function allowDrop(e)
{
e.preventDefault();
}
function get_pos(e)
{
pos = [e.pageX , e.pageY];
}
function drag(e)
{
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e)
{
e.preventDefault();
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
var offset = e.dataTransfer.getData("text/plain").split(',');
var data=e.dataTransfer.getData("Text");
var img = canvas = document.getElementById(data);
var dx = pos[0] - img.offsetLeft;
var dy = pos[1] - img.offsetTop;
ctx.drawImage(document.getElementById(data), e.pageX - dx-170, e.pageY - dy-100);
}
function getCoordinates(e)
{
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
x=ctx.clientX;
y=ctx.clientY;
document.getElementById("footerCoord").innerHTML="Coordinates: (" + x + "," + y + ")";
}
body {
background:#eee;
}
#DnDBox {
margin:0 auto;
margin-top:7vh;
width:80vw;
height:80vh;
padding:1vmax;
background:#f5f5f5;
/* Erstmal nur zur Übersicht */
border:1px solid #111;
}
#DnDBox #canvasBox {
border:1px solid #111;
}
#DnDBox .leftBox {
float:right;
width:25%;
height: 90%;
}
#DnDBox .leftBox select{
width:100%;
padding:5px;
margin-bottom:5px;
}
#DnDBox .leftBox .dragBox{
float:right;
width:100%;
height: 90%;
/* Erstmal nur zur Übersicht */
border:1px solid #111;
}
#DnDBox .leftBox .dragBox ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#DnDBox .leftBox .dragBox ul > li{
float:left;
padding:20px;
text-align:center;
background:#eee;
}
#DnDBox .leftBox .dragBox ul > li:hover{
padding:20px;
text-align:center;
background:#ddd;
}
#DnDBox .leftBox img{
cursor:move;
}
#DnDBox .leftBox img:active{
cursor:move;
}
#DnDBox footer {
float:left;
margin-top:5px;
padding:5px;
width:100%;
border:1px solid #111;
}
<div id="DnDBox">
<canvas id="graphCanvas" onmousemove="getCoordinates(event)" ondrop="drop(event)" ondragover="allowDrop(event)" height=400 width=700 style="border:1px solid #000000;"></canvas>
<div class="leftBox">
<select name="plh1">
<option>Test</option>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<select name="plh2"></select>
<div class="dragBox">
<ul>
<li><img id="img1" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
<li><img id="img2" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
<li><img id="img3" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
</ul>
</div>
</div>
<footer id="footerCoord">asd</footer>
</div>
greets,
daniel
You can't drag an image painted onto a canvas around without additional support - the painted image is just a set of pixels that are part of the canvas's image data.
You may be interested in a canvas library called Fabric.js (tag and homepage). I'm not "recommending" it as such - I haven't used it - but you can certainly drag canvas objects created by the library on the homepage.
A simpler solution might be to use JavaScript/HTML without the canvas. Replace the canvas with, say, a relative DIV element (so it can act as a container for absolutely positioned elements). Then dropping an image on the DIV creates a new Image object (say a clone of the image dragged) and absolutely positions it within the container according to where it was dropped. The new copy of the image can have it's own drag handlers to move it around the container and program options could be added to delete a (cloned) dropped image as necessary.
You could also calculate the position of the mouse relative to the image element when starting a drag operation. This would allow dropping it under the mouse in the same relative position to the mouse cursor as at the start of the drag operation. This question on retrieving the X Y position of an element may be of help. (At the moment the dropped image does not appear under the cursor.)
You need to keep track of the elements. The canvas is just a bitmap image with no understanding of what a circle or square is.
Ideas:
(1) Create a separate canvas with a transparent background for each shape that you make and overlay them. When clicking on or touching a point of the canvas repeatedly, cycle through the potential target elements below that event, highlighting them in some way. When the correct element is selected, define an event (a gesture) that will allow the user to select that target for editing. Stop the selection function and initiate the editing function.
(2) Forget the canvas thing, and do it all with SVG

Html button position to be fixed upto certain div limits

I have a button inside div. I want it to be fixed at the bottom of the screen till I scroll down the page upto the div end. further scrolling will lead the button to be at the bottom of the div.
Note: the size of the div may changes upon expanding the contents inside it.
my code is:
<html>
<section>
<div>
<div> some content</div>
<div class="apply-filter" id="showsubmit" align="right">
<input class="com-btn" onclick="javascript:journalApplyFilters()" value="Apply Filters" />
</div>
</div>
</section>
</html>
<style>
.com-btn, nav#facets form.filter-list-form .submit
{
padding: 5px 10px;
color: #2f2f2f;
font-weight: bold;
text-shadow: 0 1px 0 #D6DEE6;
cursor: pointer;
border: 1px solid #94a4b2;
border-radius: 3px;
background: #aebfce;
position: fixed;
bottom: 4px;
</style>
<script type="text/javascript">
function checkOffset() {
if($('.com-btn').offset().top + $('.com-btn').height() >= $('footer').offset().top - 10)
$('.com-btn').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('footer').offset().top)
$('.com-btn').css('position', 'fixed'); // restore when //you scroll up
}
$(document).scroll(function() {
checkOffset();
});
</script>
problem is as i mentioned my div is of variable size so some times when the footer is not visible then the "apply filter" button remains at the bottom of page(fixed attribute).No 2- when my footer is visible if i click + button to expand the content then the button is invisible until i scroll again
You should use JS in order to have such behavior as a CSS only solutions could be not feasible.
Here below a simplistic example, just to help you out as start.
Basically you can:
Add or remove a class with your position:fixed; when a user scroll the window of x pixels
window.scrollY can be use to find out how much the user has scroll down the window.
position:fixed; in your CSS allow you to place your button relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Live example here, notice the button position after you scroll down of 100 pixel.
https://jsfiddle.net/sbzj91s9/6/
window.addEventListener('scroll', function(event){
console.log(window.scrollY);
if(window.scrollY >= 100){
var elm = document.getElementById('btn').classList.remove('fix');
}
})
<div id="area">
<button id="btn" class="fix" type="button">Click Me!</button>
</div>
<div id="content">
<p>some text here</p>
</div>
body{
margin :0;
padding:0;
}
#area {
position:absolute;
top:0;
left:0;
width:250px;
height:250px;
background-color:red;
}
#content {
position:absolute;
top:1500px;
background-color:gray;
}
#btn{
position:absolute;
bottom:0;
}
.fix {
position: fixed !important;
bottom:0;
}

Absolute Positioned img inside absolute div doesnt position as expected

I have the following html
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="images/internal_banner_holder.png" />
<img class="internal_banner" src="images/about-banner.jpg" />
<div id="overlay">
<img class="internal_banner_overlay" src="images/about-banner_hover.jpg" />
</div>
</div>
</div>
css
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:340px;
height:200px;
z-index:-1;
border:2px #aeaeae solid;
}
#overlay_field
{
position: relative;
width:1000px;
height:250px;
overflow:hidden;
}
and the following script as mentioned by #rkw
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
$("#overlay").css({left:e.pageX-360, top:e.pageY-280});
});
});
The Effect I'm trying to achieve here is:
An image appears in as a banner "internal_banner"
When the mouse hovers over this image(or rather "overlay_field") a small div appears which follows the mouse. Now the contents of the div is another image "internal_banner_overlay"
I want this image to be positioned exactly as "internal_banner", i.e stay in the same place so it appears like the mouse let's you see another underlying image. The problem is the image doesn't stay at one place, it positions within the div and moves with the mouse rather than the document even though it's position is set to absolute.
In simple words, when the mouse moves over the banner area, it should appear like the cursor changed to a small box that let's you see through the banner at another image.
Just add the temp banner in the upper div and change its opacity on mouseover and mouseout events.
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="abcd.png" />
<img class="internal_banner permBanner" src="permBanner.png" />
<img alt="" src="tempBanner.jpg" id="temp" style="height: 250px; width: 1000px; opacity: 0; position: absolute">
</div>
</div>
JS:
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
var width = 250;
var height = 250;
var left = parseInt(e.pageX)-parseInt(pageXOffset);
var top = parseInt(e.pageY)-parseInt(pageYOffset);
var a = document.getElementById("temp");
a.style.opacity = 1;
a.style.left = "0px";
a.style.top = "0px";
a.style.clip = "rect("+top+","+(left+100)+","+(top+100)+","+left+")";
});
});
Style
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block;
}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:250px;
height:250px;
border:2px #0000bb solid;
}
#overlay_field
{
position: absolute;
width:1000px;
height:250px;
overflow:hidden;
}​
#temp{position:absolute;}
Alternate:
Or alternatively you can add and remove the temporary banner on the mouseover and mouseout events.

How to make sure my css overlay is on top at any site?

I have a bookmark that calls script and lays a css overlay over the webpage. There is a top bar with a button to close it and the rest is simply a div with a semi-transparent background. Pick a random site and it looks fine, but for example, Google's top bar covers it as well as the search and buttons cover the overlay. Another example is reddit's header.
I make these divs and the button:
var overlayBackground = document.createElement('div'); //main overlay that covers the page
overlayBackground.setAttribute('id', "overlay_background");
document.body.appendChild(overlayBackground);
var topBar = document.createElement('div');
topBar.setAttribute('id', "top_bar");
overlayBackground.appendChild(topBar);
function cancelStuff(){
overlayBackground.removeChild(topBar);
document.body.removeChild(overlayBackground);
}
topBar.innerHTML = "<button id= \"cancel_stuff\" onclick=\"cancelStuff()\">Click To Cancel</button>";
And here is the css:
#cancel_stuff{
zIndex:2147483647;
font-weight:bold;
font-size:2em;
border:none;
width:100%;
height:50px;
color:#FF9900;
background-color:#336688;
}
#cancel_stuff:hover{
cursor: pointer;
color:#336688;
background-color:#FF9900;
}
#top_bar{
zIndex:2147483647;
box-shadow:0px 3px 10px 2px black;
position:fixed;
top:0px;
width:100%;
height:50px;
}
#overlay_background{
float:left;
zIndex:2147483647;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:rgba(240, 240, 240,0.8);
}
You're looking for the z-index property, not the zIndex property. Try it again with this change and see if it works.
Google uses a z-index of 990 for their top bar, so this should work fine.

Categories