A Better Enhanced SharePoint 2010 Floating Ribbon

100

Category : SharePoint 2010, SharePoint Ribbon, featured

SharePoint 2010 has issues with its scrolling because of the way it implemented the fixed ribbon. Before we look into these issues (and a workaround) let’s first try to understand what SharePoint is doing. Basically, in order to keep the ribbon fixed at the top of the page, SharePoint put’s the scroll bar on the div tag directly below the ribbon (i.e.: s4-workspace) and removes the “normal” scrollbar for webpages (i.e.: the one that is on the body tag). In order to put the scroll bar on the s4-workspace, they set the overflow property of that div tag. But, in order for an overflow property to work, the height and width must be set appropriately. So, SharePoint also runs javascript on the page load to set the height and width appropriately on the s4-workspace div tag.

The issues noted in this blog are particularly bad on Internet facing sites with SharePoint 2010. They are not that big of deal with Intranet sites. So, I’ve found myself using the techniques in this blog on Internet facing sites and not Intranets. These techniques will work for Intranets, but I don’t like to mess too much with a COTS product when I can help it. I can only hope Microsoft fixes this big issue one day.

SP Ribbon Positioning Issues

  1. IPad and mobile browser use: The reason IPads don’t scroll in SharePoint 2010 is because of how they interact with overflow div tags. Scrolling will work on the IPad if you use the “two-finger” technique. But, nobody will know this is a div instead of a main scroll because SharePoint makes this scroll look like the main scroll. Thus, to the normal user, it just looks like scrolling doesn’t work on your webpage.
  2. Anchor tags: Anchor tagging to sections of the page didn’t work. If you have one page www.mywebsite.com?#bottom that links to another page and the section it is linking too is below the scroll area, you get stuck there. It looks really unprofessional when this happens.
  3. Javascript reliance: A core function of a website should not be reliant on javascript (i.e.: the scrollbars).This can produce multiple issues:
    1. Broken javascript: If any other javascript breaks on the page then the entire site won’t scroll anymore. That is one main reason you don’t make a core function of a page rely on javascript. It is hard to control the other javascript on the page and you can get yourself into bad situations over time with these types of techniques.
    2. Slow loading javascript: You have to wait until all the javascript loads on the page before you can begin scrolling. This is really annoying sometimes.

Microsoft has addressed how to disable this ribbon behavior: http://blogs.msdn.com/b/sharepoint/archive/2010/04/06/customizing-ribbon-positioning-in-sharepoint-2010-master-pages.aspx

Microsoft is basically saying, you can turn this on or turn this off. So, for public facing sites, you will probably want to turn this off. However, this means you content editors won’t get the ribbon pinned to the top of the page. This will make editing content in SharePoint very, very hard.

In my opinion, the fixed ribbon positioning system in SharePoint is a really good idea. But, the “unconventional” implementation causes too many issues with scrolling. I think Microsoft could have implemented this better. Specifically, Microsoft could use the “conventional” fixed position style in css instead of this “unconventional” technique of using overflow div tags. Let me be clear: I don’t think overflow div tags are unconventional. I just think it is unconventional to use that as the main scrollbar on a page.

Solution

Turn off the ribbon positioning system that SharePoint provides and build your own one with fixed position css styles. The steps are actually pretty simple:

Steps

  1. Remove the “scroll=no” attribute from the Body tag
    Note: At this point most people would tell you to remove the s4-workspace tag from your html. In fact, that is what the Microsoft blog mentioned earlier. However, that causes side affects. The gantt chart of task views will stop working, IE7 popups will stop working and anything else that relied on the s4-workspace to be there will stop working. Thus, I do not recommend removing the s4-workspace tag from the html of SharePoint. Instead follow these steps:
  2. Add the following javascript in a script block or an attached javascript file:
    
    //set top padding of the workspace to the height of the ribbon
    function setTopPadding() {
       var wrkElem = document.getElementById('s4-workspace');
       var ribHeight = document.getElementById('s4-ribbonrow').offsetHeight;
       if (window.location.search.match("[?&]IsDlg=1")) {
          //margin works better for dialogs b/c of scrollbars
          wrkElem.style.marginTop = ribHeight + 'px';
          wrkElem.style.paddingTop = '0px';
       }
       else {
         //padding works better for the main window
         wrkElem.style.paddingTop = ribHeight + 'px';
       }
    }
    
    // bind top padding reset to ribbon resize event so that the page always lays out correctly.
    ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(setTopPadding); }, "init.js");
    

    The above script sets a top padding for our workspace element equal to the ribbon height. This is needed because our new ribbon will be css fixed and that is more of a floating technique. Thus, padding is needed so it doesn’t hang over our workspace.

  3. Add the following css:
    
    body, body.v4.master {overflow:visible !important; height: inherit; width: inherit; }
    
    body #s4-workspace {overflow:visible !important; padding-top:44px;}
    
    /*This sets up our Ribbon for a fixed position. */
    body #s4-ribbonrow{ position: fixed;top:0px;z-index:1000;width: 100%;}
    * html #s4-ribbonrow {position:absolute;} 
    
    /* Set the ribbon popups to be fixed position also */
    #s4-ribbonrow .ms-MenuUIPopupBody, #s4-ribbonrow .ms-popoutMenu, .ms-cui-menu[id ^= "Ribbon."], .ms-cui-tooltip {
    position: fixed !important;
    }
    * html #s4-ribbonrow .ms-MenuUIPopupBody, * html #s4-ribbonrow .ms-popoutMenu, * html .ms-cui-menu[id ^= "Ribbon."], * html .ms-cui-tooltip {
    position: absolute !important;
    }
    
    /*Make sure there are no scroll bars on our popup overlays*/
    .ms-dlgOverlay {width: 100% !important }
    

    Note: I used the star hack above for ie6 (ie6 doesn’t recognize fixed positions correctly and absolute must be used instead). I don’t recommend the star hack (it was for blog purposes only). Please use a seperate ie6 file for ie6 specific css.

That’s it! Now you have a fixed css taking care of keeping the Ribbon on top. Why is this better you ask? The SharePoint’s solution uses javascript to create the scroll area. This means javascript is responsible for whether the site functions or not. My solution uses a fixed css property and only uses javascript to fix the height of the ribbon. Even if javascript is turned off, my solution will work. In addition, my page will work for the public view on all browser types (including IPads).

I started off writing this blog using techniques I thought of. However, I ran across two issues that were problematic. One of the issues had to deal with popus/overlays and other issue dealt with the padding at the top after the ribbon was “fixed”. So, like any good developer, I turned to Google. Thus, I have to give credit to 2 blogs that solve the same issues. In fact, both of these blogs seemed to have taken the same approach I did to this problem. Thus, I used techniques from each blog to come to a solution I feel is the best of all worlds.

The first blog that helped in this solution was: http://www.webpoint0.com/blog/fixed-width-layouts-scrollbar-ribbon-sharepoint-2010/. This blog showed me how to set the top padding of the ribbon in the most elegant way. However, the fix for the popups was not the best on this blog.

The second blog that helped in this solution was: http://kyleschaeffer.com/sharepoint/sharepoint-2010-scrolling/. This blog showed me how to deal with the popups and the popup overlays. However, the fix for the top padding of the ribbon was not as elegant as the first blog.

Once again, thank you so much to the blogs above. Their techniques along with the techniques I had already figured out created a great solution to this common problem.

Issues

Of course, with any solution that changes the core way a system works, there is bound to be issues. We’ve worked through the most common issues in the approach above, but I am confident we haven’t figured out all the issues. So, as issues come up I will post them here so people understand the trade-offs (and maybe come up with solutions for me).

Issue #1: Calendar hovers and add new

When you hover over a day in the SharePoint calendar the “add new” link comes up. This isn’t working “exactly” right in our solution. The reason is, if you scroll down on the page and then hover over a calendar item, the “add new” link shows up in the wrong calendar day. It works perfectly fine if you don’t have to scroll down (the issue only happens when you scroll). I debugged through the javascript and I found the problem. The core.js file of SharePoint has a function called MenuHtc_GetElementPosition. This function recursively loops through the elements of the html and gets the elements position with it’s scroll position to get the x and y axis of the element. However, it never takes into account the documents scroll position. This kind of makes sense because Microsoft doesn’t use the documents scroll position because it overflows the s4-workspace to do scrolls normally. However, we overrode that behavior and went back to the normal scrolling behavior of browsers. I hoped Microsoft would have realized that people would want to do this, but this is one of those functions where the SharePoint code is a little short sighted.

Experimental Solution: This solution overrides the MenuHtc_GetElementPosition function by creating a customcore.js file that gets called after the core.js file. I left the method exactly the same except for one small change. I subtracted the document.documentElement.scrollLeft from the x axis and document.documentElement.scrollTop from the y axis. This should account for our scrolling now.

Note: Microsoft should consider putting this change into their function in the core.js in the next service pack. It wouldn’t affect their “normal” technique for ribbon scrolling and it would help people that are building custom internet sites on SharePoint. I can’t think of a reason they wouldn’t add this into the product. So, if anyone from the Microsoft SharePoint product team reads this, please consider adding this in the next service pack.

  1. Create a javascript file called customcore.js and put the following javascript in it:
    
    function MenuHtc_GetElementPosition(element, relativeToElement)
    {
    	var result=new Object();
    	result.x=0;
    	result.y=0;
    	result.width=0;
    	result.height=0;
    	if (element.offsetParent) {
    		var parent=element;
    		while (parent !=null &&
    			parent !=relativeToElement)
    		{
    			result.x+=parent.offsetLeft;
    			result.y+=parent.offsetTop;
    			AdjustScrollPosition(parent, relativeToElement, result);
    			var parentTagName=parent.tagName.toLowerCase();
    			if (parentTagName !="body" &&
    				parentTagName !="html" &&
    				parent.clientTop !=null &&
    				parent.clientLeft !=null &&
    				parent !=element) {
    				result.x+=parent.clientLeft;
    				result.y+=parent.clientTop;
    			}
    			parent=parent.offsetParent;
    		}
    
            //This is the custom code added to account for scrolling
            //when the code has been customized to not use
            //overflows in the s4-workspace
    		result.x -= document.documentElement.scrollLeft;
    		result.y -= document.documentElement.scrollTop;
    	}
    	else if (element.offsetLeft || element.offsetTop) {
    		result.x=element.offsetLeft;
    		result.y=element.offsetTop;
    	}
    	else {
    		if (element.x) {
    			result.x=element.x;
    		}
    		if (element.y) {
    			result.y=element.y;
    		}
    	}
    	if (element.offsetWidth && element.offsetHeight) {
    		result.width=element.offsetWidth;
    		result.height=element.offsetHeight;
    	}
    	else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
    		result.width=element.style.pixelWidth;
    		result.height=element.style.pixelHeight;
    	}
    	return result;
    }
    

  2. Save the above solution in 14 hive layouts folder under your language – ex: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\1033

    In addition, save the same file as customcore.debug.js and put it in the same place (Note: if you want a minimum file you can minimize the customcore.js and leave this one around for the debug file)

  3. Replace the reference to core.js
    
    <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" />
    


    with this:

    
    <SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
    <SharePoint:ScriptLink language="javascript" name="customcore.js" Defer="true" runat="server"/>
    

Comments (100)

[...] : SharePoint 2010, SharePoint Ribbon Update: I have a different approach to this problem now at: http://www.greggalipeau.com/2011/01/28/a-better-enhanced-sharepoint-2010-floating-ribbon/. I suggest using my new approach rather than this blog as it is much more [...]

An interesting discussion is worth comment. I believe that you
should write more about this subject matter,
it might not be a taboo subject but generally folks don’t talk about these
topics. To the next! All the best!!

Have a look at my homepage :: arbor tree service Birmingham AL

Hello, I believe your blog could possibly be
having browser compatibility issues. When I
look at your site in Safari, it looks fine however,
if opening in I.E., it has some overlapping issues.
I just wanted to provide you with a quick heads up!
Other than that, wonderful blog!

Here is my web site; performance bond company

This website definitely has all the info I wanted about this subject and didn’t know who to ask.

My homepage; Atlanta Roofing Companies

You actually make it seem so easy with your presentation but I find this matter to be actually
something that I think I would never understand.
It seems too complicated and very broad for me. I am looking forward for your next post, I’ll try
to get the hang of it!

Here is my web blog: Shipping Packages To Canada Langley

When I initially commented I clicked the “Notify me when new comments are added” checkbox and now
each time a comment is added I get four e-mails with the same
comment. Is there any way you can remove people from that service?
Thanks!

My webpage :: Shipping Rates To Canada Abbotsford

If some one needs expert view concerning blogging after that i suggest
him/her to pay a quick visit this webpage, Keep up the fastidious job.

Here is my homepage :: Lawyer Insurance In Peoria Il

magnificent points altogether, you simply received a new reader.
What may you suggest in regards to your put up that you simply made some days ago?
Any positive?

Have a look at my website :: Lawyer Database In Peoria Il

It’s going to be end of mine day, but before ending
I am reading this impressive post to improve my knowledge.

Have a look at my website – Attorneys At Law Peoria Il

After looking into a handful of the blog posts on your blog, I honestly
appreciate your technique of blogging. I saved it to my bookmark
webpage list and will be checking back soon. Please check
out my web site as well and let me know what you think.

Sweet blog! I found it while browsing on Yahoo News. Do you have any
suggestions on how to get listed in Yahoo News? I’ve been trying for a
while but I never seem to get there! Thank you

You actually make it seem so easy with your presentation but I find
this matter to be really something which I think
I would never understand. It seems too complex and
extremely broad for me. I’m looking forward for your next
post, I’ll try to get the hang of it!

My website :: Lawyer Blogs Peoria Il

What i do not understood is in reality how you are
no longer actually a lot more neatly-liked than you may be right
now. You’re very intelligent. You recognize thus considerably with regards to this subject, made me in my opinion imagine it from
numerous varied angles. Its like men and women are not involved except it is one thing to accomplish with Girl
gaga! Your individual stuffs outstanding.
Always deal with it up!

Wow, that’s what I was exploring for, what a data!
existing here at this web site, thanks admin of this web page.

My site … Animal Control Removal Surrey

Fastidious replies in return of this query with genuine arguments and explaining all about that.

my website :: Cheapest Window Blinds Vancouver

I was wondering if you ever thought of changing the page layout of your
site? Its very well written; I love what youve got to say.
But maybe you could a little more in the way of content
so people could connect with it better. Youve got an awful lot of text for only having 1 or 2 pictures.
Maybe you could space it out better?

My webpage; Exterminators Vancouver

Excellent blog here! Also your website loads up fast!
What web host are you using? Can I get your affiliate link to your host?
I wish my website loaded up as fast as yours lol

my page … Pest Control Rodent Courtenay

Very nice article, totally what I was looking for.

Here is my page :: Industrial Pest Control Chilliwack

After I initially commented I seem to have clicked
the -Notify me when new comments are added- checkbox and from now
on whenever a comment is added I get 4 emails with the exact same comment.
Perhaps there is an easy method you can remove me from that service?
Thank you!

Hey! I just wanted to ask if you ever have any trouble with hackers?
My last blog (wordpress) was hacked and I ended up losing a few months of
hard work due to no backup. Do you have any solutions to protect against hackers?

my blog … Headache Chiropractors Mesa

Aw, this was an extremely nice post. Finding the time and actual effort to produce a great article… but what can I say…
I procrastinate a whole lot and never seem to get nearly anything done.

Check out my web blog … bond insurance

I’m not sure why but this website is loading extremely slow for me.
Is anyone else having this issue or is it a problem on my end?
I’ll check back later and see if the problem
still exists.

My site … click for more

Hi just wanted to give you a brief heads up
and let you know a few of the images aren’t loading correctly.
I’m not sure why but I think its a linking issue. I’ve tried it
in two different internet browsers and both show the same results.

I read a lot of interesting articles here. Probably you spend a lot of
time writing, i know how to save you a lot of work, there is
an online tool that creates high quality, google friendly posts in seconds, just search in google – laranitas free content source

Excellent, what a webpage it is! This webpage gives valuable data to us, keep it up.

Here is my website … Zamurai PBN Blueprint pdf

Hi there fantastic blog! Does running a blog like this require a massive amount work?
I have very little understanding of coding but I had been hoping to start my own blog in the near future.
Anyhow, should you have any recommendations or techniques for
new blog owners please share. I know this is off subject but I simply
wanted to ask. Thank you!

This applied to get difficult editing of the machine. Solution is one of the finest allaround freeware applications on the market.
The slideshow also displays the pc with all three cells hidden.

Finally, the size of the shutter could influence the appearance of the shutter.
Windows RT will simply enable people to
obtain and use programs for your Microsoft app store. It was really
frustrating for Vista customers.

I read a lot of interesting posts here. Probably you spend a lot of time writing,
i know how to save you a lot of work, there is an online tool that creates high quality, google friendly
posts in minutes, just type in google – laranitas free
content source

Additionally, it concerns more than a number of businesses
that deliver television programming to much. If you could be a tightwad
for just two years lets observe how much you might save.

As the download finishes click on on the Talking Tom’s “exe” file that will start the set up procedure.
An additional drawback is the restricted quantity of
area that you get for totally free.

These are the issues you require to know when you do an Iphone 3GS jailbreak.

You can also include date and memory status in your standing bar.
So the question remained as how to jailbreak a ps3?

Thus purchase and also jailbreak iphone 3gs Five.two.A solitary and any idevice these days.

It is made with the distinctive IPS technology, so it supports multi-touching.
Quickly, you will not be in a position to put it down!

Hello, after reading this awesome piece of writing i am too happy to share my knowledge here with mates.

My web site – tooth extraction Elk Grove CA

Currently it appears like Movable Type is the preferred blogging
platform out there right now. (from what I’ve read) Is
that what you’re using on your blog?

It should have been like contestant – since clearly Hyper-Attack was
one of the superhero.
Upon installation, then you’re able to start watch international channels and the software.

If you wish for tto grow your experience just keep visiting this web page and be updted with the
most recent news posted here.

Fantastic site. Pllenty of useful information here. I’m sending it too a few friends
ans additionally sharing in delicious. And of
course, thank you on your sweat!

Quality content is the secret to be a focus for the viewers to pay a quick visit the
web site, that’s what this site is providing.

Take a look at my weblog … how to create a video app

I think the admin of this site is really working hard for his
website, because here every data is quality based data.

my weblog for sale game review

I read this paragraph completely about the difference of hottest
and preceding technologies, it’s awesome article.

my web blog how to lose 50 pounds in 5 months

If you wish for to obtain a great deal from this article
then you have to apply these techniques to your won webpage.

Never neglect to improve on your rice cookers
knowledge!

I think the admin of this website is genuinely working hard in favor of his web site, for
the reason that here every data is quality based information.

Just desire to say your article is as amazing. The clarity
in your post is simply spectacular and i can assume you’re an expert on this subject.
Well with your permission let me to grab your RSS feed to keep up
to date with forthcoming post. Thanks a million and
please keep up the gratifying work.

This excellent website definitely has all the information and facts I wanted about this
subject and didn’t know who to ask.

Fantastic web site. A lot of useful information here.
I’m sending it to some pals ans also sharing in delicious.
And obviously, thank you to your sweat!

Take a look at my webpage; socialite pro review

Thanks for the auspicious writeup. It in truth was once a leisure account it.

Look complex to more brought agreeable from you!
By the way, how can we communicate?

Visit my web site :: side effects stevia

Post a comment