How to Float the SharePoint Quick Launch menu with the location of the scroll bar

Posted at: 18:54 on 04 August 2009 by Muhimbi

Another day and another cool example of how the SharePoint user interface can be modified using our free SharePoint Infuser. Today we are using some JavaScript magic to make this carpet … errrr … menu float in the same position while scrolling through a page.

To ensure this new functionality is added to every page in the Site Collection we use Infuser rather than the Content Editor Web Part. The JavaScript code is relatively simple, all it does is hook the scroll event, check if the menu is about to scroll off-screen and then re adjust the ‘top’ of the menu with the position of the scroll bar. Some additional code inserts a place holder element in the space that used to be occupied by the menu to ensure the width of this area doesn’t collapse.

There are more elegant ways to achieve floating effects, but the advantage of this code is that it works in IE6,7,8, FireFox, and Google Chrome. (It really works brilliantly in Chrome, as smooth as it gets)
 

FloatingMenu Notice how the Quick Launch menu scrolls with the content


Follow the steps outlined below to implement the changes on your site collection:

  1. Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
     
  2. Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
     
  3. From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
     
  4. Copy the script at the end of this posting and paste it into Infuser’s code window. If you are using IE then you may want to paste it in WordPad first , otherwise all line breaks are stripped out.
     
  5. Click the Save button and navigate to any page that is long enough to have a scroll bar and scroll the window down.
     

<!-- Load the JQuery Libraries that ship with Infuser -->
<script type="text/javascript" src="/_layouts/Muhimbi.Infuser/JQuery/jquery-1.3.2.min.js"></script>
 
<script type="text/javascript">
    /**********************************************************************
      Floating SharePoint Menu, compatible with IE6,7,8 Chrome, Firefox
      Created by www.muhimbi.com, This sample code is provided on an “as is”
      basis and without warranty of any kind.
    ***********************************************************************/
 
    var scrollMenuElement = null;
    var menuElementTop = 0;
    var menuElementWidth = 0;
 
    function scrollMenu()
    {
        // ** Initialise during the first scroll event
        if(scrollMenuElement == null)
        {
            // ** Get the container that holds the navigation menu(s)
            scrollMenuElement = $("#LeftNavigationAreaCell > table");
            menuElementTop = scrollMenuElement.position().top;           
 
            // ** Request and explicitly specify width for Firefox & Chrome
            menuElementWidth = scrollMenuElement.width();
            scrollMenuElement.css("width", menuElementWidth);
 
            // ** put content in the same size of the menu to prevent collapse
            scrollMenuElement.before("<div style='width:" + menuElementWidth + "px'></div>");
 
            // ** Switch to absolute positioning to allow floating         
            scrollMenuElement.css("position", "absolute");
        }
 
        var scrollTop = $(document).scrollTop();
        // ** Has the element scrolled out of the window?
        if(scrollTop > menuElementTop)
        {
            scrollMenuElement.css("top", scrollTop +"px");
        }
        else
        {
            // ** Sometimes we scroll in large chunks so make sure it lines up
            scrollMenuElement.css("top", menuElementTop +"px");
        }
    }
 
    jQuery.event.add(window, "scroll", scrollMenu);
</script>
 

.

Labels: , ,

4 Comments:

  • Hi,

    Is there any way of stopping the page from continually scrolling down once you apply this code?

    By Anonymous Anonymous, At 24 August, 2009 15:20  

  • I am sure there is, but as this is largely a proof of concept I didn't look into resolving that particular issue.

    By Blogger Muhimbi, At 24 August, 2009 15:23  

  • Is there any way to modify this code so if the menu has been configured for flyouts, the flyouts will move with the menu? Currently, the flyouts appear correct until you scroll beyond what was the bottom of the window.

    By Blogger Kirk, At 17 September, 2010 19:34  

  • Anything is possible, but this is just a showcase of what can be done with the SharePoint Infuser. You will need to fire up your own JQuery skills to suit it to your exact needs.

    By Blogger Muhimbi, At 18 September, 2010 14:29  

Post a Comment

Subscribe to Post Comments [Atom]

Subscribe to News feed

Headlines
Archives