We Keep Coding

Slider Height Images - javascript

I have an image slider with thumbnails and am having a bit of a problem. When you click on the thumbnail of the last image, the thumbnails below as well as the arrows in the carousel jump down a bit. It doesn't happen to any of the other images. It's a small problem but it's driving me crazy and I don't know why it's happening, since I made sure all the images were the same height. Here's the codepen.
$(document).ready(function(){
$('#imgDetail').animate({
opacity: '1'
},300);
});
$(document).ready(function(){
// get all images loaded
var images = $(".unidoor-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click touchstart", function() {
// get the images
var currentImageIndex = images.index($(".unidoor-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
if ($nextImage.data('iframe')) {
$(images[nextIndex]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($nextImage.height());
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('#sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var images = $(".unidoor-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".unidoor-class[data-active=true]"));
if (currentShown === indexSelected) return false;
images.removeClass("active").attr('data-active', "false");
if ($(this).data('iframe')) {
$(images[indexSelected]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($(images[indexSelected]).height());
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('#sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element){
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
// window.sr = ScrollReveal({reset: true});
// sr.reveal('.active', {mobile:true});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
/* height: 100% !important; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor, .unidoor-class {
position: absolute;
width: 100%;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
height: auto;
}
.unidoor-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p
{
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
/* width: 900px;
height: 600px; */
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
/* padding: 8px 16px; */
padding: 3% ;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
/* width: 50%; */
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
/* margin: 15px 1% 0px 2%; */
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
/* margin-right: 10px; */
}
#thumbnails ul{
margin: 0 auto;
display: block;
}
#thumbnails li{
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child{
padding-right: 0;
}
#green-room p {
display: block;
margin: 0 auto;
/* font-size: 1em !important; */
}
#green {
padding-top: 15px;
padding-bottom: 30px;
text-align: center;
color: white;
font-family: 'Lato', sans-serif;
margin: 0 auto;
/* width: 100% !important;*/
}
#media(max-width: 767px){
#green-room p {
margin-right: 5% !important;
margin-left: 5% !important;
/* font-size: .75em !important; */
}
#green {
/* font-size: .75em !important; */
}
}
#media(min-width: 768px){
#green-room p {
width: 90% !important;
}
#green {
width: 90% !important;
}
}
.footer {
padding-top: 30px;
background-color: #333;
}
#sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#sketchfab-iframe {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s;
}
#sketchfab-iframe.active {
opacity: 1;
position: relative;
}
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" data-active="true" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" data-active="false" />
<img data-iframe="sketchfab-iframe" src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" data-active="false" />
<iframe id="sketchfab-iframe" width="600" height="400" src="https://sketchfab.com/models/bbea52bd14c84d65b7b5512bae94ceac/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<!--CONTROLS-->
<p>❬</p>
<p>❭</p>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
<p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="footer">
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>

iframe by default is an inline element
add style
display:block;
for
#sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;**
}
Codepen
Read more on https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element

Related

Image and backgroung color out of sync. And i need smooth animation so the image & bgcolor fade's together.
It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening. It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening.
https://codepen.io/l-ba-iwanowa/pen/poJZQVN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Caveat&display=swap" rel="stylesheet">
<style>
body,
.col-1,
.col-3-4,
.col-1 p {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#rcorners1 {
border-radius: 15px 50px;
background-color: yellow;
padding: 20px;
width: 200px;
height: 150px;
animation-name: bbb;
animation-duration: 5s;
animation-fill-mode: forwards;
}
#rcorners1:hover {
width:600px;
transform: translate(300px);
transition:1s;
}
#keyframes bbb {
0% {background-color: blue;}
100% {background-color: red}
}
.asd {
width: 1000px;
height: 600px;
/*overflow: hidden;*/
position:relative;
margin: 0 auto;
}
.asd img{
width: 100%;
width: 1000px;
height: 600px;
}
.asd img {
position:absolute;
top: 0;
}
.asd img.top {
/*position:relative;*/
opacity: 0;
transition: 2s;
}
/*
.asd img.top:hover {
opacity: 100;
}*/
.trans {
opacity: 100 !important;
}
#container {
max-width: 1000px;
margin:0 auto;
}
.col-1 {
width:25%;
display:inline-block;
vertical-align: top;
}
.col-3-4 {
width:75%;
display:inline-block;
vertical-align: top;
}
.relative {
position:relative;
}
.black-col {
position: relative;
top: -150px;
background: #474747;
height: 300px;
color:white;
padding: 1rem;
}
.zastup {
position: relative;
top:-50px;
background-color: white;
word-wrap: break-word;
}
img {
max-width: 100%;
}
.slider-bg {
background-color: rgb(0,0,0);
transition: background-color 2s;
}
#container2 {
width: 900px;
margin: 0 auto;
}
.slider-nav {
float:right !important;
}
ul {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
li {
/* Rounded border */
border-radius: 9999px;
height: 14px;
width: 14px;
/* Active dot */
/*background-color: rgba(0, 0, 0, .3);*/
/* Inactive dot */
background-color: rgba(255, 255, 255, .3);
/*border: 1px solid rgba(0, 0, 0, .3);*/
/* OPTIONAL: Spacing between dots */
margin: 0 12px;
transition: transform 0.5s, background-color 0.5s;
}
.nav-active {
background-color: rgba(255, 255, 255, .9);
transform: scale(1.5);
}
.clear {
clear:both;
zoom: 1;
}
.col-1-3 {
position: relative;
width: 33%;
word-wrap: break-word;
white-space: nowrap;
display: inline-block;
vertical-align: top;
padding: 1rem;
box-sizing: border-box;
}
button.abc {
border: 0;
background-color: #e86d10;
padding: 1rem 2rem;
border-radius: 25px;
font-size: inherit;
color: #fff;
}
.price {
font-size:1.5rem;
position: relative;
top:-20px;
}
.description {
position: relative;
top:-40px;
word-break: break-all;
white-space: pre-wrap;
font-size: 1.2rem;
}
.p1rem {
padding: 1rem;
}
.orange {
color: #e86d10;
}
.apply-font {
font-family: 'Caveat', cursive;
}
.bg-black {
background-color: rgb(0,0,0);
}
.bg-blue {
background-color: rgb(34, 73, 200);
}
</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum ab corrupti impedit culpa provident nemo numquam? Magnam, rerum, magni. Autem quisquam deserunt a est iste iure odit laudantium, dolores.</p>
</div>
<div class="slider-bg ">
<div class="asd">
<!-- <img src="https://i.ytimg.com/vi/tAp9BKosZXs/maxresdefault.jpg" alt=""> -->
<img src="https://i.imgur.com/xCGxXuy.jpg" alt="">
<img class="top" src="https://i.imgur.com/D1tDvcG.jpg" alt="">
<img class="top" src="https://cdn.vox-cdn.com/thumbor/gBv91a9YqyhIxGsxc26x5TORV_8=/0x0:1296x730/1200x800/filters:focal(669x161:875x367)/cdn.vox-cdn.com/uploads/chorus_image/image/66274455/horsegirl.0.jpg" alt="">
<img class="top" src="https://1.bp.blogspot.com/-73o9cfxSC7Q/XQMxoVjfdMI/AAAAAAAAUkM/RSi0lSlsQoAfhMHLR-3U8Sfk_PpvZuziQCLcBGAs/s1600/copertina.jpg" alt="">
</div></div>
<div id="container2" style="position: relative;top:-60px; ">
<ul class="slider-nav">
<li data-id='0' class="nav-active"></li>
<li data-id='1'></li>
<li data-id='2'></li>
<li data-id='3'></li>
<li data-id='4'></li>
</ul></div><div class="clear"></div>
<div id="container2">
<div class="col-1 black-col">asd</div><!--
--><div class="col-3-4 zastup">
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js'></script> -->
<script type="text/javascript">
console.log(111);
// document.querySelector('#btn-click').addEventListener('click', ()=>{
// document.querySelector('.top').classList.toggle("trans");
// console.log(document.querySelector('.top').classList);
// });
let p = document.querySelectorAll('.slider-bg img');
let pp = Array.from(p);
console.log(pp);
function changeBgColor (){
if (i == 0 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(0,0,0)';
}
if (i == 1 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(34, 73, 200)';
}
if (i == 2 ) {document.querySelector('.slider-bg').style.backgroundColor = 'red';}
if (i == 3 ) {document.querySelector('.slider-bg').style.backgroundColor = 'green';}
}
let i = 1;
function asd(arguments) {
setTimeout(()=>{
// b = arrayImages[i];
// document.querySelector('#slider-hero img').src = b;
let z = document.querySelectorAll('li');
let zz = Array.from(z);
zz.forEach((item)=>{item.classList.remove('nav-active')});
// console.log(el);
zz[i].classList.add('nav-active');
b = pp[i];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
changeBgColor();
i++;
if (i ==4) {
i =0;
}
console.log(b);
asd();
},4000);
}
asd();
document.querySelector('.slider-nav').addEventListener('click',(el)=>{
if (el.target.tagName === 'LI') {
let z = document.querySelectorAll('li');
let zz = Array.from(z);
console.log(el.target.dataset.id);
b = pp[el.target.dataset.id];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
zz.forEach((item)=>{item.classList.remove('nav-active');});
el.target.classList.add('nav-active');
i = el.target.dataset.id;
changeBgColor();
}
});
</script>
</body>
</html>

Seems working fine to Chrome Browser. You can validate the css for all the browser using: https://www.browseemall.com/Compatibility/ValidateCSS
There might be chances of browser compatibility issues.
Seems broken in IE10 and lower.
ul{align-items:center;display:flex;justify-content:center;list-style-type:none;margin:0;padding:0;}

I created a navigation bar with java script and the problem is that my first scrolling make the
navigation bar to disappear with out the nice animation.
The nice animation fade up just after the first scrolling.
CSS:
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
}
javaScript:
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
You can watch it "live" here: https://jsfiddle.net/Benjamn89/rgxtb7en/345/
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
body {
margin: 0;
}
/* ################## First Section ################## */
.first_section {
background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 800px;
}
.title_section_1 {
position: relative;
top: 30%;
font-size: 4em;
margin: 0;
font-family: 'Modak', cursive;
font-weight: lighter;
color: #ffffe6;
}
.first_section h1 {
color: #ffffe6;
text-align: center;
}
.wrap_h_sec1 {
text-align: center;
position: relative;
top: 40%;
}
.sec_1 {
display: inline;
font-size: 1.3em;
margin: 0;
border: solid 0.5px;
padding: 1%;
border-radius: 5%;
transition: 0.8s;
}
.sec_1:hover {
cursor: pointer;
background-color: #22dbd6;
}
/* ############### All about the navigation BAR #################### */
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
}
.navig p {
margin: 0;
color: white;
display: inline-block;
padding: 1.5%;
font-family: 'Ubuntu Condensed', sans-serif;
}
.navig p:hover {
border: solid 0.5px;
cursor: pointer;
border-color: #22dbd6;
}
.navig p {
margin-left: 5%;
}
#n-three {
border-top: none;
background-color: #22dbd6;
border-radius: 5%;
color: #ffffe6;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.navig img {
max-height: 80%;
border-radius: 50%;
margin: 0 0 0 5%;
vertical-align: middle;
}
/* ##################### All about the navigation BAR ################### */
/* ################## Second Section and so on ################## */
.second_section {
height: 500px;
width: 100%;
background-color: red;
}
.third_section {
height: 500px;
width: 100%;
background-color: green;
}
.four_section {
height: 500px;
width: 100%;
background-color: black;
}
/* The end of the regular screen style */
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet">
<!-- The Sticky navigation -->
<div class='navig'>
<span class="helper"></span><img class='profile_img' src='https://cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'>
<p id='n-one'>Projects</p>
<p id='n-two'>About</p>
<p id='n-three'>Contact</p>
</div>
<!-- ################## navig ####################-->
<!-- First Section with the background image of the office -->
<div class='first_section'>
<h1 class='title_section_1'>Web Designer</h1>
<!-- Wraping the h1 element for centering -->
<div class='wrap_h_sec1'>
<h1 class='btn1 sec_1'>Projects</h1>
<h1 class='btn2 sec_1'>Contact</h1>
</div>
</div>
<!-- ################## END OF first_section ##################-->
<div class='second_section'>
</div>
<!-- second_section -->
<div class='third_section'>
</div>
<!-- third_section -->
<div class='four_section'>
</div>
<!-- four_section -->
Thanks:)

Because of your default top value not defined. Adding after top:0 to .nav it will be fixed.
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
body {
margin: 0;
}
/* ################## First Section ################## */
.first_section {
background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 800px;
}
.title_section_1 {
position: relative;
top: 30%;
font-size: 4em;
margin: 0;
font-family: 'Modak', cursive;
font-weight: lighter;
color: #ffffe6;
}
.first_section h1 {
color: #ffffe6;
text-align: center;
}
.wrap_h_sec1 {
text-align: center;
position: relative;
top: 40%;
}
.sec_1 {
display: inline;
font-size: 1.3em;
margin: 0;
border: solid 0.5px;
padding: 1%;
border-radius: 5%;
transition: 0.8s;
}
.sec_1:hover {
cursor: pointer;
background-color: #22dbd6;
}
/* ############### All about the navigation BAR #################### */
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
top:0
}
.navig p {
margin: 0;
color: white;
display: inline-block;
padding: 1.5%;
font-family: 'Ubuntu Condensed', sans-serif;
}
.navig p:hover {
border: solid 0.5px;
cursor: pointer;
border-color: #22dbd6;
}
.navig p {
margin-left: 5%;
}
#n-three {
border-top: none;
background-color: #22dbd6;
border-radius: 5%;
color: #ffffe6;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.navig img {
max-height: 80%;
border-radius: 50%;
margin: 0 0 0 5%;
vertical-align: middle;
}
/* ##################### All about the navigation BAR ################### */
/* ################## Second Section and so on ################## */
.second_section {
height: 500px;
width: 100%;
background-color: red;
}
.third_section {
height: 500px;
width: 100%;
background-color: green;
}
.four_section {
height: 500px;
width: 100%;
background-color: black;
}
/* The end of the regular screen style */
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet">
<title>
My portFolio
</title>
</head>
<body>
<!-- The Sticky navigation -->
<div class='navig'>
<span class="helper"></span><img class='profile_img' src='https://cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'>
<p id='n-one'>Projects</p>
<p id='n-two'>About</p>
<p id='n-three'>Contact</p>
</div> <!-- ################## navig ####################-->
<!-- First Section with the background image of the office -->
<div class='first_section'>
<h1 class='title_section_1'>Web Designer</h1>
<!-- Wraping the h1 element for centering -->
<div class='wrap_h_sec1'>
<h1 class='btn1 sec_1'>Projects</h1>
<h1 class='btn2 sec_1'>Contact</h1>
</div>
</div> <!-- ################## END OF first_section ##################-->
<div class='second_section'>
</div> <!-- second_section -->
<div class='third_section'>
</div> <!-- third_section -->
<div class='four_section'>
</div><!-- four_section -->
</body>

I have an image slider with thumbnails which works fine, but I'm having trouble making one of the thumbnails a placeholder. For example in my codepen, I have three images that correspond with their thumbnails. But in the last one, I want to have the user see a sketchfab model.
I want to have a still image as a thumbnail, but when the user clicks on the thumbnail or the arrows, the animated sketchfab model shows instead.
Any help would be appreciated.
$(document).ready(function(){
$('#imgDetail').animate({
opacity: '1'
},300);
});
$(document).ready(function(){
// get all images loaded
var images = $(".unidoor-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click touchstart", function() {
// get the images
var currentImageIndex = $(".unidoor-class.active").index();
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active");
// get the next active image and add active class to that next current image
$(images[nextIndex]).addClass("active");
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var indexSelected = $(this).data("img-index");
var currentShown = $(".unidoor-class.active").index();
if (currentShown === indexSelected) return false;
images.removeClass("active");
$(images[indexSelected]).addClass('active');
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element){
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
window.sr = ScrollReveal({reset: true});
sr.reveal('.active', {mobile:true});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
/* height: 100% !important; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor, .unidoor-class {
position: absolute;
width: 100%;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
height: auto;
}
.unidoor-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p
{
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
}
#imgDetail a {
text-decoration: none;
display: flex;
/* padding: 8px 16px; */
padding: 3% ;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
/* width: 50%; */
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
/* margin: 15px 1% 0px 2%; */
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
/* margin-right: 10px; */
}
#thumbnails ul{
margin: 0 auto;
display: block;
}
#thumbnails li{
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child{
padding-right: 0;
}
#green-room p {
display: block;
margin: 0 auto;
/* font-size: 1em !important; */
}
#green {
padding-top: 15px;
padding-bottom: 30px;
text-align: center;
color: white;
font-family: 'Lato', sans-serif;
margin: 0 auto;
/* width: 100% !important;*/
}
#media(max-width: 767px){
#green-room p {
margin-right: 5% !important;
margin-left: 5% !important;
/* font-size: .75em !important; */
}
#green {
/* font-size: .75em !important; */
}
}
#media(min-width: 768px){
#green-room p {
width: 90% !important;
}
#green {
width: 90% !important;
}
}
.footer {
padding-top: 30px;
background-color: #333;
}
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" />
<img src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" />
<!--CONTROLS-->
<p>❬</p>
<p>❭</p>
<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/bbea52bd14c84d65b7b5512bae94ceac/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<!--Thumbnails-->
</div>
<div id="thumbnails">
</div>
</div>
<p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="footer">
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>

I've posted a potential solution here:
https://codepen.io/anon/pen/xYrJxy
It uses data attributes to tell if the image is active
data-active="false/true"
and
data-iframe="sketchfab-iframe"
to determine whether the image should trigger the iframe to appear.
Let me know if you have any questions.

Hey there :) I'm trying to make a video fit the browser window size plus adding an image at the bottom of the browser window height. So you get the video and the image to be the only thing that is showed when you load the page. When you scroll dowm the content of the website should appear.
I've made something to illustrate the idea: http://instagib.dk/JS-test/
The problem is when I start adding the content of the site, it appears under video and image. The problem seems to be I've made it absolute and out of the documents context.
Is there any JS, Jquery solution that reads the height of the absolute content and places content after the video?
Cheers:)
<body>
<!-- Header -->
<header class="header">
<div class="header-bg">
<div class="logo-top"></div>
</div>
<nav>
<div class="menu">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<ul class="nav-list">
<li>Projects</li>
<li>Services</li>
<li>Advantages</li>
<li>Who are we</li>
<li>Work with us</li>
</ul>
</div>
</nav>
</header>
<video class="intro" autoplay loop>
<source src="video/black_clouds.mp4" type="video/mp4">
<source src="video/black_clouds.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="intro-seperator"></div>
<!-- Main content -->
<main class="content">
</main>
<!-- Footer -->
<footer>
<small>© Crafthouse 2014</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
divFade = $(".header-bg");
var toggleHeader = function(noAnimate) {
var threshold = 400,
fadeLength = 300,
opacity,
scrollTop = $(document).scrollTop();
if (scrollTop < threshold) {
opacity = 0;
} else if (scrollTop > threshold + fadeLength) {
opacity = 1;
} else {
if (noAnimate) {
opacity = 1;
} else {
opacity = (scrollTop - threshold) / fadeLength;
}
}
divFade.css("opacity", opacity);
};
toggleHeader(true);
$(window).scroll(function() {
toggleHeader();
});
});
</script>
The CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/*
========================================
Layout: Header
========================================
*/
.header {
width: 100%;
height: 60px;
position: fixed;
top: 0px;
color: #fff;
z-index: 9999;
}
.header-bg {
width: 100%;
height: 60px;
line-height: 60px;
vertical-align: middle;
background: #212121;
position: absolute;
opacity: 0;
font-size: 25px;
}
.logo-top {
background: url(../images/crafthouse-top-logo.png) no-repeat;
width: 171px;
height: 60px;
margin: 0 auto;
}
.menu {
width: 70px;
height: 60px;
padding-top: 20px;
position: absolute;
left: 8%;
}
.menu:hover {
background: #000;
}
.hamburger {
width: 30px;
height: 3px;
background: #fff;
margin: 0 auto;
margin-bottom: 5px;
}
.menu:hover .hamburger {
background: #00ff91;
}
.nav-list {
width: 150px;
margin-top:20px;
background: #000;
display: none;
padding: 20px 0 10px 18px;
text-transform: uppercase;
}
.nav-list li {
margin-bottom: 10px;
}
.nav-list li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.nav-list li a:hover {
color: #00ff91;
}
.menu:hover .nav-list {
display: block;
}
.intro {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
.intro-seperator {
background: url(../images/seperator-brush-top.png);
height: 164px;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
}
.test {
width: 100%;
height: 100%;
background: #fff;
}
/*
========================================
Layout: Content
========================================
*/
.content {
height: 2000px;
}

Use the following for your content:
main{
position:absolute;
top:100%;
}
That moves the actual content below the video (assuming main is your content-element)

For some reason the arrow buttons (which scroll the body element left and right are not working at all in IE(8 or 11 and possibly other versions) and some of the links on the left (like Company) are not working sometimes (not loading the background images)
http://henrybuiltfurniture.com/
How can I fix these issues?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<style>
.limiter * {
transition:all 1s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
html, body{
height:100%;
}
body{
margin:0;
padding:0;
overflow:hidden;
background-color:black;
}
img{
border:0;
}
.wide{
width:5000px;
height:100%;
overflow: hidden;
z-index: 1;
display:none;
}
.wide div.limiter{
overflow: hidden;
position: absolute;
}
.wide .limiter .cont{
position: relative;
height: 100%;
width: 100%;
}
.wide .limiter .data{
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 60%;
padding: 110px 25% 20% 20%;
font-size: 35px;
color: white;
}
.wide .limiter .data div{
width:100%;
height:100%;
text-align: left;
}
.wide .limiter .data div a{
text-decoration: none;
color: white;
}
.wide .limiter .data div a:hover{
color:#666;
}
body {
width: 8000px;
}
.menu{
width: 150px;
position: fixed;
left: -150px;
height: 100%;
z-index: 5;
background-color: rgba(0, 0, 0, .5);
}
.menu .logo{
width:100px;
height:100px;
}
.menu ul{
list-style: none;
}
.menu li{
list-style: none;
}
.menu li a{
color:#FFF;
text-decoration: none;
font-size: 14px;
}
.menu li a.active{
color:#CCC;
}
.menu li a:hover{
color:#CFCFCF;
}
.loading{
width: 100%;
height: 100%;
z-index: 0;
background-color: black;
position: absolute;
top: 0;
left: 0;
display:none;
}
.loading .wrap{
width: 100%;
height: 100%;
position: relative;
}
.loading .center{
margin: auto;
position: absolute;
top: 50%;
width: 800px;
left: 50%;
margin-top: -100px;
margin-left: -400px;
height: 200px;
text-align: center;
color:#999;
}
.loading .navhint{
font-size: 12px;
margin-top:0px;
margin-bottom: 100px;
color:#999;
position: relative;
top:-30px;
}
.loading .scroll{
font-size: 80px;
}
.loading .loadhint{
font-size: 20px;
}
.loadingBar{
position: absolute;
bottom: 0;
height: 15px;
width: 0px;
background-color: #999;
}
.caption{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, .3);
display: none;
}
.caption .logo{
float:left;
height:40px;
width:150px;
text-align: left;
position: relative;
top:0px;
}
.caption .logo img{
border:0;
width:150px;
height:60px;
}
.slidehint{
width:100%;
height:10px;
}
.text{
float:left;
width:60%;
height:40px;
font-size: 11px;
margin-left:30px;
position: relative;
}
.textbottom{
position: absolute;
width:100%;
bottom: 3;
color: #e0e0e0;
font-size: 11px;
}
.buttons{
width:120px;
float:right;
height:40px;
position:relative;
top:-3px;
margin-right: 30px;
}
.buttons .left{
float:left;
display: none;
}
.buttons .left:hover{
cursor: pointer;
opacity: 0.7;
}
.buttons .right{
display:none; float:right;
}
.buttons .right:hover{
cursor: pointer;
opacity: 0.7;
}
.menubar{
display: none;
position: fixed;
left: 60px;
top: 50%;
margin-top: -72px;
z-index: 3;
}
.menubar img{
height: 32px;
width: 32px;
}
.br{
height: 15px;
width: 20px;
}
.data div{
font-size: 24px;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/mousewheel/jquery.mousewheel.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
var ww;
var wh;
var oldviewing = 0;
var viewing = 1;
var scrolling = 0;
var scrolldir = 0;
var blockdelta = false;
var menu = 0;
var images = 1;
var loaded = false;
var defCaption;
var curCaption;
var captions = [];
var already_visited = false;
window.onresize = function(){
ww = $(window).width()+2;
wh = $(window).height();
resizeImages();
}
$(document).ready(function(){
document.ontouchmove = function(e){
e.preventDefault();
}
$(".menu").css({left:"0px"});
$(".menubar").css({visibility:"none"});
if(!(/Mobile/i.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent) )){
$(".mobile_css").html("");
}
//window properties
ww = $(window).width()+2;
wh = $(window).height();
defCaption = "";
curCaption = defCaption;
captions[1] = "";
if(captions[1]){
curCaption = captions[1];
$(".textbottom").html(captions[1]);
}else{
curCaption = defCaption;
}
setTimeout(function(){
$(".loading").fadeIn(500);
}, 500)
setInterval(function(){
if(scrolling && scrolldir != 2 && scrolldir != 0){
if(scrolldir == -1){
prev();
}else if(scrolldir == 1){
next();
}
scrolling = 0;
}
if(loaded == false && $("body").scrollLeft() != 0){
$("body").scrollLeft(0);
}
}, .05);
$("body").mousewheel(function(event, delta, deltaX, deltaY) {
if(scrolldir == 2){
blockdelta = true;
}else if(blockdelta == true){
if(Math.abs(deltaX) <= 10 && Math.abs(deltaY) <= 1){
blockdelta = false;
}
}
if(blockdelta == true){
deltaX = 0;
deltaY = 0;
}
if(Math.abs(deltaX) > 10){
if(scrolldir != 2){
scrolling = 1;
scrolldir = 1;
if(event.deltaX < 0){
scrolldir = -1
}
}
}else if(Math.abs(deltaY) > 1){
if(scrolldir != 2){
scrolling = 1;
scrolldir = 1;
if(event.deltaY < 0){
scrolldir = -1
}
}
}
event.preventDefault();
});
$(".caption .buttons .right").click(function(){
next();
});
$(".caption .buttons .left").click(function(){
prev();
});
});
function changeCaption(i){
if(captions[i]){
$(".textbottom").fadeOut(300, function(){
$(".textbottom").html(captions[i]);
$(".textbottom").fadeIn(300);
});
}else if(curCaption != defCaption){
$(".textbottom").fadeOut(300, function(){
$(".textbottom").html(defCaption);
$(".textbottom").fadeIn(300);
});
}
}
function resizeImages(){
$('body')[0].scrollLeft = ww*(viewing-1);
for(i=1; i<=images; i++){
//$("html")[0].scrollLeft(viewing*ww);
//picture properties
pw = $("#img"+i)[0].width;
ph = $("#img"+i)[0].height;
//size calculation
ph = (ww/pw)*ph;
pw = ww;
if(ph < wh){
pw = (wh/ph)*pw;
ph = wh;
}
//image resizage
$("#img"+i).css({width:pw, height:ph, position:"absolute", top:Math.round(-1*(wh - (wh/ph)*wh)/2), left:Math.round(-1*(ww - (ww/pw)*ww)/2)});
$("#limiter"+i).css({width:ww, height:wh, position:"absolute", left:(i-1)*ww});
$(".wide").css({width:images*ww, height:wh});
}
}
var total = 0;
function bump(){
$('body')[0].scrollLeft = 0;
goal = images;
total++;
if(already_visited){
$(".load").html("( loading "+total+" of "+images+" images ... )");
resizeImages();
$(".center").hide()
$(".wide").show();
$(".caption").show();
$(".menubar").show();
loaded = true;
}else{
$(".load").html("( loading "+total+" of "+images+" images ... )");
$(".loadingBar").animate({width: total*$(window).width() / images}, 200, function(){
if(total >= goal){
resizeImages();
setTimeout(function(){
$(".center").fadeOut(700, function(){
$(".wide").fadeIn(500);
$(".caption").fadeIn(500);
$(".menubar").fadeIn(500);
});
loaded = true;
setTimeout(function(){
}, 500);
}, 800);
}
});
}
}
var image_change_speed = 600;
function next(){
if(viewing < images){
scrolldir = 2;
changeCaption(viewing+1);
$('body').animate({scrollLeft: $("#limiter"+(viewing+1)).css("left")}, image_change_speed, 'easeOutCirc', function() {
scrolldir = 0;
viewing++;
if(viewing >= images){
$(".caption .buttons .right").fadeOut(300);
}else{
if($(".caption .buttons .right").css("display") == "none"){
$(".caption .buttons .right").fadeIn(300);
}
}
if(viewing <= 1){
$(".caption .buttons .left").fadeOut(300);
}else{
if($(".caption .buttons .left").css("display") == "none"){
$(".caption .buttons .left").fadeIn(300);
}
}
});
}
}
function prev(){
if(viewing > 1){
scrolldir = 2;
changeCaption(viewing-1);
$('body').animate({scrollLeft: $("#limiter"+(viewing-1)).css("left")}, image_change_speed, 'easeOutCirc', function() {
scrolldir = 0;
viewing--;
if(viewing <= 1){
$(".caption .buttons .left").fadeOut(300);
}else{
if($(".caption .buttons .left").css("display") == "none"){
$(".caption .buttons .left").fadeIn(300);
}
}
if(viewing >= images){
$(".caption .buttons .right").fadeOut(300);
}else{
if($(".caption .buttons .right").css("display") == "none"){
$(".caption .buttons .right").fadeIn(300);
}
}
});
}
}
</script>
</head>
<body>
<div class="loading">
<div class="wrap">
<div class="center">
<div class="scroll">Home</div>
<div class="load">( loading 0 of 1 images ... )</div>
</div>
</div>
<div class="loadingBar"></div>
</div>
<div class="menu">
<div class="logo">
</div>
<ul>
<li>Chair 2</li>
<li>Desk</li>
<li><div class="br"></div></li>
<li>Wave Stool</li>
<li><div class="br"></div></li>
<li>Steel Table 4</li>
<li>Storage Table</li>
<li><div class="br"></div></li>
<li>Wood Table 5</li>
<li>Wood Table 6</li>
<li><div class="br"></div></li>
<li>Wave Bench</li>
<li>Scoop Bench</li>
<li><div class="br"></div></li>
<li>HB Kitchens</li>
<li>HB Opencase</li>
<li><div class="br"></div></li>
<li>Image Archive</li>
<br class="mobile_br" />
<br />
<li><a class="active" href="index.php?p=home"><img src="images/home.png" /></a></li>
<li>The Company</li>
<li>Quality</li>
<li>Contact Us</li>
</ul>
</div>
<div class="wide">
<div id="limiter1" class="limiter">
<div class="cont">
<img src="images/1_1.jpg" id="img1" alt="img1" onload="bump();" class="slideimage"/>
<div class="data">
<div>
</div>
</div>
</div>
</div>
</div>
<div class="caption">
<div class="logo">
<a href="http://henrybuilt.com">
<img src="images/logo.png" alt="henrybuilt"/>
</a>
</div>
<div class="slidehint">
</div>
<div class="text">
<div class="textbottom">
</div>
</div>
<div class="buttons">
<div class="left">
<img src="images/lArrow.png" alt="left"/>
</div>
<div class="right">
<img src="images/rArrow.png" alt="right"/>
</div>
</div>
</div>
<div class="mobile_css">
<style>
.br{
height: 5px;
}
.wide .limiter .data{
font-size: 1em;
}
.wide .limiter .data div{
position: relative;
top: -50px;
}
.caption{
height: 10%;
min-height: 80px;
}
.buttons{
width:300px;
height:100%;
width: auto;
}
.buttons img{
height: 80%;
}
.caption .logo, .caption .logo img{
height: 100%;
width: auto;
}
.caption .logo{
width: auto;
}
.text{
display: none;
}
.menubar{
display: none;
position: fixed;
left: 60px;
top: 50%;
margin-top: -72px;
z-index: 3;
}
.menubar img{
height: 100px;
width: 100px;
}
.menu{
background-color: rgba(0, 0, 0, 0.95);
}
.menu .logo{
width:100px;
height:0px;
}
.menu li a{
position: relative;
top: -10px;
font-size: 0.9em
}
.menu ul{
margin-left: -20px;
}
.data div{
font-size: 36px;
}
.mobile_br{
display: none;
}
</style>
</div>
</body>
</html>

I think i have solution. Thanks to this post and answers! jQuery scrollTop() not working on 'body' element in Firefox
So, add $('html,body') as selector in your prev() and next() functions...
Function next() ->
line 475:
$('html,body').animate({scrollLeft: $("#limiter"+(viewing+1)).css("....
Function prev()
line 504:
$('html,body').animate({scrollLeft: $("#limiter"+(viewing-1)).cs....