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)
Notice how the Quick Launch menu scrolls with the content
Follow the steps outlined below to implement the changes on your site collection:
- Download and install Muhimbi’s SharePoint Infuser on one of your Web Front End Servers.
- Ensure you have Designer privileges, more specifically the Add and Customize Pages right.
- From the Site Actions / Site Settings screen, select Infuse custom content in the Look and Feel column.
- 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.
- Click the Save button and navigate to any page that is long enough to have a scroll bar and scroll the window down.
.
4 Comments:
Hi,
Is there any way of stopping the page from continually scrolling down once you apply this code?
By
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
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
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
Muhimbi, At
18 September, 2010 14:29
Post a Comment
Subscribe to Post Comments [Atom]