0

Hi I've made an 'Advanced Search' using Views + Display Suite in Drupal 7.

https://www.oldertenants.org.au/research-library-advanced-search

There's too many search filters so the default behavior of the submit button scrolling the user back to the top of the #content div confuses the user to think there are no search results.

How can I scroll the user to the results div instead (i'd also have to work out how to include a #results id in the results div) - or perhaps just not link to any div, simply refresh the results?

It would be ideal to achieve this using ajax but if its easy not a problem to be refreshing the page on search.

Thanks in advance for any suggestions!

0

You can do this in your theme when the page loads and has search results

Create search_results.js

(function ($) {

  'use strict';

  $(document).ready(function() {
    if( $('.views-row-1').length ){
      $("html, body").animate({ scrollTop: $(".views-row-1").offset().top }, "slow");        
    }
  });

}(jQuery));

which on page load sees if the first result is not empty and scrolls to it

Load file on specific view page

In your template.php

function THEMENAME_preprocess_views_view(&$vars) {
  $view = &$vars['view'];
  // Make sure it's the correct view
  if ($view->name == 'view_resources_advanced_search') {
    drupal_add_js(drupal_get_path('theme', 'THEMENAME') . 'js/search_results.js');
  }
}

Of course make sure you change THEMENANE and make sure the view machine name is correct in the template.php file

| improve this answer | |
  • 1
    Thanks so much for your suggestion - This js snippet makes the page scroll to results when page is first loaded (before form is submitted). If using Ajax, after submitting form scrolls to top of view. If not using Ajax it scrolls to results. Unfortunately this is not the desired behaviour - should scroll to results only after applying the advanced search filters. – Ruben Jun 5 '18 at 5:37
  • Found the issue - the js was scrolling to the .views-row-1 of another view contained in Featured resources. Therefore I've edited the conditional to if( !$('.view-empty').length ){ - its a bit clunky but does the job – Ruben Jun 5 '18 at 6:09
  • (function ($) { 'use strict'; $(document).ready(function() { if( !$('.view-empty').length ){ $("html, body").animate({ scrollTop: $(".views-row-1").offset().top }, "slow"); } }); }(jQuery)); – Ruben Jun 5 '18 at 6:11
0

A different approach to solving this problem is to position the Exposed filters in the sidebar, instead of on the top of the results. You can do that using the option Exposed form in block.

That way Views results will always come to the top of the page, while filters will be displayed next to them (on wide screens at least).

This is assuming that restructuring your Advanced search page is an option. If "Featured Resources" isn't adding a lot of value, or isn't necessary to bait visitors away from the page, you can push those blocks down below the Exposed filters, or remove completely.

You can also use modules that add Autosubmit option for Exposed filters so results change faster, as soon as you change options, without the need to click on the "Submit" button. Better Exposed Filters is such a module. You can also group exposed filters into a collapsible fieldset that is closed on first load, getting the options that aren't often needed out of the way while still having them available if needed.

| improve this answer | |
  • I wish to leave the exposed form in the content section of the page. As the advanced search function constitutes the main content of the advanced search page, it doesn't belong in the sidebar. However, the idea to put the exposed form in a block could be a good one. I could then add a block above the content. Where can I find the option 'Exposed Form in Block'? I can't find this on any of the Views admin screens. – Ruben Jun 5 '18 at 5:46
  • I mentioned the sidebar because the vertical space above the fold is so precious, so that way Views results would be immediately visible if you have two columns layout, one column for results, one column for filters. You can put that Block in any region of course, but putting it above the content is the same layout that you get in Views (in most themes anyway), exposed filters are displayed above views results, so you wouldn't gain much from putting it there. – prkos Jun 5 '18 at 14:40
  • You can see that setting only on certain views displays (Page for example). It's under Advanced Views settings, the third column, the column may be collapsed so you don't see it at first. Screenshots: Exposed form in block, Settings. – prkos Jun 5 '18 at 14:40
  • I don't have that option available. It could have been added by another module, or disabled elsewhere :/ – Ruben Jun 7 '18 at 3:42
  • It comes with Views, it's not an add-on. What Views Display did you check? Try a Page Display. You do see the Advanced settings column uncollapsed? – prkos Jun 7 '18 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.