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?

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.

  • Stroke of genius. It worked! – spex5 Aug 31 '14 at 21:09
  • Awesome. Glad I could help. – Paul T. Aug 31 '14 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
  • 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 '14 at 18:46
  • Is everything the way I have it above correct? – spex5 Aug 31 '14 at 19:18
  • That is what I saw at first sight. – Malin De Silva Aug 31 '14 at 20:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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