1

I can get this block of jquery to work on basic HTML in Codepen

However, it doesn't seem to be working when I try this on a SharePoint 2013 Publishing site.

I embedded the CSS and JQ in my master page the following way:

<!--SPM:<SharePoint:CssRegistration name="&#60;% $SPUrl:~sitecollection/Style Library/Seattle/css/customnav.css %&#62;" runat="server" after="corev15.css"/>-->
        <!--SPM:<SharePoint:ScriptLink ID="ScriptLinkJQuery" name="~sitecollection/Style Library/Seattle/js/jquery-1.7.2.js" runat="server"/>--> 
        <!--SPM:<SharePoint:ScriptLink language="javascript" name="~sitecollection/Style Library/Seattle/js/test.js" runat="server"/>--> 

I copied the JQuery from here. I then uploaded it through Designer to /Style Library/Seattle/js

The CSS works. I use the Network feature in F12 dev tools and I can see my test script and the jquery loading.

Here's my CSS:

.ms-breadcrumb-top {

    background-color:black;
    position:fixed;
    top:65px;
    left:0;
    width:100%;
    height:30px;
    text-align: center;}

Here's my JQ:

$(window).scroll(function(){
  if($(document).scrollTop() > 0)

    {   
        $('.ms-breadcrumb-top').css({"display":"none"});
    }
  else{
         $('.ms-breadcrumb-top').css({"width":"100%"});

  }
});

What did I do wrong? How do I get this right?

2 Answers 2

3

In SharePoint the "page" is actually inside of a DIV and the window really never scrolls... The content inside that DIV does scrolls (unless you have a customized branded site). So although your code will work on a standalone HTML page, it will not in a standard Sharepoint site (2010 and above)... See the solution I posted here to a similar question.

Using your code, try this (note: I have an alerts below to ensure you are loading jQuery):

// remove this once you get it working
if (typeof jQuery === "undefined" ) { alert("jQuery does not seem to be loaded!"); }

(function($){

    $(document).ready(function(){

        var $workspaceDiv = $("#s4-workspace").scroll(function(){

            if ($workspaceDiv.scrollTop() > 0) {   

                $('.ms-breadcrumb-top').css({"display":"none"});

            } else{

                $('.ms-breadcrumb-top').css({"width":"100%"});

            }

        });

    });

})(jQuery);

Also note how I wrapped the code in an IIFE and ensured I scoped the $ variable so that you are sure to be using jQuery. You should always do this.

2
  • Stroke of genius. It worked!
    – spex5
    Aug 31, 2014 at 21:09
  • Awesome. Glad I could help.
    – Paul T.
    Aug 31, 2014 at 21:42
0

First thing I see is that $('ms-breadcrumb-top').css is missing the class identifier. It should have a '.' in the front.

$('.ms-breadcrumb-top').css
3
  • ah.. sorry, I had that in there before. I thought that might have been my problem so I removed the . It wasn't the problem. I made the change in the original post.
    – spex5
    Aug 31, 2014 at 18:46
  • Is everything the way I have it above correct?
    – spex5
    Aug 31, 2014 at 19:18
  • That is what I saw at first sight. Aug 31, 2014 at 20:21

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.