Cargo home Twitter Devlog

Tag navigation: add active states

Last Updated: Jul 27, 2015 11:04AM PDT
If you have created a tag menu inside your project list (see this Knowledge Base article) or have added a tag menu through your Custom HTML, you can add “active” states to it through the use of a script tag in your Custom HTML:
 
 <script type="text/javascript">
/**
* Add a filter to your project navigation
*/
function addFilterActive(selector, remove_on_page, active_class) {
   if(typeof Cargo.Helper == "object") {
       var filter = Cargo.Helper.GetActiveFilter();
   } else {
       var filter = Cargo.Location.GetUserFilter();
   }

   var el_selector = (selector) ? $(selector) : $('.link_link');
       active_class = (active_class) ? active_class : "link_active";

   if( $('[href$="filter/'+filter+'"]',el_selector).parent() == selector) {
       $('[href$="filter/'+filter+'"]',el_selector).addClass(active_class);
   } else {
       $('[href$="filter/'+filter+'"]',el_selector).parent().addClass(active_class);
   }

   if(remove_on_page) {
       $(document).bind("projectLoadComplete", function() {
           $("."+active_class).removeClass(active_class);
       });
       $(document).bind("projectCloseComplete", function() {
           addFilterActive(selector, false);
       });
   }
}

$(function() {
   var selector = ".link_link";
   var remove_on_page = true;
   var active_class = "link_active";

   addFilterActive(selector, remove_on_page, active_class);
});
</script>
This will add the .link_active class to each of your links when clicked. This can be targeted by .link_active in your CSS:
.link_link.link_active a {
    background: #D9D919;
}

​For feed-based designs:

a.link_active {
    background: #D9D919;
}


With active states in the tag menu, it's not really necessary for the default tag information ( "Filter: tag / view all" ) to be visible in your website. This can be hidden in your website by adding this into your CSS:
 .view_tag_info, .nav_container br, .filter {
    display:none!important;
} 
Breaks in the text nav element are also hidden by this customization.
tickets@cargocollective.com
http://assets0.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete