4

I'm trying to implement a solution in SP 2013 where the global navigation docks to the top of the browser as you scroll down. Like on this site.

The dev at this site provided the jquery he used to accomplish this. I'm able to get it working as you can see here (change framework to jquery 1.8.3).

I'm having some difficulty figuring out how to make this work on SP's global navigation. There are a couple of places I'm getting stuck and I have some questions about the master page in 2013. Hopefully an experienced developer can help point me in the right direction.

  1. I'm trying to figure out the relationship with the .html and .master file. It seems like I can only edit the .html file. There are several commented out lines in the file that I find are not commented out in the .master file. Why is that? Seems like I can't edit the .master file. Can I only use the snippets feature?

  2. I can get some test jquery to work on the master page if I add this to the html page <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> I put it in the head tag. Is that where it should go? I'd like to download the file and put in on my server instead of the link. Do I put it in the layouts folder on the server? What is the advantage / disadvantage of having the file on the server v.s. using the ajax.google link?

  3. In the jsfiddle example, you can see they are using an id called "sticky_navigation". In doing some research, I found that I might be able to target my jquery to the SP navigation class "DeltaTopNavigation". Would that be the class to target or should I create my own? How would I create my own and does it need to be wrapped in a div?

  4. How, when, and why would I "wrap something in a div"?

Thanks for the help and patience. I'm fairly new to this side of SharePoint.

Improve this question
1
  • for question no 2. you can use script manager where you can link the script from a file in library. here is how to implement it:labs.steveottenad.com/…
    – Supermode
    Jul 7, 2014 at 3:49

2 Answers 2

Reset to default
2
  1. The relationship between .html and .master is a bridge. It has been implemented so that developers who are not familiar with ASP.NET masterpages and SharePoint can use the .html file to do the changes in a "environment" they are more or less familiar with.
  2. I'm going to assume this is an on-premise solution, so yes, downloading and putting the .js file in the _layouts folder is the preferred way of doing it.
    It is best practice to have something called a Delegate control add the javascript links to the header tag. In the SharePoint masterpage you can find the tag <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true" /> in the <head>.
    To make this delegate control add your javascript, create a UserControl which contains the <link> with the path to the javascript file in your _layouts folder. Then add an Empty Element file to you solution, add the following in the Empty Element file: <Control Id="AdditionalPageHead" Sequence="90" ControlSrc="~/_ControlTemplates/PathToUserControlHere" />. Remember to add the Empty Element to a Site scoped feature.
  3. This is very tricky as SharePoint has some javascript which does some calculations in relation to the Ribbon and the s4-workspace div. So be careful with adding too many new divs. (It sounds more complicated than it actually is)
    I would recommend creating a custom class that you target and add it to an existing div. This is recommended so you don't introduce markup errors in the masterpage.
  4. It depends a lot on your design. I only introduce new wrapping divs when I need something custom to be together with something OOTB. E.g. if I want to have social buttons above/below the searchbar. Or if I want the navigation bar to have a subnavigationbar etc.
Improve this answer
1

Sorry I can't post code right now, but if you are still having a problem next week, I'll post back.

I created a plugin awhile back to do this: make elements sticky. It supports sharepoint and I'm currently using it in SP2013 (o365) with a few small apps. The plugin is:

http://purtuga.github.io/jquery.stickOnScroll/

You will need to use the set the viewport input option to the s4-workspace element and it should work.
Good luck.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.