I'm using Django, and Jquery to fade in an image when it shows on screen in my browser. I'm trying to avoid using external libraries and I found a good tutorial.
The thing is, the code works on codepen but not in my Django website.
This is the codepen http://codepen.io/SitePoint/pen/MwEaQM
And this is my code:
html
{% load staticfiles %}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<script type="text/javascript" src="{% static 'js/animate.js' %}"></script>
<body>
<!--For our animations to look good, the animated elements need to be able to be scrolled to. For this example I've added dummy content to the top -->
<div class="main-container">
<div class="container">
<h1>Slide in from the left </h1>
<p>This animation will focus on sliding an element from the left once it enters the view of the user</p>
</div>
<div class="container">
<h2>
Our Testimonials <i class="fa fa-comment"></i></h2>
<p> We have worked in the industry for 15 years and have provided services to a wide range of clients.</p>
<p>Come and see what our clients are saying about our services. </p>
</div>
<div class="container cf">
<!-- testimonial one -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjVTdZcktRTWhNamM" />
</div>
<div class="right">
<h3>Johnathon Richard Smith</h3>
<h4>CEO / Manager - Auto Incorporated</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> When I started using their service I was skeptical. They promised me a 300% return on my initial investment. However they came through on their word and now my business is flourishing.. <i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
</div>
<!--testimonial two -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjV3BseTMtcEU1T2M" />
</div>
<div class="right">
<h3>Joanna Hammerlton</h3>
<h4>Marketing Manager - Omega Creative</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Our company first enlisted their services when we had a down-turn in sales and revene. They outlined a series of steps we could take to improve our position and within a year we are making signifcant improvements..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
<!--testimonial three -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjTURta0pyMEtoUmc
" />
</div>
<div class="right">
<h3>Mark Jamerson</h3>
<h4>CEO - Generic Business</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> We entered into a 12 month period of service with this company in the hopes to improve our returns. After this period we have a return of double our initial investment..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<!--testimonial four -->
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjb1dxcGZEYUc0Z3M" />
</div>
<div class="right">
<h3>Susan Hilton</h3>
<h4>Financial Officer - People Tech</h4>
</div>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Our involvement in this company has been mutually beneficial. We were hoping for slightly higher returns, however the current level of returns are sufficient..
<i class="fa fa-quote-right"></i>
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>
</body>
css
/*These styles contain basic styles for fomatting along with our animation css*/
body {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background: #efefef;
line-height: 170%;
}
strong,
b {
font-weight: 600
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
line-height: 150%;
}
i.fa {
color: #333;
}
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*clearfixes*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.main-container {
background: #fff;
max-width: 1000px;
margin: 25px auto 25px auto;
position: relative;
}
.container {
position: relative;
padding: 25px;
}
/*animation element*/
.animation-element {
opacity: 0;
position: relative;
}
/*animation element sliding left*/
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-100px, 0px, 0px);
-webkit-transform: translate3d(-100px, 0px, 0px);
-o-transform: translate(-100px, 0px);
-ms-transform: translate(-100px, 0px);
transform: translate3d(-100px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {
float: left;
width: 47%;
margin: 0% 1.5% 3% 1.5%;
background: #F5F5F5;
padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial:nth-of-type(odd) {
width: 48.5%;
margin: 0% 1.5% 3.0% 0%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 48.5%;
margin: 0% 0% 3.0% 1.5%;
}
.animation-element.slide-left.testimonial .header{
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
float: left;
margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
float: left;
}
.animation-element.slide-left.testimonial img {
width: 65px;
height: 65px;
border-radius: 50%;
box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}
.animation-element.slide-left.testimonial h3 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial h4 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial .content {
float: left;
width:100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .rating{}
.animation-element.slide-left.testimonial i {
color: #aaa;
margin-right: 5px;
}
/*media queries for small devices*/
#media screen and (max-width: 678px){
/*testimonials*/
.animation-element.slide-left.testimonial,
.animation-element.slide-left.testimonial:nth-of-type(odd),
.animation-element.slide-left.testimonial:nth-of-type(even){
width: 100%;
margin: 0px 0px 20px 0px;
}
.animation-element.slide-left.testimonial .right,
.animation-element.slide-left.testimonial .left,
.animation-element.slide-left.testimonial .content,
.animation-element.slide-left.testimonial .rating{
text-align: center;
float: none;
}
.animation-element.slide-left.testimonial img{
width: 85px;
height: 85px;
margin-bottom: 5px;
}
}
js
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
It should be the same. I'm not sure why it won't work. I've tried wrapping the jquery in a function to make it wait for the content to load but I got the same result.
EDIT: Here is a screenshot of the requests It seems to be loading everything fine. There are no errors. The animated content is hidden as it should but it does not appear when I scroll.
Are there any errors? Are the CSS and JS files present? This should not have anything to do with Django directly, but could be due to the files not being served correctly using Django's static files engine. Are you sure all files are being downloaded?
Related
This question already has answers here:
How to scale a div without scaling content
(3 answers)
Closed 2 years ago.
I have a div that expands on click to 1.3 width and 1.02 height, but I want the responsive icon inside it to retain its dimensions. Currently the icon becomes stretched and elongated to match the dimensions of its container div. I want it to grow but not lose its original dimensions.
$(document).ready(function(){
$(".ico").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
.bar {
display: inline-block;
font-size: 3vw;
width: 7%;
}
.ico {
background-color: #f8f8ff;
line-height: 1.5;
border-style: solid;
text-align: center;
border-width: 2px;
border-color: #aeaf9d;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.active{
transform-origin: left;
transform: scale(1.3, 1.02);
transition: 50ms;
box-shadow: 2px 2px 10px -1px rgba(0,0,0,.3);
z-index: 10;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
<div class="ico">
<div class="twitter">
<i style="color:#1DA1F2;" class="fab fa-twitter"></i>
</div>
</div>
<div class="ico">
<div class="youtube">
<i style="color:#FF0000;" class="fab fa-youtube"></i>
</div>
</div>
</div>
Apply the opposite scaling to the icon
$(document).ready(function() {
$(".ico").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
});
.bar {
display: inline-block;
font-size: 3vw;
width: 7%;
}
.ico {
background-color: #f8f8ff;
line-height: 1.5;
border-style: solid;
text-align: center;
border-width: 2px;
border-color: #aeaf9d;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.active {
transform-origin: left;
transform: scale(1.3, 1.02);
transition: 50ms;
box-shadow: 2px 2px 10px -1px rgba(0, 0, 0, .3);
z-index: 10;
}
.active i {
transform: scale(calc(1/1.3), calc(1/1.02));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
<div class="ico">
<div class="twitter">
<i style="color:#1DA1F2;" class="fab fa-twitter"></i>
</div>
</div>
<div class="ico">
<div class="youtube">
<i style="color:#FF0000;" class="fab fa-youtube"></i>
</div>
</div>
</div>
I have a movie website I am working on similar to Netflix using HTML, CSS, JS and I am looking for a way to let users add a movie to their mylist, like Netflix, I have tried researching but could not find an answer. There is a working Registration and Login Form. Thanks in Advance guy!
// select the strip
$("section").each(function() {
// change the number of the "li" elements and the strip will be fine anyway
var wUl = $(this).find("ul").width();
var nLi = $(this).find("ul").children().length;
var wElement = 100 / nLi;
$("li").css("width", wElement + "%");
// hover "li"
$(this).find("li").hover(
// mouse In
function() {
$(this).toggleClass("hover");
var scaleFactor = 1.8;
var wBigElement = $(this).width() * scaleFactor;
var translation = (wBigElement - $(this).width()) / 2;
var item = $(this).parent().children();
$(this).css("transform", "scale(" + scaleFactor + ")");
if ($(this).is(":nth-child(1)")) {
item.slice(1,nLi).css("transform", "translate(" + translation * 2 + "px, 0px)");
}
for (var i = 2; i <= nLi - 1; i++) {
if ($(this).is(":nth-child(" + i + ")")) {
item.slice(0,i-1).css("transform", "translate(-" + translation + "px, 0px)")
.end().slice(i).css("transform", "translate(" + translation + "px, 0px)");
}
}
if ($(this).is(":nth-child(" + nLi + ")")) {
item.slice(0,(nLi-1)).css("transform", "translate(-" + translation * 2 + "px, 0px)");
}
// mouse Out
}, function() {
$(this).toggleClass("hover");
$(this).css("transform", "scale(1)");
$("li").not(this).css("transform", "translate(0px, 0px)");
}
);
});
#charset "UTF-8";
* {
box-sizing: border-box;
outline: 0px;
}
ul, ol {
list-style: none;
padding: 0px;
margin: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
font-family: "Montserrat";
color: #fff;
background: #141414;
}
main {
display: block;
position: relative;
width: 100%;
height: 100vh;
padding: 4vw;
overflow-x: hidden;
}
.logo {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
padding: 3vw 4vw;
background: rgba(255, 255, 255, 0.02);
}
.logo svg {
display: block;
position: relative;
width: 10vw;
}
.logo svg path {
fill: #E50914;
}
border {
}
section {
display: block;
position: relative;
top: 8vw;
margin-bottom: 4vw;
}
section h2 {
display: block;
width: 100%;
font-size: 1.2vw;
font-weight: 600;
margin-bottom: .8vw;
margin-left: 4px;
}
section ul {
display: block;
position: relative;
width: 98%;
height: auto;
white-space: nowrap;
font-size: 0;
}
section ul:hover li:not(.hover) {
opacity: 0.3;
}
section ul li {
display: inline-block;
height: auto;
padding: 2px;
overflow: hidden;
cursor: pointer;
}
section ul li .img {
display: block;
position: relative;
width: 100%;
height: 0px;
padding-top: 56.25%;
background-size: cover;
transform-origin: top right;
}
section ul li .img:after {
content: "";
display: block;
position: absolute;
top: -10px;
left: -10px;
z-index: 1;
width: calc(100% + 20px);
height: calc(100% + 20px);
opacity: 0;
background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, #141414 100%);
transition: all 0.5s ease 0.2s;
}
section ul li .img img {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 0;
}
section ul li .card {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1;
width: 100%;
height: auto;
padding: 10px;
text-shadow: 0 1px 1px rgba(20, 20, 20, 0.6);
opacity: 0;
}
section ul li .card h3 {
display: block;
width: 100%;
font-size: .7vw;
font-weight: 600;
margin-bottom: .3vw;
}
section ul li .card .info {
display: block;
width: 100%;
margin-bottom: .3vw;
font-size: 0;
}
section ul li .card .info .match {
display: inline-block;
width: auto;
font-size: .5vw;
font-weight: 600;
margin-right: .4vw;
color: #46D369;
}
section ul li .card .info .age {
display: inline-block;
position: relative;
width: auto;
font-size: .5vw;
padding: 0 0.4em;
margin-right: .4vw;
border: solid 1px rgba(255, 255, 255, 0.4);
}
section ul li .card .info .dur {
display: inline-block;
width: auto;
font-size: .5vw;
}
section ul li .card .tags {
display: block;
width: 100%;
}
section ul li .card .tags span {
display: inline-block;
width: auto;
font-size: .5vw;
margin: 0 .3vw 0 0;
}
section ul li .card .tags span:after {
content: "●";
display: inline-block;
margin: 0 0 0 .3vw;
font-size: .8 xvw;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: rgba(255, 255, 255, 0.4);
}
section ul li .card .tags span:last-child:after {
display: none;
}
section ul li:hover .img:after {
opacity: 1;
}
section ul li:hover img {
opacity: 1;
}
section ul li:hover .card {
opacity: 1;
}
section ul li:first-child {
transform-origin: 0px center;
}
section ul li:last-child {
transform-origin: 100% center;
}
section ul li , li * {
transition: all .5s ease .2s;
}
.container:hover .arrow-right,
.container:hover .arrow-left {
opacity: 1;
transition: 0.2s;
}
.section-frame {
width: 100%;
margin-left: 30px;
margin-right: 30px;
/* border: 2px solid green; */
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- pics by fanart.tv-->
<main>
<div class="section-frame">
<section>
<h2>New Releases <i style="font-size:14px" class="fa"></i></h2>
<div class="right">
<ul>
<li class="item01">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/466272/moviethumb/once-upon-a-time-in-hollywood-5dfeb7beb0d22.jpg)"><img src="https://fanart.tv/fanart/movies/466272/moviebackground/untitled-manson-murders-project-5c58b437a6e65.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Once upon a time in... Hollywood <i style="font-size:.9vw; padding-left: 1% ;" class="fa"></i>
</h3>
<div class="info">
<div class="match">99% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 40min <i style="font-size:.9vw; padding-left: 120% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Drama</span><span>Action</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item02">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/475557/moviethumb/joker-5db693c454a3e.jpg)"><img src="https://fanart.tv/fanart/movies/475557/moviebackground/joker-5d68337505352.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Joker <i style="font-size:.9vw; padding-left: 73% ;" class="fa"></i></h3>
<div class="info">
<div class="match">95% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 2min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Crime</span><span>Drama</span><span>Thriller</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item03">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/496243/moviethumb/parasite-5d2d5ab30c73d.jpg)"><img src="https://fanart.tv/fanart/movies/496243/moviebackground/parasite-5df5fb5439d1d.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Parasite <i style="font-size:.9vw; padding-left: 69% ;" class="fa"></i></h3>
<div class="info">
<div class="match">98% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 12min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Crime</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item04">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/359724/moviethumb/ford-v-ferrari-5db74ab5a49b9.jpg)"><img src="https://fanart.tv/fanart/movies/359724/moviebackground/go-like-hell-5d0839e2ecc25.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Ford v. Ferrari <i style="font-size:.9vw; padding-left: 57% ;" class="fa"></i></h3>
<div class="info">
<div class="match">96% Match</div>
<div class="age">TV-PG</div>
<div class="dur">2h 32min <i style="font-size:.9vw; padding-left: 130% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Action</span><span>Biography</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item05">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/398978/moviethumb/the-irishman-5ded4b24803d2.jpg)"><img src="https://fanart.tv/fanart/movies/398978/moviebackground/the-irishman-5de15d18d48f4.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>The Irishman<i style="font-size:.9vw; padding-left: 59% ;" class="fa"></i></h3>
<div class="info">
<div class="match">92% Match</div>
<div class="age">TV-MA</div>
<div class="dur">3h 29min <i style="font-size:.9vw; padding-left: 128% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Biography</span><span>Crime</span><span>Drama</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 30% ;"></i></div>
</div>
</li>
<li class="item06">
<div class="img" style="background-image: url(https://fanart.tv/fanart/movies/492188/moviethumb/marriage-story-5dd0c5d3db138.jpg)"><img src="https://fanart.tv/fanart/movies/492188/moviebackground/marriage-story-5def5bf3a229b.jpg"/></div>
<div class="card">
<i class="fa fa-play-circle" style="font-size:.9vw"></i>
<h3>Marriage Story<i style="font-size:.9vw; padding-left: 56% ;" class="fa"></i></h3>
<div class="info">
<div class="match">94% Match</div>
<div class="age">TV-14</div>
<div class="dur">2h 17min <i style="font-size:.9vw; padding-left: 148% ;" class="fa"></i></div>
</div>
<div class="tags"> <span>Comedy</span><span>Drama</span><span>Romance</span><i class="fa fa-plus-circle" style="font-size:.9vw; padding-left: 28% ;"></i></div>
</div>
</li>
</ul>
</div>
</section>
</div>
</main>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
This are my codes HTML, CSS, and JS , I am basically looking for a way to make the my list function work, Meaning that a logged in user can have there own separate personal list.Once again thanks in Advance.
I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked.
And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both.
here is a link to the live page to see what happens when you click any link for #about section: portfolio #about
https://kingdomb.github.io/live_portfolio/#about
NOTE: The code below does not give display the error properly so use the link above.
UPDATE: 3/22 02:16
I managed to find this:
Come on guys!
This have a very simple solution, create your ancho like this:
<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>
With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.
Works like a charm. I use this trick in all one page design websites.
BUT, now one click on the about link in the navbar to #myanchor gives me this:
And if I click the exact same navbar link I get a minor adjustment to this:
THANKS!!!
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction();
myFunction2();
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll
position.Remove "sticky"
when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
// Get the logo
var logo = document.getElementById("logo");
// Get the offset position of the logo
var logoSpin = logo.offsetTop;
// Add the logo-spin class to the navbar when you reach its scroll
position.Remove "logo-spin"
when you leave the scroll position
function myFunction2() {
if (window.pageYOffset >= logoSpin) {
logo.classList.add("logo-spin");
} else {
logo.classList.remove("logo-spin");
}
}
// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
// .filter(function() {
// return this.hostname != window.location.hostname;
// })
// .attr("target", "_blank");
//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
for (var c = document.getElementsByTagName("a"), a = 0; a <
c.length; a++) {
var b = c[a];
b.getAttribute("href") &&
b.hostname !== location.hostname &&
(b.target = "_blank");
}
}
externalLinks();
html,
body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}
/* ABOUT */
#about {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 200px;
}
/* .section2 {
position: absolute;
width: 100%;
} */
.section2 .row {
background: url("../images/improved-teamwork-and-
collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 0%;
}
.section2 .card {
background-color: RGBA(33, 37, 41, .80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
}
.section2 .card-block {
font-weight: 520;
width: 50%;
margin: 0 auto;
font-size: 25px;
line-height: 50px;
padding: 60px;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.section2 .card-block {
z-index: 8000;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 75px;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration:
1.8s">King</span>.
<br>
<div class="intro animated fadeInLeft" style="animation-
delay: 3s; animation- duration: 2s">And I'm a full- stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn
btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration:
2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item active">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s;
animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data- toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="margin: -65px 0px 200px 0px; position:
absolute;">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent
projects. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-
primary" target="__blank">Print My Resume
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
The reason you are having this issue is that the .section2 section it looks like you have a margin-top: 200px. Therefore creating that space. Now you can just adjust accordingly.
I would be careful when using margins. Using them only if you have to. I rarely use it, only for minor tweaks and responsiveness. If you are styling correct there should be no use for margins. I would take a look into using Flexbox. This is super useful when creating nice functional layouts. It's a great starter for new people too. The sooner you get into it, the easier layouts will be for you.
I also noticed that you are using javascript to add external links that open in a new page. To do that an easier way is to do something like this <a href="someoutsidelink.com" target="_blank">. Here is a reference, w3schools
As for your navbar fixed, here is some code that you should use instead of the one you have now.
var elementPosition = $("#navbar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$("#navbar")
.css("position", "fixed")
.css("top", "0");
} else {
$("#navbar").css("position", "static");
}
});
Edit One:
Here's one way to do this one is adding a blank <div class="blank"> tags. Place it on top of the <section class="section2"> opening tag. then add a height: 200px; width: 100% therefore creating that space.
I found a solution! I refactored the code in the ABOUT section to this:
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
Notice that I removed the opening div margin html styling.
I design show/hide panel using bootstrap like this:
HTML:
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
.content {
height: 1000px;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sidebar-nav {
margin-left: -250px;
width: 250px;
z-index: 10001;
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
height: 100vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-color: #fafafa;
border-right: 1px solid #ccc;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sideBarCloseIcon {
float: right;
cursor: pointer;
}
.backdrop {
height: 100vh;
width: 100%;
z-index: 10000;
position: fixed;
top: 0;
left: 0;
display: none;
background-color: #000;
opacity: 0.2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav .list-group-item {
background-color: transparent;
border: 0px;
cursor: pointer;
}
.sidebar-nav .list-group {
margin-left: -15px;
margin-right: -15px;
}
.sidebar-nav .list-group hr {
margin-top: 0px;
margin-bottom: 0px;
}
.list-group-item-icon {
padding-right: 5px;
}
#hamburgerMenu {
cursor: pointer;
}
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
background-color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default" role="navigation" style="margin-bottom: -20px">
<div class="container-fluid">
<div class="navbar-header">
<a id="hamburgerMenu" class="navbar-brand"><span
class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
<a class="navbar-brand">Slide Panel</a>
</div>
</div>
<!--/.container-fluid -->
</div>
<div class="backdrop"></div>
<div id="mySideBar" class="sidebar-nav container-fluid" aria-label="...">
<div class="row">
<div class="col-xs-12" style="padding: 5px 15px 1px 15px">
<h4 style="padding-left: 0px; font-size: 19px; color: #666">
WorkPanel <span
class="sideBarCloseIcon glyphicon glyphicon-remove"
aria-hidden="true"></span>
</h4>
</div>
</div>
<hr style="margin: 5px -15px" />
<ul class="list-group">
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-user" aria-hidden="true"></span>My Profile
</li>
<li class="list-group-item"><span class="badge">2</span>
<i class="fa fa-newspaper-o list-group-item-icon"></i>News</li>
<hr />
<li class="list-group-item">
<i class="fa fa-question list-group-item-icon"></i>
<span class="badge">2</span> Forum</li>
<li class="list-group-item">
<i class="fa fa-users list-group-item-icon"></i>
<span class="badge">2</span> Teams</li>
</ul>
<hr style="margin: 5px -15px" />
<form class="form-inline">
<div class="form-group" style="width: 181px">
<label for="exampleInputName2">Search Here</label>
<input type="text" class="form-control" id="exampleInputName2" style="width: 100%" placeholder="Enter Text Here">
</div>
<button style="margin-top: 24px; padding: 9px;" type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
<hr style="margin: 5px -15px" />
<div>
<strong>Need Help ? Contact Us</strong>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-envelope list-group-item-icon"></i>Mail</li>
<li class="list-group-item"><i class="fa fa-phone list-group-item-icon"></i>Phone</li>
</ul>
</div>
</div>
<div class="content">
######
</div>
Now In Action work for me But when I Scroll page My Panel in scroll move to top. I need to fix my panel to top in scroll. how do fix This problem?
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
Demo : https://jsfiddle.net/9m7m756a/
You can use fixed positioning just like:
#mySideBar {
position: fixed;
}
Or checkout this Fiddle.
Hope this helps!
HI People I am trying to create a slide from left testinomial but it not coming properly it has two in one row but the third one is coming in place of 4th one and the space of third one is left blank
CSS:
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*clearfixes*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.main-container {
background: #fff;
max-width: 1000px;
line-height: 170%;
margin: 25px auto 25px auto;
position: relative;
}
.container_scroll {
position: relative;
padding: 25px;
}
/*animation element*/
.animation-element {
opacity: 0;
position: relative;
}
/*animation element sliding left*/
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-100px, 0px, 0px);
-webkit-transform: translate3d(-100px, 0px, 0px);
-o-transform: translate(-100px, 0px);
-ms-transform: translate(-100px, 0px);
transform: translate3d(-100px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/
.animation-element.slide-left.testimonial {
float: left;
width: 47%;
margin: 0% 1.5% 3% 1.5%;
background: #F5F5F5;
padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial:nth-of-type(odd) {
width: 48.5%;
margin: 0% 1.5% 3.0% 0%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 48.5%;
margin: 0% 0% 3.0% 1.5%;
}
.animation-element.slide-left.testimonial .header{
float: left;
width: 100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
float: left;
margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
float: left;
}
.animation-element.slide-left.testimonial img {
width: 65px;
height: 65px;
border-radius: 50%;
box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}
.animation-element.slide-left.testimonial h3 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial h4 {
margin: 0px 0px 5px 0px;
}
.animation-element.slide-left.testimonial .content {
float: left;
width:100%;
margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .rating{}
.animation-element.slide-left.testimonial i {
color: #aaa;
margin-right: 5px;
}
/*media queries for small devices*/
#media screen and (max-width: 678px){
/*testimonials*/
.animation-element.slide-left.testimonial,
.animation-element.slide-left.testimonial:nth-of-type(odd),
.animation-element.slide-left.testimonial:nth-of-type(even){
width: 100%;
margin: 0px 0px 20px 0px;
}
.animation-element.slide-left.testimonial .right,
.animation-element.slide-left.testimonial .left,
.animation-element.slide-left.testimonial .content,
.animation-element.slide-left.testimonial .rating{
text-align: center;
float: none;
}
.animation-element.slide-left.testimonial img{
width: 85px;
height: 85px;
margin-bottom: 5px;
}
}
HTML:
<div class="container_scroll cf">
<!-- testimonial one -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>America's Gold Expert.</h3>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Get the proven trust and experience of our Chief Numismatic Consultant Mike Fuljenz. With nearly 40 years in the numismatic field, he is an award-winning author and noted gold expert; he is also considered one of the world's authorities on coin grading and the rare gold coin market. Contact us for free award winning advice and information. <i class="fa fa-quote-right"></i>
</div>
</div>
<!--testimonial two -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>Demand Today. Legacy Tomorrow. </h4>
</div>
<div class="content"><i class="fa fa-quote-left"></i>Our market makes efforts and innovating book distribution strategies create ongoing education, awareness, and demand for Select Four coin types among collectors and investors today supporting the desirability of your collection for your heirs and the collectors of tomorrow.
<i class="fa fa-quote-right"></i>
</div>
</div>
<!--testimonial three -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>Expert Recommendations.</h3>
</div>
<div class="content"><i class="fa fa-quote-left"></i> The artistically acclaimed Gold Eagles are essential to any estate collection of U.S. legal tender coins. For many collectors, the $25 Gold Eagle is the key coin, having the lowest total mintage almost every year since 1986.
<i class="fa fa-quote-right"></i>
</div>
</div>
<!--testimonial four -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>Professional Buying Team.</h3>
</div>
<div class="content"><i class="fa fa-quote-left"></i> Having a portfolio buying team in your cornerensures that you get advance word on important high-quality coind as they become available which could save you big money on a vital coin purchase while helpig you fill those tough holes in your sets or collection.
<i class="fa fa-quote-right"></i>
</div>
</div>
<!--testimonial five -->
<div class="animation-element slide-left testimonial">
<div class="header">
<h3>Specialized Collection Strategies.</h3>
</div>
<div class="content"><i class="fa fa-quote-left"></i> With an expert in your corner, you'll learn the "inside track" strategies that have served our customers nationwide in building premier collections and completing sets, while acquiring some of the rarest, select Liberty Double Eagles, Indian gold coins and Commemorative gold coins available today.
<i class="fa fa-quote-right"></i>
</div>
</div>
</div>
Script:
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
</script>
This is not an issue of
clear:left;
The height of each boxes are different. that's why the float is not work well.
please set a min-height related with the largest animation-element height
I'm not 100% sure this is the look you are after, but if you add:
.animation-element.slide-left.testimonial:nth-of-type(odd) { clear: left; }
I think you get closer.