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');
});
Related
Implementing Tooltipster with our WordPress site, but hit a roadblock. The tooltips open correctly, but the content within the tooltip is empty. This code works outside of WordPress. Please help?
Here's how it's all being setup.
1) Within functions.php:
wp_enqueue_style( 'ttcss', '/ours/tt/dist/css/tooltipster.bundle.min.css' );
wp_enqueue_style( 'ttcss-noir', '/ours/tt/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css' );
wp_enqueue_script( 'ttjs', '/ours/tt/dist/js/tooltipster.bundle.min.js', array('jquery'), null, true );
2) Within header.php before closing </head>:
<script> jQuery(document).ready(function() {
jQuery('.ourtip').tooltipster({
theme: 'tooltipster-noir',
contentCloing: true,
contentAsHTML: true
});
});
</script>
3) Within the theme, where the tooltip is desired:
<span class="ourtip" data-tooltip-content="#ourtip_content">Tool</span>
4) Lower down within the theme, what should be displayed (but isn't):
<?php
function ours_publisher_popup()
{
?>
<style>.ourtip_templates {display: none;} </style>
<div class="ourtip_templates">
<div id="ourtip_content">
<strong>This text should display but is missing.<br></strong>
</div>
</div>
<?php
}
ours_publisher_popup(); ?>
Ended up being a conflicting plugin. Disabled WP plugins one at a time until it started working, and then found one that was also trying to use Tooltipster. Deactivated that and functionality returned.
I'm attempting to use the jQuery version of Revolution Slider following this tutorial without the visual interface: https://www.themepunch.com/revsliderjquery-doc/anatomy-basic-slider/. I'm not getting any errors in the Developer tools console other than from an unrelated script that I broke on purpose that's activating on 'a.arrow'. For some reason, the slider is simply not appearing.
The tutorial was rather straightforward and I'm at a loss for what's wrong. I've included the pertinent code below to see if there's something obvious I'm missing. I'll also include a link to the page in question:
https://restaurantex1.wpengine.com/about/
To see it: UN: demo PW: password
I am aware that there is a WordPress specific plugin for this, but it has a visual editor that I'd prefer not include with the website we're building... which is why I was attempting to use the simpler jQuery only plugin instead.
Code to display Revolution slider:
<div class="rev_slider_wrapper" style="overflow: visible;height: 600px;display: block;position: relative;">
<!-- the ID here will be used in the JavaScript below to initialize the slider -->
<div id="rev_slider_1" class="rev_slider" style="">
<ul>
<!-- MINIMUM SLIDE STRUCTURE -->
<li data-transition="fade">
<!-- SLIDE'S MAIN BACKGROUND IMAGE -->
<img src="https://restaurantex1.wpengine.com/wp-content/uploads/2017/07/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">
</li>
<!-- MINIMUM SLIDE STRUCTURE -->
<li data-transition="fade">
<!-- SLIDE'S MAIN BACKGROUND IMAGE -->
<img src="https://restaurantex1.wpengine.com/wp-content/uploads/2017/07/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
</li>
</ul>
</div>
Enqueuing scripts in WordPress, which is working and not returning any errors in the console:
wp_enqueue_style( 'revolution_settings', get_stylesheet_directory_uri() . '/js/revolution/css/settings.css' );
wp_enqueue_style( 'revolution_layers', get_stylesheet_directory_uri() . '/js/revolution/css/layers.css' );
wp_enqueue_style( 'revolution_navigation', get_stylesheet_directory_uri() . '/js/revolution/css/navigation.css' );
wp_enqueue_script( 'revolutiontools_js', get_template_directory_uri() . '/js/revolution/js/jquery.themepunch.tools.min.js', array('jquery'), '1.11.1', false);
wp_enqueue_script( 'revolution_js', get_template_directory_uri() . '/js/revolution/js/jquery.themepunch.revolution.min.js', array('jquery'), '1.11.1', false);
Script in footer of site above closing tag to activate slider:
<script>
jQuery(document).ready(function() {
jQuery('#rev_slider_1').show().revolution({
/* options are 'auto', 'fullwidth' or 'fullscreen' */
sliderLayout: 'auto',
/* basic navigation arrows and bullets */
navigation: {
arrows: {
enable: true,
style: 'hesperiden',
hide_onleave: false
},
bullets: {
enable: true,
style: 'hesperiden',
hide_onleave: false,
h_align: 'center',
v_align: 'bottom',
h_offset: 0,
v_offset: 20,
space: 5
}
}
});
});
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
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 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.