I need to show a lightbox by clicking on a link. The issue is once the lightbox is shown I should click on the lightbox buttons or change the screen-size to see the images. It seems like the images wont get loaded once the link is clicked.
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>slick - the last carousel you'll ever need</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/prism.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js" type="text/javascript"></script>
<style>
#pageOverLay {
background: #fff none repeat scroll 0 0;
margin-left: 43%;
margin-top: 10%;
position: absolute;
width: 500px;
z-index: 1001;
display:none;
}
#pageOverLay-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 1000;
display: none;
}
#pageOverLayCloseBtn{
position:absolute;
top:0;
right:0;
}
.slick-slider {
margin: 30px auto 50px;
}
.slick-slider {
-moz-user-select: none;
box-sizing: border-box;
display: block;
position: relative;
}
</style>
</head>
<body>
<a onclick="showLightBox();" href="#">Click Here to show lightbox</a>
<div id="pageOverLay-shadow"></div>
<div id="pageOverLay">
<div id="pageOverLayCloseBtn">X</div>
<h2>Images</h2>
<div class="slider fade">
<div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo1427806208781b36531cb09ef.jpg"/></div></div>
<div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo142855067022515f007f6f1ba.jpg"/></div></div>
<div><div class="image"><img src="http://wowslider.com/sliders/demo-94/data1/images/photo1428452788387375d846a8ab4.jpg"/></div></div>
</div>
</div>
<script src="view-source:http://kenwheeler.github.io/slick/code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="view-source:http://kenwheeler.github.io/slick/code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/js/scripts.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/js/prism.js"></script>
<script type="text/javascript">
function showLightBox(){
$("#pageOverLay-shadow").css("display","block");
$("#pageOverLay").css("display","block");
}
function pageOverLayClose(){
$("#pageOverLay-shadow").css("display","none");
$("#pageOverLay").css("display","none");
}
var disqus_shortname = 'slickcarousel';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</body>
</html>
The css-attribute display:none; on div does the browser prevent from render or even load the image inside that element.
There is a good explanation: Does “display:none” prevent an image from loading?
Just exchange "display: none;" with "visibility:hidden;" and update your JavaScript -> see below.
CSS:
#pageOverLay {
background: #fff none repeat scroll 0 0;
margin-left: 43%;
margin-top: 10%;
position: absolute;
width: 500px;
z-index: 1001;
visibility:hidden;
}
#pageOverLay-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 1000;
visibility: hidden;
}
JS/jQuery:
...
function showLightBox() {
$("#pageOverLay-shadow").css("visibility", "visible");
$("#pageOverLay").css("visibility", "visible");
}
...
I updated the jsfiddle: http://jsfiddle.net/dm3Lea95/4/
(fixed also the "close" button ;))
Related
This question already has answers here:
Script Tag - async & defer
(12 answers)
Closed 8 days ago.
I am creating a full-stack application and for my hero page, I am working on adding a carousel that rotates images in the background.
So far I have created the HTML, CSS, and JavaScript files.
When the page loads, it rotates but then the carousel stops working and just stays on the first line.
I am not too sure if there is an error in my code but I would appreciate it if someone helped me out.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 3000);
*{
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-image: url(Images/derek-baumgartner-A7sfB4yKS7s-unsplash.jpg);
}
.slide-2 {
background-image: url(Images/andrew-bain-jO_Q3EY_T0E-unsplash.jpg);
}
.slide-3 {
background-image: url(Images/aaron-dowd-N7PDwky8doM-unsplash.jpg);
}
<!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">
<script src="practice.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>
The problem is that you are loading your script before the page has been created and the script is running as soon as it is loaded.
You can add defer to the script, like so:
<script src="practice.js" defer></script>
Or you can move the script to the end of the HTML.
Script Tag - async & defer would be a good source of information to read for this problem.
To make it easier to see your problem, I removed your images and simply set a background-color, height, and width in the CSS to see the slides and I reduced the delay in setInterval to 1500.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 1500);
* {
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-color: red;
height: 150px;
width: 200px;
}
.slide-2 {
background-color: green;
height: 150px;
width: 200px;
}
.slide-3 {
background-color: blue;
height: 150px;
width: 200px;
}
<!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">
<script src="practice.js" defer></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>
This question already has answers here:
How do I re-trigger a WebKit CSS animation via JavaScript?
(9 answers)
Closed 4 months ago.
document.querySelector(".fall").addEventListener("click", function () {
document.querySelector(".ball").style.animation = "anim 2s forwards";
});
//my try below
document.querySelector(".up").addEventListener("click", function () {
document.querySelector(".ball").style.animation = "anim 2s forwards reverse";
});
body{
display: flex;
justify-content: center;
}
button{
margin-top: 150px;
margin-right: 20px;
padding: 5px;
}
.box{
height: 20px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 100px;
}
.ball{
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
}
#keyframes anim {
100%{
top: 80px;
}
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ball"></div>
<div class="box"></div>
<button class="fall">Fall ↓</button>
<button class="up">Up ↑</button>
<script src="index.js"></script>
</body>
</html>
I wnna jump up smoothly this red ball by cliking Up ↑ button after clicking Fall ↓ button. I tride it by setting animation property with extra reverse but it's not working. It's jumping up suddenly. How can i achieve smooth jumping up transition by using only keyframes and javascript.
Here is my quick solution.
The animation was removed by setting animation as "" in animationend event listener.
The ball's top position is also set when related event listener is triggered.
const ball = document.querySelector(".ball");
const fallButton = document.querySelector(".fall");
const upButton = document.querySelector(".up");
fallButton.addEventListener("click", function() {
ball.style.animation = "anim 2s forwards";
ball.addEventListener("animationend", function() {
ball.style.top = "80px";
ball.style.animation = "";
});
});
upButton.addEventListener("click", function() {
ball.style.top = 0;
ball.style.animation = "anim 2s forwards reverse";
ball.addEventListener("animationend", function() {
ball.style.top = 0;
ball.style.animation = "";
});
});
body {
display: flex;
justify-content: center;
}
button {
margin-top: 150px;
margin-right: 20px;
padding: 5px;
}
.box {
height: 20px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 100px;
}
.ball {
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
}
#keyframes anim {
100% {
top: 80px;
}
}
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ball"></div>
<div class="box"></div>
<button class="fall">Fall ↓</button>
<button class="up">Up ↑</button>
<script src="index.js"></script>
</body>
</html>
I have just created a little testcode, you can find it here
http://paloula.de/test/width_002.html
It works fine under Chrome/Windows but not if you simulate a mobile phone under Chrome/Windows (e.g. Galaxy S5) or under Android mobile phone with Chrome: The page is scrolling left, but maximum of scrollLeft is not reached.
Is it the css? Is it the meta-tag? The calculation seems to be correct.
Any ideas? Thank you!
Full Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<style>
* {
margin: 0;
padding: 0;
}
HTML {
display: block;
position: relative;
height:100%;
}
BODY {
display: block;
position: relative;
min-height: 100%;
/* overflow-y: scroll; */
}
</style>
</head>
<body id="body">
<div style="background-color: #FF0000; display: block; position: relative; width: 1700px; height: 50px;">
<div style="background-color: #0000FF; display: block; position: absolute; width: 50px; height: 50px; right: 0"></div>
<div style="background-color: #FF00FF; display: block; position: absolute; width: 50px; height: 50px; left: 0"></div>
</div>
<script>
var scrollWidth = document.documentElement.scrollWidth;
var clientWidth = document.documentElement.clientWidth;
var offsetWidth = document.documentElement.offsetWidth;
console.log(scrollWidth);
console.log(clientWidth);
console.log(offsetWidth);
var maxScrollLeft = scrollWidth - clientWidth;
console.log("maxScrollLeft " + maxScrollLeft)
setTimeout(function() {
window.scrollTo(maxScrollLeft, 0);
}, 1);
setTimeout(function() {
window.scrollTo(0, 0);
}, 500);
</script>
</body>
</html>
The solution is to add minimum-scale=1 to the meta/viewport tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1"/>
I think something similar to this question was answered in the past. However, I read a number of StackOverflow posts and still couldn't solve the issue. Probably, that is because I don't have a good understanding of jQuery yet and can't apply basic concepts to what I need to solve. So, I would greatly appreciate if you could help me solve this issue. Thanks!
Right now, what happens is the following:
1. When clicking a button in the middle, five circles show up.
2. When you click a circle, a popup message made with SweetAlert2 shows up.
3. When clicking the "ok" button in the popup message, the message is closed and you can see that the circle's background was changed to light orange.
What I want to do : show a different image(https://s25.postimg.cc/kw0l49gz3/original.png) in the popup message when clicking a circle with the text "okay".
Note: I assigned "options" class for all circles and different id for each circle. The id for a circle with the text "okay" is "option5".
$(document).ready(function() {
$('#test').click(function(){
$(".options:hidden").fadeIn()
.on("click", function(){
$(this).css("background", "#F3C78D");
})
.on("click", function(){
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
// swal({
// title: 'Sweet!',
// text: 'Modal with a custom image.',
// imageUrl: 'https://s25.postimg.cc/kw0l49gz3/original.png',
// imageWidth: 400,
// imageHeight: 200,
// imageAlt: 'Custom image',
// animation: false
// })
});
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" id="option1"><span>Hello<br>World</span></div>
<div class="options" id="option2"><span>Goodbye</span></div>
<div class="options" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" id="option4"><span>Fine</span></div>
<div class="options" id="option5"><span>Okay</span></div>
</div>
</body>
</html>
You can use data-attribute to define the image link inside the element and then you can easily use it within the JS code. You can also do the same with the other parameter.
$(document).ready(function() {
$('#test').click(function(){
$(".options:hidden").fadeIn()
.on("click", function(){
$(this).css("background", "#F3C78D");
})
.on("click", function(){
var url=$(this).attr('data-img');
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: url,
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
});
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" data-img="https://unsplash.it/400/200" id="option1"><span>Hello<br>World</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option2"><span>Goodbye</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option4"><span>Fine</span></div>
<div class="options" data-img="https://s25.postimg.cc/kw0l49gz3/original.png" id="option5"><span>Okay</span></div>
</div>
</body>
</html>
Ok, I am creating a landing page, where what I want to happen, is the page split in half, and either side slide off of the screen, and the main page is left. I almost have it, but what the right side is doing, is whenever the window is at certain sizes, it is going below the left side. I'm not sure quite how to fix this, and everything I try doesn't really work, and there I haven't been able to find any answers online. Thanks for any help
CODE
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0px;
background-color: gray;
}
#landingDiv {
min-width: 1100px;
height: 100vh;
}
#lBanText {
font-size: 50px;
}
#lBanText p {
top: 0;
bottom: 0;
position: relative;
margin: auto;
margin-top: 2px;
}
.lBan {
dispay: block;
width: 100%;
min-height: 60px;
background-color: red;
padding: 0px;
postion: relative;
float: left;
}
#leftHalf,
#rightHalf {
min-width: 50%;
position: relative;
float: left;
height: 100%;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>
Name of Site
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.addEventListener("keydown", checkKey);
function checkKey(e) {
var key = e.keyCode;
//alert(key);
if(key === 79) {
$("#leftHalf").hide("slide", {direction: "left"}, 1000);
$("#rightHalf").hide("slide", {direction: "right"}, 1000);
}
};
});
</script>
</head>
<body>
<div id="landingDiv">
<div id="leftHalf">
<div id="lBanText" class="lBan">
<p>
Title of Website Here
</p>
</div>
</div>
<div id="rightHalf">
<div class="lBan">
</div>
</div>
</div>
</body>
</html>