1,674 articles and 12,429 comments as of Tuesday, August 24th, 2010

Monday, December 22, 2008

JQuery for Everyone: Cleaning Windows Pt2

After giving users the power to manipulate a site’s page(s), they will probably expect the site to remember those choices.  Cookies give us one tool for managing personal preferences.  Since SharePoint already uses cookies, we have some functions we can reuse from init.js and core.js:  DeleteCookie(sName), GetCookie(sName), and SetCookie(name, value, path).

SharePoint’s SetCookie function, the one I used, does not specify an expiration date.  Therefore, any cookie I create only lasts for the current session.  If you need longer-lasting profile data, you can either write a custom function to set your cookies, check out the jQuery Cookie Plugin, or use a different data storage mechanism. 

A server-side profile store, like a SharePoint list that you connect to using JSAPI and web services, can honor the user’s preferences regardless of which device they use to access the site. Users may or may not like that behavior, so check with them first.

I will keep this simple for now.  Determine which pages should have hideable elements and a strategy for storing preference data that fits your environment.  But don’t feel you have to stop at manipulating “master page” elements.  Preference data can improve the user experience by streamlining forms.  We can also enhance site performance by reducing round trips to profile data we might use to pre-populate forms.

<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">
//initialize checkboxes
$(function() {
	$("input.toggleClass:checkbox").each(function(i,e) {
		var v = e.value;
		var g = GetCookie(v); //SP function
		if (g == "1") {
			e.checked = true;
			$(v).hide();
		}
	});
});
//set cookie on click and hide element
$(function() {
	$("input.toggleClass:checkbox").click(function(e) {
		var v = $(e.target).val();
		var g = GetCookie(v);
		if (g == "1") {
			$(v).show();
			SetCookie(v, "", "/"); //SP function
		}else{
			$(v).hide();
			SetCookie(v, "1", "/");
		}
	});
});
</script>

Paul Grenier

View all entries in this series: PaulGrenier-JQuery for Everyone»
Entries in this series:
  1. JQuery for Everyone: Accordion Left Nav
  2. JQuery for Everyone: Print (Any) Web Part
  3. JQuery for Everyone: HTML Calculated Column
  4. JQuery for Everyone: Dressing-up Links Pt1
  5. JQuery for Everyone: Dressing-up Links Pt2
  6. JQuery for Everyone: Dressing-up Links Pt3
  7. JQuery for Everyone: Cleaning Windows Pt1
  8. JQuery for Everyone: Cleaning Windows Pt2
  9. JQuery for Everyone: Fixing the Gantt View
  10. JQuery for Everyone: Dynamically Sizing Excel Web Parts
  11. JQuery for Everyone: Manually Resizing Web Parts
  12. JQuery for Everyone: Total Calculated Columns
  13. JQuery for Everyone: Total of Time Differences
  14. JQuery for Everyone: Fixing Configured Web Part Height
  15. JQuery for Everyone: Expand/Collapse All Groups
  16. JQuery for Everyone: Preview Pane for Multiple Lists
  17. JQuery for Everyone: Preview Pane for Calendar View
  18. JQuery for Everyone: Degrading Dynamic Script Loader
  19. JQuery for Everyone: Force Checkout
  20. JQuery for Everyone: Replacing [Today]
  21. JQuery for Everyone: Whether They Want It Or Not
  22. JQuery for Everyone: Linking the Attachment Icon
  23. JQuery for Everyone: Aspect-Oriented Programming with jQuery
  24. JQuery for Everyone: AOP in Action - loadTip Gone Wild
  25. JQuery for Everyone: Wiki Outbound Links
  26. JQuery for Everyone: Collapse Text in List View
  27. JQuery for Everyone: AOP in Action - Clone List Header
  28. JQuery for Everyone: $.grep and calcHTML Revisited
  29. JQuery for Everyone: Evolution of the Preview
  30. JQuery for Everyone: Create a Client-Side Object Model
  31. JQuery for Everyone: Print (Any) Web Part(s) Plugin
  32. JQuery for Everyone: Minimal AOP and Elegant Modularity
  33. JQuery for Everyone: Cookies and Plugins
  34. JQuery for Everyone: Live Events vs. AOP
  35. JQuery for Everyone: Live Preview Pane
  36. JQuery for Everyone: Pre-populate Form Fields
  37. JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
  38. Use Firebug in IE
  39. JQuery for Everyone: Extending OWS API for Calculated Columns
  40. JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
  41. JQuery for Everyone: Email a List of People with OWS
  42. JQuery for Everyone: Faster than Document.Ready
  43. jQuery for Everyone: Collapse or Prepopulate Form Fields
  44. jQuery for Everyone: Hourly Summary Web Part
  45. jQuery for Everyone: "Read More..." On a Blog Site
  46. jQuery for Everyone: Slick Speed Test
  47. jQuery for Everyone: The SharePoint Game Changer
  48. JQuery For Everyone: Live LoadTip
 

Please Join the Discussion

7 Responses to “JQuery for Everyone: Cleaning Windows Pt2”
  1. larry says:

    Perfect, thanks for the post. With the cookie part this is now user specific. If I wanted to place this on a page and hide everything for all endusers it would only hide it for me, correct? is there a way to set it hidden by default, then set it to view for an admin or group?

    Maybe I can set the checkboxes to checked by default?

    thanks,
    Larry

  2. AutoSponge says:

    @Larry,

    This is a simple example of what can be done.

    To start with elements hidden by default, I would prefer to use CSS that hides the elements then setup the controls to show them as needed. That way there’s not “flash” of the hidden areas as the page loads.

  3. Rob says:

    Thanks Paul, this is exactly what I was looking for. I have gone ahead and implemented your code in my Master page itself under

    and I’m only hiding (or showing) the following.

    #LeftNavigationAreaCell

    .ms-globalbreadcrumb”

    All works fine, but when I have with ListViewWebpart the code stops working? any thoughts?

    thanks once again

Trackbacks

Check out what others are saying about this post...
  1. [...] JQuery for Everyone: Cleaning Windows Part2 [...]

  2. SharePoint News 2009…

    Recien estoy terminando de leer la abundante informacion que tenia al respecto de SharePoint y que se…

  3. German Blogs says:

    SharePoint Kaffeetasse #98…

    Tools und Addons Custom Content Editor Web Part for SharePoint jQuery http://jquery.com/ jQuery is a…

  4. OneOfSix says:

    Add Links to SharePoint Wiki Toolbar using jQuery…




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!