Search results - below the fold

eVenster

Hi,

I've got exponent 2.5.0 p1. I'm using a search box in the header. The main container, where the search results show, is below the fold. Is it possible to let the page scroll, after hitting submit, to the main container? I've been looking and experimenting within the tpl's but no succes...

dleffler

I'll assume you have a large banner/image on the default subtheme which causes the 'fold' (content?) to be low on the page. A couple of solutions might be to:

1. Add an anchor or element with an id above the content (<h1>Search Results</h1>) and some javascript onto the search.tpl (or search.bootstrap3.tpl) file to scroll to that element id. https://www.sitepoint.com/jquery-autoscroll-div-any-page-element/
2. Change your default theme template (the index.php file in the theme folder) to remove the banner/image after you create a new subtheme from it (banner.php?) and then assign the pages you want to have the banner to the new subtheme. The 'default' theme template is used for most generic (dynamically) built pages.

eVenster

That's in the same tpl? Does it matter where the jquery goes?

dleffler

If this is a bootstrap 3 or 4 theme, I'd edit the search.bootstrap3.tpl file (or copy it into the theme as /themes/mytheme/modules/search/views/search/search.tpl). Edit that file and change the H1 title to

<h1 id="search-top">{'Search Results'|gettext}</h1>

and then add this at the very bottom of that file (though I've not tested it)

{script unique="scroll-top" jquery=1}
{literal}
$(document).ready(function() {

$('html, body').animate({ scrollTop: $("search-top").offset().top },1000); }

{/literal}
{/script}

eVenster

Perfect, it works! Thank you :-)

eVenster

cheered too soon: the actual results are not showing (empty). I just get the h1, not the "Your search for + results"

dleffler

Sorry, you'll need to copy the searchlist.tpl file into the theme also (same folder as search.tpl)