Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Multiple Use of isotope

Hello I used this code to integrate isotope

$(function(){
    $('#container').isotope({ layoutMode : 'fitRows' });
      var $container = $('#container');
      $container.isotope({
       resizable: false,
                // disable normal resizing
                // set columnWidth to a percentage of container width
                masonry: {
                    gutterWidth: 15
                },
        sortBy: 'number',
        getSortData: {
          number: function( $elem ) {
            var number = $elem.hasClass('element') ? 
              $elem.find('.number').text() :
              $elem.attr('data-number');
            return parseInt( number, 10 );
          },
          alphabetical: function( $elem ) {
            var name = $elem.find('.name'),
                itemText = name.length ? name : $elem;
            return itemText.text();
          } 
        }
      });  
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');
      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }        
        return false;
      });
});

But this code is not working for my faq page. Where I place a collapsible divs for answers. When i click the question the content does not appear. It seems that container height is not allowing the div to expand.

how I can set this problem?

User Gravatar

webscriber

Posted Sep 16 2013 9:12 UTC

$5


  • isotope
  • 1717 Views

11 Replies


can you please format the code properly?

User Gravatar

guyisra

Posted Sep 16 2013 9:25 UTC

Ok, I put my code to this link

http://luminouseyegfx.com/issue/isotope.txt

User Gravatar

webscriber

Posted Sep 16 2013 9:37 UTC

can you link to the FAQ page? to see the result?

User Gravatar

guyisra

Posted Sep 17 2013 9:20 UTC

its in my localhost I can place screeshots:

http://luminouseyegfx.com/issue/faq-ok.jpg

Please Check the difference

http://luminouseyegfx.com/issue/faq-issue.jpg

User Gravatar

webscriber

Posted Sep 17 2013 9:49 UTC

can you replicate the problem in jsfiddle?

User Gravatar

guyisra

Posted Sep 17 2013 9:54 UTC

here is my codes in jsfiddle

http://jsfiddle.net/webscriber/bJzyV/1/

User Gravatar

webscriber

Posted Sep 17 2013 10:12 UTC

Oh, this has php inside We need to look at the same thing, so we can talk in the same language This might require some work, but at the end we will solve the issue

Copy the FAQ HTML output (not from the php source, but from the view source) - so the html will show the end result Also, css is needed and the collapse script (if its bootstrap, I can add it myself, just tell me what version you are using) If not, that script should also be included to replicate the problem.

Also, I didn't quite understand where isotope fits in with the FAQ collapse. I see it in the code, but I don't understand visually what you are trying to obtain by using isotope here

User Gravatar

guyisra

Posted Sep 17 2013 10:25 UTC

Ok I updated my code. I put the HTML code for FAQ page.

Yes its bootstrap v2.3.1.

Actually I have a lot of questions and answers so want to make them organize in some categories so when the user clicks the filter from top he will get the questions regarding the same category. Like if there are several questions about installation product then all of them should organize and filter inside installation category.

User Gravatar

webscriber

Posted Sep 17 2013 10:45 UTC

Ok, I understand you

So basically you can start your js like this

$(function () {

    var $container = $('#container');
    $container.isotope({
        resizable: false,
        itemSelector: '.accordion-group',
        masonryHorizontal: {
            rowHeight: 70
        },

no need to initialize isotope twice. also note that I added the itemSelector: '.accordion-group'. It could be that isotope is getting confused, so you need to tell it what items to handle

More important - I would suggest not to use isotope here, since its not really the use case - you have few items which are full width, so isotope isn't really needed here.

See if this can get you further http://jsfiddle.net/bJzyV/11/ Isotope and collapse don't mix well

User Gravatar

guyisra

Posted Sep 17 2013 12:31 UTC

Hello,

But I dont use isotope just for faq but I use it for portfolio too. The javascript I sent you was for my portfolio with item selecter. Also I checked the jsfiddle the result is not what I need.

for faq I need to achieve something like this link: http://theme-fusion.com/avada/faq-page-1/

User Gravatar

webscriber

Posted Sep 17 2013 23:21 UTC

For the FAQ you can simplify a lot by not using isotope.. using a simple show and hide with jquery like so http://jsfiddle.net/ZBAHS/114/

isotope is good when there are many items on a 2d layout, and you need the filtering and ordering of the items. For a simple list of questions and answers that is not needed.

User Gravatar

guyisra

Posted Sep 17 2013 23:52 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions