We Keep Coding

How to make the isotope layout with flat bottom?

I'm using isotope js https://isotope.metafizzy.co/ and can't understand how to make my layout with flat bottom as here https://diefinnhutte.qodeinteractive.com/masonry-portfolio/.
I can't set fixed height for my blocks, but in example above I think isotope giving its own height.
How to make it?
I have simple code:
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
</div>
My css:
.grid-item {width: 33%}
and js:
$('.grid').isotope({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true,
});
Inside grid-items I have img and they can be different height, so what should I do?
Thanks in advance!

Isotope is great for creating these layouts, but it has some quirks to work with. In your case you are working with images, and those images could dictate how the layout is calculated. I'd advise you to use the imagesLoaded library from the same author to first check if the images are loaded and then render the layout. Otherwise the items in the masonry layout would not have any height before the images are loaded.
If you want to have a layout that is flat on the top and on the bottom then you'll need some fixed height values. If the intact ratio of the images is more important than the height then it will simply not be possible.
You can use the object-fit property in CSS to give images a background-size: cover type of effect. It will make sure that any given image will be covering the entire space of an item in the masonry grid.
In these examples I've used multiple differently sized images that all work as they should despite their differences.
Check out the snippet with Isotope and imagesLoaded here below.
var $grid = $('.grid').imagesLoaded( function() {
$grid.isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-item',
}
});
});
*, *::before, *::after {
box-sizing: border-box;
}
.grid-item {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 33.3333333%;
height: auto;
}
.grid-item.is-wide {
width: 66.6666666%;
}
.grid-item::before {
content: "";
grid-area: 1 / 1 / 2 / 2;
display: block;
}
.grid-item::before,
.grid-item.is-wide.is-high::before {
padding-top: 100%;
}
.grid-item.is-wide::before {
padding-top: 50%;
}
.grid-item.is-high::before {
padding-top: 200%;
}
.grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5px;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/360/640" alt="360x640"/>
</div>
<div class="grid-item is-high">
<img src="https://www.fillmurray.com/420/420" alt="420x420"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item ">
<img src="https://www.fillmurray.com/640/800" alt="640x800"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/480/320" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/360/640" alt="360x640"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/420/420" alt="420x420"/>
</div>
<div class="grid-item is-high">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/800" alt="640x800"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/480/320" alt="640x360"/>
</div>
</div>

Make progress bars responsive

I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!

I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.

Isotope JS with Wordpress

I'm trying to include the .js plugin, Isotope into my wordpress install, at the bottom of the page here:http://webserver-meetandengage-com.m11e.net/test-2/
Im using this example over at codepen: https://codepen.io/desandro/pen/mEinp
I have enqueued the script from a CDN like so:
wp_enqueue_script( 'isotope', 'https://npmcdn.com/isotope-layout#3/dist/isotope.pkgd.js');
I can include my whole enqueue file if it helps?
Here's the template HTML im trying (I have placed the initialisation script at the bottom for now but will move it to its own .js file):
<h1>Isotope - masonry layout mode</h1>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<script type="text/javascript">
// external js: isotope.pkgd.js
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
</script>
Heres the CSS:
* { box-sizing: border-box; }
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
The CSS and HTML seem fine - I just don't know if m enquiring it properly or the initialisation .js is correct as it seems to work but its just not sorting as per the codepen.

I just checked the URL that you gave and found this in console:
Uncaught TypeError: $ is not a function
Looking at this, I would replace it like:
jQuery(function($) {
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
});
And that should solve your problem.

Scrollmagic- Background colors are not changing properly on scroll

I have a issue here with scrollmagic as I am trying to create a demo of natural section wipes in scrollmagic and there I got this above mentioned problem.
Looks like I got something wrong in querySelector but I don't know what I did wrong here
HTML
<div class="container-wrapper">
<div class="container-fluid">
<div class="scroller-content">
<div class="row custom-row">
<section class="panel red">
<div class="cover">
<strong>One</strong>
</div>
</section>
</div>
<div class="row custom-row">
<section class="panel green">
<div class="cover">
<strong>Two</strong>
</div>
</section>
</div>
<div class="row custom-row">
<section class="panel blue">
<div class="cover">
<strong>Three</strong>
</div>
</section>
</div>
<div class="row custom-row">
<section class="panel orange">
<div class="cover">
<strong>Four</strong>
</div>
</section>
</div>
</div>
</div>
CSS
<style>
.panel {
height: 100%;
width: 100%;
position: relative;
margin: auto;
padding: 3rem 4rem;
box-sizing: border-box;
}
.red {
background: #ef5350;
}
.green {
background: #7CB342;
}
.blue {
background: #42A5F5;
}
.orange {
background: #FB8C00;
}
.custom-row {
text-align: center;
}
.cover {
margin: 13rem;
padding: 13rem;
top: 50%;
}
</style>
JS
<script>
$(function () {
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
var slides = document.querySelectorAll("section.panel");
for (var i = 0; i < slides.length; i++) {
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
}
});
I have created a fiddle for the code help me to figure what where I went wrong with the flow?

Just remove the "sections" and add the panel classes to the divs. That should work equally well. You'll have to change document.querySelectorAll("section.panel"); to document.querySelectorAll("div.panel"); in the JS code. That's all.
$(function() { // wait for document ready
// init
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
// get all slides
var slides = document.querySelectorAll("div.panel");
// create scene for every slide
for (var i = 0; i < slides.length; i++) {
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
}
});
.panel {
height: 100%;
width: 100%;
position: relative;
margin: auto;
padding: 3rem 4rem;
box-sizing: border-box;
}
.red {
background: #ef5350;
}
.green {
background: #7CB342;
}
.blue {
background: #42A5F5;
}
.orange {
background: #FB8C00;
}
.custom-row {
text-align: center;
}
.cover {
margin: 13rem;
padding: 13rem;
top: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<div class="container-wrapper">
<div class="container-fluid">
<div class="scroller-content">
<div class="row custom-row panel red">
<div class="cover">
<strong>One</strong>
</div>
</div>
<div class="row custom-row panel green">
<div class="cover">
<strong>Two</strong>
</div>
</div>
<div class="row custom-row panel blue">
<div class="cover">
<strong>Three</strong>
</div>
</div>
<div class="row custom-row panel orange">
<div class="cover">
<strong>Four</strong>
</div>
</div>
</div>
</div>
</div>
Or check the fiddle, the snippet seems to have issues with this code: https://jsfiddle.net/u60gj9hc/1/

Animate Scroll JS function error

I have two versions of a single page site that scroll using JS .animate function. One site will not scroll and the other site does. I can not find the error in my code on the "broken" site.
Any help would be greatly appreciated.
Other "helpful" comments welcome as well.
Thank You in Advance.
Working Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function (tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px;
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius:6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color:black;
color: hsl(240, 0%, 30%);
}
#productSect {
/*Place Holder*/
background-color: bisque;
}
#servicesSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg');
}
#portfolioSect {
/*Place Holder*/
background-color: bisque;
}
#contactSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg');
}
html, body {
height: 100%;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="product" href="#productSect">PRODUCT</a>
<a id="services" href="#servicesSect">SERVICES</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container">
<div class="jumbotron">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="productSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="servicesSect"></div>
<div class="subsection" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
Broken Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function(tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius: 6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color: black;
color: hsl(240, 0%, 30%);
}
#aboutSect {
/*Place Holder*/
background-color: bisque;
}
#portfolioSect {
/*Place Holder*/
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg);
}
#contactSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg);
}
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frank Promo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Content/StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/JavaScript.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<!--style="margin:0 5px";-->
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="about" href="#aboutSect">ABOUT</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container-fluid">
<div class="jumbotron navSpace">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="aboutSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
</body>
</html>