jquery-isotope

问题 Following on from: Adding HTML to JQuery Isotope additems/insertitems I have Brady's: function makeDataSlide(slideId, imgSrc, slideTitle) { var slide = $('<li data-target="#myCarousel" data-slide-to="'+ slideId +'"></li>'); var gridItem = $('<div class="grid-item" style="display:none"></div>'); $(gridItem).append('<img src="'+ imgSrc +'">'); $(gridItem).append('<h4>'+ slideTitle +'</h4>'); $(slide).append(gridItem); return slide; } $('.button').on( 'click', function() { var $items = [

问题 I am trying to implement jQuery Isotope together with my Twitter Bootstrap grid and I am stuck. I have a usual bootstrap markup for columns. I have three rows (.row-fluid), inside each there are three columns (.span4) Now, when I call Isotope on the said columns, what I get is that the third element inside of a row goes in the new line, even though there is space for it in the top line. Can you help out. My jQuery is this (ignore other variables on jsfiddle): pGrid.isotope({ hiddenStyle : {

问题 I am doing a masonry-style page with boxes that expand when clicked. I have made the javascript code so that all other boxes will default to their original size when another box is clicked; that is: only one box will be expanded at a time. It works fine! The thing is that isotope doesn't animate the resizing of boxes, only the repositioning! So I've invoked the jquery UI plugin to animate that toggle class function, so that not only the repositioning of elements will be animated, but also the

问题 Lets say I want to filter on both color (red, yellow, or blue) and on size (small, medium, or large) and on material (wool, cotton, silk). I will have three sets of checkboxes. If a user checks the "red" checkbox and the "medium" checkbox, I want Isotope to display items that are both red and medium. So far, no problem. But what if the user checks both the red and yellow checkboxes as well as both the medium and large checkboxs and both the wool and silk checkboxes? Now I want Isotope to

问题 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

问题 I've integrated a jquery search plugin to search through isotope elements, the plugin uses regular expression to sort content, in real-time, based on the search input. Isotope elements are updating automatically ( I'm using a wordpress plugin which retrieves data from social networks ) My question is, how can I reorder the elements after the search is performed? L.E : I'VE SOLVED THIS BY USING OTHER PLUGIN FOR SEARCHING: Here is the code: $(document).ready(function () { $("#id_search")

问题 I am wondering what is the issue with this fiddle: http://jsfiddle.net/GwBa8/150/ I want to change which category loads by default using different links without having to add extra pages to my site. The last working state is this fiddle http://jsfiddle.net/GwBa8/128/. The only difference is the following code added to the start of the jQuery. //e.g. website.com/index/filter/games var $criteria = '*'; var str = window.location.pathname; //games if (str.substring(str.lastIndexOf('#'))) { var

问题 I have a page using Isotope. It combines a search box, multiple combination filters and finally some sorting options. I have used many examples on the web to combine all this and stripped the code down as best I can (very limited isotope knowledge). Two things - Firstly, how can this be combined further? I currently have 3 separate 'sections' to the code. Secondly, the search box works independent of the combination filters, and when the filters are clicked the search box stops working at all

问题 I am new to web development, especially Jquery and Bootstrap. I am trying to include Jquery Isotope to achieve a Pinterest like layout in one of the pages of my yet to be launched dream website, but I have run into few problems here. Since my html code is too long and I am in kind of in a hurry, I have made these .gif images that explain the problem better than my explanation below: The html elements I want to apply Isotope to come in a loop and seem to load properly upto only a few

问题 Because of a big amount of elements (>5000), I'd like to apply isotope to SVG and not to HTML nodes. The nodes are represented as: <rect class="node" width="2" height="2"/> I use '.node' as item selector but isotope doesn't seem to find the elements and nothing happens. Any hint if this could be possible or if the library can't be applied to SVG elements? Here the test case: https://jsfiddle.net/geraldo/bL25f73a/ 回答1: I've taken a look at the Isotope source code, unfortunately it looks like