Develop Reference

How do I add a background image when opening the page on the slider that I have created?

I made a slider which when clicked will change the background. At the beginning of opening the page the background is white. How do I add a background image at the beginning of the page?
I want the first page to have a background image. If one of the features is clicked the background image will change:
after clicking the icon, the image that should have been replaced is not replaced, because I want the first time I open this page there is a background image and after clicking the icon the background image is replaced.
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 6,
speed: 300,
focusOnSelect: true,
variableWidth: true,
variableHeight: true,
adaptiveHeight: true,
arrows: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$(document).on('click', '.sg-feature', function() {
$('.sg-feature-desc').addClass('hidden');
$(this).find('div').removeClass('hidden');
});
let gambar1 = document.querySelector('#gambar1');
let gambar2 = document.querySelector('#gambar2');
let gambar3 = document.querySelector('#gambar3');
let gambar4 = document.querySelector('#gambar4');
let gambar5 = document.querySelector('#gambar5');
let gambar6 = document.querySelector('#gambar6');
let gambar7 = document.querySelector('#gambar7');
gambar1.addEventListener('click', () => {
document.body.style.backgroundImage = "url('image/b1.jpg')";
});
gambar2.addEventListener('click', () => {
document.body.style.backgroundImage = "url('image/b2.jpg')";
});
gambar3.addEventListener('click', () => {
document.body.style.backgroundImage = "url('image/b3.jpg')";
});
gambar4.addEventListener('click', () => {
document.body.style.backgroundImage = "url('image/b4.jpg')";
});
gambar5.addEventListener('click', () => {
document.body.style.backgroundImage = "url('image/b5.jpg')";
});
gambar6.addEventListener('click', () => {
document.body.style.backgroundImage = "url('image/b6.jpg')";
});
gambar7.addEventListener('click', () => {
document.body.style.backgroundImage = "url('image/b7.jpg)";
});
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 625px;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden {
display: none;
}
.hidden1 {
display: none;
}
.hidden2 {
display: none;
}
.hidden3 {
display: none;
}
.hidden4 {
display: none;
}
.hidden5 {
display: none;
}
.hidden6 {
display: none;
}
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/tes.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<img src="image/b1.jpg" style="z-index: -1;">
<section class="background center slider variable-width variable-height ">
<div id="gambar1" class="text-center sg-feature ">
<img class="rounded mx-auto d-block" src="image/eat.png" style="width: 100px; height: 100px;">
<h3>Eat and Come</h3>
</br>
<div id="newpost" class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="gambar2" class="text-center sg-feature">
<img class="rounded mx-auto d-block" src="image/grab.png " style="width: 100px; height: 100px;">
<h3>Grab</h3>
</br>
<div id="newpost1" class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="gambar3" class="text-center sg-feature">
<img class="rounded mx-auto d-block" src="image/experience.png" style="width: 100px; height: 100px;">
<h3>Experience</h3>
</br>
<div id="newpost2" class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="gambar4" class="text-center sg-feature">
<img class="rounded mx-auto d-block" src="image/Secret sale.png" style="width: 100px; height: 100px;">
<h3>Secret Sale</h3>
</br>
<div id="newpost3" class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="gambar5" class="text-center sg-feature ">
<img class="rounded mx-auto d-block" src="image/sale.png" style="width: 100px; height: 100px;">
<h3>Hashtag Sale</h3>
</br>
<div id="newpost4" class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="gambar6" class="text-center sg-feature ">
<img class="rounded mx-auto d-block" src="image/loyalty.png" style="width: 100px; height: 100px;">
<h3>Loyalty</h3>
</br>
<div id="newpost5" class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="gambar7" class="text-center sg-feature">
<img class="rounded mx-auto d-block" src="image/auction.png" style="width: 100px; height: 100px;">
<h3>Auction</h3>
</br>
<div id="newpost6" class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" type="text/javascript" charset="utf-8"></script>
```

The issue is because the #gambarN elements are dynamically loaded by the Slick library. Therefore attaching an event handler to them when the page loads means that event handler is destroyed.
To fix this issue you can bind your logic which updates the background image to both the init and afterChange events. As the names imply, the former runs when the slider is initialised an the latter runs when the slide is changed. Within this event single handler you can read the URL of the image to set as the background from a data attribute in the HTML of the slide.
Also note that using incremental id attributes, such as #gambarN or #newpostN is an anti-pattern which leads to more complex code than necessary. Use common classes, as in the example below.
let $slidesDescriptions = $('.sg-feature-desc');
let slickHandler = (e, slick) => {
$slidesDescriptions.addClass('hidden');
let $slide = $('.sg-feature').eq(slick.currentSlide);
$slide.find('.sg-feature-desc').removeClass('hidden');
$('body').css('background-image', `url('${$slide.data('bg')}')`);
}
let $slider = $('.center').on('init afterChange', slickHandler);
$slider.slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 6,
speed: 300,
focusOnSelect: true,
variableWidth: true,
variableHeight: true,
adaptiveHeight: true,
arrows: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 625px;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden {
display: none;
}
.sg-feature img {
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<section class="background center slider variable-width variable-height ">
<div class="text-center sg-feature" data-bg="https://i.imgur.com/cqAklTF.jpeg">
<img class="rounded mx-auto d-block" src="image/eat.png" />
<h3>Eat and Come</h3>
<br />
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="https://i.imgur.com/epMSRQH.png">
<img class="rounded mx-auto d-block" src="image/grab.png" />
<h3>Grab</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="https://i.imgur.com/qZImY9j.jpeg">
<img class="rounded mx-auto d-block" src="image/experience.png" />
<h3>Experience</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="https://i.imgur.com/cqAklTF.jpeg">
<img class="rounded mx-auto d-block" src="image/Secret sale.png" />
<h3>Secret Sale</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="https://i.imgur.com/epMSRQH.png">
<img class="rounded mx-auto d-block" src="image/sale.png" />
<h3>Hashtag Sale</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="https://i.imgur.com/qZImY9j.jpeg">
<img class="rounded mx-auto d-block" src="image/loyalty.png" />
<h3>Loyalty</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="https://i.imgur.com/epMSRQH.png">
<img class="rounded mx-auto d-block" src="image/auction.png" />
<h3>Auction</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" ="text/javascript" charset="utf-8"></script>

Image Slider using HTML and Javascript

So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page. pls help And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for :p
let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
for( let i=0;i<=images.length;i++){
slide.src = images[i];
if (i == images.length){
i=0;
}
console.log(i);
}
}, 2000);
slide.addEventListener('load',slider);
#import url('https://fonts.googleapis.com/css2?family=Exo+2:wght#100&family=Exo:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght#1,900&display=swap');
.about {
padding: 2rem 0rem;
}
.upper, .lower {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 2rem;
}
.logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#logo{
width: 70%;
}
.image {
background-image: url(scene.gif);
background-size: cover;
width: 36rem;
height: 28rem;
display: flex;
align-items: center;
border-radius: 50%;
border: 3px solid #000;
}
.camp {
position: relative;
top: 2.6rem;
left: 7.3rem;
}
#tent {
width: 30%;
}
#fire {
width: 15%;
position: relative;
top: 1rem;
right: 1rem;
}
.info{
width: 23%;
display: flex;
flex-direction: column;
text-align: center;
padding: 0rem 2rem 2rem 2rem;
margin-top: 4.5rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.info:hover{
transform: scale(1.1);
}
.info h1{
font-family: 'Exo', sans-serif;
font-size: 3rem;
font-weight: black 900;
}
.head1{
text-decoration: white;
}
.info p{
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
font-weight: bold;
}
.slider{
display: flex;
align-items: center;
padding-top: 3.5rem;
}
.slider img{
width: 36rem;
height: 28rem;
border-radius: 50%;
border: 3px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="about.css" />
<title>About Us</title>
</head>
<body>
<div class="about">
<!-- ------------------------------------ -->
<div class="upper">
<div class="logo">
<img src="logo.gif" alt="" id="logo" />
<div class="image">
<div class="camp">
<img src="tent.png" alt="" id="tent" />
<img src="fire.gif" alt="" id="fire" />
</div>
</div>
</div>
<div class="info">
<h1>ABOUT<br>YELPCAMP</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
</div>
<!-- ------------------------------------ -->
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slider">
<img src="camp1.png" alt="" id="slider"/>
</div>
</div>
<!-- ------------------------------------ -->
</div>
</body>
<script src="about.js"></script>
</html>
So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page.
pls help
And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for :p
let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
for( let i=0;i<=images.lenght;i++){
slide.src = images[i];
if (i == images.lenght){
i=0;
}
console.log(i);
}
}, 2000);
slide.addEventListener('load',slider());
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slider">
<img src="camp1.png" alt="" id="slider"/>
</div>
</div>
<!-- ------------------------------------ -->
</div>
</body>
<script src="about.js"></script>

I think you'd better use setInterval than setTimeout for an automatic slider :)
let images = ['https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/260px-PNG_transparency_demonstration_1.png', 'https://static4.depositphotos.com/1006994/298/v/950/depositphotos_2983099-stock-illustration-grunge-design.jpg', 'http://duduf.com/duf/wp-content/uploads/2015/08/Ducati_side_shadow.png'];
let slide = document.getElementById('slider');
const slider = () => {
let i = 0;
setInterval(
function() {
i = i < images.length - 1 ? ++i : 0;
slide.src = images[i];
console.log(i);
}, 2000);
}
slide.addEventListener('load', slider());
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slidercont">
<img src="" alt="" id="slider" />
</div>
</div>

White Space at bottom of page

I'm trying to create a page without scroll and I don't have much content to show on the page while I'm designing a web page I face an issue I try to search and try to follow the step to solve the issue but my issue does not solve so if anyone can help me
the issue I'm facing white space at the bottom of my page after the footer I'm sharing example code with my issue
screenshot of the issue
you can see white space right after the footer
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Document</title>
<style>
.img-thumbnail{
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row d-flex flex-row flex-nowrap">
<div class="col-12 p-0">
<div class="card">
<h4 class="font-weight-light text-center">Bootstrap 4 Horizontal Scrolling Cards with Flexbox</h4>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
Read More
</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
Read More
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="bg-dark-08">
<div class="container-fluid p-0 m-0 bg-dark">
<div class="row no-gutters text-center d-flex justify-content-center">
<div class="p-2">
<p class="text-light text-center">Example Address</p>
<p class="text-light text-center">example#example.com</p>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
Thank you

You should make use of the #media query. If the screen is smaller than your content, make the footer relative. If the screen is bigger than your content, use position absolute.
footer{
position:relative;
}
#media screen and (min-height:800px){
footer{
position: absolute; // or fixed
bottom:0;
width:100%;
  }
}

Because, you dont have much content to fill entire page. You can use something like this.
if($(window).height() > $("body").height()){
$("footer").css({"position" : "fixed", "bottom" : "0" , "width" : "100%"});
} else {
$("footer").css("position", "relative");
}

This looks like bootstrap. Try having a look at the sample code they provide for this kind of thing. Specifically, there is a sticky footer example https://getbootstrap.com/docs/4.0/examples/sticky-footer/

What about:
footer {
position: fixed;
width: 100%;
bottom: 0px;
}
.container-fluid{
margin-bottom: 100px; //Height of your footer
}
Fiddle

html, body {
margin: 0;
padding: 0;
}
.mainContainer {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header {
width: 100%;
height: 100px;
background: blue;
}
.mainContent {
flex: 1;
text-align: center;
font-size: 40px;
padding: 40px;
}
footer {
width: 100%;
height: 100px;
background: red;
}
<html>
<head></head>
<body>
<div class='mainContainer'>
<header></header>
<div class='mainContent'>
All your content goes here
</div>
<footer></footer>
</div>
</body>
</html>
This should work for you. Basically make the page a vertical flexbox with min-height: 100vh and flex the middle element. Then the footer is always anchored to the bottom of the page.

A background overlay under jQuery UI dialog doesn't cover the images as expected

I'm having a small issue regarding the dark background that is appearing when clicking on the second image with pink background. How can I make it cover the images but not the dialog box?
Because of the customized libary of jQuery UI, I can't use modal: true
How can I make it cover the images but not the dialog box?
$(function() {
$("#dialog").dialog({
//modal: true,
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
/*setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);*/
$("#dialog").dialog("open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: black;
opacity: 1;
overflow: auto;
z-index: 1;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>

If you really to want black out out all the div behind your jQuery dialog box then need to wrap your images in a div and do CSS on that instead of using body here then.
Also, we do not need opacity anymore since all the color will be darker. You can either use CSS::after or CSS::before to do that.
For better practice: (in your case) I have wrapped the images div in this div in new div .modal-body to achieve those results.
Live Working Demo:
$(function() {
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
$("#dialog").dialog({
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
}).dialog("open");
setTimeout(() => {
//window.location.href = $(this).prop("href");
}, 50000);
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: pink;
}
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: pink;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="modal-body">
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<br>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
</div>

The web browser prints the HTML content on the page using a tree structure.
So, the body tag is the deeper tag in your page. Because of that, the background black on body can't cover the other elements inside of it.
Just create a div tag between .images and #dialog, called #modal-background for example. Then, when you open or close the modal, shown and hide #modal-background.
The style of can be like that:
#modal-background.modal {
width: 100%;
height: 100%;
opacity: 1;
overflow: auto;
z-index: 1;
background-color: black;
}
```

Use the CSS ::after pseudo-element.
Please remove background-color: black; CSS from .modal. Just add below CSS.
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
The styles and considerations in this technique are pretty much easy, we’ll be styling the :after pseudo-element on the body. You can choose to position the pseudo-element absolutely with respect to the body, or give it a fixed position.
Updated Snippet :-
$(function() {
$("#dialog").dialog({
//modal: true,
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
/*setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);*/
$("#dialog").dialog("open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
opacity: 1;
overflow: auto;
z-index: 1;
}
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>

JavaScript contenteditable

I am creating a HTML rich text editor and I would like to use the contenteditable attribute on a div. I have a list of divs inside a div called editor. When the user hits enter I prevent the default action. I then insert a new div after the current div. The only problem is I cannot focus on the new div. Does anyone know how to do this?
The HTML
<body>
<div id="editor" contenteditable="true">
<div id="1" contenteditable="ture" class="line" style="height: 20px; background-color: #a0f;"></div>
<div contenteditable="ture" class="line" style="height: 20px; background-color: #abf;"></div>
<div contenteditable="ture" class="line" style="height: 20px; background-color: #a9f;"></div>
<div contenteditable="ture" class="line" style="height: 20px; background-color: #aff;"></div>
<div contenteditable="ture" class="line" style="height: 20px; background-color: #aaf;"></div>
</div>
</body>
The JavaScript
$(function(){
var thisLine;
$("#editor").bind("keydown", function(event){
if(event.keyCode == 13){
event.preventDefault();
var newLine = $("<div tabindex=\"-1\" contenteditable=\"ture\" id=\"2\"class=\"line\" style=\"height: 20px; background-color: #aff;\"></div>");
newLine.insertAfter(thisLine);
$("#2").focus();
}
})
$(".line").bind("click", function(){
thisLine = $(this);
})
});

This should work:
newLine.insertAfter(thisLine).focus();
Demo: http://jsfiddle.net/tymeJV/7xEXt/

Get the selection, and add a new collapsed range to it. See moveCaretToStartOf method in the example
function moveCaretToStartOf(element) {
var selection = document.getSelection();
selection.removeAllRanges();
var range = document.createRange();
range.setStart(element, 0);
selection.addRange(range)
}
document.querySelector('div').focus();
window.setTimeout(function () {
moveCaretToStartOf(document.querySelectorAll('p')[1])
}, 1000);
<blockquote>
Cursor will be placed into the second paragraph after 1 second
</blockquote>
<div contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel laboriosam nobis nam tempore sint adipisci, ullam perspiciatis placeat aliquid dolorem. Aliquid nisi, dicta sunt dolor qui voluptatem perferendis veniam ad!</p>
<p><br></p>
</div>