We Keep Coding

Can't change clip-path property on an element

So I have a button with a box shadow, and when I click on it, I want to hide one side of the box shadow. When I change the initial CSS, everything works fine and the box shadow can be changed, but when I use javascript, none of the changes I make to the box shadow work.
HTML:
<button class = "ShowWeather" id = "ShowWeather" onclick = "ShowWeather()"></button>
javascript:
function ShowWeather(){
const Forecast = Get("Forecast"); //get just gets an element by id
const Button = Get("ShowWeather");
const slider = Get('forecast_slider');
if(slider.style.height == "0px"){
slider.style.border = "none";
slider.style.height = `${Forecast.getBoundingClientRect().height}px`;
Button.style.borderRadius = "0vw 0vw 0vw 0vw";
Button.style.borderBottom = "none";
Button.style.clipPath = "inset(-1vh -1vh 0vh -1vh);"; //THIS IS THE PROBLEMATIC LINE
}
else{
slider.style.height = "0px";
Button.style.clipPath = "inset(-1vh -1vh -1vh -1vh);"; //another problematic line
setTimeout(closeWeather, 300);
}
}
CSS:
.ShowWeather{
width: 16.15vw;
background: white;
border-top: none;
padding-top: 1vh;
position: relative;
bottom: 0.8vh;
border-radius: 0vw 0vw 1vw 1vw;
border: none;
box-shadow: 0vh 0.5vh 1vh gray;
clip-path: inset(-1vh -1vh 0vh -1vh);;
}
Everything besides the two problematic lines work perfectly, only changing the clip-path does not work. I probably made some tiny mistake but I have been trying to debug this 1 line of code for multiple hours aaaAAAA

you can try to remove the semicolon at the end:
Button.style.clipPath = "inset(-1vh -1vh -1vh -1vh)";

How do I get a CSS object to move using Javascript?

I am trying to make a JavaScript game and I need a CSS object with an animation to move in place of an object I originally made using JavaScript. Basically, what I want to happen is have my "sword" CSS object move with my player object when I have it Unsheathed. I have been looking for a while and they only give me a result as to were it will be when the page is loaded. I need the sword to always be moving with the player. If my code is needed, tell me, and I will provide it. If you have any questions, feel free to ask. I am pretty new so go easy on the terrible JavaScript that may be provided.
PLEASE USE AN EXAMPLE RELATED TO MY CODE!
if you don't I probably wont understand what is going on....
Thank You in Advance

Focusing the the following element of your example I am only going to address CSS here...
....
<div class="player"></div>
<div id="swordl"></div>
<div id="swordr"></div>
....
To move #swordl and #swordr along with .player you can take advantage of a feature of the CSS position attribute.
When a containing element has CSS position: relative; children of that element with the CSS position: absolute; are positioned with reference to the top-left corner of the parent.
In the following example #player would be the parent, and #swordl and #swordr would be the children...
....
<div id="player">
<div id="swordl"></div>
<div id="swordr"></div>
</div>
....
/* CSS */
#player {
position: relative;
}
#swordl, #swordr {
position: absolute;
}
#swordl {
left: 4px;
top: 2px;
}
#swordr {
left: 12px;
top: 2px;
}
Note the change of class to id in 'player'
Now, whenever you animate the position of #player the two #swords will maintain their position relative to the top-left corner of their containing parent element: you will not have to animate the position of #swords explicitly.
Hope that helps. ;)
CSS position # MDN

You can use the transistion. I have included a couple examples. One example is just JavaScript, the other is not just JavaScript.
//Get Element By Id of 'movingdiv'
var div = document.getElementById('movingdiv');
//Create the timeout (not required)
setTimeout(function() {
//Change the style.top to 50%, You can also do this in px
div.style.top = '50%';
//Change the style.top to 50%, You can also do this in px
div.style.left = '50%';
//Add the transform so it can be centered in the viewport
div.style.transform = 'translate(-50%,-50%)';
//Add the timeout below in milliseconds.
}, 1000)
#movingdiv {
width: 100px;
height: 100px;
background: black;
position: absolute;
top: 10px;
left: 10px;
transition: all 2s;
}
<div id='movingdiv'></div>
//Create a div
var div = document.createElement('div');
//Give the div some style. IMPORTANT: notice the transition
div.style = 'width: 100px; height: 100px; background: black; position: absolute; top: 10px; left: 10px; transition: all 2s;';
//Append the div to the body
document.body.appendChild(div);
//Create a timeout for the div to move
setTimeout(function() {
//Change the style.top to 50%, You can also do this in px
div.style.top = '50%';
//Change the style.top to 50%, You can also do this in px
div.style.left = '50%';
//Add the transform so it can be centered in the viewport
div.style.transform = 'translate(-50%,-50%)';
//Add the timeout below in milliseconds.
}, 1000)

How do I keep a position:fixed element next to the center element

I am new to CSS/HTML/Javascript. I sort of just tweak and see what works and what doesn't, so I don't really get how to make my element that is in a fixed position to stay relative to the center page. The reason, is that when I zoom out, it stays in the right of the page, which I understand as I have read that fixed position do not have a parent.
So how can I keep it fixed to the position it was in previously.
window.onscroll = function() {
Navmove()
};
var box = document.getElementById("Navfixed");
var stock = box.offsetTop;
var box1 = document.getElementById("Navfixed1");
var stock1 = box1.offsetTop;
function Navmove() {
if (window.pageYOffset > stock) {
box.classList.add("Sticky");
box1.classList.add("Sticky1");
} else {
box.classList.remove("Sticky");
box1.classList.remove("Sticky1");
}
}
.Navnormal a:link {
color: #296da0;
}
.Navhover a:hover {
color: #4386bc;
background: #bcbcbc;
}
.Navbox {
margin: auto;
width: 13em;
height: 26.5em;
color: #b53206;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.7);
border-color: #b53206;
padding: 1em;
border-radius: 0px 15px 15px 0px;
}
.Navbox2 {
margin-top: -225em;
margin-left: 102em;
}
.Container1 {
top: 0;
bottom: 0;
}
<div class="Container1">
<div class="Navbox2">
<div id="Navfixed" class="Navbar Navnormal Navhover Navbox">
<span class="Subheader"><strong><u>Directory</u></strong></span>
<p>
<span class="Borderfix1">
Home</span>
About Us
Research
Data Repository
Media
Other tools
<span class="Borderfix2">
Contact Us</span>
</div>
</div>
```
<div id = "Navfixed1" class = "Navigate Imagehover">
<ul style = "list-style-type: none;">
<div class = "Donate">
<li><img src = "Discord.png"></img></li>
<li><img src = "patreon.png"></img></li>
<li><img src = "Paypal.jpg"></img></li>
</div>
<div class = "Donate2 Donate3">
<li><img src = "f_logo_RGB-Blue_58.png"></img></li>
</div>
</ul>
</div>
```
Essentially this is a scroll for my navbar, however, it works perfectly when at 100% zoom level, but once it gets past the Yoffset it starts sticking to the right because of the fixed position. How can I fix this? Thank you.

First of all, you say that your element is position fixed but I do not see any position: fixed; on your CSS.
For what I understand from your explanation, you should do something like the next:
.Navbox2 {
position: fixed;
top: 50%;
margin-top: -14.25em; /* Negative half of height of the element. */
}
This will position your element fixed relative to the web browser window, sticked to the top-left corner, It does not depend on any parent becase what it is looking for to be positioned is, as I said before, the web browser window.
About the top:50%; and margin-top: -14.25em; is used to position a fixed element in the middle of the screen.
The top:50%; is standard and the margin-top has to be the negative half of the height of the element. Because I see that your element has height: 26.5em; and padding:1em this means that the real height is 28.5em, you have to sum one em of the padding from the top, and other em from the bottom.
So now you can see your element fixed and in the middle of the screen.
Example on fiddle:https://jsfiddle.net/Samuel10F/msha7zot/23/
I understand that you want something like this but I am not 100% sure with your explanation, if there is something else just tell me :)

Centre Lottie SVG to a Header element

I have an animation from Lottiefiles (in JSON format), which is then converted into an animated SVG document by the Lottie framwork. However, I can't seem to position the SVG document with the header tag. I'd like it to be beside the text.
I tried to search existing threads for similar things, but none of these worked, except for one (sort of). This included adding the SVG into a div, inside the header itself. However, when I tried this, the SVG document is fixed in place, so while it worked for shorter text (less than 6 characters), if the text was longer, the SVG would appear underneath, instead of moving to the end of the text.
I also have to manually assign the style to the SVG file through Javascript in a timeout, because the SVG document doesn't exist initially.
This is the actual header code (in PugJS).
h1(class="channel-header" style="margin-bottom: 36px; width: 96px; margin: auto;") #{channel}
if premium
div(id="bodyanim" class="badge baseline")
Here is the SASS for the header and inner div tag:
.badge
display: inline-flex
align-self: center
height: 70%
.badge svg, .badge img
height: 1em
width: 1em
fill: currentColor
z-index: -1
position: absolute
left: 0
top: 0
.badge.baseline svg, .badge img
top: .125em
position: relative
.channel-header
margin: 0 0 16px 0
padding: 0
line-height: 1
font-weight: normal
position: relative
height: 45px
And here's the JS setting the SVG object, and setting its CSS after a timeout.
var animData = {
wrapper: document.getElementById('bodyanim'),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: '/anims/4768-trophy.json'
};
var anim = bodymovin.loadAnimation(animData);
setTimeout(function () {
var svg = animData.wrapper.getElementsByTagName("svg")[0];
svg.style.position = "absolute";
svg.style.left = "0";
svg.style.top = "0";
svg.style.zIndex = -1;
svg.style.marginLeft = "65%";
}, 100);
When I run the site with this code, the header works for any text shorter than 7 characters, but if there's more, the header tries to "push" itself above the SVG document, and the SVG remains in position behind it instead of moving along with the text.
You can see an example of this on this site (you can either edit the endpoint, i.e. /channel/anythinghere or edit the tag client-side):
http://themadgamers.co.uk:3000/channel/ItsMike

Why do you set a fixed width for your h1?
h1(class="channel-header" style="margin-bottom: 36px; width: 96px; margin: auto;")
If you remove the 96px width restriction, longer strings no longer push the trophy below the user names.
As for the manual need to style the SVG via JavaScript...
setTimeout(function () {
var svg = animData.wrapper.getElementsByTagName("svg")[0];
svg.style.position = "absolute";
svg.style.left = "0";
svg.style.top = "0";
svg.style.zIndex = -1;
svg.style.marginLeft = "65%";
}, 100);
Consider adding a new class to your CSS.
.mySvg {
position: absolute;
left: 0;
top: 0;
z-index: -1;
margin-left: 65%;
}
Then you should be able to simplify the JavaScript to:
setTimeout(function () {
var svg = animData.wrapper.getElementsByTagName("svg")[0];
svg.className = "mySvg";
}, 100);

How to get hold of div on mousemove?

JSFiddle code
I am trying to get hold of div with blue lines when I move the mouse pointer within a distance of 20px from the div. I am able to get hold of the div with blue lines only when the mouse pointer is on that div. Basically, selecting a div using the mouser pointer is difficult as the div width is only 1px which cannot be changed.
I am executing the below code but still not able to catch hold of the div which is 20px away from either right or left of the mouse pointer.
Note:The div mentioned above indicated the div with blue lines and not the gray box.
//Div positions and their id has been added to map
var hmap = new Map();
hmap.set("hguide1",96);
hmap.set("hguide2",284);
hmap.set("hguide3",520);
var vmap = new Map();
vmap.set("vguide1", 96);
vmap.set("vguide2",384);
vmap.set("vguide3",720);
$(document).mousemove(function(e){
var mx = e.pageX, my = e.pageY;
//Catch hold of vertical div's
for (var [key, value] of vmap) {
var dist = value - mx;
if(dist >= -20 && dist <= 20){
$('.'+key).css({width: '10px', left:});
} else {
$('.'+key).css({width: '1px'});
}
}
//Catch hold of horizontal div's
for (var [key, value] of hmap) {
var dist = value - my;
if(dist >= -20 && dist <= 20){
$('.'+key).css({height: '10px'});
} else {
$('.'+key).css({height: '1px'});
}
}
});
I looking for a way thru which I can catch hold of the div, which is 20px away from either the left or right side of the mouse pointer, and drag it.
Any suggestions much appreciated.

You can use CSS styling to get this result. We set the ::after size to 100% - 20px on either the left or top, depending if it's the horizontal or vertical line. We then set our width or height, depending on if we're adjusting the row or column, to either 100% or the buffer size(40px, because we want 20px on either side of the line).
I realize that sounds a little confusing, so I'll split them up. Here's the vertical:
.vguide1,.vguide2,.vguide3 {
border-left: 1px solid blue;
padding-bottom: 20px;
position: absolute;
width:1px;
height:650px;
}
.vguide1::after,.vguide2::after,.vguide3::after {
content: '';
position: absolute;
left: calc(50% - 20px);
width: 40px;
height: 100%;
cursor: col-resize;
}
Horizontal:
.hguide1,.hguide2,.hguide3 {
padding-right: 20px;
position: absolute;
width:850px;
height:1px;
border-top: 1px solid blue;
}
.hguide1::after,.hguide2::after,.hguide3::after {
content: '';
position: absolute;
top: calc(50% - 20px);
width: 100%;
height: 40px;
cursor: row-resize;
}
With shading to show the hit box: https://jsfiddle.net/Ljxpj5bt/27/
Without hit box: https://jsfiddle.net/Ljxpj5bt/28/