isotope container - show on click - javascript

I'm using isotope to create a filter feature. But the entire isotope container needs to be hidden on the initial page load, and visitor will have to click on a button for the container to show.
I have the filter working, but when you click on the button, the first time the container loads, all items are on top of each other, then when you click on either one of the filters, everything falls into place.
You can see my code here - http://chrsdev.com/test.html
How can I fix the issue of all items positioning on top of each other on the initial content load?
Would greatly appreciate it if someone can point me in the right direction.

Download imagesloaded.js and add the script to your page. (Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue)
Then call isotope like this:
//Initialize isotope on each container
jQuery.each($container, function (j) {
this.imagesLoaded( function() {
this.isotope({
itemSelector : '.element-item'
});
});
});
ADDENDUM
The issue is with your each function and "this". Try this instead.
//Initialize isotope on each container
jQuery.each($container, function (j) {
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.element-item'
});
});
});

Related

DataTable Fixed Header at page bottom (on first page load)

I have a DataTable with FixedHeader option that has the following initialization populated in my $(document).ready function. Both the headerOffset values that are jquery looked-up and hard-coded at 40 have been attempted, with the same results.
"fixedHeader": {
// "headerOffset": $("#top-navbar").outerHeight()
"headerOffset": 40
},
The DataTable is populated from an ajax call and has a series of my own render: functions on half of the columnDefs but I don't think that's related.
I'm not sure why, but the first time the page is loaded, the fixedHeader doesn't follow the top of the screen - but is sitting at the very bottom of the page below the table. When I click refresh - the header works just fine.
Any thoughts?
Thanks in advance.
I had the same problem, and in the absence of a satisfactory solution, my current workaround is to trigger a window resize event that will make the Datatable make rendering recalculations:
table.DataTable({
// ...
drawCallback: function() {
$(window).resize();
}
});

AddThis Layers in Full Screen mode

I'm making a slideshow with full screen functionality (FancyBox 3), it's using the RequestFullScreen method on the container div, which means any other element in the body is not accessible in full screen mode. (correct me if i'm wrong)
I would like to include an AddThis Expanding Share button in the slideshow, but because it's created dynamically by the AddThis js, it appends the Smart Layers before the end of the body, not at the end of the slideshow container div therefore it's not included in the full screen slideshow.
I couldn't find any info on Smart Layers DOM placement in the AddThis API.
What I've tried is seems like a bad idea, to manually appendTo the necessary divs to the slideshow container after the divs are created by AddThis, I managed to "cut and paste" the '.at-expanding-share-button' and it's working so far, but I can't "catch" the '#at-expanded-menu-host' (which is the layer created by AddThis for more sharing options, with the dark background), and I'm not even sure if this method will work properly...
Any help would be appreciated.
I figured it out! :) I thought I share my experience/solution, if anyone has similar difficulties.
What won't work and why:
First I've tried to communicate with the AddThis API to tell it to put its layers to a premade container, which looks like impossible and the AddThis team also told me that there is no solution for manual layer DOM placement, it's always appending those to the end of the body (at least for now, maybe they will implement this option into their API).
Then I've tried to manually append those layers to the Fancy-Box container, which was a dead end because when the slideshow closes, it removes its container from the markup, so the AddThis layers disappeared and I couldn't reinit it (maybe others have some solution for that, but I just couldn't figure it out).
By the way, the "More Sharing Options" layer is created when the share + button is clicked.
My solution:
Instead of appending the layers to the dynamic slideshow container, I've created a static div at the end of the body, appended the layers to it when they are created, and set the Fancy-Box parent div to my container (note that Fancy-Box full screen functionality makes its own div into full screen, so I had to use my own full screen function for the container with the layers and the slideshow).
I've used sindresorhus's screenfull for easier/cross-browser full screen functions.
var FullScreenContainer = $('#container');
// Check if AddThis Layers are ready
var checkLayers = setInterval(function() { appendLayers(); }, 1000);
// Append the layers to FullScreenContainer
function appendLayers() {
var layers = $('.at-expanding-share-button, #_atssh');
if(layers.length > 0){
addthis.layers.refresh();
layers.appendTo(FullScreenContainer);
clearInterval(checkLayers);
console.log('layers added');
}
else {
console.log('not found')
}
}
// Check for more layers when the share icon clicked
$(document).on('click', ".at-expanding-share-button-toggle", function() {
var checkMoreLayers = setInterval(function() { catchLayers(); }, 1000);
function catchLayers() {
var morelayers = $('#at-expanded-menu-host');
if(morelayers.length > 0){
morelayers.appendTo(FullScreenContainer);
clearInterval(checkMoreLayers);
console.log('more layers added');
}
else {
console.log('did not found more')
}
}
});
// Don't forget to disable the full screen function in Fancy-Box,
// then call them when necessary (onInit, clickSlide, clickOutside
// and the close button)
function enterFullscreen() {
screenfull.request($('#container')[0]);
}
function exitFullscreen() {
if (screenfull.isFullscreen) {
screenfull.exit();
$.fancybox.getInstance().close();
}
if (!screenfull.isFullscreen) {
$.fancybox.getInstance().close();
}
}
And you are good to go. I hope this helps for anybody else! :)

Isotope executing before Images load

I'm struggling to get my Isotope to execute after images load because otherwise, the Isotope items overlap. - I am trying to apply the ImagesLoaded plugin (http://imagesloaded.desandro.com/) to my Isotope, however, I am struggling to execute the Isotope after Images load.
Below is my Isotope WITHOUT ImagesLoaded, if anyone knows how to go about this I'd be most grateful! (: Here is my Isotope in action: http://illuminategg.hol.es/portfolio.html
var isotope_port = $('.port-isotope');
isotope_port.isotope({
'itemSelector': '.item'
});
$('.port-filter a').click(function() {
$(this).parent().parent().find('li').removeClass('selected');
$(this).parent().addClass('selected');
var selector = $(this).attr('data-filter');
isotope_port.isotope({ filter: selector });
return false;
});
For imagesloaded, first add the script to your page since it is not part of isotope. Then use it as follows:
var isotope_port = $('.port-isotope');
isotope_port.imagesLoaded( function() {
isotope_port.isotope({
'itemSelector': '.item'
});
});

When Isotop/masonry 1st loaded it get crumpled all together how to fix?

When Isotop/masonry 1st loaded it get crumpled all together how to fix ? but after i refresh it it just got back to normal. Visit this link to check it live.
Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. Here are the instructions on how to utilize it. Isotope v2 does not include it so you need to download and load it in your page.
If your layout has images, you probably need to use imagesLoaded.
Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.
You can use ImageLoaded by adding some JS:
<script type="text/javascript" src="http://imagesloaded.desandro.com"></script>/imagesloaded.pkgd.min.js
// init Isotope
var $grid = $('.grid').isotope({
// options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});

Using layoutcomplete with Isotope

I am using Isotope to place some grid elements which is working fine. Now I need to run some code on layoutcomplete so I have added the event and end up with the following code.
var $container = $('.iso');
$container.imagesLoaded(function () {
$container.isotope({
...
});
$container.isotope('on', 'layoutComplete',
function (isoInstance, laidOutItems) {
...
}
);
});
This all works fine except that layoutcomplete is not executed on page load which is of course beacuse the event is added after init. I have then tried setting isInitLayout: false but is then having problem what to do next - I would expect that I could use .arrange() but with no luck.
Anybody who can figure out how I get layoutComplete to execute on page load?
I was pulling my hair off too because of isotope for a long time. But as much as I experienced the 2.0.1 version of it finally we got a stable plugin.
You can use the code below to layout/relayout your isotope:
$container.isotope('layout');
I recommend you to use isInitLayout: false.
Also keep in mind this, if your containers size changes and your isotope is responsive then your layoutComplete gets fired everytime when it happens. So, you may need to use once instead of on.
var $container = $('.iso');
$container.imagesLoaded(function () {
$container.isotope({
isInitLayout: false
});
$container.isotope('on', 'layoutComplete',
function (isoInstance, laidOutItems) {
...
}
);
$container.isotope('layout');
});
Cheers.

Categories

Resources