Tell me more ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.
up vote 0 down vote favorite

I am trying to hide the sidebar on administration pages in SP 2010. To do this, I am trying to use the following Javascript code which does not seem to be working.

    $(document).ready(function () {
    if(window.location.href.indexOf("_layouts") > -1) {
       var elem = document.getElementById("v5-page-column-sidebar");
       elem.style.display="none";
       var elem2 = document.getElementById("v5-page-column-main");
       elem2.style.width="100%;
    }
});

Can anyone help out?

share|improve this question
1  
v5? isn't it v4 in SP2010? (first-glance guess, here, haven't got my VMs to hand). – James Love Aug 1 '12 at 20:08
Indeed, it is v4. This must be using this: kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page – rjcup3 Aug 1 '12 at 20:20
Yes. I am using the V5 as my base. – G3P0 Aug 1 '12 at 20:34

3 Answers

up vote 2 down vote

Instead of using $(document).ready() try using the SP function for this:

_spBodyOnLoadFunctionNames.push("FunctionName");

See: http://www.stephanrocks.com/2011/10/05/_spbodyonloadfunctionnames-in-sharepoint-vs-jquerys-document-ready/

Also see: Risk of conflict between jQuery document ready and _spBodyOnLoadFunctionNames?

share|improve this answer
Thanks for the suggestion. I tried it but it made no difference. Here is the code: code _spBodyOnLoadFunctionNames.push("hideSidebar"); function hideSidebar() { if(window.location.href.indexOf("_layouts") != -1) { jQuery("#v5-page-column-sidebar").hide(); jQuery("#v5-page-column-main").css({"width","100%"}); } } code – G3P0 Aug 2 '12 at 14:25
I'm not a javascript expert by any means, but I think you have to declare the function before pushing it to the stack/queue (not sure what it is). – rjcup3 Aug 2 '12 at 14:44
It looks like the author of the link you posted did it this way. I tried to move the _spBodyOnLoadFunctionNames.push("hideSidebar"); after the function with no change. I can't tell from the original post, but should it be outside of the script tag? – G3P0 Aug 2 '12 at 15:38
That he did. I was comparing it to code here. I don't know to be honest. One thing I will note after looking at the code on the page you provided in the other comment is, the reason Vardhaman suggested using 'jQuery(document)' instead of '$(document)' is some of the SP JS uses the '$'. I see all the rest of your JS uses '$'. Can't say that's causing this issue, but something to be aware of. – rjcup3 Aug 2 '12 at 15:46
No, it's inside the script tag. Just the code I have here declared all the functions first. I think this is one of those things that only changes based on 'function name() {}' vs. 'var name = function() {}' – rjcup3 Aug 2 '12 at 15:48
show 5 more comments
up vote 2 down vote

If you have jQuery, why not go full jQuery? :)

Try this code:

jQuery(document).ready(function () {
    if(window.location.href.indexOf("_layouts") != -1) {
       jQuery("#v5-page-column-sidebar").hide();
       jQuery("#v5-page-column-main").css({"width","100%"});
    }
});
share|improve this answer
Thank you. This looks like it should work fine, but it doesn't seem to be applying to the div's as intended. – G3P0 Aug 1 '12 at 21:03
Is it getting applied? Are the divs being modified in any way? – Vardhaman Deshpande Aug 1 '12 at 21:11
The script does show on the pages but maybe it's not getting executed. There is no discernible difference from pages not in the _layouts folder. – G3P0 Aug 1 '12 at 21:13
Here is a link to a public page if you want to see it. I know you won't be able to see the pages in question, but at least you could see how the code is there. one.utsa.edu/sites/oit/OITConnect/infrastructureServices/Pages/… – G3P0 Aug 1 '12 at 21:21
up vote 0 down vote accepted

After all this, it was a matter of a simple quotation missing.

The code should have been:

$(document).ready(function () {
    if(window.location.href.indexOf("_layouts") > -1) {
       var elem = document.getElementById("v5-page-column-sidebar");
       elem.style.display="none";
       var elem2 = document.getElementById("v5-page-column-main");
       elem2.style.width="100%";
       elem2.style.paddingRight="0";
    }
});

It may not be pretty but it works. Thanks to everyone who tried to help!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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