Isotope jquery plugin doesn't show properly on chrome - javascript

I implanted Isotope jquery plugin successfully but for some reason I get problem showing all the items when the page is loaded first time and it's only on Chrome.
You can see here what is happening http://dl.dropbox.com/u/15358757/sd.jpg, that elements are on top of each other. but when I press on PSDs and then back to All it shows properly.
I don't have a default height for the container because I want to to be dynamic.
Any idea how I can fix this?

The problem is probably that Isotope is doing its thing before the images are loaded.
http://isotope.metafizzy.co/demos/images.html
[In this demo] Isotope is triggered after all images are loaded with the imagesLoaded
plugin.
http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
var $container = $('#container');
$container.imagesLoaded(function() {
$container.isotope({
// options...
});
});

Related

Bootstrap carousel - loading animation when active image is loading

I have a Bootstrap carousel and an invisible div with a loading gif that I want to show while a big image is loading. I'd like to show this div only when I change the active image on the carousel and this image is still loading.
I've already got the HTML and CSS working, I just need an help with jQuery.
I fetch the images links from Imgur and then build the carousel-items that I need with jQuery and append them on the carousel container.
I then attached to the carousel event slide.bs.carousel a function that shows me the loader. and this works
BUT BUT BUT
I'm worried that the loader will show for few milliseconds even if the image is already loaded/cached. How can I prevent this? How can I know if the image that is becoming active is already loaded? Do I really need to worry about this or I just leave it like this?).
I then want to hide the loader when the active image is ready, and I've done this:
$('.carousel-item img').each(function(){
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
});
But it doesn't work. Seems like this load even keeps firing until
all the images of the whole carousel are loaded, and also somehow
the loader doesn't hide in the end, and this is the issue n.2.
Probably I'm approaching this wrong.
Is issue n.1 really a problem? And how can I solve issue n.2?
Thank you!
EDIT 1:
I tried to do this but still doesn't work. When I slide to the next slide I see that the image is already loaded, then the loader appears and doesn't go away anymore.
$(".carousel-item img").each(function(index){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("visibility","visible");
});
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
$(this).attr("src",links[index]);
});
EDIT 2:
Also, it seems like the browser try to load all the images as soon as possible, even the ones that are not displayed/are not active items.
I'd like to load the images only if the user goes to that slide and makes the item active.
EDIT 3:
I've found a library name jquery.unveil.js that seems like it does exactly what I need and is super easy to use... but somehow it doesn't work.
Maybe AngularJS can help me? Anyone know how can I modify my code to do this with angular? Like using ngui-in-view?
$('.carousel-item img').each(function(){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("display","none");
});
});
You can use the slide.bs.carousel and slid.bs.carousel instead
Solved with lazy loader, here the code:
$(".carousel.lazy").on("slide.bs.carousel", function(ev) {
var lazy;
lazy = $(ev.relatedTarget).find("img[data-src]");
if(lazy.length > 0){
$("#loader_container").css("visibility","visible");
$(".carousel-item img").on("load",function(){
$("#loader_container").css("visibility","hidden");
});
lazy.attr("src", lazy.data('src'));
lazy.removeAttr("data-src");
}});
I needed that if(lazy.length > 0) because once I did a full round of the carousel and all the images where loaded, somehow the loader would show up and never go away. I tried with if(img.complete) but it didn't work so I used that technique.

filtering results using isotope works with control F5 only

I am trying to filter a grid view in JavaScript with jQuery Isotope, it works fine if I click control F5, or I have my developer tools open, but when I just go to the url in a normal way, or refresh the page, it doesn't work.
Here's my code:
$(window).load(function(){
var dataFilters = [];
dataFilters = getdataFilters();
//dataFilters now has the value of = [".val1",".val2"]
$('#grid').isotope({ filter: dataFilters.join(', ') });
});
The reason I am using window.load is that I am waiting for all images to be loaded, then I filter them.
It's precisely because you're using window.load that you are only able to filter when refreshing the page, since the filter functionality is only declared there.
If you want to initialize isotope only when all of your images have loaded, you can use the imagesloaded library (by the same developer) in conjunction with isotope.
http://isotope.metafizzy.co/layout.html#imagesloaded
Sample code from the documentation:
var $grid = $('.grid').imagesLoaded( function() {
// init Isotope after all images have loaded
$grid.isotope({
// options...
});
});

Masonry - How to shuffle items

I'm using the masonry script for one of my webpages.
This is the JS (using jQuery, Typescript and the ImagesLoaded Plugin):
$(function(){
// or with jQuery
var $container;
function triggerMasonry() {
// don't proceed if $container has not been selected
if ( !$container ) {
return;
}
// init Masonry
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.item',
stamp: '.stamp',
gutter:20
});
});
}
// trigger masonry on document ready
$(function(){
$container = $('#container');
triggerMasonry();
});
// trigger masonry when fonts have loaded
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});
});
This is working very good.
But now I need to shuffle the items before they are rendered and displayed my masonry. Is this somehow possible?
I tried to use Isotope and looked at packery but both doesn't worked out at my website.
Thank you for every help!
shuffle the items before they are rendered and displayed
Do the items have any JavaScript event listeners assigned to them.
If not (meaning if the 'container' only contains markup and no script dependency) then I would suggest:
creating an array that stores the markup of each individual masonry-item as HTML string.
Shuffle the array and
dump the array contents into the 'container'
A crude solution for sure. But, hope this gets the job done.

jQuery functions not working after Infinite Scroll (AJAX) with Masonry

this may get complicated so I will try to explain my situation as best as I can.
I am using this jquery plugin http://www.infinite-scroll.com/ along with masonry: http://masonry.desandro.com/
Everything is working fine.
However, I'm trying to make some info relating to each post appear when you hover over a post. Here is my code:
$(".main").hover(function(){
$(this).next(".info").slideToggle("fast");
});
This only works on the first page content and not the extra content that is loaded by the infinite scroll.
So I tried adding the function to the callback of my masonry code:
// trigger Masonry as a callback
function(newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({opacity: 0});
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({opacity: 1});
$container.masonry('appended', $newElems, true);
});
$(".main").hover(function(){
$(this).next(".info").slideToggle("fast");
});
});
(Excuse me if I'm doing this completely wrong, I have never worked with Ajax before and am merely experimenting)
This made the hover function work on the new extra content loaded by Infinite scroll, however it then conflicted with the original content.
So, what is the best way to implement my hover function so it will work properly for all posts loaded before and after the Ajax call?
Thanks.
EDIT:
Solved the problem by changing my method to this:
$(document).on("click",".main",function(){
$(this).next(".info").slideToggle("fast");
});
http://api.jquery.com/on/
I will leave the original question here incase someone with a similar problem finds it useful.
$(document).on("click",".main",function(){
$(this).next(".info").slideToggle("fast");
});
For latest version of http://www.infinite-scroll.com/ along with masonry: http://masonry.desandro.com/ following code worked for me:
$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
$(this).next(".info").slideToggle("fast");
// OR your code you want to load after infinite scroll loads
});
Check for more here https://infinite-scroll.com/events.html#append

Jscrollpane pagination

Well im new to jscrollpane but ive been doing well so far until i placed multiple Mysql Results within a small div and a pagination class.
The scrollbar apears the first time, but as soon as i click page 2, and get the new rows the scrollbar wont appear, this is the pagination method
$('#pagination a').click(function(){
$.getJSON($(this).attr('href')+'&isajax=true', function(json){
$('#mytableinfo').html(json.datos);
}
);
so after that i need to reinitialise my jscrollpane so i try to do this as provided by jscrollpane documentation.
var pane = $('.scroll-class')
var api = pane.data('jsp');
api.reinitialise();
and i cant see anything the scrollbar just wont appear and its driving me nuts.
if i try to reinitialize after hiding-showing divs it does work , but i wont work after changing the whole div content
Try with the autoReinitialise parameter:
$('.scroll-class').jScrollPane({ showArrows: true, autoReinitialise: true }

Categories