Link to second page with data-filter attribute

Question

I am using a DotNetNuke module called GalleryPro on my /resources. This allows me to add resources to a library through their front end builder. The current HTML "filter" for the resource library is:

<div class="pro-isotope_group"> 
     <a data-filter="*" href="javascript:;" class="active">All</a>
                <a href="javascript:;" data-filter=".AnalystReports" title="Analyst Reports">Analyst Reports</a>
            <a href="javascript:;" data-filter=".WhitePapers" title="White Papers">White Papers</a>
            <a href="javascript:;" data-filter=".Infographics" title="Infographics">Infographics</a>
            <a href="javascript:;" data-filter=".Ebooks" title="Ebooks">Ebooks</a>
            <a href="javascript:;" data-filter=".DataSheets" title="Data Sheets">Data Sheets</a>
            <a href="javascript:;" data-filter=".CaseStudies" title="Case Studies">Case Studies</a>
            <a href="javascript:;" data-filter=".Blogs" title="Blogs">Blogs</a>
            <a href="javascript:;" data-filter=".Videos" title="Videos">Videos</a>
       </div>

The actual resources are inside a <div class="isotope-margin"> & the filtering works correctly on this page. I cannot edit the html or javascript as it is a pre built module.

On my homepage I have an html block:

<ul class="list-ico ico-sm">
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Full Resource Library</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Analyst Reports</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Our-Blog">Blog</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Case Studies</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Data Sheets</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Ebooks</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Video Gallery</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">White Papers</a></li>
<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources">Academy</a></li>

I want the homepage menu to link to the /resources page but also auto load the corresponding data filter. Is this possible?

Example: I click on White Papers in my main menu & redirect to /resources with the white papers filter.

This is bugging me! Any help is appreciated.

Thanks, Chris

Answer 1

You'll need to write some JavaScript for this.

You say you cannot edit the HTML or JavaScript of this pre-built component, but perhaps you can add JavaScript to the page that wraps/hosts this component?

If you change your links to append a query string like so:

<li><i class="fa fa-chevron-right">&nbsp;</i><a class="menu-sub" href="/Resources?filter=WhitePapers">White Papers</a></li>

Then on GalleryPro component's host page, you could write JavaScript to find the appropriate and append class='active' to it.

Example using jQuery:

$().ready(function() {
    //read the ?filter=WhitePapers from the request
    var selected_filter = $.url().param('filter');
    //manually drill into the component's links
    $('.pro-isotope_group').find('a').each(function(){
        //clear any existing 'active' css
        $(this).removeClass('active');
        //grab the data-filter attribute
        var cur_filter = $(this).data('filter').substring(1);
        //if the request matches
        if(cur_filter === selected_filter) {
            $(this).addClass('active');
        }
    });
});

This example makes some assumptions that may or may not work out. If all you want is to display which link is 'active', this should be OK, but I'm not certain whether this would affect any functionality of the component.

Hope this helps or at least gives you some ideas.