Hi! If your tabs require some JS code to work, then you should add it to the onContent callback of my Colio pliugin.

If you need any further help please let me know!

Hi thank you.

i had tried many time with different way. please have a look http://demos.webicode.com/html/iod-html/. when you click the services section it will open and you can see tabs section. please send me code which i can out on it.

Best Regards

You will need to add some sorting menu and then link every item in that menu with the call to isotope. Here is info how isotope sorting works – http://isotope.metafizzy.co/sorting.html

Also here is example how it’s implemented by Isotope – http://codepen.io/desandro/pen/nFrte

thanks for the answer, i tried that first but de isotope-docs.min.js file on isotope.metafizzy.co seems different to the jquery.isotope.js of colio plugin and i can not make it work. Finally a use this js code to activate sort:

<script> $(function() { </script>

var $container = $('#container');

$container.isotope({
    itemSelector: '.element',
    getSortData: {
        name: function($elem) {
            return $elem.find('.name').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;

});

The sort and the filter parts works fine. But de expanded functionality keep de position of the original sort and the content blocks appears away from the source. Can you help me to correct this issue? thanks in advance.

The code that you have provided seems is correct except that I don’y see changeLayoutMode function and the way how you pass sortBy to isotope.

Regarding your question. Seems I don’t understand what you mean..

> But de expanded functionality keep de position of the original sort and the content blocks appears away from the source

could you give me a link to check this myself?

Thanks for the answer… the link http://adversa.cl/plazamaule/tiendas . After apply sort, expander collapses

Have you seen this? How can i add changeLayoutMode function and pass sortBy to isotope? really appreciate your help, thanks!

> How can i add changeLayoutMode function and pass sortBy to isotope?

Sorry, I have no idea what changeLayoutMode should do.

How to use sortBy option please check Isotope documentation here

Then to make isotope perform sorting you should call it like so

$('#my_portfolio').isotope({sortBy: name});

where “name” is name defined by getSortDate ( see your code above)

Hello, please view this link to see the issue http://adversa.cl/plazamaule/tiendas, i added isotope sort function but colio expander functionality collapses after apply ‘sortby’ this is the code used to add sorting:

// "isotope" sort plugin
var $container = $('#container');

$container.isotope({
    itemSelector: '.element',
    getSortData: {
        name: function($elem) {
            return $elem.find('.name').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;

Sorry, your URL does not open up. I get timeout in my browser.

Its because there a ”,” this is the url http://adversa.cl/plazamaule/tiendas thanks

I noticed it, but it still does not work.

Here is an alternate link: http://plazamaule.cl/sitio2015/tiendas thanks in advance

Hello! Let me check if I get your question right. You want that when site is being opened on mobile device (with single column), viewport appears before all items? And this happens when placement is “inside”?

I need the expander div to appear inside, but always under the current row. Similar to this site: http://www.nurun.com/en/people/

There is an option in called “beforeLastRow” which controls where viewport will appear in inside placement. Set it to “false”, to make expander div appear under every row, including the last one.

Hi! This seems to be related to CSS3 transforms as when I set -webkit-transform for UL list, filtering works differently. But I still don’t understand why it happens. I will check this a bit later and update you.

Oh! I just saw your reply here. Thanks. I waiting for your reply. thanks

I fixed everything by changing the white setting with the black. I just need to now where to add the code below to open and close the items. Thanks

$(’#my_portfolio .colio-link-custom’).click(function(){ var api = $(’#my_portfolio’).data(‘colio’), item = $(this).closest(’.colio-item’); if(item.hasClass(‘colio-active-item’)) { api.collapse(); } else { api.expand(item.index()); } return false; });

Great that you’ve fixed it.

Regarding the code. What you should do is

1. replace class “colio-link” with “colio-link-custom”
2. then add the code after a line where you init Colio plugin itself.

i’m sorry but i can’t get it work. Here’s the code:

$(document).ready(function(){

// "colio" plugin
    $('.portfolio .list').colio({
        id: 'demo_1',
        theme: 'white',
        placement: 'before',
        hiddenItems: '.isotope-hidden',
        onContent: function(content){
            // init "fancybox" plugin
            $('.flexslider', content).flexslider({slideshow: false, animationSpeed: 300});
        }
    });

// "isotope" plugin
var filter = '', isotope_run = function(f) {
    var list = $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});        
    window.setTimeout(function(){
        list.trigger('colio','excludeHidden');
    }, 25);
};

$('.portfolio .filters a').click(function(){
    $(this).addClass('filter-active').siblings().removeClass('filter-active');
    var href = $(this).attr('href').substr(1);
    filter = href ? '.' + href : '';
    isotope_run(filter);
    return false;
});

isotope_run(filter);

});

Plus: I added #my_portfolio in the html like so:

is that correct?

I just read the documentation about the onContent inti. Here is my problem, I have no idea how to write the initial code to active custom scrollbar jquery.

in your doc:

<script type="text/javascript">  
    $(document).ready(function(){  
        $('#my_portfolio').colio({  
            id: 'colio_1',  
            onContent: function(content) {  
                $(content).find('.fancybox').fancybox()  
            }  
        });  
    });  
</script>

This is the initial source code for custom scrollbar: <script> (function($){ $(window).load(function(){

$("#content-3-1,#content-3-2, #content-3-3, #content-3-4, #content-3-5").mCustomScrollbar({
                scrollButtons:{enable:true},
                theme:"dark",
                scrollbarPosition:"outside" 
            });
</script>

});
})(jQuery);

How to put 2 of them together??

..

Hi!

It should be like so (just put JS code inside of onContent callback and use content argument as context for search.

<script type="text/javascript">  
    $(document).ready(function(){  
        $('#my_portfolio').colio({  
            id: 'colio_1',  
            onContent: function(content) {  
               // init code here
               $(content).find("#content-3-1,#content-3-2, #content-3-3, #content-3-4, #content-3-5").mCustomScrollbar({
                scrollButtons:{enable:true},
                theme:"dark",
                scrollbarPosition:"outside" 
            });
          }
        });  
    });  
</script>

nope. the malihu scrollbar not working, I tested the plugin outside colio, the plugin worked just fine. If I initial it inside colio, it will not work. Please help me out.

Hi! Could you give me a link to your website to check it?

Hi!

I can provide you with a code to make it add #project-short-name to the end of URL. Basically I made this for WP version already and can just copy code from there. Please drop me email and I will do this as soon as possible.

Yes, you can buy Extended License and use my plugin in one commercial project.

Hi! Does it happen when placement us set to “inside” ?

Yes placement is set to inside

Well, inside placement is sensitive to “resize” events. Every resize either when you do this manually or programmatically will make viewport collapse.

Have you noticed the same behavior on your own demo?

Hi! The reason is that you don’t use Colio viewport, so there is no need in onContent callback. You just have to init fancybox in main document.