Looking for a specific demo page in Stratus? Check out the Visual Library

Okay
  Print

Auto Filter Rooms on Page Load

We wrote a little javascript to help customize what filter is triggered on page load.

Put this in your child theme functions file.

For version 2 +

// themo_hook_head_css = to add custom css or JS to your head
add_action('wp_head','themo_hook_head_css');
function themo_hook_head_css() {
    $output="<script>
        jQuery(window).load(function($) {
            // Change collaboration to your filter name.
            var filterby = 'collaboration';
            // DONT EDIT BEYOND THIS
            jQuery('.th-portfolio-row').isotope({
                // options
                itemSelector: '.th-portfolio-item',
                layoutMode: 'fitRows'
            });
            jQuery('.th-portfolio-row').isotope({ filter: '.p-'+filterby }); // Filter by specific class
            jQuery('a[data-filter=\"*\"]').removeClass( 'current'); // Remove All as active
            jQuery('a[data-filter=\"#portfolio_content .p-'+filterby+'\"]').addClass( 'current'); // Add active state to specific class.
        });
            </script>";
    echo $output;
}

For earlier versions:

// themo_hook_head_css = to add custom css or JS to your head
add_action('wp_head','themo_hook_head_css');
function themo_hook_head_css() {
    $output="<script>
        jQuery(document).ready(function($) {
            // Change collaboration to your filter name.
            var filterby = 'king';
            // DONT EDIT BEYOND THIS
            jQuery('.rooms-row').isotope({
                // options
                itemSelector: '.rooms-item',
                layoutMode: 'fitRows'
            });
            jQuery('.rooms-row').isotope({ filter: '.p-'+filterby }); // Filter by specific class
            jQuery('a[data-filter=\"*\"]').removeClass( 'current'); // Remove All as active
            jQuery('a[data-filter=\"#themo_rooms_1 .p-'+filterby+'\"]').addClass( 'current'); // Add active state to specific class.
        });
            </script>";
    echo $output;
}

Then change the filterby variable to the filter you wish to auto filter by on page load.

In the example above I want to auto filter on page load by the 'king' filter. You can see an example of the 'king' filter on this page although we don't have it auto filtering at this time.

http://demo.themovation.com/bellevue/hotel/#themo_rooms_1

:-)