jquery-isotope

React.js and Isotope.js

亡梦爱人 提交于 2019-12-03 16:32:36
问题 I'm checking out React.js and trying to figure out how this library can work together with Isotope.js. The documentation of React says that it plays nicely with other libraries, but using it with library that changes DOM on its own seems like no sense of using React. Can someone explain to me, how can I take advantage of React in my webapp that uses Isotope.js as layout ? 回答1: You can manipulate the dom directly inside React. This permits to integrate existing JS libraries or for custom needs

Infinite scroll plugin modify the path with custom query

无人久伴 提交于 2019-12-03 15:37:50
I am using the infinite scroll plugin ( infinite-scroll ) with jQuery isotope and was wondering if it's possible to modify the path with custom query parameters as user scrolls down the page to view more items. Is there a way to access the path and modify one of the query parameter. It's hitting the path ok for the first time returning the first set of items and after that it hitting the next pages , 1,2 3 ok but using the same query parameters I used for the first time only updating the page number. I would like to modify one of the parameter when hitting page 3 or 4 with something like this:

Problem with poor font rendering with CSS3 transitions, jQuery, & Google Fonts

血红的双手。 提交于 2019-12-03 13:46:28
In Firefox, there is no problem. Here's an image: http://cl.ly/3R0L1q3P1r11040e3T1i In Safari, the text is rendering poorly: http://cl.ly/0a1101341r2E1D2d1W46 In IE7 & IE8, it's much worse, but I don't have a picture. Sorry :( I'm using Isotope jQuery plugin, and the CSS3 transitions seem to cause the poor font-rendering. I'm also using Google Font API. Here's what the CSS transitions for Isotope are written as: /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope {

jQuery isotope centering [duplicate]

佐手、 提交于 2019-12-03 09:49:05
Possible Duplicate: How to center DIV in DIV? Please take a look at the image below: How can I make the grey squares horizontally centered inside the red container div? This is all made with isotope, so please keep that in mind. Thanks in advance. Even if the parent (red) div is always aligned in the middle, the grey, smaller ones are not. In the top image, when they are aligned in one single column, that column should be in the exact middle of the wrapper (red) div. Systembolaget It's actually very simple to implement centering for Isotope (just finished a site that does this to look good on

Callback for jquery plugin Isotope

穿精又带淫゛_ 提交于 2019-12-03 07:35:38
I'm using isotope ( http://isotope.metafizzy.co ) with expandable items, and i would like to use ScrollTo so that i can automatically scroll to the newly expanded item.. I first tried to use the callback with the reLayout method, something like: container.isotope('reLayout', iwannascroll(origin)); function iwannascroll(origin_with_newpos){ $.scrollTo(origin_with_newpos, 800); } origin being a variable where i put "this" from the click handler. Unfortunately, i always get the old position of the object.. Actually i'm not sure if the callback is called too soon or if i'm unable to understand how

React.js and Isotope.js

混江龙づ霸主 提交于 2019-12-03 05:45:59
I'm checking out React.js and trying to figure out how this library can work together with Isotope.js . The documentation of React says that it plays nicely with other libraries, but using it with library that changes DOM on its own seems like no sense of using React. Can someone explain to me, how can I take advantage of React in my webapp that uses Isotope.js as layout ? You can manipulate the dom directly inside React. This permits to integrate existing JS libraries or for custom needs not handled well by React. You can find an exemple here: https://github.com/stample/gulp-browserify-react

open expand/ close back to original sizes a series of boxes with img fade

做~自己de王妃 提交于 2019-12-02 11:05:57
I have a series of clickable boxes. I need to be able to expand the boxes and hide its img. I also need to be able to close previous opened one taking it back to its original height and defined width while fading back in its img. .info loads ajax content <div class="box"> <img src="#" /> <div class="info"></div> </div> <div class="box"> <img src="#" /> <div class="info">Ajax load content</div> </div> <div class="box"> <img src="#" /> <div class="info">Ajax loads content</div> </div> The css, i don't know the height. .box { width: 230px; height: auto; } .info { height: auto; width: auto; } I

Making a jQuery Isotope layout initialize inside a Bootstrap Tab

十年热恋 提交于 2019-12-02 10:54:06
I have a bootstrap tab control with 4 tabs. My Isotope code is inside the 3rd tab. But when I navigate to that tab, the layout is not engaged (All the images are on their own line, not in a nice tiled layout). If I resize the page it will reorganize into the proper layout. I have recreated the issue here. http://jsfiddle.net/Vc6Vk/ <div class="tab-pane" id="messages"> ....isotope code here </div> How do you make the Isotope engage so that when I navigate to the tab, it is already formatted and displaying correctly? Karine You can use the event shown.bs.tab : $('a[data-toggle="tab"]').on('shown

How to avoid gaps using Isotope with Masonry layout [closed]

。_饼干妹妹 提交于 2019-12-01 22:46:00
How can I fix the gap caused by the element sliding to the next row like in the image below? I'm using Isotope with the masonry layout mode. Thank you. I have a similar problem and I'm going to "fix" that by precalculating the order of the elements that way, that there will be no spaces and the boxes will always fit in the grid layout. AFAIK there is no solution by this isotope jQuery plugin for that. At a guess I'd say - Because the next item in the order is that big block underneath. Or the following item is the other smaller block bottom left. Even if that was moved up to occupy the white

How to apply a default filter to the container after dynamic insertion of items using Jquery Isotope plugin?

六眼飞鱼酱① 提交于 2019-12-01 20:22:32
I'm using the Isotope Plugin. I have an empty container to which I am adding items on $(document).ready(... All those items are added correctly and isotope's layout and filtering on links are working perfectly. However, I would like to be able to apply a filter on a certain item class directly after they are appended to the container, or even better, during the insertion. How to do that? To resume, I have a '.home' filter that I would like to be applied once all items are appended to the container in stead of needing to click a "home" filter. Systembolaget If you have something simple like <ul