Industry Insights from Our Experts

Monthly Archives: October 2012

jQuery Function to check if an HTML Element is Visible

Comments Off
Filed under JavaScript

An interesting issue that you might have run into when writing jQuery code for your page; is a particular element currently visible in the users browser?  I found this little bit of code today in my travels on Stack Overflow (original post here).  The function will return true if an element is ENTIRELY visible by the current browser, and returns false otherwise.  Useful for those times when you may want to be loading content or setting focus on elements that are/aren’t currently in the users view.  Here’s the code for the function:

function IsElementEntirelyVisible(element) {
    var off = $(element).offset();
    var t = off.top;
    var l = off.left;
    var h = $(element).height();
    var w = $(element).width();
    var docH = $(window).height();
    var docW = $(window).width();

    return (t >= 0 && l >= 0 && t + h <= docH && l + w <= docW);

Windows Azure Event – Friday November 9th 2012

Comments Off
Filed under Cloud Practice

On Friday morning, November 9th  Quercus Solutions is hosting a free Microsoft Windows Azure event. The event will include presentations, including technical demontrations, of Microsoft’s cloud-computing services called Windows Azure.

This event is an excellent opportunity to learn about Windows Azure cloud-computing services. Representatives from the both the Quercus Cloud Practice team and Microsoft will be available to answer all your cloud-computing questions.

We have some seats available and if you are interested in attending, please let us know immediately because the seats are filling up quickly.

If interested, you can call Paul Patterson at 780 784-1010, or email him at Paul.Patterson@QuercusSolutions.com for more information.

Fixing “vertical scrollbar disabled” issue in SharePoint 2010

Comments Off
Filed under JavaScript, SharePoint

One UI element of SharePoint 2010 that can and does cause a lot of problems with branded sites is the vertical scrollbar. Due to the need to keep the ribbon at the top of your browser window, SharePoint has to disable standard browser scrolling and implement its own version using CSS and JavaScript.

For various reasons the vertical scrollbar can become disabled for some or all browsers and prevent users from scrolling to see content further down.

To come up with a solution to this problem, it is important to have an understanding of how SharePoint handles the ribbon placement and enables scrolling on the page. This blog post provides an excellent walk through of this.

Search this issue and you will find a lot of suggested solutions, but most of these come with some drawbacks. In particular be wary of solutions that mention modifying CSS for the s4-workspace div. That div contains the main content of your SharePoint page and this is the div that SharePoint itself applies scrolling to.  Be very careful making CSS changes around this div as it can come back to haunt you on dialogs, notifications or menus elsewhere on your site.

SharePoint uses JavaScript to apply scrolling to its pages. In particular the FixRibbonAndWorkspaceDimensions() method of init.js gets called during a page refresh and it is in here that scrolling is setup.

Unfortunately for me and many others, something else can interfere after this method call that seems to undo it’s good work and breaks the scrolling.

In order to fix it I copied some JavaScript from the FixRibbonAndWorkspaceDimensions method. I took the piece of code that checks the window height, the ribbon height and calculates what the main content height should be. Applying this information again at the bottom of your master page fixes the scrolling problem.

   1:  <script type="text/javascript"> 
   2:         var elmRibbon=GetCachedElement("s4-ribbonrow"); 
   3:         var elmWorkspace=GetCachedElement("s4-workspace"); 
   4:         var    vph=GetViewportHeight(); 
   5:             var newWorkspaceHeight=vph - elmRibbon.offsetHeight - AbsTop(elmRibbon);
   7:         if(newWorkspaceHeight < 0) 
   8:             newWorkspaceHeight=0; 
   9:         elmWorkspace.style.height=newWorkspaceHeight+"px"; 
  10:  </script>

I added this just before the closing Body tag </body> of my masterpage and it has fixed the issue in IE, Chrome and Firefox.


The function calls GetCachedElement, AbsTop and GetViewportHeight are all found in init.js.

This post does assume that you are using a customised version of v4.master.

Copyright 2018 by Quercus Solutions