Switch views using CSS and jQuery

Basically by changing the class assigned to a div wrapping the content we are able to change the way things are laid out and hide what we don’t need.  Here how I set it up in SharePoint.  

• I started with a standard Image library and added some images of one of my bikes.  I filled in the title and description for each item.  You can use this same technique on other types of lists.
• Next I created a page and displayed the list in a dataview web part
• I edited the XSL to show the items in an unordered list with a class of  ‘display’. Inside of each <li> I used various tags and classes to style the images and descriptions.

  <li class="ms-vb">
  <div class="content_block">
  	<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}">
  	<img align="left" border="0" src="{concat($FileURL,'/_t/',$FileNameNoEx,'_',@FileType,'.',@FileType)}" alt="{@Title}"/>
  	</a>
  	<h2>
  		<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}"><xsl:value-of select="@Title" disable-output-escaping="yes"/></a>
  	</h2>
  	<p><xsl:value-of select="@Description" disable-output-escaping="yes"/></p>
  </div>
  </li>
  

• Before the opening <ul> tag I added the link to my CSS and jQuery files as well as some script to trigger the switch and the associated link.

  <link href="styles.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  	$("a.switch_thumb").toggle(function(){
  	$(this).addClass("swap");
  	$("ul.display").fadeOut("fast", function() {
  		$(this).fadeIn("fast").addClass("thumb_view");
  //  thumb_view is the class used for the alternate display style
  		});	  },
  		function () {
  		 $(this).removeClass("swap");
  		$("ul.display").fadeOut("fast", function() {
  			$(this).fadeIn("fast").removeClass("thumb_view");
  		}); }); });
  </script>
  <a href="#" class="switch_thumb">Switch Display</a> /* link to trigger the switch */
  

• Then I wrote some css to style the list differently based on the class of the <ul>. 

Below is the xsl and the CSS I used.

XSL (includes the code above)

<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
		<xsl:param name="dvt_apos">'</xsl:param>
		<xsl:param name="url_PATH_INFO" />
		<xsl:param name="url_HTTP_HOST" />
		<xsl:variable name="dvt_1_automode">0</xsl:variable>
		<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
		<xsl:call-template name="dvt_1"/>
	</xsl:template>
				<xsl:template name="dvt_1">
					<xsl:variable name="dvt_StyleName">BulTitl</xsl:variable>
					<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
					<link href="styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">
$(document).ready(function(){
	$("a.switch_thumb").toggle(function(){
	  $(this).addClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").addClass("thumb_view");
		 });
	  }, function () {
      $(this).removeClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").removeClass("thumb_view");
		});	}); });
</script> <a href="#" class="switch_thumb">Switch Display</a>
	<ul class="display">
		<xsl:call-template name="dvt_1.body">
			<xsl:with-param name="Rows" select="$Rows" />
		</xsl:call-template>
	</ul>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows" />
	<xsl:for-each select="$Rows">
		<xsl:call-template name="dvt_1.rowview" />
	</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<xsl:param name="FileNameString" select="@NameOrTitle"></xsl:param>
		<xsl:param name="FileNameLegnth" select=" string-length(@NameOrTitle) - 4"></xsl:param>
		<xsl:param name="FileNameNoEx" select=" substring(@NameOrTitle,1,$FileNameLegnth)"></xsl:param>
		<xsl:param name="FileURL" select="concat('http://',$url_HTTP_HOST,'/',@FileDirRef)"></xsl:param>
	<li class="ms-vb">
		<div class="content_block">
			<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}">
				<img align="left" border="0" src="{concat($FileURL,'/_t/',$FileNameNoEx,'_',@FileType,'.',@FileType)}" alt="{@Title}"/>
			</a>
			<h2>
				<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}"><xsl:value-of select="@Title" disable-output-escaping="yes"/></a>
			</h2>
			<p><xsl:value-of select="@Description" disable-output-escaping="yes"/></p>
			</div>
		</li>
		</xsl:template>
</xsl:stylesheet></Xsl>

CSS

/* normal view styles */
ul.display li a {
    text-decoration: none;
}
ul.display li{
	background:#E3EFFF;
	margin:3px;
	border:1px solid #9FC2F1;
	height:130px;
	list-style:none;
}

ul.display li .content_block {
    padding: 5px;
	clear:both;
    margin:4px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 2px;
    font-weight: normal;
    font-size: 1.4em;
}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 145px;
    font-size: 1.2em;
}
ul.display li .content_block img{
    padding: 5px;
    border: 4px solid #336699;
    background: #fff;
    margin: 2 9px 2 2;
float: left;
}
/* thumbnail view styles */
ul.thumb_view li{ width: 200px; float:left; background:transparent; }
ul.thumb_view li h2 { display: inline; text-align:center; margin:2px; padding:2px }
ul.thumb_view li p{ display: none; }
ul.thumb_view li .content_block a img { margin: 5 0 10px; }
/* styles for the style switcher buttin */
a.switch_thumb {

	padding:5 5 5 25px;
	margin:10px;
	background:#D6E8FF url('/_layouts/images/itcat.gif') no-repeat 5px 7px;
	outline: none;
	border:1px solid #9FC2F1;
	font-size:.8em;
}
a:hover.switch_thumb {
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background:url('/_layouts/images/itcontct.gif') no-repeat 5px 7px; }

If you want to use this same solution for a different type of list just create a dataview Web Part to display the items in the format you want and wrap everything in a container (div, ul, table) with a class. Also use tags (h2, p, span, div, etc.) to wrap the pieces of data you are displaying (this will make it easier to control with CSS). Change the CSS and JavaScript to work with you new container and XSL.

Got questions? Post a comment.

Related posts:

1. Anything Slider in SharePoint – Update
2. A Better Annoucements Ticker
3. CSS-Tricks AnythingSlider in SharePoint

I got the idea for this from here: http://cssglobe.com/lab/searchfield/. The idea is that by giving users suggestions of what they should be searching for they can be guided to the most important information. When I am searching for something many times I am unsure what what search terms will give me the best results.

To get started we will need a search box to work with.  The out of the box search box could work but I prefer to use the one mentioned here by Kyle Schaeffer because it gives me a lot more flexibility with the design.   

Adding a Search Box to the page

To get the search box on your page :

1. Add this register tag at the top of the page layout or masterpage :

   <%@ Register Tagprefix="SPSWC"
   Namespace="Microsoft.SharePoint.Portal.WebControls"
   Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0,
   Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

2. If needed hide the existing search box (I left mine, and it still works fine).
3. Put this code where you want the search box to show up:

   <br />
   <div id="searchLayout">
   <SPSWC:SearchBoxEx id="SearchBox" RegisterStyles="false" TextBeforeTextBox="" TextBoxWidth="200" GoImageUrl="" GoImageActiveUrl="" GoImageUrlRTL="" GoImageActiveUrlRTL="" UseSiteDefaults="true" DropDownMode="HideScopeDD" SuppressWebPartChrome="true" runat="server" WebPart="true" __WebPartId="{0043945F-2D2B-4A02-8510-CED13B6F04DF}">
   </div>
   <p> 

4. Save the page.

Javascript

Ok now comes the integration part.  In the JavaScript code searchfield.js you must insert the ID of the search input field.

var id = "searchfield"

In ASP.NET control IDs change when the page is rendered so the best way to do this is to view the source of the page or use FireBug to get the id.  It will be something long like “ctl00_PlaceHolderMain_searchbox2_SFF4064A0_InputKeywords”

Now save the JS file and test the page.

If it does not work make sure you have referenced your javascript properly.

• If you are doing this in a page layout the script link should go inside the AdditionalPageHead content place holder.
• If you are putting this in a masterpage you can either refernece the script in the <head> section or just above the closing </body> tag.

Search Suggestions

Watch out

This script includes code that will clear the contents of the search box on the first focus so you don’t need to use the “QueryPromptString” tag on your search box because it wont work.

This is what mine came out looking like with a little CSS code.  Also to get the “Go” image to show up I just set the “GoImageUrl” attribute.

Conclusion

This is a very simple solution and can help enhance the user experience but it is not as integrated with SharePoint as I would like.  Ideally the suggestions would be read in from a list stored somewhere on the site.

Related posts:

1. Adding Suggestions to the Sharepoint search box : Part 2
2. Adding references to the page head: the easy way
3. A Better Annoucements Ticker

Here are some additional resources on using WordPress as a CMS

• CSS Tricks
• WordPress CMS Hacks and Tricks
• How to use WordPress as a Truly Customized CMS (Multiple Headers, Footers, Sidebars and more!)

Related posts:

1. Are custom designs becoming obsolete?
2. Better page titles in SharePoint
3. CSS-Tricks AnythingSlider in SharePoint