1,804 articles and 14,876 comments as of Saturday, May 14th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

Friday, December 19, 2008

JQuery for Everyone: Cleaning Windows Pt1

Comments: 15

User: I never use that, can’t you just hide it?
You: Others may need it. I’ll give you check boxes to turn it on and off.

If a user hasn’t asked for it yet, they probably will. Maybe they want more dashboard width, better content real estate in a mobile browser, or a printable page. This may not be a “solution-in-a-box,” but it should give you an idea or two how you can approach the problem.

I created a simple lab that you can drop into a Content Editor Web Part (CEWP) on any default-ish page in your site to hide the three top-offenders. Each uses a different selector strategy (just for demonstration purposes) and the overall result rocks. Without QuickLaunch and the top section, this busy page only needs 640px!

Click “Read more” to see the code. Then come back next week when I show you how to persist the user’s choices with cookies.

<div>
  <input type=checkbox class="toggleClass" value=".ms-searchform" />
  <span style="vertical-align:top">Search Form</span>
</div>
<div>
  <input type=checkbox class="toggleClass" value="#LeftNavigationAreaCell" />
  <span style="vertical-align:top">Left Nav Pane</span>
</div>
<div>
  <input type=checkbox class="toggleClass" value="tr:lt(9)" />
  <span style="vertical-align:top">Top Panel</span>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$("input.toggleClass:checkbox").click(function(e) {
		$($(e.target).val()).toggle();
	});
});
</script>

Paul Grenier

View all entries in this series: PaulGrenier-JQuery for Everyone»

Entries in this series:

I recommend SharePoint resources daily on my twitter account here.

Posted by AutoSponge on Friday, December 19, 2008 at 9:00 am
Filed under Tips and Tricks · Tagged with

Please Join the Discussion

15 Responses to “JQuery for Everyone: Cleaning Windows Pt1”

Jeff says:

December 19, 2008 at 10:56 am

How can I safely include JQuery in ALL SharePoint pages? Editing the ONET.XML or CORE.JS somehow?

I really enjoy these JQuery interface tweaks and am looking for a best practice to deploy the JS files.

Thank you! Keep up the great work.

Reply
AutoSponge says:

December 19, 2008 at 11:21 am

@Jeff,

Thanks for the compliment. Check out parts 3-6 of the other series for some ideas about library deployment. It’s going to be different for everyone.
pt6: http://www.endusersharepoint.com/?p=980

Reply
Waldek Mastykarz says:

December 21, 2008 at 6:09 am

It would be cool to do the same for Web Parts to declutter the interface.

Reply
AutoSponge says:

December 21, 2008 at 9:23 pm

One problem with hiding web parts: it still loads the data. I’d rather allow personalization or make custom pages for better performance.

But the idea has merit for some applications–borrowing some code from the Print Any Web Part would be a head start.

Reply
Waldek Mastykarz says:

December 22, 2008 at 1:04 am

@AutoSponge: That’s why I mentioned it as a UI fix only instead of a performance solution ;)

Reply
Jeroen Ritmeijer says:

July 31, 2009 at 4:38 am

@Jeff, You can add JQuery into every page, without messing about with onet.xml, core.js or master pages using our free SharePoint Infuser.

See http://www.muhimbi.com/blog/2009/07/massage-sharepoint-into-submission.html

@Paul, this article refers to ‘click read more’. Am I blind or is this link missing?

Reply
AutoSponge says:

August 3, 2009 at 8:18 pm

@Jeroen,

That only makes sense if you see the article from the main page (when it’s a new article). Viewing the entire post… well, there’s no more :)

Reply
Tony says:

October 23, 2009 at 2:14 pm

Well, I see what you mean by working on “default-ish” type pages. Works fine for those. It took me some time to figure out what “tr:lt(9)” means, and it’s only a guess. There appear to be nice tags that need to be toggled to effectively hide the top panel. Is that correct?

Nice that you show 3 different selector strategies, but one or two sentences on exactly what they mean would be nice, since I “futzed” around trying to figure them out for for about 3 hours!

Anyway, if I build any other page, the left navigation hiding does not work. I can sort of see why, but no idea how to change the selector for it to make it work. I’ve tried looking for another element on those non-default-ish pages to toggle and nothing works. Any ideas? Hiding the left nav pane would be more useful on non-default pages!

Reply
Tony says:

October 23, 2009 at 2:15 pm

Oops, correction in that last post:

“tr:lt(9)” … There appear to be nine (not nice) tags that need to be toggled to effectively hide the top panel. Is that correct?

Reply
AutoSponge says:

October 23, 2009 at 2:50 pm

@Tony,

This script example works better as a learning lab than a real solution, but if you like it, that’s awesome!

tr:lt(9) is jQuery language for table row tags 0-8 (or the first 9 tags). When the jQuery factory function collects objects, $(”tr”) for example, it puts them in an array starting with position 0 from top-to-bottom on the page.

For more information and some learning examples, see jquery.com’s documentation and jsbin.com’s lab.

I use Firebug (add on for Firefox) when researching elements I need to work with. I suggest loading one of your pages and using Firebug to find the right thing(s) to hide.

Reply
Tony says:

October 26, 2009 at 7:55 am

Thanks, Paul! I’ll try that and let you know what element to look for on pages that are just list views. We use those alot here and have had multiple requests to be able to hide the left nav panel for wide list views.

Reply
Tony says:

October 26, 2009 at 8:16 am

OK, that did not take long! Since I had the IE Developer Toolbar installed, I used that and was easily able to identify the one additional element that needs to be hidden. It’s the element with id=”TitleAreaImageCell”. Hiding that element plus the aforementioned element with id=”LeftNavigationAreaCell” when the user selects to hide the left nav works great!

Thanks, Paul! Now I can hide left nav on default pages and list views.

Reply