I'm trying to create an infinite scrolling Masonry layout in the Semantic UI framework, using the built-in visibility function.
Everything seems to be working except getting Masonry to re-layout everything once new items are added.
I've made a jsfiddle: https://jsfiddle.net/erland/pdb5j09o/
As far as I can tell from the Masonry docs, all I should have to do is call $grid.masonry('layout'); after adding the new item, right?
What am I missing here? Should I not be using imagesLoaded in combo? Should I be working in Masonry's append instead?
Thanks in advance!
OK, the answer is pretty obvious, I basically answered myself at the end of the question - you need to be using the Masonry append function instead of layout:
$masonrygrid.append( $content )
.masonry( 'appended', $content );
New fiddle showing it working: https://jsfiddle.net/erland/jv0o6pue/
But now that I've sorted that out, what's the best way to add a whole row (ie. 4 x $content) on each visibility trigger?
Related
I'm using Isotope (http://isotope.metafizzy.co). Testing the reLayout method by using the example provided here (http://isotope.metafizzy.co/demos/relayout.html), copied the css, js to (http://punkbit.com/webzine/isotope.html) but when I click in the first element all other elements go to the first column. I wonder why this happens ?
If we do the same in the official example, it works properly, apparently!
I'd like to toggle a class in the first element and by doing that, having the other elements take the vertical space and positioned properly. I tried to change the width of the container, etc but no success!
I've also got the same issue happening with Masonry:
http://codepen.io/anon/pen/BKAdH
If clicking in the first element, it won't work. All elements will be placed in the first column.
Also tried different layout modes etc without success
Sorry,
I've found the answer:
http://punkbit.com/webzine/isotope2.html
The property "columnWidth" needs to be set.
For Masonry:
http://codepen.io/helderoliveira/pen/gwvjA
I am trying to build a 2 column grid layout with masonry, but when I try using masonry they layout turns into this one column grid.
I think I may be using it wrong. I have been reading through the documentation, but don't know what else to do? To me, it seems like this code should cause they layout I am trying to achieve.
Here is the layout I am trying to achieve:
Here is my page with masonry: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE%20copy.html
And here is the page without masonry: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html
All I am trying to do is bring that first column up.
I would greatly appreciate any and all help!
Ok I download the html and tested it.
Please remove the margin-left of the items.
.dataCard { margin-left:3.2%; } /*Without this*/
And start the mansonary like so:
$('#main').masonry({
itemSelector: '.dataCard',
gutter: 20
});
This were the only changes done.
Here is an image of the result.
I'm wondering if this is possible with jQuery or JS.
I have a margin set on a div that is set by getting the height of a container that contains images.
var articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);
However, the container's images are essentially a slider, so the height of this container can change.
I'm wondering if it's possible to update the articleImageHeight variable live as the height of the container changes?
I am using slidesJS for the slider in the container.
Here's an example of what I'm working on: http://goo.gl/FdftC
Many thanks,
R
What I would probably do for this is to add your snippet of script as a function and then to call that function every time the slide changes. This will mean you need to make a slight modification to the plugin. Having a look at the plug the main animate function is simply called animate().
So as a quick example
updateHeight = function(){
articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);
}
The above adds your bit to a function and then add updateHeight(); to line 236... if you're using the un-minified version of the plugin.
Just above the line that says } // end animate function
.. just a thought a what might look a bit nicer is to use .animate rather than .css for updating the top margin... but hey I don't know what you're working on so is entirely up to you.
----EDIT----
Just an update... we found an animateComplete() callback on the plugin which worked a charm.
It is a bit difficult to explain my issue but I will try using images.
Demo: http://jsfiddle.net/H8Qbn/13/
I try to automatically arrange jQuery dialogs using Isotope.
The first picture shows that everything is working just fine.
The second picture shows what is happening when trying to resize the 1st jQuery dialog. It is resizing just fine and all other dialogs are automatically arranged.
When I try to arrange the second dialog it first moves according its position(top, left) and then resizes and all other dialogs are not automatically arranged.
The third dialog behaves exactly the same as 2. It moves according its position (top, left) and is not arranged automatically.
Any suggestions?
Isotope is not made for draggable dialog boxes; see what the plugin author says regarding this type of functionality.
EDIT Fiddled around with a few more things and got the layout to rearrange when a dialog is closed with .remove(); however, dragging is not suported (see above) and resizing manually won't work either. Why do you need manual resizing of dialog boxes? Can't that be done programmatically?
The jquery masonry plugin can compute the new position when you call it with the masonry("reload") function on the surrounding container after you have resized the dialog boxes or add or remove items. I used it in my Javascript when I add or remove an image to my surrounding container. You can see the Masonry plugin working live in my homepage at the web address http://www.chihoang.de.
This is my prepend and append function with masonry("reload") at the end:
if (ele.Additem == "Append") {
container.append($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
} else if (ele.Additem == "Prepend") {
container.prepend($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
}
And this is my remove function:
$j('.brick').remove(":contains('" + ele.Headline + "')");
container.masonry('reload');
I'm having an unexpected effect and some other bugs when trying to use show/hide with mouseover and mouseout.
What I was trying to do is have a box (div) and when you would mouse over it, another box would appear and slide to the right.
Here's the fiddle for it
http://jsfiddle.net/XtXGR/
Now there's two problems with it. One is the flickering and the other is that it appears by growing from the top-left corner and what I want it to do is appear from the left.
Any help would be greatly be appreciated. Thanks
I think I know what causes the flickering from the similar questions but I still need help with the other issue. Thanks!
Oh also just so you know the context in which this will be used is on a page with a table of items and each item would be the object in the fiddle link I posted above.
The main issue is that moving over a different child element of the container will trigger a mouseout and mouseover combination, which is why you see the element expanding and collapsing. IE circumvented this with the mouseenter and mouseleave events, which act exactly like the CSS :hover.
Speaking of which, the jQuery hover function has this feature too. You should use that instead of mouseover and mouseout.
According to the show API, you should use the slide effect to get what you want.
Your final code should look like this: http://jsfiddle.net/XtXGR/28/
A couple things:
If you want to do a fadein/out this would be better:
$(document).ready(function(){
$("div.item_container").hover(function() {
$("div.item_body").fadeIn(500);
}, function() {
$("div.item_body").fadeOut(500);
});
});
Also, you should probably float the div .item_body to the left..
Demo: http://jsfiddle.net/lucuma/XtXGR/33/
How about using CSS3 transitions instead?
See this: http://jsfiddle.net/EVDj6/2/
Something like this? Using slide will give you the slide from default left effect.
$(document).ready(function(){
$("div.item_container").on('hover',function(){
$("div.item_body").toggle('slide',500);
});
});
http://jsfiddle.net/XtXGR/25/
There were many issues in your code. The href's were invalid and the floating of the elements was not 100% correct. One of the main issues was that you had display:none in your CSS. Bring that dispay:none out and of the CSS and put it inline on the item you want to show/hide. When its default state is "hide" then you need to bring the display:none inline.
Look at this fiddle to get a better idea of how to go about this with a bit more valid syntax:
http://jsfiddle.net/fH3EC/1/
I made something fast, you can go crazy with it :) The animation is pretty smooth, I hope it's useful for you.
http://jsfiddle.net/XtXGR/50/