Jump to Section
1. The Problem
We know that the FixRibbonAndWorkspaceDimensions function is called whenever an element or window is resized. That’s good to know because if we can add our code to the FixRibbonAndWorkspaceDimensions function, then SharePoint will call our code when a resize occurs. That sounds perfect! The problem is we don’t want to modify SharePoint’s JavaScript files in the hive. We want to keep the stock SharePoint files as close to their original release as possible. Why shouldn’t we modify these files? The SharePoint developers aren’t expecting our code in their files, so an update will undoubtedly replace old files with new ones. That would completely erase all our hard work! We can get around this by appending our own JavaScript functions onto the existing functions.2. The Solution
JavaScript has this nifty ability to reference functions by storing them in objects. When SharePoint sets up its events it is using a reference to the function FixRibbonAndWorkSpaceDimensions as an event handler. This means that SharePoint will execute whatever function reference is in the FixRibbonAndWorkSpaceDimension object when an event fires. So, we can make FixRibbonAndWorkSpaceDimensions reference our custom code instead, right? Yes, we can do that. But you need to consider scenarios where a crucial fix was applied in FixRibbonAndWorkSpaceDimensions. If we replaced the original function with our own, then the crucial fix will never be executed. A better idea is to run SharePoint’s code followed by our own. We can do this by writing a wrapper function that executes both functions one after another. Then we have FixRibbonAndWorkSpaceDimensions reference the wrapper function. The result of this is our wrapper function is called whenever SharePoint fires an event that uses the FixRibbonAndWorkSpaceDimensions object.
Figure 1 provides code that you can use to implement this solution. The first thing the code does is store a reference to the original FixRibbonAndWorkSpaceDimensions function, so that we can call it later in our wrapper function. The next thing we do is set the FixRibbonAndWorkSpaceDimensions object to reference our wrapper function. Our wrapper function first calls the original FixRibbonAndWorkSpaceDimensionsFunction and then calls our custom code. This may seem odd or confusing, but all that’s really happening is we are changing which object points to which function (code). I’ve provided a link at the end of this article with further explanation of how function pointers work to help clear up any confusion.
FixRibbonAndWorkSpaceDimensionsFunction = FixRibbonAndWorkSpaceDimensions;
FixRibbonAndWorkSpaceDimensions = Wrapper;
function Wrapper() {
FixRibbonAndWorkSpaceDimensionsFunction();
CustomCode();
}
function CustomCode() {
// write your own code to do whatever you want
console.log(‘Our custom code is running!’);
}
