SharePoint 2010 Custom Application Page Affix Ribbon To Top Using CSS

Migrating existing applications into SharePoint can be difficult depending on the JavaScript functionality of the old code. Using the default SharePoint 2010 custom application page, the s4-workspace is a div that is re-sized and scrollable to allow the SharePoint ribbon to display. I don't know why Microsoft felt it necessary to do far more work than necessary to fix a div to the top of the window.

Below is the code I used to fix the scroll bars on the page. This makes the ribbon not fixed and will scroll out of view. This could be enough if you don't use the ribbon in your pages.

body {
    overflow: auto ! important;
}
body.v4master { 
    height:inherit; 
    width:inherit; 
    overflow:visible!important;
}

body #s4-workspace {
   overflow-y:auto !important;
   overflow-x:auto !important;
   height:auto !important;
}

If the ribbon absolutely must be at the top of the page. You can add this bit of code after the above code to properly affix the div to the top of the visible window. My tests showed that this worked for me in IE8, IE 9, and Firefox.

body #s4-ribbonrow {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 101;
}
body #s4-workspace {
    padding-top: 44px;
}

That should be it. Not too hard.

SharePoint 2010 Custom Application Page jQuery Lightbox Plug-in Fix

I used a fantastic jQuery lightbox plug-in which can be found at http://leandrovieira.com/projects/jquery/lightbox/. There was almost no setup involved. That is, until it meets SharePoint 2010 custom application pages. Since the page doesn't use the body scroll bars and creates faux-scroll bars in the s4-workspace div, it is possible that the image is too large for the visible area and there are no functional scroll bars to view the rest of the picture. I should suffix my last statement with the fact that this probably would have happened with any lightbox plug-in; it just happened that this is the plug-in I used.

I was tasked with finding a fix and below is the result. I only had to add code to the beginning of two functions: _set_interface and _finish. The short of it is that I cache the important styles that I am going to change, then I modify the styles to enable the page scroll bars. When the lightbox is closed, the cached styles are restored.

var htmlbody = $("BODY"),
    bodyMaster = $("body.v4master"),
    bodyWorkspace = $("body #s4-workspace"),
    savedCSS = {
        BodyOverflow: htmlbody.css("overflow"),

        BodyMasterHeight: bodyMaster.css("height"),
        BodyMasterWidth: bodyMaster.css("width"),
        BodyMasterOverflow: bodyMaster.css("overflow"),

        BodyWorkspaceOverflowY: bodyWorkspace.css("overflow-y"),
        BodyWorkspaceOverflowX: bodyWorkspace.css("overflow-x"),
        BodyWorkspaceHeight: bodyWorkspace.css("height")
    };
    settings.SavedCSS = savedCSS;
            
htmlbody.css({ "overflow": "auto" });
bodyMaster.css({ "height": "inherit", "width": "inherit", "overflow": "visible" });
bodyWorkspace.css({ "overflow-y": "auto", "overflow-x": "auto", "height": "auto" });

var htmlbody = $("BODY"),
    bodyMaster = $("body.v4master"),
    bodyWorkspace = $("body #s4-workspace"),
    savedCSS = settings.SavedCSS;

htmlbody.css({ "overflow": savedCSS.BodyOverflow });
bodyMaster.css({ "height": savedCSS.BodyMasterHeight, "width": savedCSS.BodyMasterWidth, "overflow": savedCSS.BodyMasterOverflow });
bodyWorkspace.css({ "overflow-y": savedCSS.BodyWorkspaceOverflowY, "overflow-x": savedCSS.BodyWorkspaceOverflowX, "height": savedCSS.BodyWorkspaceHeight });

SharePoint 2010 Custom Application Page Scroll To Top On Postback

SharePoint 2010 is full of wonderful features that make developers' lives just a bit harder. I ran across an issue where validation was returning a message back to the screen, the page would display the page scrolled to the top and then immediately scroll down to the position to the location of the page prior to posting back. I have had previous run-ins with the s4-workspace, but nothing JavaScript related. I tried several avenues for solutions:

1. Setting the page directive attribute "MaintainScrollPosition" to be false
2. Registering a start up script: $(window).scrollTop(0)
3. Registering a start up script: $("#s4-workspace").scrollTop(0)
4. Attempted to register the the functions via a client script block to add a "pageLoaded" event

The short of it was that none of these worked. I decided to dive in to the HTML source and discovered a "_maintainWorkspaceScrollPosition" hidden field. This looked amazingly like the MaintainScrollPosition functionality, I thought I might be on the right path. The "Workspace" term jumped out at me since the SharePoint custom application page's content is in the s4-workspace; I started to get the feeling that this was a SharePoint feature. After searching all the files for the hidden field, I discovered it was only referenced in the SharePoint JavaScript files. Searching the internet did not yield any solutions on ways to disable the feature. So I generated a function that I would execute to scroll the page to the top.

function scrollToTop() {
    $(window).scrollTop(0);
    $("#s4-workspace").scrollTop(0);
    $("#_maintainWorkspaceScrollPosition").val(0);
}

The function above probably does more than required, but I don't control the Master Page and need to make sure the page can tolerate changes to Master Page style changes.

The server side needs to register a script to execute on the post back. This is a simple line that can be thrown about anywhere.

ScriptManager.RegisterStartupScript(this, this.Page.GetType(), "scrollToTop", "scrollToTop();", true)