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

help get isotope to work with the mean menu mobile nav

I'm looking for help to get my mobile navigation to work with isotope. Here's the problem: http://greggmrowka.com/new_portfolio/TEST_isotope/combo4.html

when the screen gets to the mobile size, the navigation created through mean menu no longer controls the isotope script.

Thanks, Gregg

User Gravatar

mrowka3d

Posted Feb 10 2014 20:50 UTC

$30


  • Assigned To NBoychev
  • Solved
  • isotope
  • 849 Views

6 Replies


Hi Gregg,

You need to change the selector for the navigation anchors to this (line 201 of combo4.html):

var $optionSets = $('#options .option-set, .mean-nav'),
    $optionLinks = $optionSets.find('a[data-option-value]');

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Feb 10 2014 23:11 UTC

Hmm, awesome thought. I applied the changes, but to no avail. Did I implement it properly?

You'll see I made the changes on line 201, and I also tried being more specific by doing the commented line on 200. But that didn't work either.

Thanks a ton for your help, gregg

User Gravatar

mrowka3d

Posted Feb 11 2014 5:48 UTC

Hi mrowka3d,

I will check that again in 3hrs, hope that work for you.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Feb 11 2014 5:56 UTC

No rush Nikola. Thanks for your time!

User Gravatar

mrowka3d

Posted Feb 11 2014 6:47 UTC

Hi mrowka3d,

I've found the fix. The problem was that the mobile navigation is created after the page is loaded.

Replace the code below this line:

//var $optionSets = $('header nav #options .option-set, .mean-nav #options .option-combo .optio

With this:

$(document).on('click', '.mean-nav a[data-option-value], #options .option-set a[data-option-value]', function(event){
    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;
});

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Feb 11 2014 9:11 UTC

Solution

This didn't solve your task? Get your own custom solution.

Awesome! Thank you very much for your help, and quick response :)

User Gravatar

mrowka3d

Posted Feb 11 2014 15:46 UTC

Add a reply

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