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.
Related
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>
I'm sure you've heard of isotope.js, but here's a link to part of the project: https://isotope.metafizzy.co/layout-modes/masonry.html
Here's an image of the desired layout I'm going for:
Here's a codepen with as close to the layout as I can get: https://codepen.io/levijosman/pen/GdewvN
I've tried changing the order of your items (based on the layout width), switch to different layout modes (like Packery). As you can see I'm only one grid-item off from the intended layout. The layout has to be possible with isotope.js or is it simply not?
<h1>Isotope - masonry layout mode</h1>
<div class="container">
<div class="grid">
<div class="grid-item grid-item--width2 grid-item--height2"></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 grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></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 class="grid-item"></div>
</div>
</div>
.grid-item {
float: left;
width: 313.81px;
height: 200px;
margin-left: 10px;
margin-bottom: 10px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 637.64px; }
.grid-item--height2 { height: 410px; }
It looks like the main problem is in the itemSelector in the javascript; it should have .grid-item instead of masonry, like so:
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100,
gutter: 8
}
});
Then it should flow as expected, and you'll just have to replace your grid-item--height2 class with another grid-item div after the big box:
<div class="grid">
<div class="grid-item grid-item--width2 grid-item--height2"></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 class="grid-item grid-item--width2 grid-item--height2"></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 class="grid-item"></div>
<div class="grid-item"></div>
</div>
https://codepen.io/anon/pen/WJmmej
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/
I am trying to learn Isotope . There's a particular demo that I'm trying and I've copied the code from the given fiddle here
However, the outputs are different.
My output:
Output on the demo site:
The browser is maximized and I'm viewing both on the same screen. Here's the code on my page:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* { box-sizing: border-box; }
body { font-family: sans-serif; }
/* ---- 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;
margin-bottom: 20px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 220px; }
.grid-item--height2 { height: 220px; }
</style>
</head>
<body>
<h1>Isotope - masonry gutter, with margin bottom</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" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/isotope-layout#3.0.1/dist/isotope.pkgd.js"></script>
<script type="text/javascript">
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100,
gutter: 20
}
});
</script>
</body>
</html>
Jquery had not been inserted. Thanks to #MostafaBaezid for the hint.
I want to make an HTML page that contains a box at the top and a certain number of boxes being dynamically generated using jquery, the number of boxes at the bottom of top box can be 4 at max.
I want to align these boxes dynamically and symmetrically in the html page. I am using angularjs's ng-repeat to generate boxes. I want the sizes of the boxes to remain same but arrange them symmetrically on the html page.
currently i am using angular js to dynamically create boxes and align them using col-md class of bootstrap. but this makes the size of boxes to change when the number of boxes change.
html code
<div id="header-wrapper" class="container vscrolling_container">
<div id="header" class="container vscrolling_container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
<div ng-class="missioncount[missions.length]" ng-repeat="mission in missions" style="opacity: 0.9">
<div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
<h1 id="{{mission.id}}" style="color: #000">{{mission.missionInfo}}</h1>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<ul>
<li id="{{missioncontent.id}}" ng-repeat="missioncontent in mission.missionContent">
<p style="text-align: left">{{missioncontent.info}}</p>
</li>
</ul>
</div>
</div>
</div>
java script code
'use strict';
var mission_vision_mod = angular.module('myApp.mission_vision', ['ngRoute']);
mission_vision_mod.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/mission_vision', {
templateUrl: 'partials/mission_vision/mission_vision.html',
controller: 'mission_visionCtrl'
});
}]);
mission_vision_mod.controller('mission_visionCtrl', ['$scope','$http', function($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one','bk-clr-two','bk-clr-three','bk-clr-four'];
$scope.progressbar = ['progress-bar-warning','progress-bar-danger','progress-bar-success','progress-bar-primary'];
$scope.missioncount = ['col-md-0','col-md-12','col-md-6','col-md-4','col-md-3','col-md-2.5','col-md-2'];
$http.get('m_id.json').success(function(data){
$scope.missions = data;
$scope.len = data.length;
});
}]);
I have created a quick jsfiddle
HTML Content:
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
<br/><br/><br/>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
Related CSS:
.container div {
height: 100px;
}
.header {
border: 1px solid black;
width: 75%;
margin: 5px auto;
}
.content {
text-align: center;
}
.contentBox {
border: 1px solid black;
width: 20%;
display: inline-block;
box-sizing: border-box;
}
Caution: I have used plain CSS for this demo.
Hope this helps you.
flexbox can do this
.wrap {
width: 80%;
margin: auto;
border: 1px solid black;
margin-bottom: 25px;
}
.top,
.item {
width: 100px;
height: 50px;
background: red;
}
.top {
display: inline-block;
}
.flex {
display: flex;
justify-content: space-around;
}
<div class="wrap">
<div class="flex">
<div class="top"></div>
</div>
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
JSfiddle Demo