I'm trying to run Masonry on Meteor but I can't get it working. I'm sure everything's in place:
http://cryptostage.meteor.com/
My certainty is supported by the fact that if I Save the web page from the online version (as above) to my desktop and run it from there, Masonry works. In fact, this same version is also functional here:
https://cryptopal.s3.amazonaws.com/meteor-try/cryptopals.html
What am I missing?
<div class="container">
<div id="pals" class="js-masonry" data-masonry-options="{ "itemSelector": ".pal" }">
<div class="row">
<div class="pal col-md-6 col-sm-6 col-lg-6"><img class="pal-pic" src="./cryptopals_files/cryptopal.png">
<div class="name-key"><p class="username"><strong>Matt</strong></p>
<strong>Key ID</strong>
<a class="key-id"><span class="smaller-text">Get public key» </span></a>
</div>
</div>
</div>
</div>
I suspect a timing issue related to when isotope kicks in vs when images are loaded that meteor exposes. What worked for me was to use imagesLoaded and then to transfer the items into the isotope container:
Template.home.rendered = ->
$(document.body).imagesLoaded ->
$('#isocontainer').isotope
layoutMode: 'masonry'
itemSelector: '.card'
masonry: columnWidth: '.grid-sizer'
Meteor.setTimeout (->
$('#isocontainer').isotope 'insert', $('.card')
), 500
Related
The scenario
The site is built with Bootstrap, and has several div's (or columns) with a variation in height.
My HTML basically looks like this:
<div class="container">
<div id="masonry-container" class="row">
<div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12">
<!-- Text and so on -->
</div>
</div>
</div>
The problem
The problem is that Bootstrap does not work very well with columns when they have different heights. This is a common problem, please see example below, or visit my page.
What I am working on
I am trying to include Masonry with Bootstrap so that the columns are correctly aligned when the heights are different. The columns from the example above would then look like this:
However, I can't get it to work correctly. I am not sure if I am doing something wrong, or if I have missed something.
I am using the Masonry min (here)
I have tried loading it with functions.php by the following:
//Isotope and masonry
function add_isotope() {
wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'), true );
wp_enqueue_script( 'masonry_js', 'http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js', array('jquery'), true );
wp_enqueue_script('isotope-init');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
I have also tried to include it the regular way in header.php:
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script>
However, nothing seems to work.
Could you please provide a working solution?
The page can be found here.
I don't think you're calling $.masonry(). I looked up the source code, nothing seemed to bind #masonry-container. So, add this snippet to your pages' footer.
$('#masonry-container').masonry({
itemSelector: '.item' // div.item
});
And because you're working with a responsive layout here, you should use reload method like below
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true // the animated makes the process smooth
});
$(window).resize(function() {
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true
}, 'reload');
});
I am currently using the below code to load the jQuery masonry after all the images have loaded. It works great and as it should. However, if I am loading a large number of images it takes some time to show the masonry. I have tried multiple method to display a sort of loading image to show that the page is actually loading and is not just stagnant with no success. If anyone could please point me in the proper direction as to how to maybe use an if statement to check if the images are loaded. While they are not I would like to display the loading gif. Once they do load I would like to have the masonry appear.
var $container = $('#freewall').imagesLoaded( function() {
$container.isotope({
});
});
Sorry to over complicate a simple issue. But I greatly appreciate any help that I can get!
I would recommend to show each image individually as soon as it loads, instead of waiting for the complete set of images
in other words, your HTML would be something like this:
<div class="grid">
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
</div>
then with CSS hide your images, with something like this:
.item img {
display: none;
}
next initialize the grid with isotope:
$('.grid').isotope({
itemSelector: '.item',
percentPosition: true,
});
and finally show the images that are getting loaded individually with the help of imagesLoaded, like this:
$('.grid').imagesLoadedMB().progress( function(instance, imageObj) {
$(imageObj.img).fadeIn(300);
$('.grid').isotope('layout');
});
I personally I would prefer to use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 which already deals with all of this for me
I want to resize an element using jquery-ui. Although this is easily done, however I want a draggable handler in the middle (checkout this jsfiddle)
<div class="wrap">
<div class="resizable resizable1"> ... </div>
<div class="resizable resizable2"> ... </div>
<div id="p" class="ui-resizable-handle ui-resizable-e"></div>
</div>
JS:
$('.resizable1').resizable({
handles: {
'e': '#p'
},
....
The problem is that it is not possible to resize the resizables using the custom handler now. Is there a solution to fix this ? Or should I abandon jquery-ui and find something else
I am using ArcGIS JSAPI version 3.5 on my side & Dojo version is 1.9.
Everything is working fine expect the Dojo accordion content pane.
I want to set custom height of accordion content pane.
What I have tried:
-I have set the property false in the code still it opens while its executing.(Please check the screen shot)
-Checked similar example on the web site (Programmatic example)
Link:
-Checking the API reference on my side.
Still not able to understand that why default its opening..
Any help regarding this will be great!!!
My complete code is available on [http://jsfiddle.net/D9NDn/][2]
Do you want to do something like that?
<div id="closureSection" data-dojo-type="dijit/TitlePane" title="Distance Measurement" data-dojo-props="title:'Distance Measurement', open:false">
<div id="measurementDiv"></div>
</div>
<div id="dataLayerSection" data-dojo-type="dijit/TitlePane" title="Content Section 02" data-dojo-props="label:'Click to Expand', open:false">
</div>
<div id="mapLegendSection" data-dojo-type="dijit/TitlePane" title="Content Section 03" data-dojo-props="label:'Click to Expand',open:false">
</div>
<div id="disclaimerSection" data-dojo-type="dijit/TitlePane" data-dojo-Props="label:'Click to Expand',open:false" title="Content Section 04">
</div>
Link to fiddle
I changed the ContentPanes into TitlePanes. The you can declare open:false in the data-dojo-Probs
Regards, Miriam
I have used masonry in my website but it is initialized by HTML. No JS is used. The code:
<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item" }'>
I have images in masonry blocks. That is why grid does not set itself as required. Any method to call imagesLoaded function in HTML not in JS? I don't know the simplest way I can explain that to you guys. No example provided in Desandro's website.