Supporters of End User
Web

Fixed Navigation in SharePoint

 
Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories: 
Daniel WalkerThe Stump the Panel forum has some real gems buried within the hundreds of questions. I was looking at some of the responses a few days back and saw an interesting thread on fixed navigation. EvilGenius, aka Daniel Walker, started the discussion, answered his own question and then proceeded to document his solution. I sent a quick email to request the masterpage layout and he was kind enough to pass it along. Problem statement, as stated in the original question: "I want to create a master page where the top and left navigation areas stay on the screen and only the main content can scroll (unless the left navigation is bigger and then it should scroll too). Basically, it would be like the frames pages from a few years back. I want the page to be maximized on the screen, but again keep the top part of the page fixed and allow the main content to scroll. I have tried different combinations of tables,divs, and css styling, but can not seem to get it right. I have to make it work in IE 6 because that is what everyone will be using for the forseeable future. I am in WSS 3 and have Designer and VS 2008 available." Then, he responded to himself: "I have got it! Screams of delight were uttered once I figured it out!. I used a table set for max height and width and then put a div in the cell that I wanted to scroll. Using javascript and the _spBodyOnLoad function I got the height of the cells that the divs reside in and then used this to set the height of the divs in javascript. The divs were styled to scroll and now my top section stays on the page and the bottom sections scroll as required!!" Someone asked for details, and the response came back: "Actually I have done a little more since that last post and I have made it a little better. This requires a change to the master page. What I did was to remove the outer table element and I created 4 main divs. There is a main div that is set to 100% height and width. I left all the top stuff up to the main navigation bar in one top div and then the rest of the stuff in a body div. I added a footer as the next div. Using css I just styled the footer to stay at the bottom (width: 100%, height: 30px, bottom: 0px (this is important), left: 0, position:absolute). The top div had similar settings but it was set to (top: 0px, position: relative). This left the body div as the one I wanted to scroll if I needed to. I have also used jQuery to only need to scroll a list view but that is another post! "So this body div I set to (position: absolute, left: 0, width: 100%, overflow: auto, z-index: -500 (to ensure that any menu dropdowns would show up over the div)). Then when the page loads I have a javascript function that gets the main height of the page and sets the top of the footer to that minus 30 and then subtracts the height of the top div and I set the top of the body div and then set it's height. I have to set the height because the overflow requires it. I also have that function called on window resize to mostly keep it the same. Does that help? I am not sure if I can get the code on here but if so I will try to do so." I emailed and asked for the masterpage code itself. You can download it to have your own copy. Daniel WalkerDaniel Walker aka "EvilGenius" on Stump the Panel I like movies, robotics, astronomy and of course Sharepoint. I like to dabble in 3D artwork and can sometimes be caught reading a novel. Programming is just who I am more so than what I do.

Comments

Jeremy

Fixed Navigation in SharePoint

Awesome, you're #1!

Posted 12-Mar-2010 by Jeremy
Xene

Fixed Navigation in SharePoint

How interesting. Just curious as to how the page reacts if you print it? Do the navigation items print too?

Posted 13-Mar-2010 by Xene
spevilgenius

Fixed Navigation in SharePoint

Good question! In the case of this solution I believe that it will print whatever is on the screen. In the environment that this is running in, most folks just export the data to Excel. This was to solve a requirement to keep certain objects on the screen so that they would always be in the same spot.

Posted 13-Mar-2010 by spevilgenius

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: