We Keep Coding

Is it possible to create a popup that open automatically after 10 sec of delay

I want to create a popup that shows after 10 sec delay after customer land of product page and if they click outside popup should get closed
Here is my html and css. Can you help me with the JS?
css -.overlay_flight_traveldil {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 5;
}
.overlay_flight_traveldil:target {
visibility: visible;
opacity: 100;
z-index: 5;
}
.popup_flight_travlDil {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
position: relative;
transition: all 2s ease-in-out;
z-index: 5;
}
.popup_flight_travlDil .close_flight_travelDl {
position: absolute;
top: 25px;
right: 20px;
transition: all 200ms;
font-size: 80px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
.popup_flight_travlDil .content_flightht_travel_dil {
max-height: 60%;
overflow: auto;
}
#media screen and (min-width: 480px) {
.popup_flight_travlDil {
width: 33%;
z-index: 5;
}
}
#media screen and (max-width: 480px) {
.popup_flight_travlDil {
width: 90%;
z-index: 5;
}
<div id="popup_flight_travlDil3" class="overlay_flight_traveldil">
<div class="popup_flight_travlDil">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
<a class="close_flight_travelDl" href="#">×</a>
<div class="content_flightht_travel_dil">
</div>
</div>
</div>

Start with the div hidden
Then check what is clicked
I changed the X to a button since there is no need to make it a link. It is not going anywhere. And your framework registers it as a navigation so the back button is affected
window.addEventListener("DOMContentLoaded", () => {
const pop = document.getElementById("popup_flight_travlDil3");
setTimeout(() => pop.hidden = false, 1000); // show after 1 second - change to 10000 to get 10 secs
document.addEventListener("click", (e) => { // what did you click?
const tgt = e.target;
if (tgt.matches(".close_flight_travelDl") || // the close button
!e.target.closest(".popup_flight_travlDil")) { // or something else not the advert
pop.hidden = true;
}
})
})
css -.overlay_flight_traveldil {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 5;
}
.overlay_flight_traveldil:target {
visibility: visible;
opacity: 100;
z-index: 5;
}
.popup_flight_travlDil {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
position: relative;
transition: all 2s ease-in-out;
z-index: 5;
}
.popup_flight_travlDil .close_flight_travelDl {
position: absolute;
top: 25px;
right: 20px;
transition: all 200ms;
font-size: 80px;
font-weight: bold;
color: #000000;
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
.popup_flight_travlDil .content_flightht_travel_dil {
max-height: 60%;
overflow: auto;
}
#media screen and (min-width: 480px) {
.popup_flight_travlDil {
width: 33%;
z-index: 5;
}
}
#media screen and (max-width: 480px) {
.popup_flight_travlDil {
width: 90%;
z-index: 5;
}
<div id="popup_flight_travlDil3" class="overlay_flight_traveldil" hidden>
<div class="popup_flight_travlDil">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
<button type="button" class="close_flight_travelDl">×</button>
<div class="content_flightht_travel_dil">
</div>
</div>
</div>

setting timeout for 10 seconds & adding class of .popup which is defined in css with visiblity:visible & opacity:1 & adding click event on close Button and if user clicks it removes the .popup class making it hidden again
setTimeout(function() {
document.querySelector(".overlay_flight_traveldil").classList.add("popup");
}, 10000);
let closebtn = document.querySelector(".close_flight_travelDl");
closebtn.addEventListener("click", (event) => {
document.querySelector(".overlay_flight_traveldil").classList.remove("popup");
})
.overlay_flight_traveldil {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 5;
animation: popup 2s 1;
}
.popup {
visibility: visible;
opacity: 1
}
.overlay_flight_traveldil:target {
visibility: visible;
opacity: 100;
z-index: 5;
}
.popup_flight_travlDil {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
position: relative;
transition: all 2s ease-in-out;
z-index: 5;
}
.popup_flight_travlDil .close_flight_travelDl {
position: absolute;
top: 25px;
right: 20px;
transition: all 200ms;
font-size: 80px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
.popup_flight_travlDil .content_flightht_travel_dil {
max-height: 60%;
overflow: auto;
}
#media screen and (min-width: 480px) {
.popup_flight_travlDil {
width: 33%;
z-index: 5;
}
}
#media screen and (max-width: 480px) {
.popup_flight_travlDil {
width: 90%;
z-index: 5;
}
<div id="popup_flight_travlDil3" class="overlay_flight_traveldil">
<div class="popup_flight_travlDil">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/Mcaffeine-5.jpg?v=1664169142" alt="gh" width="100%" height="80%" />
<a class="close_flight_travelDl" href="#">×</a>
<div class="content_flightht_travel_dil">
</div>
</div>
</div>

You can do that just by making the popup invisible by adding the following lines
.popup_flight_travlDil {
visibility: hidden;
opacity: 0;
}
And then, you would need some JavaScript to make the popup visible after 10 seconds. For that,
const showPopup = () => {
const popup = document.getElementsByClassName("popup_flight_travlDil")[0];
popup.style.opacity = 1;
popup.style.visibility = "visible";
};
setTimeout(showPopup, 10000);
Here, the function showPopup finds the div that was made invisible by using CSS, and then makes it visible. Whereas, the line setTimeout(showPopup, 10000); calls the showPopup function after 10 seconds. Note that the setTimeout function takes 2 parameters, the function to call and time interval(in milliseconds) to wait before calling that function.

Image slides that fades when navbar is hit

I'm trying to make a replica of the slider on top of this google page: https://www.google.com/doodles
If someone could make a replica of the image slider with the bars, that would be great! I've tried to on my own but can't figure it out. Here's my try if it's helpful!
JAVASCRIPT:
<script>
var imgArray = [
'images/img1.gif',
'images/img2.gif',
'images/img3.jpg',
'images/img4.jpg'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function () {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
}, 500);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
}
</script>
HTML:
<img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">
<div id="navigation">
<label for="r1" class="bar" id="bar1"></label>
<label for="r2" class="bar" id="bar2"></label>
<label for="r3" class="bar" id="bar3"></label>
<label for="r4" class="bar" id="bar4"></label>
</div>
</div>
CSS: --> Honestly, I wrote so much CSS that I don't know which ones relate, so I might have left a few out. Need to clean that up - Apologize in advance
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
color: #009cdc;
transition: all 0.3s ease 0s;
}
.nav_links li:hover a {
color: #2772ff;
}
#top-content {
display: block;
}
latest-nav li#latest-nav-1 {
background-color: #fa4842;
}
#latest-nav li.off {
border-top: 15px solid #fff;
}
#latest-nav li.off {
height: 5px;
opacity: 0.35;
}
#latest-nav li {
cursor: pointer;
float: left;
height: 5px;
transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
width: 16.6%;
}
.slidershow {
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
}
#navigation {
position: absolute;
bottom: 35px;
left: 60%;
transform: translateX(-50%);
display: flex;
}
.bar {
border-top: 15px solid #fff;
width: 200px;
opacity: 0.35;
height: 5px;
cursor: pointer;
transition: 0.4s;
}
.slides {
width: 500%;
height: 100%;
display: flex;
margin-top: 30px;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
width: auto;
}
latest .container img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
}
#bar1 {
background-color: #3875fc;
}
#bar2 {
background-color: #ff8809;
}
#bar3 {
background-color: #19be29;
}
#bar4 {
background-color: #fa4842;
}
Thanks so much!

I'm always happy to see newcomers devoting time to study. First of all, good job! Unfortunately I'm not a very good teacher, but I put together a little example of this slider you're working on. You can check it clicking here.
Basically what is going on is:
The HTML is divided into two sections: the slider & the navbar.
I hide all slides by default applying a display: none to them. They're only visible when I add an additional class.
Detect the hover method via javascript. Whenever the navbar item is hovered on, you will detect its position (I added a data attribute called data-position to find out which position it is) and show the correspondent slider.
So, if the navbar has the data-position of 2, I know that I must show the second slide. To do that, I use .slider .slider-item:nth-child(2).
As I mentioned I'm not the best at explaining, but I hope this helps you out a little bit. Keep studying and don't give up!
HTML:
<div class="wrapper">
<div class="slider">
<div class="slider-item slider-item--visible">
hello item 1
</div>
<div class="slider-item">
hello item 2
</div>
<div class="slider-item">
hello item 3
</div>
</div>
<nav class="navbar">
<span class="navbar-item navbar-item--selected" data-position="1"></span>
<span class="navbar-item" data-position="2"></span>
<span class="navbar-item" data-position="3"></span>
</nav>
</div>
CSS
.wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
display: block;
}
/* Slider */
.slider{
max-width: 100%;
width: 100%;
}
.slider-item{
display: none;
}
.slider-item--visible{
display: block;
}
/* Navbar */
.navbar{
max-width: 100%;
display: flex;
align-items: flex-end;
height: 8px;
}
.navbar-item{
max-width: 33.3%;
width: 100%;
display: block;
height: 5px;
cursor: pointer;
opacity: .5;
transition: all .32s ease;
}
.navbar-item--selected{
height: 8px;
opacity: 1;
}
/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
background: salmon;
}
.navbar-item:nth-child(2){
background: lightblue;
}
.navbar-item:nth-child(3){
background: #19be29;
}
Javascript
const $navbars = document.querySelectorAll(`.navbar-item`);
function removeSelected(){
const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
if (!$selected){
return;
}
for (let each of $selected){
each.classList.remove("navbar-item--selected");
each.classList.remove("slider-item--visible");
}
}
for (let each of $navbars){
each.addEventListener("mouseover", function(){
removeSelected();
const position = each.getAttribute("data-position");
const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
each.classList.add("navbar-item--selected")
$item.classList.add("slider-item--visible");
});
}

JS slider error

jQuery(document).ready(function($) {
var sliderContentCount = $(".slider-container").length;
$(".slider-wrap").css("width", sliderContentCount + "00%");
var sliderContentWidth = 100 / sliderContentCount;
$(".slider-container").css("width", sliderContentWidth + "%");
var marginLimit = -(sliderContentCount - 1) * 100;
var marginRight = 0;
var marginLeft = 0;
$(".right-nav").click(function() {
if (marginRight != marginLimit) {
marginRight += -100;
}
var slideLeft = marginRight + "%";
$(".slider-wrap").css("margin-left", slideLeft);
if (marginRight == marginLimit) {
$(".right-nav").click(function() {
$(".slider-wrap").animate({
"margin-left": "0%"
}, 1000);
marginRight = 0;
})
}
})
$(".left-nav").click(function() {
if (marginRight <= 0) {
marginRight += 100;
if (marginRight <= 0) {
marginLeft = marginRight;
}
}
var slideRight = marginLeft + "%";
$(".slider-wrap").css("margin-left", slideRight);
})
});
.left-nav {
z-index: 1;
position: absolute;
top: 50%;
background-color: black;
float: left;
text-align: center;
color: white;
padding: 2%;
cursor: pointer;
}
.right-nav {
z-index: 1;
padding: 2%;
position: absolute;
top: 50%;
background-color: black;
right: 0.5%;
text-align: center;
color: white;
cursor: pointer;
}
.slider-outer-wrap {
height: 100%;
overflow: hidden;
border: 2px solid black;
}
.slider-wrap {
float: left;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.slider-container {
width: 25%;
float: left;
text-align: center;
}
.slider-container img {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-outer-wrap">
<div class="left-nav">
<</div>
<div class="slider-wrap">
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg">
</div>
</div>
<div class="right-nav">></div>
The problem is when user clicks on the right-nav at last slide, it's margin-left becomes 0 and after this my right-nav js stops working (it doesn't slide anymore).
Please let me know where I'm doing wrong or how i can improve this. And please give suggestions to make it autoplay on load with these codes only.
thank you in advance.

Responsive Hover Box over Responsive Image

I've been using a tutorial for making a hover box go over a set of images.
The article can be found here.
Got it working perfectly, except I want my images and the hover to be responsive to window size (just via width is fine), I've tried looking up how to do this. Seems like it might be a case of using % rather than a fixed value, but not experienced enough to know how to execute the markup. Even if I get the images to re-size the hover box doesn't re-size with them.
Is it possible to add something to the existing CSS to make this happen.
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 150px;
margin: 0 1em 1em 0;
position: relative;
width: 150px;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
<ul class="img-list">
<li>
<a href="#">
<img src="http://placehold.it/150x150">
<span class="text-content"><span>Text</span></span>
</a>
</li>
</ul>

you can use only width to keep image ratio.
you can use display:block for a and img, and use flex to center text.
not too sure about the responsive behavior you look for for, you can use a % width on li or a mix a % width + min-width and max-width.
example with % width set at 50% (and max/min width ) , it can be any other value and units.
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
vertical-align:top;
margin: 0;
position: relative;
width:50%;
max-width:100vh;
min-width:60vh;
}
ul.img-list li a, ul.img-list li a img {
display:block;
width:100%;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display:flex;
left: 0;
right:0;
position: absolute;
top: 0;
bottom:0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.text-content span {
margin:auto;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
* {
margin:0;
padding:0;
}
<ul class="img-list">
<li>
<a href="#">
<img src="http://placehold.it/150x150">
<span class="text-content"><span>Text</span></span>
</a>
</li>
</ul>

You could also do it like this, using pseudo elements to display the overlay content on the image. This method is fully responsive.
.wrapper {
width: 100%;
overflow: auto;
padding: 1%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
/* Columns floated left */
.col-4 {
width: 33.3%;
float: left;
padding: 1%;
box-sizing: border-box;
height: auto;
overflow: hidden;
}
/* Container to make absolute positioning easier on psuedo element */
.image_container {
position: relative;
overflow: auto;
padding: 0;
margin: 0;
}
.image_container img {
width: 100%;
display: block;
}
/* Structure for ::before element */
#img_1::before,
#img_2::before,
#img_3::before {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
right: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
display: block;
opacity: 0;
color: white;
padding: 10px;
transition: 0.5s ease;
}
/* Hover state for container to show ::before on mouseover */
.image_container:hover#img_1::before,
.image_container:hover#img_2::before,
.image_container:hover#img_3::before {
opacity: 1;
cursor: pointer;
}
/* Text for ::before elements */
#img_1::before {
content: 'Image Title 1';
}
#img_2::before {
content: 'Image Title 2';
}
#img_3::before {
content: 'Image Title 3';
}
<div class="wrapper">
<div class="col-4">
<div class="image_container" id="img_1">
<img src="https://images.unsplash.com/reserve/B6PfiQ8QoSzmsZYOCkSB__DSC0530-1.jpg?dpr=1&auto=format&fit=crop&w=1500&h=1004&q=80&cs=tinysrgb&crop=">
</div>
</div>
<div class="col-4">
<div class="image_container" id="img_2">
<img src="https://images.unsplash.com/photo-1418985991508-e47386d96a71?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=">
</div>
</div>
<div class="col-4">
<div class="image_container" id="img_3">
<img src="https://images.unsplash.com/photo-1476362555312-ab9e108a0b7e?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=">
</div>
</div>
</div>
You could also set the images as a background-image for the div which would give you more control over the text in the overlay, if you needed it.

CSS3 transition not working on JS scrollup fixed div transition

I was trying a javascript function to fix a part of header on scrollup. It's working fine but I want to make the movement of fixed part smooth by adding transition property of CSS3. I tried but its not working. Request your help plz.
window.onscroll = myFunction;
function myFunction() {
if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("hdr_nav").style.position = "fixed";
} else {
document.getElementById("hdr_nav").style.position = "";
}
}//end function
*{margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; }
body {height: 3000px;}
.hdr_box {float: left; width: 100%; height: 65px; background: #eff1f2; position: relative; padding: 0; margin: 0;}
.hdr_box > .row1 {
float: left;
width: 100%;
height: 20px;
padding: 15px;
}
nav {
float: left;
width: 100%;
height: auto;
background: #e4e6e8;
position: relative;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
}
nav ul {
list-style: none;
float: left;
width: 100%;
padding: 0;
margin: 0;
}
nav ul li {
float: left;
width: auto;
border-right: solid 1px #cacaca;
}
nav ul li a {
float: left;
width: auto;
padding: 16px;
text-align: center;
font-size: 14px;
}
<div class="hdr_box" id="hdr">
<div class="row1" id="hdr_row1"><h3>CompanyName</h3></div>
</div>
<nav id="hdr_nav">
<ul>
<li>About Us</li>
<li>Business</li>
<li>Our Work</li>
<li>Challenges</li>
</ul>
</nav>

That is because you change the position property from absolute to fixed and that can't be animated / transitioned. Transitions only work for properties with a unit, eg. px, rem, %, or stuff like opacity.
You can fix it however with a keyframe animation:
nav.is-fixed {
position: fixed;
animation: scroll .5s ease-out;
}
#keyframes scroll {
from {
transform: tranlateY(-100%);
}
to {
transform: tranlateY(0%);
}
}
Make sure to prefix #keyframes and transform if needed.
And a little change to the JS:
window.onscroll = myFunction;
function myFunction() {
var scrollAmount = document.body.scrollTop || document.documentElement.scrollTop;
var nav = document.getElementById("hdr_nav");
if(scrollAmount > 200) {
nav.classList.add('is-fixed');
} else {
nav.classList.remove('is-fixed');
}
}
https://jsfiddle.net/41nspon8/3/

add new CSS rule
.nav-fixed {
position: fixed;
-webkit-animation: slideInDown 450ms 1 ease-in-out;
}
#-webkit-keyframes slideInDown {
from {transform: translate(0%, -100%); }
to {transform: translate(0%, 0%); }
}
modify your js code
//document.getElementById("hdr_nav").style.position = "fixed";
document.getElementById("hdr_nav").classList.add("nav-fixed");
} else {
//document.getElementById("hdr_nav").style.position = "";
document.getElementById("hdr_nav").classList.remove("nav-fixed");
https://jsfiddle.net/13m8u7xm/