Thumbnail as Placeholder Image Carousel - javascript

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.

Related

How to have my css navbar be proportional to the page

My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!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">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>
Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.
Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.

Smoothly navigation bar with javascript/ css

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>

Slider Height Images

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

Click function not working in slideshow

I'm making jQuery to click the Next and Previous span tab to control the image slideshow but it's not working.
function slideshow() {
var $active = $('div#slider-wrap img.active-img');
var $next = $active.next();
$next.addClass('active-img');
$active.removeClass('active-img');
}
$(function() {
setInterval(slideshow, 5000);
});
$('#tab-container a').on('click', function() {
var element = this.id;
console.log(element);
$('.images').trigger("slideshow", element);
});
/* next and previous jquery code */
$(document).ready(function() {
var divs = $('.images>img');
var now = 0; // currently shown div
divs.hide().first().show(); // hide all divs except first
$("#previous").click(function() {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("#next").click(function() {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // show previous
});
});
* {
margin: 0;
padding: 0;
}
#slider-wrap {
position: relative;
}
.slideshow .images {
width: 100%;
height: 350px;
overflow: hidden;
margin: 0 auto;
}
.slideshow .images img {
position: absolute;
width: 100%;
max-width: 960px;
height: auto;
}
.active-img {
z-index: 99;
}
#tab-container {
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
overflow: hidden;
width: 50%;
margin-top: 265px;
}
#tab-container span {
display: block;
float: left;
width: 42.995%;
padding: 10px 0;
text-align: center;
font-size: 12px;
text-transform: uppercase;
border-right: #ccc 1px solid;
letter-spacing: 1px;
font-family: 'corporate_condensed', sans-serif;
}
#tab-container a:nth-of-type(2) span {
border-right: 0;
}
#tab-container a,
#tab-container a:hover,
#tab-container a:active,
#tab-container a:visited {
text-decoration: none;
font-weight: bold;
color: #000;
cursor: pointer;
}
#tab-container span:hover {
color: #fff;
background: #444;
}
#tab-container span.active {
color: #fff;
background: #444;
}
#tab-container a span.active,
.c-slider #tab-container a:hover span.active,
.c-slider #tab-container a:active span.active,
.c-slider #tab-container a:visited span.active {
color: #fff;
}
#slider_time {
display: none;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="slider-wrap">
<div class="slideshow">
<div class="images">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="" class="active-img">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
</div>
</div>
</div>
<div id="tab-container">
<a><span id="previous" class="">Previous</span></a>
<a><span id="next"class="">Next</span></a>
</div>
<div style="clear:both"></div>
Previous and next tabs are not aligning properly with equal width. I'm having this problem all the time.

I'm adding <li> via my submit button and it is pushing past my div. My js function can't fix it

So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>
Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}
try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel

Categories