I am trying to build a horizontal version of JQuery Masonry using JQuery Isotope. I want my result to look something like this:
Layout-modes (CLICK THE masonryHorizontal OPTION).
As per the sites instructions:
Masonry Horizontal
my script looks like:
$('#isotopecontainer').isotope({
itemSelector : '.item',
masonry : {
columnWidth : 270
}
});
However, 2 things are happening:
1) when the page loads the height of the #isotopecontainer div is set at 60px so you only see the tops of the .item divs.
2) if you resize the browser the #isotopecontainer div expands but the .item divs do not line up like the example.
Can anyone help point me in the right direction at all? My demo site is here.
Thanks.
You're demo site is working in Firefox.
Although, you're right, in Chrome it's not. The problem is fairly simple. You need to set width and height attributes on your images. Or else, Chrome load them as 0px height (which made container with default height of line-height value) until they get the file. Firefox isn't acting this way and waits for knowing the images size before creating the layout.
Hope this help!
You need to add layoutMode: 'masonryHorizontal' or else it won't work. Like this:
$('#isotopecontainer').isotope({
itemSelector : '.item',
layoutMode: 'masonryHorizontal',
masonry : {
columnWidth : 270
}
});
#isotophecontainer has overflow: hidden. Removing this shows all of the images for me in Chrome.
Related
EDIT: The script is triggered and performing correctly when the window is being resized. Thanks a lot Сър Георги Демирев!
I've been pondering over a problem for a long while and I just can't seem to get a grip on it. On a photography portfolio site I use iDangero.us Swiper for a slideshow and JQuery Isotope for a thumbnail gallery.
Now, it works fine on Firefox and Chrome on Linux and Windows 7 alike.
However, on IE, Safari and Opera the grid items are showing in a vertical line, rather than a grid.
In order to locate the error I stripped the code from everything until I found out that Isotope stops this behaviour when I remove the Swiper part of the code.
The parent divs show to have 0 px height. Changing these to a fixed height (e.g. 1000px or 100%) doesn't change anything.
Here's the original site: http://anthron.octans.uberspace.de/meta.php
Here's a minimal example that still produces the error:
http://anthron.octans.uberspace.de/meta.debug.php
And the minimal source code: http://pastebin.com/H6t9bbNC
EDIT: Here's an implementation of Сър Георги Демирев's suggestion:
http://anthron.octans.uberspace.de/meta.debug.2.php
It works now, however the margin-right after the grid items are gone and return only after window resize. However one step further now.
I'm very grateful for any suggestion, I'm quite clueless about this one...
I had a similar problem recently and the fact that images are stacked one under another probably means that the script is not loading. However, if you resize the browser window a little bit, the script is triggered and images are places the way they should.
Wrap this code
imagesLoaded( '#thumbnailgallery', function(){
var $container = $('#thumbnailgallery');
$container.isotope({
itemSelector: '.element',
layoutMode: 'masonry',
masonryHorizontal: {
columnWidth: 240,
rowHeight: 240,
gutterwidth: 50},
});
});
in (document).ready function like this:
$(document).ready(function () {
imagesLoaded( '#thumbnailgallery', function(){
var $container = $('#thumbnailgallery');
$container.isotope({
itemSelector: '.element',
layoutMode: 'masonry',
masonryHorizontal: {
columnWidth: 240,
rowHeight: 240,
gutterwidth: 50},
});
});
});
I have an isotope-item that will grow in height when somebody comments inside of it. When it grows, how do I tell the main isotope container to grow with it? Right now what is happening is, as the isotope-item grows, the isotope container maintains it's initial height that was set when calling $(".home_main").isotope(); So when I leave comments inside the isotope-item, the item grows, then is cut off by the main container. Thanks.
I have seen that you can set resizesContainer: true but this hasn't helped me. Thanks.
Not sure if it makes any difference but I have also tried this with the Masonry jquery plugin as well (seems pretty similar) and had the same problem.
Found the answer here:
https://github.com/desandro/isotope/issues/275
You have to call relayout like this:
$("#your_container").isotope( 'reLayout' )
In Isotope V2 the syntax is
$("#your_container").isotope('layout')
In Isotope PACKAGED v2.2.2, you can also 're-arrange / re-layout' your container:
$(window).scroll(function(){
$container.isotope( 'layout' );
}
In Isotope V3
$(window).on('load', function(){
var $container = $('#your_container');
$container.isotope({
itemSelector: '.item'
});
});
If your using the latest isotope, (not specified version but you can see the date of this comment) read the first link and include the appropriate couple of lines and include the library from the second link.
http://isotope.metafizzy.co/appendix.html
http://imagesloaded.desandro.com/
I would like to get a navigation exactly like this website : http://www.interviewmagazine.com/
A navigation bar appears after scrolling down about 700 pixels or so.. its a fixed nav with fade in effect and has a fade out effect when you scroll back to top.
I tried to see how they did their code but i couldnt figure it out.
sounds like mootools tho?
If someone can help that would be awesome. thanks!
You can create such a menu using jQuery and CSS, swapping classes as needed when:
var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
//do something;
}
CSS: position : fixed, opacity : 0, height : 0; overflow : hidden
swap class to change height to fixed amount
animate({opacity : 1.0}, 'fast', function() {
//callback;
});
You'll have to set a listener for when user scrolls, but this should get you started. All you need is jQuery and a browser, a logical approach to cut the project up into manageable parts, and time.
EDIT: Here's your fiddle.
http://jsfiddle.net/lazerblade01/fNn7K/26/
For anyone searching through stackoverflow here is my try:
$(function(){
// Check the initial Poistion of Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyheader').css('opacity', '1');
} else {
$('#stickyheader').css({position: 'static', top: '600px'});
$('#stickyheader').css('opacity', '0');
}
});
});
Here is a Fiddle DEMO http://jsfiddle.net/uFq2k/297/
It is a little modified version of this code: how can I stick the div after scrolling down a little
David Walsh has a thing he calls ScrollSpy - much like twitter's scroll spy - only it does a different thing.
the twitter one can react to a particular element of interest coming into view.
walsh's plugin can react and give you events when a user scrolls to a particular threshold and back.
http://davidwalsh.name/mootools-scrollspy
You could try Twitter's Bootstrap. Check out their second toolbar.
I'm a little confused with the next steps to take on a project I'm working on and hopefully you could give me some ideas/help.
http://goo.gl/4d72h
I'm using Wordpress, and a combination of Portfolio Slideshow Pro (http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/) and Masonry (http://masonry.desandro.com/index.html) to create the landing page of this project.
As you can see by visiting the site, each 'post' is wrapped in a grid_6 float, allowing two floats per row, and then I am using masonry to place everything together as it does. I've wrapped the masonry code in a (window).load function to wait until all the featured images have loaded and then it starts the masonry. Pretty straightforward.
<script>
$(window).load(function(){
var $container = $('.masonry-cont-area');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.single-fg-post'
});
});
});
</script>
However, the masonry is only taking into consideration the first feature image for it's positioning etc. If you click the images, or the dots, it'll advance to the next image which can be longer or shorter in height, which is causing a few problems. Because the masonry has already taken place, it's overlaping with the next post etc. You can see what I mean when you click on the images on the link given above.
So, what I'm after today, is any ideas on how this can be fixed? Can masonry take the height from the tallest image in the slideshow? Can it changes dynamically as the images are clicked? Can I make sure that a margin at the bottom is ALWAYS given on absolute positioned items?
Any ideas would be really appreciated.
Thanks all,
Richard
You slideshow plugin does not seem to expose any event hooks. So you will have to do it the verbose way ..
Change the code where you initialize the masonry plugin to
$(window).load(function(){
var $container = $('.masonry-cont-area');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.single-fg-post',
isAnimated: true // added this line to make the resizing of the masonry animated and not instant..
});
// whenever we click on a bullet element
$('.pager').on('click','.bullet', function(){
// we use timeout to delay the redrawing of masonry
// because the slideshow takes sometime to fade out the current slide
// and slide in the new one..
// We have to wait until the slideshow has completed its transition before
// redrawing masonry, so that the masonry plugin can use the new slide's dimensions..
setTimeout(function(){
// we make masonry recalculate the element based on their current state.
$container.masonry();
}, 250); // 250 is the milliseconds of delay between the click to the bullet and the calling of the masonry redraw..
});
});
});
See it live at http://jsfiddle.net/XjVWN/embedded/result/
One thing you could do is to call .masonry('reload') when an image is changed.
I'm able to resize the height with the $.fancybox.resize(); part, but the width just doesn't update according to the new content. Thoughts?
From the fancybox api docs:
$.fancybox.resize: "Auto-resizes FancyBox height to match height of content."
So it looks like it is not intended to adjust the width.
If you wish to adjust the width, you can do it by manually resizing the #fancybox-wrap and #fancybox-inner elements. After some very quick checking, it looks like #fancybox-wrap is set to 20px wider than #fancybox-inner:
$('#fancybox-inner').width(400);
$('#fancybox-wrap').width(420);
You can also control the width when you first register fancybox using the width option:
$('#somelink').fancybox({ width: '100px' });
In newer versions of fancybox (1.3.4 in my case) use
$('#fancybox-content').width(600);
instead of
$('#fancybox-inner').width(400);
for manually adjusting the width
Here's what worked for me:
$('#fancybox-wrap, #fancybox-outer, #fancybox-content').css('width', 'auto');
$.fancybox.center();
make some changes in jquery.fancybox.js near about line nubmer:837 change
current.width = loadingBay.width();
to
current.width = loadingBay.width() + 2*current.padding;
it worked fine to me.
Just open jquery.fancybox.js and add your own width. Here is my code with width = 72%.
// Reset dimensions so we could re-check actual size
wrap.add(skin).add(inner).width('72%').height('auto').removeClass('fancybox-tmp');