Develop Reference

The position of the object changed by the JS function?

I have a problem, before adding the JS, just with the HTML and CSS, the two images overlapped well but since I added this function to my code, the concerned image (icon-cart-white) is no longer arranged in the same position and I do not know what to change so that it returns to normal, if you know how to fix this problem I would be very grateful. Thank you
This is before i add the JS
This is after i add the JS
HTML (before the JS) :
<img class="calebasse-icon-cart-white" src="calebasse-white" alt ="white-icon-cart">
<img class="calebasse-icon-cart-black" src="calebasse-black" alt ="black-icon-cart">
HTML (with the JS) :
<iconcart id="iconcart">
<img class="calebasse-icon-cart-white" src="calebasse-white" alt ="white-icon-cart">
</iconcart>
<img class="calebasse-icon-cart-black" src="calebasse-black" alt ="black-icon-cart">
CSS :
.calebasse-icon-cart-white {
position: absolute;
width: 75%;
height: 75%;
z-index: 2;
}
.calebasse-icon-cart-black {
position: absolute;
width: 75%;
height: 75%;
z-index: 1;
}
JS :
let iconcart = document.getElementById('iconcart');
document.addEventListener('scroll', function() {
let scrollPosition = window.pageYOffset;
if (scrollPosition <= 50) {
iconcart.style.opacity = 1 - scrollPosition / 50;
} else {
iconcart.style.opacity = 0;
}
});
I tried to change the position: absolute; to position: relative; to solve the problem but it wasn't better, i thought the problem was the CSS but in fact in not really sure, it can also be the JS.

Solved.
Instead of creating tag i just put the id in the tag and it worked, I don't really know why but it's fine for me. Thank you Pete for helping me with the Minimal, reproducible example article.

How to move iframe behind on div? css

How can we move the iframe behind the div.
Here an sample below, I want to show "custom_title" div in front of the iframe.
It's initially showing but when we click the fullscreen, the "custom_title" div eventually gone.
Someone knows how to achieve this? I have here the codepen
Note: fullscreen icon does not display in the snippet, i don't know why. But you check out the codepen.
.title_container {
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
<div>
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="true" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
</div>

Fullscreen move pulls the video out of the document for the purposes of rendering. This leaves the text you positioned on top of it behind.
To achieve this you would need to make the div fullscreen and not the video (and then you'd need to format the video appropriately to get it to full the div).
I doubt you can override Vimeo's button to achieve that, so you'd need to add your own.

Full Screen option is disabled below so that Users use the button to make the iframe full screen.
To make the iframe full screen and show the div you can use:
Note: Try saving and running the code locally on your device as Stack Overflow's compiler is facing issues runnning it.
//https://jsfiddle.net/jlam55555/o5njka95/6/
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function makeFullScreen() {
document.getElementsByTagName("iframe")[0].className = "fullScreen";
var elem = document.body;
requestFullScreen(elem);
}
.title_container {
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
button{
position: fixed;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
bottom: 20%;
}
iframe.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div>
<!-- Full Sceen option is disabled-->
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" disablefullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
</div>
<button onclick="makeFullScreen()">Make Full Screen</button>
Or you can disable the controls and use the Vimeo Player.js to add more functionalities and I ,also, think that the problem can be solved without hiding the full-screen option and using the button to make the iframe full screen, by the Vimeo Player.js, but that was complicated, so, you can try, but I am not sure.

I'm afraid specifically in this case there is no way to achieve this, because of how fullscreen api is working. If you want some-element to display in fullscreen mode you need this some-element to be inside of DOM element which is displaying in fullscreen.
In your case you need .title_container to be inside vimeo player's element, but you could not put it inside iframe unless there is no specific api to do this.
Read more about fullscreen on MDN https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide
Simple example of how it can be done by adding custom fullscreen button.
Try to run on your local environment, fullscreen seems to be not working on stackoverflow:
let $btn = document.querySelector('#toggle'),
$iframe = document.querySelector('iframe'),
$video = document.querySelector('#video');
$btn.addEventListener('click', function() {
if (document.fullscreenElement) {
document.exitFullscreen();
return;
}
$video.requestFullscreen();
})
document.addEventListener('fullscreenchange', (event) => {
if (document.fullscreenElement) {
$btn.innerHTML = 'Exit fullscreen'
} else {
$btn.innerHTML = 'Fullscreen'
}
});
#video {
position: relative;
display: inline-flex;
}
#video:fullscreen iframe {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.title_container {
position: absolute;
z-index: 9999;
left: 50%;
transform: translateX(-50%);
top: 10%;
background-color: white;
color: black;
}
#video:fullscreen button {
position: absolute;
}
button {
position: absolute;
bottom: 4px;
right: 24px;
}
<div id='video'>
<iframe src="https://player.vimeo.com/video/347119375?color=ef2200&byline=0&portrait=0" frameborder="0" allow="autoplay; picture-in-picture" title="0vid1.mp4" data-ready="true"></iframe>
<div class="title_container">Custom Title</div>
<button id='toggle'>Fullscreen</button>
</div>

modals wont close when created using template literals

I have an image gallery which has modals for each image.
The gallery and modals are created in javascript using template literals.
The modals pop ups are different html files imported using iframe.
For some reason the modals won't close when clicking outside.
I tried creating the iframes inside the html instead of using template literals and I had no problems in that case, just when using javascript for making them.
Here is an example of what is happening.
THIS GITHUB EXAMPLE
This is the modal function used in both cases:
function modalLinks(tempgal){
let btnId = "btn" + tempgal.imgn;
let modId = "id" + tempgal.imgn;
let getBtnId = document.getElementById(btnId);
let getModId = document.getElementById(modId);
getBtnId.onclick = function() {
console.log('click: btn: ' + this.id + ', modal: ' + getModId.id);
getModId.classList.toggle('show-popup');
}
/* to dispose the popup on click */
getModId.onclick = function() {
console.log(this.id +" it's OK");
this.classList.toggle('show-popup');
}
}
The moon and its modal are created inside of the HTML.
The other two images (sorry if they don't show properly) are created using template literals, and, as you can see (if you already saw the example), the moon modal works fine but the other two don't.
It'll be great if someone please tell me what is happening.
Thanks for advance.

Ok, I just experimented changing things and moving others and got the solution.
When making modals with external html's and importing them with iframe, putting the iframe within a div is the best choice.
The iframed modal shoul look like this
<div id="modalid" class="modal-window">
<iframe class="modal-wrap" src="thelink" frameborder="0"></iframe>
</div>
the css like this
.modal-window{
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
}
.modal-wrap{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 50%;
height: 50%;
}
and the html imported must have this class
.modalcontent{
position: absolute;
z-index: 3;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%
}

How to not make div stack?

I am using this code to make the images and text move around the screen. My problem is that sometimes the images and text land on eachother and stack up, how do i make it so its not possible to land on eachother?
$(document).ready(function() {
animateDiv('.a');
animateDiv('.b');
animateDiv('.c');
animateDiv('.d');
animateDiv('.e');
animateDiv('.f');
animateDiv('.g');
animateDiv('.h');
animateDiv('.i');
});
function makeNewPosition() {
var h = $(window).height() - 60;
var w = $(window).width() - 60;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv(myclass) {
var newq = makeNewPosition();
$(myclass).animate({
top: newq[0],
left: newq[1]
}, 2000, function() {
animateDiv(myclass);
});
};
div.a {
width: 50px;
height: 50px;
position: fixed;
color: Navy;
}
div.b {
width: 50px;
height: 50px;
position: fixed;
color: red;
}
div.c {
width: 50px;
height: 50px;
position: fixed;
color: Fuchsia;
}
div.d {
width: 50px;
height: 50px;
position: fixed;
color: SpringGreen;
}
div.e {
position: fixed;
}
div.f {
position: fixed;
}
div.g {
position: fixed;
}
div.h {
position: fixed;
}
div.i {
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>MOCKO</div>
<div class='b'>MOCKO</div>
<div class='c'>MOCKO</div>
<div class='d'>MOCKO</div>
<div class='e'><img src="image/image1.png"></div>
<div class='f'><img src="image/image2.png"></div>
<div class='g'><img src="image/image3.png"></div>
<div class='h'><img src="image/image4.png"></div>
<div class='i'><img src="image/image5.png"></div>
Thanks beforehand, if you can help me, please do! My name is Lukas and I am not so good at coding.

So you are effectively randomly placing fixed elements on the screen, that's why they overlap occasionally.
There are several different ways to prevent that, but it just depends on what your end goal is.
If you really want the random placement approach without overlaps, you will have to run a check in makeNewPosition against all existing locations to determine if their coordinates are overlapping, and if so then regenerate coordinates. You would need to determine the edges of both the new placement and the old placement then compare them.
Personally, I think that will be a fragile and overly complicated way to do things. I would encourage you to look at other possible solutions other than the random generation, perhaps a different layout.
Also #hungerstar has a great comment. This is essentially collision detection. It can get heavily involved to do this well and answer your particular problems.
Here is a helpful SO link that explains a basic approach: jQuery/JavaScript collision detection
And here is a working example on jsfiddle: https://jsfiddle.net/ryanoc/TG2M7/
I can dive into a specific use case if you'd like. Not sure what all to post since I'm not sure what your end goal is.

how to i get the image to center in my gallery

I have made a simple slider gallery for my site but have found that when I click next the image updates but it does not centre until I have done a full cycle of the images
how can i get the images to align from the start?
HERE IS THE JS FIDDLE > http://jsfiddle.net/8pScd/4
HTML
<div class="view_gallery">view gallery</div>
<div class="prev control"><<</div>
<div class="next control">>></div>
<div class="gallery">
</div>
<div class="overlay"></div>
CSS
.overlay{
display: none;
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
z-index: 100;
}
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
left: 50%;
background: #fff;
}
.control{
position: absolute;
top: 200px;
z-index: 300;
color: #fff;
text-transform: capitalize;
font-size: 2em;
cursor: pointer;
}
.prev{left: 0;}
.next{right:0;}
JQUERY
//images
var pics = new Array();
pics[0] = "cars.jpg";
pics[1] = "cats.png";
pics[2] = "dogs.png";
pics[3] = "bus.jpg"
//total amount of pictures to display
var pictot = pics.length-1;
var nxt = $(".next"),
prv = $(".prev"),
view = $(".view_gallery"),
gal = $(".gallery"),
overlay = $(".overlay"),
num = 0;
//view gallery
view.click(function(){
overlay.show();
gal.show();
// Start gallery off on the first image
gal.html('<img src="' + pics[0] + '" />');
});
nxt.click(function(){
// If on the last image set value to 0. Else add 1
if (num == pictot){num = 0;}else{num++;};
update();
});
prv.click(function(){
// If on first image set value to last image number. Else minus 1
if (num == 0){num = pictot;}else{num--;}
update();
});
function update () {
// update image with next/previous
gal.html('<img src="' + pics[num] + '" />');
//center image (not working very well)
var x = gal.width()/2;
gal.css("marginLeft", -x);
};
//hide
overlay.click(function(){
gal.hide();
$(this).hide();
});

The problem you have is that the "update" function is called immediately after clicking on prev/next. The image has not yet been loaded, so the code does not actually know the new gal.width yet. That's why it works after a full round: the images are now in the cache, and therefore already available.
The best solution would be to use javascript Image objects to preload the pictures; an easier way but possibly problematic is to use the 'load' event (it may not work well in all browsers).

You can align your gallery div with some simple css hack.
1)first define width. (you can define dynamic width with jquery).
2)add position:absolute;
3)add left:0 , right:0;
4)add margin:0 auto;
final code looks like this.
.gallery {
background: none repeat scroll 0 0 #FFFFFF;
left: 0;
margin: 0 auto !important;
padding: 10px;
position: absolute;
right: 0;
width: 600px;
z-index: 200;
}

your math is wrong, look at this example http://jsfiddle.net/8pScd/6/
i've just need to change your math at
var x = $('body').width()/2 - gal.width()/2;
gal.css("margin-left", x + 'px');
and i removed this line at your css
left: 50%;
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
background: #fff;
}

Knowing that .gallery is 920px wide, set left: 50%; margin-left: -470px. Also remove the line in javascript which updates margin-left of the gallery container - gal.css("marginLeft", -x);