X
Closing this message and/or accessing our website tells us you are happy to receive all cookies on the ClearPeople website.
However, if you would like to, you can change your cookies settings at any time.
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.

 

hoveranimation
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
Front End Solutions Architect
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.

Comments


comments powered by Disqus

Related Articles

Sign up to our Newsletter

Every now and then, we'd like to send you information that delivers, develops and promotes our products and services that are relevant to you. Submitting your details tells us that you're OK with this and you also agree to our Privacy & Cookies policy. You can, of course, opt out of these communications at any time.