atlas by clearpeople

Delaying the SharePoint Hover Panel

  

Ian Jackson, Front-end Solution Architect, explains how to delay the SharePoint Hover Panel from loading in browser

 

The SharePoint search results webpart displays a hover panel when the user hovers on a result item.

This hover event action, depending on the result type, can display text, images, or document previews which can take it's toll on the browser while loading the hover panel content.

 

Hover animation
httprequest

To resolve this we are going to add some code which will delay the hovel panel from loading. This will ensure the panel will not appear if the user moves the mouse over the item unintentionally.

The default code for the hovel panel can be found in SearchUI.js. There are two functions which are of particular interest.

 

Show() and Hide()

 

These are the functions which are called when the user hovers over and out of the result item.

We are going to override these functions.

 

SP.SOD.executeOrDelayUntilScriptLoaded(function() { var timeout; /* Override hide function */ var old_Hide = HP.Hide; HP.Hide = function(){ if (timeout) clearTimeout(timeout); //Cancel the timeout delay old_Hide.call(); //Call original function } /* Override show function */ var old_Show = HP.Show; HP.Show = function(d, a, b, c) { var self = this; timeout = setTimeout(function(){ old_Show.call(self, d, a, b, c); //Call original function }, 1000); //Timeout delay for 1 second } }, 'SearchUI.js');

In the code snippet above we are using a timeout to delay the original function from executing. On mouse over, the timeout is created and on mouse off, the timeout is cleared.

Author bio

Ian Jackson

Ian Jackson

I help bring our designs to life on the front end while collaborating closely with the UX team. Always ready to tackle any project head on no matter how daunting, I like to keep on top of all things new and exciting in the world of web development.

View all articles by this author View all articles by this author

Get our latest posts in your inbox