locked
Search results document preview RRS feed

  • Question

  • I have a web page with a search results web part displaying all the documents from multiple libraries with refiners etc..  The search results uses the document preview panel on mouse hover. 

    What I would like is for there to be a short 1 second delay between the mouse hovering over the document and the preview panel being displayed. i.e. it's a deliberate act by the user to hover over the document and not display the preview panel just because the mouse passed over the document on the way to another link on the page?

    Wednesday, May 16, 2018 9:22 AM

Answers

  • Hi Carl

    Thanks for the info was very helpful in pointing me int he right direction.

    For anyone else trying to do the same thing the following worked for me.

    made the following change to the onmouseover/onmouseut events in the template file.

    <div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="WordItem" class="ms-srch-item" onmouseover="timer1=setTimeout(function(){ _#= ctx.currentItem_ShowHoverPanelCallback =#_ ;}, 1000);" onmouseout="clearTimeout(timer1); _#= ctx.currentItem_HideHoverPanelCallback =#_">

    Worked a treat.


    • Marked as answer by Chris J Monday, June 4, 2018 3:25 PM
    • Edited by Chris J Monday, June 4, 2018 3:26 PM
    Monday, June 4, 2018 3:25 PM

All replies

  • Hi,

    How did you achieve the preview function?

    Did you add custom code to the Search result page?

    If it's a OOB way to preview the document, there is no oob way to change it.

    You just need to use the custom code to achieve it.

    Besides, if this function is your custom solution, you can add a sleep method.

    Best Regards,

    Carl Zhou


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Thursday, May 17, 2018 10:09 AM
  • Hi Carl

    Thanks for getting back to me.

    I basically took a copy of the Item_Word.html template and changed a few of the fields.  I don't know any javascript etc. so not sure how I would add a sleep method to the page, is there a page somewhere that helps explain how to do that.

    Thanks

    Chris

    Friday, May 18, 2018 8:03 AM
  • Hi,

    You can achieve your requirement by changing the on mouse over event.

    You can refer to the following case to change it.

    https://social.technet.microsoft.com/Forums/office/en-US/993da671-e6e7-490b-a8ae-a117ba831d25/mouseover-event-in-sharepoint-2013?forum=sharepointcustomization

    Best Regards,

    Carl Zhou


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, May 25, 2018 2:38 AM
  • Hi Carl

    Thanks for the info was very helpful in pointing me int he right direction.

    For anyone else trying to do the same thing the following worked for me.

    made the following change to the onmouseover/onmouseut events in the template file.

    <div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="WordItem" class="ms-srch-item" onmouseover="timer1=setTimeout(function(){ _#= ctx.currentItem_ShowHoverPanelCallback =#_ ;}, 1000);" onmouseout="clearTimeout(timer1); _#= ctx.currentItem_HideHoverPanelCallback =#_">

    Worked a treat.


    • Marked as answer by Chris J Monday, June 4, 2018 3:25 PM
    • Edited by Chris J Monday, June 4, 2018 3:26 PM
    Monday, June 4, 2018 3:25 PM