Animating item size in Isotope: Why is first item wonky?

I'm learning to use Isotope and came across the author's blog post about how to animate item sizes.

I have implemented that for a project I am developing. It consists of three vertical columns. Each item is 196px x 70px. When you click an item, it will expand to 402px x 230px.

All the items resize properly and cause Isotope to refresh the layout -- except the first item.

Clicking the first item causes all the subsequent list items to line up in just one vertical column -- even though there is plenty of room and the items should flow around the first one.

Clicking any other item in the list results in the correct behavior. Only the first one is wonky. Can anyone see what might cause this?

Here's my test case: http://joshrenaud.com/pd/testcase/testcase.html

The code that handles this resizing looks like this:

$('.child').click(function(){ var $this = $(this); if ($this.hasClass('big')) { tileStyle = { width: 196, height: 70}; } else { tileStyle = { width: 402, height: 230}; } $this.children().children('.childDate').toggle(); $this.children().children('.childDesc').toggle(); $this.toggleClass('big'); $this.find('.child-content').stop().animate( tileStyle ); $('#container').isotope( 'reLayout' ) });

-------------Problems Reply------------

I found the answer after a little more experimenting. Isotope has an attribute called columnWidth, which the docs make out to be optional since the script can determine the column width from the first item.

However adding the columnWidth to my .isotope() initializer made this thing work right.

$('#container').isotope({
masonry: { columnWidth : 206 }
});

Also, it seems that columnWidth is not the same as the width of the item. It's the width of the item, plus the gutter (margin). In my case, the columnWidth was 206: 196 (item width) + 10 (gutter/margin).

Category:javascript Views:0 Time:2011-05-27

Related post

  • Number of distinct items between two consecutive uses of an item in realtime 2015-01-26

    I'm working on an problem that finds the distance- the number of distinct items between two consecutive uses of an item in realtime. The input is read from a large file (~10G), but for illustration I'll use a small list. from collections import Order

  • How to set the Listview item size in android? 2010-03-05

    I have added some adapter to the list view. For some items, the text is lengthy and the item displays only some portion of the text. How to fix this.? Is there a way to set the size of the list view item? --------------Solutions------------- well one

  • Maximum item size in IndexedDB 2011-04-17

    I'm working on a simple web utility that makes use of IndexedDB (similar to a key-value DB) feature of HTML5. I was looking for but I was unable to know: what is the maximum size I can store in an item? --------------Solutions------------- From an an

  • C++ vector with dynamic item size 2011-06-09

    the C++ STL vector has a lot of decent properties, but only works when the size of each item is known at run-time. I would like to have a vector class that features dynamic item size at run-time. Background: My items consist of a sequence of integers

  • android scrollbar length with different item sizes 2011-09-10

    I have a listview with a comments. Comments has different length(from 1 line to 20, for example). And while I'm scrolling this listview, standard scrollbar increases and decreases, depending of what the comment I'm scrolling in this moment. Why is it

  • expand to menu item size 2011-11-06

    how can i expand to menu item? below code is example of CCMenu but i can't find to expand to each one of menu item size // Create some menu items CCMenuItemImage * menuItem1 = [CCMenuItemImage itemFromNormalImage:@"myfirstbutton.png" selectedImage: @

  • How can I change default Couchbase item size? 2012-01-19

    I am using the .NET Couchbase Client API that includes Enyim.Caching. I have a DataTable that is approximately 55 megs and it is not getting cached. I understand that there is a "soft" max for the item size of 20 megs. How can I change the default ma

  • maximum field and item size limits in dynamo db and mongo db 2012-02-07

    I want to use dynamo DB to store some attributes which are big string values... Is there any maximum field size/maximum item size limitation in Dynamo DB? Something which limits the data that i store for 1 item in a table? Also, what is the equivalen

  • How can I change text and item size via command prompt? 2014-04-05

    I want to create a script that will let me easily switch to/from my tv to my monitor. I know how to change display but I don't know how I can change the text and item size via command prompt (ie from 100% to 150%). Does anyone know how? -------------

  • Isotope v2 show 'no items' if no items 2014-04-09

    In the first version of Isotope, it applied classes to the items when they were hidden (.isotope-hidden). In this new version 2, those classes aren't applied. My old script (note I'm using the combination filter so this comes inside an item click fun

  • Desktop items size cannot be kept to 100% under VMWare Fusion 6 2014-06-19

    Windows 10 TP Build 9841 Running W10 TP 9841 as a VM in VMWare Fusion 6.04 for Mac with Windows 8.1 VMWare Tools (as no tools are yet available for Windows 10) seems to prevent desktop items size sticking to 100%. As soon as I reset to the default 10

  • Pivot Tables: How do you show original sample size (unfiltered Values item size)when filtering Top 10, in Excel 2007? 2014-12-14

    Hi everyone. How do you show original sample size (unfiltered Values item size) when filtering Top 10 in Excel 2007? For example, my sample data has 159 records. When I filter to Top 10 in the Pivot Table report, the Total shows only 37. While it is

  • CSS How to hide current child menu items when hovering over parent's sibling items without javascript 2010-03-04

    I'm trying to create a two-level horizontal navigation menu (or menubar) that displays the child submenu items when you hover over the parent menu item. If one of the child items is selected, the parent item has a visual indicator that the current pa

  • Select a random item, without knowing the total number of items 2010-03-07

    I have a case where I need to select a random item, but I don't know the total number of items and I don't want to build a huge array then pick an item out. For example, this is what I have right now: List<string> items; while (true) { string i

  • Python: determine if all items of a list are the same item 2010-09-24

    In some of my code I put a series of objects in a list and I build an additional list out of their attributes, which is a string. I need to determine if all the items in this second list have the exact same value, without knowing beforehand which val

  • Getting new items for an activity stream that supports item "bumping" 2011-03-12

    Let's say we have an activity stream for user X, something like on Facebook. Each activity can be commented, and such comment "bumps" the activity upper in the stream, i.e. activity now appears in a stream with date/time of its last comment. Going fr

  • How to get currently active item`s index number (and not active item`s id) on a card layout on Extjs? 2011-06-01

    How do I get the currently active item's index number (and not active item's id) on a card layout? The following code will return active item's id: Ext.getCmp('my-wizard').getLayout().activeItem.id]; What if I don't want to define an id for my compon

  • Best way to lazily collapse multiple contiguous items of a sequence into a single item 2011-07-18

    [Note: Title and text were heavily edited to make it more clear that I'm not particularly after strings, but after general sequences, and lazy processing of same] Using character sequences / strings as an example, say I want to turn a string like "\t

  • Removing items from ListBox A based on the items in ListBox B 2011-11-05

    I am trying to remove items from a listbox based on the items on another listbox, this seems simple but apparently I can't get my code to work, please advice. Thanks. Dim listRemove As New List(Of ListItem) For Each item As ListItem In QualOutletToBo

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.166 (s). 11 q(s)