I am trying to embed a previous and next button onto the image such that both buttons resize and stay on the image when resized. But the problem is the buttons don't stay on the image and resize in a way that isn't consistent with what I want. I also want my image to be on the right side of the screen and text on the left side instead of on the center.
I thought if I had put the button in a div that is the child of the div my photos were in, the buttons would automatically be embedded onto the photo but that didn't work. I also set my parent container to relative and child container to absolute thinking that would work.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.photos {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -200px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
color: aqua;
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.btn-responsive {
/* matches 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
/* matches 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<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">
<title>Test Page</title>
<link rel="stylesheet" href="./styles/test.css">
</head>
<body>
<div class="center">
<div class="photos">
<img class="mySlides fade" src="photos/quote1.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote2.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote3.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote4.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote5.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote6.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/photo8.png" style="width:95.7%" />
<div class="img-overlay btn-responsive">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
Set the <img>s to expand edge to edge of it's container .photos and keep aspect ratio as well by changing img ruleset:
img {
object-fit: contain;
width: 100%;
}
Also, remove margin-top: -200px from .next, .prev
I didn't see any text in OP code and didn't quite understand exactly what you wanted with text.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".slides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.slides {
display: none
}
img {
object-fit: contain;
width: 100%;
}
.photos {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
}
.prev {
left: 0;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.btn-responsive {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!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">
<title>Test Page</title>
<link rel="stylesheet" href="./styles/test.css">
</head>
<body>
<div class="center">
<div class="photos">
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/v-rising-castle-heart-decay-900x506.jpg" />
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/jurassic-world-evolution-2-dominion-dlc-900x506.jpg" />
<img class="slides fade" src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans//41627993/0bc70a88bed9dad1ba5898beb33c72476c2ccc10.jpg" />
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/lost-ark-character-creation-900x506.jpg" />
<img class="slides fade" src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans//9164327/b4569cd9085bd5d186c30877bc1251f03fc6e06a.jpg" />
<div class="img-overlay btn-responsive">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
iceiscold! Welcome to Stack Overflow.
I don't know if you have a specific reason for your widths, but setting the images to 100% width and set object-fit: contain should solve your resizing issues. If you need them smaller, you can control that by setting the photo container size, or creating a custom container for the <img>.
As for the layout question, to have a text and an image side by side, I recommend you to use display: flex. Flex is a nice CSS property for handling layouts. Another option would be to use display: grid, which is another way to handle layouts (see Grid). For your case, I think flex is a bit more straightforward.
Basically what you need:
.parent{
display: flex;
}
.child1, child2{
flex: 1;
}
.parent will create a column layout, and with flex:1 you are telling the flex property that both child1 and child2 should have the same width. You can play with that by setting flex: 0.25, etc. I used this on your code to create a description column and a photo column.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
.center {
display: flex;
border: 1px solid black;
}
.descriptions {
flex: .75;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.mySlides {
display: none
}
img {
object-fit: contain;
vertical-align: middle;
width: 100%;
}
.photos {
flex: 1;
max-width: 1000px;
position: relative;
margin: auto;
border: 1px solid blue;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
}
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
<div class="center">
<div class="descriptions">
<p>I am a test description</p>
</div>
<div class="photos">
<img class="mySlides fade" src="https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png" />
<img class="mySlides fade" src="https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg" />
<img class="mySlides fade" src="https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png" />
<div>
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
</div>
</div>
</div>
Return to post
Related
I have been asked to create an image gallery for a test website for a mini project at work with a few other people. I have created the gallery and the pop up images based on the code here: http://www.w3schools.com/howto/howto_css_modal_images.asp
The layout of the gallery itself is fine as there will be more images, but when I click on the images in the gallery, the images that pop up are all different sizes. We have been trying for a while now to give the images a fixed width and height to ensure that when they pop up they are all the same size and centred in the middle so that the user does not have to scroll up and down. Changing the width then results in the next and previous arrows being all over the place. We have made a few tweaks to the code but so far have been unable to get the desired result.
Can someone please point us in the right direction on how we can achieve this.
This is the code we have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>PRINTS</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* Style the Image Used to Trigger the Modal */
* {
box-sizing: border-box;
margin: 0;
padding: 0 10px;
}
.image-container {
width: 100%;
height: 70%;
columns: 4;
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
max-width: 100%;
padding: 1px;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
padding: 0;
width: 90%;
max-width: 100px;
position: relative;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
.image-wrapper {
position: absolute;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 20px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: relative;
top: 0;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger the Modal -->
<div class="image-container">
<img class="myImg" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
<img class="myImg" src="https://images.all-free-download.com/images/graphiclarge/bridge_holiday_horizontal_landscape_nature_nobody_603727.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
<img class="myImg" src="https://cdn.fstoppers.com/styles/full/s3/photos/2019/02/857ebd7658e56c84a4dc65cc4453a305.jpg?itok=rpCL6_UU.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
<img class="myImg" src="https://www.difrusciaphotography.com/wp-content/uploads/2015/04/The-Awakening_Moraine-Lake-Alberta-Canada_03.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
<img class="myImg" src="https://www.jessleephotos.com/images/xl/overlook-autumn.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow">
<img class="myImg" src="https://images.freeimages.com/images/small-previews/7cb/father-tree-1377206.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow">
<img class="myImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnERA1ahoVfRaMs2rPHKYlx-cUXeA8_N2DWA&usqp=CAU.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow">
<img class="myImg" src="https://images.unsplash.com/photo-1506522167817-40236fa71038?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxMzc4NDI3fHxlbnwwfHx8fA%3D%3D&w=1000&q=80.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow">
</div> <!-- end image-container div -->
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext"> 1 / 46</div>
<img src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 2 / 46</div>
<img src="https://images.all-free-download.com/images/graphiclarge/bridge_holiday_horizontal_landscape_nature_nobody_603727.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 3 / 46</div>
<img src="https://cdn.fstoppers.com/styles/full/s3/photos/2019/02/857ebd7658e56c84a4dc65cc4453a305.jpg?itok=rpCL6_UU.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 4 / 46</div>
<img src="https://www.difrusciaphotography.com/wp-content/uploads/2015/04/The-Awakening_Moraine-Lake-Alberta-Canada_03.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 5 / 46</div>
<img src="https://www.jessleephotos.com/images/xl/overlook-autumn.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 6 / 46</div>
<img src="https://images.freeimages.com/images/small-previews/7cb/father-tree-1377206.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 7 / 46</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnERA1ahoVfRaMs2rPHKYlx-cUXeA8_N2DWA&usqp=CAU.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 8 / 46</div>
<img src="https://images.unsplash.com/photo-1506522167817-40236fa71038?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxMzc4NDI3fHxlbnwwfHx8fA%3D%3D&w=1000&q=80.jpg">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Try setting a max height on your images, max-height: 90vh; for example. VH units are the height of the viewport, so the images won't ever be taller than 90% of the viewport height in this instance. Then you can set the image widths to have max-width: 100%; and the user won't need to scroll. Also change your .mySlides CSS when the slide is active to use display: flex; rather than display: block; to allow you to center the image easily.
Try this adding these updated CSS rules:
.modal-content {
width: 500px;
max-width: 100%;
}
.mySlides img {
max-height: 90vh;
max-width: 100%;
}
When slide is active:
.mySlides {
display: flex;
flex-direction: column;
}
My goal is to be able to vertically align animated text in a div element. I have tried looking for an answer on here, but can't seem to find any. Specifically, I've tried display:table-cell, vertical-align:middle, and line-height:__, but they all give the same result.
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
vertical-align: middle;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
If anyone could help that would be great!
PS: I just want it vertically centered, not horizontally.
Thanks!
Add display: flex; align-items: center; to your textDiv. Your textDiv height is 80%, you should make it 100% if you want to center vertically on all screen
let elemIds = ['a', 'b', 'c', 'd', 'e']
let currentAnimId = 0
function anims() {
let elem = document.getElementById(elemIds[currentAnimId])
let bgimg = document.getElementById('backgroundImg')
currentAnimId += 1
bgimg.style.animation="bgblur 5s";
elem.style.display = 'block'
elem.style.animation="textAnim 5s";
window.setTimeout(() => {
bgimg.style.animation="none";
elem.style.display = 'none'
elem.style.animation="none";
elem.style.webkitAnimation = 'none';
window.setTimeout(function() {
elem.style.webkitAnimation = '';
if (currentAnimId < elemIds.length) {
anims(currentAnimId)
} else {
console.log("You have reached the end of the text cycle.")
}
}, 1000);
}, 5000)
}
anims(currentAnimId)
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
#backgroundImg:empty {
display: block;
position: relative;
}
h1 {
position: absolute;
vertical-align: middle;
}
#backgroundImg {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80");
/* animation: blurry 5s; */
-webkit-filter: blur(0px);
background-repeat: no-repeat;
background-size: 100% auto;
top: 0;
left: 0;
}
#backgroundImg, #textDiv {
width: 100%;
height: 100%;
position: absolute;
}
#textDiv {
left: 100px;
height: 80%;
width: 80%;
color: transparent;
-webkit-text-stroke: 1px white;
text-shadow: 10px 10px 20px black;
z-index: 10;
display: flex;
align-items: center;
text-align: left;
}
#a, #b, #c, #d, #e {
font-size: 800%;
display: none;
}
#keyframes bgblur {
0% {
-webkit-filter: blur(0px);
}
25% {
-webkit-filter: blur(5px);
}
75%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="backgroundImg">
</div>
<div id="textDiv">
<h1 id="a">a</h1>
<h1 id="b">b</h1>
<h1 id="c">c</h1>
<h1 id="d">d</h1>
<h1 id="e">e</h1>
</div>
<script src="script.js"></script>
</body>
</html>
I wanted to create a navigation bar, at the top of my page, that would follow no matter what way you scroll.
I created it, and after that created a slideshow under it. The problem is, that everything related to my slideshow, will interrupt the navigation bar, when it scrolls through it, they overlap. I don't know how to fix this, and would like to get some help :)
CSS
/* HEADER - HEADER - HEADER */
/* Style the header */
.header {
background-color: lightgray;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.menu_navigation {
position: fixed;
overflow: hidden;
background-color: #333;
top: 0;
width: 100%;
}
/* Style the topnav links */
.menu_navigation a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px 25px;
text-decoration: none;
}
/* Change color on hover */
.menu_navigation a:hover {
background-color: rgb(0, 162, 255);
color: black;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:600px) {}
.column {
width: 100%;
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {
vertical-align: auto;
position: relative;
top: 52px;
}
#billede1, #billede2, #billede3 {
filter: blur(8px);
}
/* Slideshow container */
.slideshow-container {
width: 1500;
}
/* Next & previous buttons */
.prev, .next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
transition: 0.6s ease;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #000000;
font-size: 30px;
padding: 8px 12px;
position: absolute;
bottom: -1200px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.footer {
background-color:blue;
text-align: center;
padding: 10px;
}
html
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="menu_navigation">
Men
Women
Children
About Us
News
</div>
<!-- Slideshow, for under navigationsbaren-->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="C:\Users\Wahab\Desktop\hjemmesidenprojekt\billeder\1.jpg" id="billede1" style="width:100%" height="1000px">
<div class="text">Skjorte - 150 kr</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="C:\Users\Wahab\Desktop\hjemmesidenprojekt\billeder\2.jpg" id="billede2" style="width:100%" height="1000px">
<div class="text">Mørke blå Chino bukser - 540 kr</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="C:\Users\Wahab\Desktop\hjemmesidenprojekt\billeder\3.jpg" id="billede3" style="width:100%" height="1000px">
<div class="text">Hvide Chinos - 430 kr</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
You need to set the z-index of the navbar higher than any other z-index of any element.
The z-index provides a hierarchical structure of when elements are stacked amongst each other.
You can fix this by adding a z-index CSS property to your .menu_navigation class. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
.menu_navigation {
position: fixed;
overflow: hidden;
background-color: #333;
top: 0;
width: 100%;
z-index: 100;
}
I've made a image gallery and I'm stuck on this problem from from quite time now as I want to position next and previous button on the bottom of the image but how can I make the buttons relative to the image as images are different and changes. How to put controller button at the bottom of the image.
What I'm trying to do:
It has Full Screen background modal. (Done)
Upon that modal it shows images. (Done)
On image's bottom I want to keep a constant showing controller buttons which are next and previous button to change through images. (Stuck from two days)
Tried Till Now:
Tried to make buttons relative to div's class "modal-content and image" but according to width size my buttons moves.
Tried changing heights and widths of the divs and tried some other things too.
At the end when nothing worked. I tried to achieve layout in a improper way by positioning buttons all the way from 1900px to 400px by media queries. But it still doesn't look good and accurate. (Have to use media queries only.)
I know this is not a right way. What am I missing here? how to make elements responsive in this type of situations?
Please let me know by your expertise if I should try any different approach or If I do some mistakes with my CSS code.
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.photos-thumbnail {
width: 440px;
}
.photos-thumbnail img {
margin: 10px 2px 0 0;
width: 140px;
height: 100px;
cursor: pointer;
}
.view-all-photos:hover {
opacity: 0.7;
}
.column {
float: left;
width: 16.6%;
}
.pro-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
position: relative;
margin: 50px auto 0;
width: 100%;
height: 90%;
background-color: rgba(0, 0, 0, 0.1);
}
.myslides img {
object-fit: contain;
background-color: rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
}
.mySlides {
display: none;
}
.column img {
width: 100%;
}
.controller {
position: absolute;
background: linear-gradient(transparent, #1A1A1A);
text-align: center;
height: 12%;
width: 100%;
padding-top: 20px;
margin-top: -110px;
}
.prev,
.next {
position: absolute;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
border: 1px solid #02BFC1;
border-radius: 50%;
width: 33px;
padding: 15px;
font-size: 25pt;
transition: 0.6s ease;
user-select: none;
-webkit-user-select: none;
}
.next {
margin-left: 50px;
}
.prev {
margin-left: -50px;
}
<div class="photos-thumbnail">
<img class="hover-shadow" onclick="openModal(); currentSlide(1)" src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
<img class="hover-shadow" onclick="openModal(); currentSlide(2)" src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
<img class="hover-shadow" onclick="openModal(); currentSlide(3)" src="http://fextralife.com/wp-content/uploads/2015/01/Far-Cry-4-Tiger.jpg">
</div>
<div id="myModal" class="pro-modal">
<div class="modal-content">
<div onkeydown="ff(e)" class="mySlides">
<img src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
</div>
<div onkeydown="ff(e)" class="mySlides">
<img src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
</div>
<div onkeydown="ff(e)" class="mySlides">
<img src="http://fextralife.com/wp-content/uploads/2015/01/Far-Cry-4-Tiger.jpg">
</div>
<div class="controller">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="sep">|</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
Output I want Even While Resizing
This happens after Browser window Resize. Image will start to fit the window and shrink as I want but buttons will be statically at the bottom.
If you change the display of the slides to this:
slides[slideIndex - 1].style.display = "inline-grid";
and with a few additionally changes at the css it should work.
The green marks are my changes.
I inserted a smaller image so that you can see the result in the code below.
I hope it helps.
EDIT:
To make the images resizing just add to your css:
img{
max-width: 100%;
height: auto;
}
And if you want the buttons staying in the middle during resizing, just put the controller div into the mySlides div -> see my code snippet
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "inline-grid";
dots[slideIndex - 1].className += " active";
}
.photos-thumbnail {
width: 440px;
}
.photos-thumbnail img {
margin: 10px 2px 0 0;
width: 140px;
height: 100px;
cursor: pointer;
}
.view-all-photos:hover {
opacity: 0.7;
}
.column {
float: left;
width: 16.6%;
}
.pro-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
text-align: center;
position: relative;
width: 100%;
height: 90%;
background-color: rgba(0, 0, 0, 0.1);
}
.mySlides img {
padding-left:75px;
object-fit: contain;
background-color: rgba(0, 0, 0, 0.1);
}
img{
max-width: 100%;
height: auto;
}
.mySlides {
display: none;
margin-right:75px;
margin-top:25px;
}
.column img {
width: 100%;
}
.controller {
background: linear-gradient(transparent, #1A1A1A);
height: 100px;
width: 100%;
padding-top: 20px;
margin-top: -100px;
}
.prev,
.next {
text-align: center;
position: absolute;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
border: 1px solid #02BFC1;
border-radius: 50%;
width: 50px;
padding: 15px;
font-size: 25pt;
transition: 0.6s ease;
user-select: none;
-webkit-user-select: none;
}
.next {
margin-left: 50px;
}
.prev {
margin-left: -50px;
}
<div class="photos-thumbnail">
<img class="hover-shadow" onclick="openModal(); currentSlide(1)" src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
<img class="hover-shadow" onclick="openModal(); currentSlide(2)" src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
<img class="hover-shadow" onclick="openModal(); currentSlide(3)" src="http://lorempixel.com/400/200/">
</div>
<div id="myModal" class="pro-modal">
<div class="modal-content">
<div onkeydown="ff(e)" class="mySlides">
<img src="https://wallpaperscraft.com/image/hitman_xbox_360_absolution_76000_1280x720.jpg">
<div class="controller">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="sep">|</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<div onkeydown="ff(e)" class="mySlides">
<img src="https://www.technobuffalo.com/wp-content/uploads/2014/03/Hitman-Absolution-2-1280x720.jpg">
<div class="controller">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="sep">|</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<div onkeydown="ff(e)" class="mySlides">
<img src="http://lorempixel.com/400/200/">
<div class="controller">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="sep">|</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
</div>
You can add display: flex, justify-content: (wherever in the image you want your buttons to be), and text-align to centre your buttons and their text.
I have two horizontally aligned responsive divs that are set to be the same height.
The left holds an embedded youtube video, the right a fixed image.
Tested in Chrome there are no issues, but if tested in Safari the youtube video is not filling the full height of the div.
html markup is:
<div id="IndexBanners">
<div class="indexbannerimages effect first">
<div id="player"></div>
<script src="https://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
videoId: 'GfaiXgY114U',
autoplay: '0',
controls: '0',
width: '100%',
height: '100%',
playerVars: {
rel: 0,
showinfo: 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
// event.target.playVideo();
}
// change mask opacity depending on player state
function onPlayerStateChange(event) {
if (event.data === -1) {
document.getElementById("mask1").setAttribute("style", "opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
}
if (event.data === 0) {
document.getElementById("mask1").setAttribute("style", "opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
}
if (event.data === 1) {
document.getElementById("mask1").setAttribute("style", "opacity:0; -moz-opacity:0; filter:alpha(opacity=0)");
}
if (event.data === 2) {
document.getElementById("mask1").setAttribute("style", "opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
}
}
</script>
<div id="mask1">
<div class="watchText">Watch The Video</div>
<div class="watch"></div>
</div>
</div>
<div class="indexbannerimages effect">
<img src="https://placehold.it/795x436">
<div id="mask2">
<div class="newsText">Latest News</div>
<div class="news"></div>
</div>
</div>
</div>
css:
#IndexBanners {
display: flex;
margin-top: 20px;
}
.indexbannerimages {
flex: 1 0 0;
position: relative;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
.indexbannerimages .watch {
background: url(../images/play-icon.png) no-repeat scroll 0% 25% / 14px auto;
}
.indexbannerimages .news {
background: url(../images/news-icon.png) no-repeat scroll 0% 25% / 14px auto;
}
.watchText {
color: #fff;
text-transform: uppercase;
padding-top: 23%;
margin: 0;
}
.newsText {
color: #fff;
text-transform: uppercase;
padding-top: 23%;
margin: 0;
}
.effect #mask1,
.effect #mask2 {
text-align: center;
font-size: 16px;
color: #fff;
background-color: rgba(00, 00, 00, 0.8);
opacity: 0.75;
transition: all 0.5s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.effect:hover #mask1,
.effect:hover #mask2 {
visibility: hidden;
opacity: 0.0;
transition: all 0.5s ease-in-out;
}
#media (max-width:600px) {
#IndexBanners {
display: block;
}
.first {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.first iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
I've set up a fiddle here to demonstrate the issue. https://jsfiddle.net/bgaqfvxm/3/
Any suggestions on a fix for this size issue in Safari?
Issue resolved by adding the following to the css
.first iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Thanks to #Michael Coker for the original css that was used in #media query below 600px