Trouble positioning divs side by side with CSS - javascript

Having read a few posts on stackoverflow, I've tried a few things to get my divs positioned side by side but nothing has been successful. I have never used CSS in any significant way before so I'm struggling.
I have a slideout that I want to slide in from the right edge of a page. The slider should have a div on its left edge that allows the slider to be dismissed (called clickme in the code below), and the right side of the slider is to contain a div (called image_carousel in the code below) that contains a carouFredSel.
I have two problems:
The slider does not come out smoothly. I've tried everything I can find in the #slideout's transition CSS property, but the slider still just appears rather than sliding from the right.
The div containing the carousel (#image_carousel) is not positioned to the right of the #clickme. I want to have #slideout with the left 10% taken up with #clickme and the right 90% taken up with #image_carousel. The #clickme does take up the left 10%, but the #image_carousel is positioned, well, kinda over the top of the clickme and not taking up the right 90% either. If I have position = relative for image_carousel then it looks a little better but is still not right.
Here is the code. The carouFredSel stuff I have copied from examples on their web site.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.carouFredSel-6.2.1.js"></script>
<style type="text/css">
#slideout {
position: absolute;
top: 37%;
right: -360px;
width: 400px;
min-height: 25%;
/* tried transform instead of width but no difference */
transition: width 0.3s ease;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-ms-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
overflow: auto;
background: #34cbcb;
-webkit-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
-moz-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
}
.slide-away {
transform: translate(-360px, 0);
-webkit-transform: translate(-360px, 0);
-moz-transform: translate(-360px, 0);
-ms-transform: translate(-360px, 0);
-o-transform: translate(-360px, 0);
}
#clickme {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 10%;
float: left;
background: #870C7E;
}
</style>
<style type="text/css">
.image_carousel {
/* padding: 15px 0 15px 40px; */
position: relative;
margin-left: 10%;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
a.prev, a.next {
background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) no-repeat transparent;
width: 45px;
height: 50px;
display: block;
position: absolute;
top: 85px;
}
a.prev { left: -22px;
background-position: 0 0; }
a.prev:hover { background-position: 0 -50px; }
a.prev.disabled { background-position: 0 -100px !important; }
a.next { right: -22px;
background-position: -50px 0; }
a.next:hover { background-position: -50px -50px; }
a.next.disabled { background-position: -50px -100px !important; }
a.prev.disabled, a.next.disabled {
cursor: default;
}
a.prev span, a.next span {
display: none;
}
.pagination {
text-align: center;
}
.pagination a {
background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
width: 15px;
height: 15px;
margin: 0 5px 0 0;
display: inline-block;
}
.pagination a.selected {
background-position: -25px -300px;
cursor: default;
}
.pagination a span {
display: none;
}
.clearfix {
float: none;
clear: both;
}
</style>
<script>
$('#clickme').click(function() {
$('#slideout').toggleClass('slide-away');
});
</script>
<div id="slideout">
<div id="clickme">
<img id="direction" class="chevron" src="left.PNG"/>
</div>
<div class="image_carousel">
<div id="foo2">
<img src="image1.bmp" alt="" width="60" height="60" />
<img src="image2.bmp" alt="" width="60" height="60" />
<img src="image3.bmp" alt="" width="60" height="60" />
<img src="image4.bmp" alt="" width="60" height="60" />
<img src="image5.jpg" alt="" width="60" height="60" />
<img src="image6.jpg" alt="" width="60" height="60" />
</div>
<div class="clearfix"></div>
<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
<a class="next" id="foo2_next" href="#"><span>next</span></a>
<div class="pagination" id="foo2_pag"></div>
</div>
</div>
<script>
$("#foo2").carouFredSel({
circular: false,
infinite: false,
auto : false,
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
$(function () {
$("#slideout").hide();
setTimeout(function(){
$("#slideout").show();
$("#direction").attr("src","right.PNG");
$('#slideout').toggleClass('slide-away');
},3000);
});
</script>
Thanks,
Paul

Related

CSS clip path issue with background

I'm currently implementing a switch. The problem is that the background which should be hidden by the switch shows one thin line at the left end. I've absolutely no idea why. The strange thing is that here on SO everything looks really good. The switch is located in a scrollable main wrapper with all the other content. I thought this could be the problem but after removing the scrolling, the error was still there:
When I run the inspector and hover the element, the background seems to go out:
This is my code. I've tried a low but can't find the problem:
let toggle = document.getElementById('container');
let toggleContainer = jQuery('#toggle-container');
let toggleNumber;
jQuery('#container').click( function() {
toggleNumber = !toggleNumber;
if (toggleNumber) {
toggleContainer.css( "clip-path", "inset(0 0 0 50%)" );
} else {
toggleContainer.css( "clip-path", "inset(0 50% 0 0)" );
}
});
#container {
width: 100%;
height: 56px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
user-select: none;
cursor: pointer;
border-radius: 3px;
-webkit-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, .2);
box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}
.inner-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-transform: uppercase;
}
.inner-container:first-child {
background: gray;
color: #ffffff;
}
.inner-container:nth-child(2) {
background: chartreuse;
color: #ffffff;
clip-path: inset(0 50% 0 0);
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.toggle {
width: 50%;
position: absolute;
height: inherit;
display: flex;
font-weight: 600;
}
.toggle p {
margin: auto;
}
.toggle:nth-child(1) {
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
<div class="inner-container" id='toggle-container'>
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
</div>

I would suggest an optimized version with less of code and without the use of clip-path:
let toggle = document.getElementById('container');
let toggleContainer = jQuery('.inner-container');
jQuery('#container').click(function() {
toggleContainer.toggleClass('second');
});
#container {
margin-bottom: 20px;
user-select: none;
cursor: pointer;
border-radius: 3px;
box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}
.inner-container {
height: 56px;
text-transform: uppercase;
display: flex;
background:
linear-gradient(chartreuse,chartreuse) left/50% 100% no-repeat,
gray;
color: #ffffff;
transition: 0.2s;
}
.inner-container.second {
background-position:right;
}
.toggle {
width: 50%;
display: flex;
font-weight: 600;
}
.toggle p {
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
</div>

This seems to be what you are seeing:
Which was done by making the CSS: clip-path: inset(0 50% 0 1px);
Maybe just try adding some negative space to the left side:
toggleContainer.css( "clip-path", "inset(0 50% 0 -10px)" );

Why the last section covers the above sections

I am trying to create the full-page parallax scroll in the one-page website. There are 5 sections in the page. When I add the code of parallax scrolling, the last section covers the above sections. I am not sure where is the mistake.
And, I guess the js/jQuery code in my work does not work since the effects do not come out on the menu.
Any help is appreciated. Thank you so much.
$(document).ready(function() {
let hamburgerClicked = fales;
$('#toggle').on("click", function() {
if (hamburgerClicked == false) {
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)');
$(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)');
hamburgerClicked = true;
} else {
$(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)');
$(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)');
hamburgerClicked = false;
}
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
html {
height: 100%;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
.background {
overflow: hidden;
will-change: transform;
backface-visibility: hidden;
height: 100vh 30vh;
position: fixed;
width: 100%;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
}
.background:first-child {
transform: translateY(-30vh / 2);
}
.content-wrapper {
transform: translateY(30vh /2);
}
section {
width: 100%;
transform: translateY(40vh);
will-change: transform;
backface-visibility: hidden;
transition-timing-function: 1.2s +.5, all, cubic-bezier(0.22, 0.44, 0.1);
text-decoration: none;
scroll-behavior: smooth;
}
/*-------------------------------background-animation---------------------------------------*/
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
/*----------------------------------------navbar---------------------------------------------*/
/*-------------header-container-------------*/
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
/*-------------------menu-------------------*/
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
/*---------------------------------------section-1-------------------------------------------*/
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
/*------------crystal-animation-------------*/
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 23%;
position: absolute;
top: 18%;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
/*---------------------------------------section-2-------------------------------------------*/
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
/*---------------------------------------section-3-------------------------------------------*/
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
/*--------constellation-cards----------*/
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
/*---------------------------------------section-3-content---------------------------------*/
/*------------card-content-------------*/
#section3-content {
flex: 90%;
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.7);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: 20%;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 50px;
padding-right: 100px;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: 1em;
margin-bottom: 10px;
}
.button {
margin: 0;
padding: 0;
}
.constellation-icon li {
list-style: none;
float: left;
}
.constellation-button {
width: 13%;
/*--------border: 2px solid opacity .3 #fff;
background: opacity .3 #fff;
border-radius: 10px;-----------*/
}
/*----------44--------------------------section-4------------------------------------------*/
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times, it requires quite an imagination to draw out what some constellations are supposed
to represent! </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<!-- section-3---->
<section id="section3" class="background">
<h2>12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li>
<figcaption>
<img src="img/12-constellation-cards/1.svg" alt="" class="svg">
</figcaption>
</li>
<li>
<img src="img/12-constellation-cards/4.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/7.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/10.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/2.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/5.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/8.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/11.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/3.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/6.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/9.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/12.svg" alt="" class="svg">
</li>
</ul>
</div>
</section>
<section id="section3-content" class="background">
<div class="content-text">
<img src="img/12-constellation-pattern/Aries-img.svg" alt="" class="constellation-img"><img src="img/12-constellation-pattern/Aries-star.svg" alt="" class="constellation-star">
<article class="intro">
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-pattern">
<h3>Aries</h3>
<p>While one of the biggest, most famous, and oldest named constellations, Aquarius is faint and often hard to find/see. In Greek mythology, Aquarius represented Ganymede, a very handsome young man. Zeus recognized the lad’s good looks, and invited
Ganymede to Mt. Olympus to be the cupbearer of the gods. For his service he was granted eternal youth, as well as a place in the night sky.
</p>
<p>Despite its prominent position and large size, you can see that Aquarius doesn’t really have defining features, nor does it contain any bright stars. The protruding line to the right is Aquarius’s right arm, with the large downward shape being
a combination of the water flowing down out of the vase and his right leg. While not the entire constellation, what’s drawn above is what you’re most likely to see in the night sky. You won’t see this one in the city; you’ll need a dark sky
to find the cupbearer.
</p>
</article>
<div class="button">
<ul class="constellation-icon">
<li>
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Leo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Sagittarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Taurus-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Virgo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Capricorn-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Gemini-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Libra-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Aquarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Cancer-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Pisces-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Scorpio-pattern.svg" alt="" class="constellation-button">
</li>
</ul>
</div>
</div>
</section>
<!-- section-4---->
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to
help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When
you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>

Adding an animation to an image through OnClick event

I have an image gallery where the user clicks on a small thumbnail image and this image is displayed as a larger version "Polaroid img" in my case. What I want to do is add a animation to the large image so that its opacity changes from 0 to 1 each time a new image is displayed there.
I cant figure out in my JavaScript why the class isn't been added and removed.
Thanks
HTML code
<div class="container">
<h1>Meet some of the Characters</h1>
<div class="boxContainer">
<div class="Polaroid">
<img src="images/imgage1.jpg" id="LargeImage">
<div class="PolaroidText" id="LargeImageText">Image 1</div>
</div>
</div>
<div class="row">
<div class="column"><img src="images/imgage1.jpg" alt="Image 1" onclick="ClickImage(this)"></div>
<div class="column"><img src="images/imgage2.jpg" alt="Image 2" onclick="ClickImage(this)"></div>
<div class="column"><img src="images/imgage3.jpg" alt="Image 3" onclick="ClickImage(this)"></div>
<div class="column"><img src="images/imgage4.jpg" alt="Image 4" onclick="ClickImage(this)"></div>
<div class="column"><img src="images/imgage5.jpg" alt="Image 5" onclick="ClickImage(this)"></div>
<div class="column"><img src="images/imgage6.jpg" alt="Image 6" onclick="ClickImage(this)"></div>
<div class="column"><img src="images/imgage7.jpg" alt="Image 7" onclick="ClickImage(this)"></div>
</div>
</div>
CSS Code
.boxContainer
{
max-width: 600px;
height: auto;
margin: auto;
padding: 20px;
}
.Polaroid
{
width: 100%;
height: auto
max-width: 2058px;
transform: rotate(2deg);
margin-top: 50px;
margin-bottom: 50px;
box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 10px;
background-color: white;
border: 2px solid black;
border-radius: 5px;
padding: 20px;
}
.Polaroid img
{
opacity: 0px;
max-width: 100%;
height: auto;
border: 2px solid #949baa;
transition: opacity 2s ease !important;
}
.PolaroidText
{
color: black;
font-size: 28px;
text-align: center;
margin: auto;
padding: 10px;
text-decoration: underline;
}
.column {
float: left;
width: 14%;
padding: 5px;
display: table;
margin: auto;
}
/* Style the images inside the grid */
.column img {
width: 100%;
height: auto;
opacity: 0.8;
cursor: pointer;
border-radius: 5px;
z-index: 1;
transform: rotate(2deg);
transition-duration: .3s;
}
.column img:hover {
opacity: 1;
transform: scale(1.2);
box-shadow: rgba(0, 0, 0, 0.6) 5px 5px 5px;
z-index: 9999;
}
.PoloaroidAnim
{
animation-name: FadeImage;
-webkit-animation-name FadeImage;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes FadeImage
{
0% {opacity: 0;}
100% {opacity: 1;}
}
JavaScript Code
function ClickImage(smallimg)
{
var lgImage = document.getElementById("LargeImage");
var lgImageText = document.getElementById("LargeImageText");
lgImage.addClass("PoloaroidAnim").one("webkitAnimationEnd",
remove(lgImage));
lgImage.src = smallimg.src;
lgImageText.innerHTML = smallimg.alt;
}
function remove(img)
{
img.removeClass("PoloaroidAnim");
}

If you are using plain JS, then the addClass function doesn't exists, so you should add the class like this:
var lgImage = document.getElementById("LargeImage");
lgImage.className += " PolaroidAnim";
The same goes for the other functions you are using (removeClass, one) - they are from the jQuery library.
If you use jQuery then you should select the element like this: var lgImage = $("#LargeImage"); and not by getElementById because that is not a jQuery object and then the addClass function is not defined.

How to create a responsive video layout with bootstrap?

I'm creating a website where I'll need to add a video. the video will be triggered using a javascript click event, the video is contained with an iframe.
The video when invoked needs to fit the height and with of the parent div. I'm using bootstrap layout to help me create a responsive layout.
I followed an example online but for some reason the video does not fit the entire width of the parent div.. I'm using the container fluid class with the col-**-12 grid layout.
I've included a jsfiddle link with an example of what I have implememnted.
https://jsfiddle.net/JuiceJay/rt9L69ya/6/
<div class="container-fluid remove-padding">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="vid_thumb embed-responsive embed-responsive-16by9" id="bio_vid">
<h1> A leader in the world of photography</h1>
<span id="play-btn"><img src = "http://www.rockinrranch.com/wp-content/themes/rockinr2013/images/play-button.png" alt = "thumb"/></span>
</div>
</div>
</div>
h1{
position: relative;
top: 240px;
text-align: center;
margin: 0 auto;
width: 70%;
color: #FFF;
letter-spacing: 0.2em !important;
font-family: "Arial Black", Gadget, sans-serif !important;
text-transform: uppercase !important;
font-weight: 100 !important;
font-style: normal;
font-size: 2em;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
-moz-transition: .2s ease-in;
transition: .2s ease-in;
}
`.vid_thumb{
background-image: url('https://images3.alphacoders.com/823/thumb-1920-82317.jpg');
background-attachment: local;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
background-size: cover;
width: 100%;
height: 400px !important;
max-height: 400px !important;
margin: 0px;
padding: 0px;
filter: grayscale(60%);
-webkit-filter: grayscale(60%);
border: 1px solid green;
}
.vid_thumb img{
width: 100%;
height: auto;
margin: 0 auto;
}
span img{
width: 100%;
height: 100%;
margin: 0 auto;
}
#play-btn{
position: absolute;
overflow: hidden;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
opacity: 0.3;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display:none;
}
.vid_thumb:hover #play-btn{
display: block;
}
.vid_thumb:hover h1{
display:none;
}
#play-btn:hover{
opacity: 1;
}
.remove-padding{
padding: 0px !important;
}
document.getElementById('bio_vid').addEventListener('click', function() {
this.innerHTML = '<iframe class = "embed-responsive-item" src= "https://www.youtube.com/watch?v=t6uSHOp2Uj0" width="100%" height="400px allowfullscreen="false">';
if (document.getElementById('bio_vid').ended) {
document.getElementByTagName("iframe").style.display = 'none';
}
});
Somehow, if i use the col--6, and dive the grid in two, it fills the width of either but not col--12.. I've even tried using the bootstrap embed-responsive-16by9.
Or any help on ditching boostrap and implementing a whole new and easier method.
I would also like to know how to detect the end of a video through iframe using javascript.

How can I make 'white border transitions and image zoom up' when hover over image

I'm trying to add a custom hover just like the project tiles on https://ueno.co/ whereby on hover a white border transitions up, and the image zooms up too. Here is a link to my homepage, it is the Portfolio grid I am trying to improve - http://www.david-healey.com/

Update 2:
You can use below example on your website. Just add Class: zoomimg to the image structure.
.menu{
text-align:center;
}
.zoomimg {
display: inline-block;
width: 200px;
height: 200px;
padding: 0px 5px 0px 5px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: all .5s ease;
position: relative;
}
.zoomimg:hover {
cursor: pointer;
background-size: 150% 150%;
transform: matrix(1, 0, 0, 1, 0, 0);
height: 150.797px;
width: 150.984px;
}
.blog {
background-image: url(http://www.david-healey.com/wp-content/uploads/2016/11/ST_Project_Thumb_570%C3%97587.jpg);
display: block;
top: 65.0938px;
overflow: hidden;
}
<div id="menu">
<div class="blog zoomimg"></div>
</div>

You just need to scale img up and scale .thumb-inner down.
.thumb-inner {
overflow: hidden;
}
.thumb-inner,
.thumb-inner img {
transition: transform .3s ease-in-out;
}
.thumb-inner:hover {
transform: scale(.97);
}
.thumb-inner img:hover {
transform: scale(1.1);
}
<a href="#">
<div class="thumb-inner">
<img src="http://res.cloudinary.com/dvjpaoffl/image/upload/v1486268758/sample.jpg">
</div>
</a>

Categories