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>
- JQuery for Everyone: Accordion Left Nav
- JQuery for Everyone: Print (Any) Web Part
- JQuery for Everyone: HTML Calculated Column
- JQuery for Everyone: Dressing-up Links Pt1
- JQuery for Everyone: Dressing-up Links Pt2
- JQuery for Everyone: Dressing-up Links Pt3
- JQuery for Everyone: Cleaning Windows Pt1
- JQuery for Everyone: Cleaning Windows Pt2
- JQuery for Everyone: Fixing the Gantt View
- JQuery for Everyone: Dynamically Sizing Excel Web Parts
- JQuery for Everyone: Manually Resizing Web Parts
- JQuery for Everyone: Total Calculated Columns
- JQuery for Everyone: Total of Time Differences
- JQuery for Everyone: Fixing Configured Web Part Height
- JQuery for Everyone: Expand/Collapse All Groups
- JQuery for Everyone: Preview Pane for Multiple Lists
- JQuery for Everyone: Preview Pane for Calendar View
- JQuery for Everyone: Degrading Dynamic Script Loader
- JQuery for Everyone: Force Checkout
- JQuery for Everyone: Replacing [Today]
- JQuery for Everyone: Whether They Want It Or Not
- JQuery for Everyone: Linking the Attachment Icon
- JQuery for Everyone: Aspect-Oriented Programming with jQuery
- JQuery for Everyone: AOP in Action - loadTip Gone Wild
- JQuery for Everyone: Wiki Outbound Links
- JQuery for Everyone: Collapse Text in List View
- JQuery for Everyone: AOP in Action - Clone List Header
- JQuery for Everyone: $.grep and calcHTML Revisited
- JQuery for Everyone: Evolution of the Preview
- JQuery for Everyone: Create a Client-Side Object Model
- JQuery for Everyone: Print (Any) Web Part(s) Plugin
- JQuery for Everyone: Minimal AOP and Elegant Modularity
- JQuery for Everyone: Cookies and Plugins
- JQuery for Everyone: Live Events vs. AOP
- JQuery for Everyone: Live Preview Pane
- JQuery for Everyone: Pre-populate Form Fields
- JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
- Use Firebug in IE
- JQuery for Everyone: Extending OWS API for Calculated Columns
- JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
- JQuery for Everyone: Email a List of People with OWS
- JQuery for Everyone: Faster than Document.Ready
- jQuery for Everyone: Collapse or Prepopulate Form Fields
- jQuery for Everyone: Hourly Summary Web Part
- jQuery for Everyone: "Read More..." On a Blog Site
- jQuery for Everyone: Slick Speed Test
- jQuery for Everyone: The SharePoint Game Changer
- JQuery For Everyone: Live LoadTip
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
@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.
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