Adding Masonry JQuery Plugin

Using JavaScript with Hype
1

I am trying to add this into Hype.
http://masonry.desandro.com

The idea is I then can create a symbol and have it re-size / reorder the divs on different screen sizes and there not nee different scenes.

On the codeine I have entered :slight_smile:

<h1>Masonry - columnWidth</h1>

<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width3"></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--height3"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></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"></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--height3"></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--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
</div>

CSS

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 140px;
  height: 100px;
  float: left;
  background: #D26;
  background-image: url('https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12006152_701783646619711_4425858407111016898_n.jpg?oh=da5aa201511dc17d7a48562dafa76dfe&oe=5851205A');
  background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:cover;
    position:fixed;
    left:10%;
    top:10%;
    right:10%;
    bottom:10%;
  box-shadow: 3px 3px 5px grey;
  border: 5px solid ;
  border-color: #000000;
  border-radius: 5px;
  margin: 10px 10px 10px 10px;
  padding : 0px;
}

.grid-item--width2 { width: 300px; margin: 10px 10px 10px 10px; }
.grid-item--width3 { width: 460px; margin: 10px 10px 10px 10px;}
.grid-item--width4 { width: 620px; margin: 10px 10px 10px 10px;}

.grid-item--height2 { height: 180px; margin :10px 10xp 10px 10px;}
.grid-item--height3 { height: 240px; margin: 10px 10px 10px 10px;}
.grid-item--height4 { height: 340px; margin: 10px 10px 10px 10px;}

Javascript

// external js: masonry.pkgd.js

$('.grid').masonry({
 itemSelector: '.grid-item',
 columnWidth: 160
});

This gives me what I need in code pen.

But as usual I’m struggling to get this to work within hype.

I added JQuery
I added the plugin
I added the masonary1.css file
I added the HTML to a HTML Element
I added the javascript on scene load

I tried added the css to the header as well.

I added the CSS & HTML directly into the HTML element and it show but the tiles were over each other.

Cheers

Steve WarbyMasonary.hype.zip (54.0 KB)

2

This is with everything in the HTML Element.

All the divs are on top of each other.

Masonary2.hype.zip (53.3 KB)

Cheers

Steve Warby

1 Like
3

Bump on this guys???

Cheers

Steve Warby

4

Hi Guys,

I have played with another plugin called freewall

I have it working in the attached app.

I have 2 problems I cannot solve.

  1. On web I can’t scroll. Although the container is set to visible or scrollbars.
  2. On mobile the scene is wider than the device.

Cheers

Steve Warby

Freewall3.hype.zip (445.9 KB)

5

  1. The container (group) even though it has scrollbars set it has no overflow so will not scroll. To show what I mean, change the height of the group to less than the scene height and you will get scrollbars.

  2. Depending on what mobile you view it on. Anything with a width approximately less than the cell amounts plus all the other added pixel space, will not render. If you decrease the cellW and cellH it will show.

I haven't worked with this plugin so can't really advise you on it's use. Especially within Hype.