Move SharePoint QuickLaunch w/ jQuery

Here’s another SharePoint 2010 UI hack that comes in handy once in a while.  Sometimes, a client will want to move the Quick Launch (the standard SharePoint context navigation control that is displayed in the left column by default).  Assuming that you’ve already loaded the jQuery library, putting the following text in a Content Editor Web Part (CQWP) will cause the Quick Launch to be moved to wherever you put the CQWP:

<div id="ftg-quicklaunch"></div>
<script type="text/javascript">
$("#s4-leftpanel").appendTo($("#ftg-quicklaunch"));
$("#s4-leftpanel").css({'font-size':'10pt', 'width':'327px', 'margin-right':'0px'});
$("#s4-leftpanel-content").css("width", "100% !important"); 
$("div.s4-ba").css({'width':'100%'});
</script>

First you create a DIV with a specific ID to hold the moved QL (I used ftg-quicklaunch, but could be anything) .  Then, the cool part is the .appendTo which grabs the QuickLaunch  (#s4-leftpanel is the container for the Quick Launch) and sticks it into the new DIV.  The rest is just cosmetics!  Pretty cool!

Advertisements

Custom Download Button for Excel Services 2010

Here’s a little Excel Services UI hack …  A client recently wanted to display an Excel spreadsheet in Excel Services 2010 but not show the standard SharePoint page header or web part toolbar.  So far, not a big deal … just a little CSS takes care of the header, and there’s a built-in option to not display the toolbar.  But then they also wanted the ability to download a copy of the spreadsheet.  This is standard SharePoint functionality, but the UI for this lives in the toolbar in the Excel Web Access web part (which we had hidden).   The following is what I came up with:

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style> .ewaboot_toolbarBG {display:none;} #linkExportExcel, #linkExportExcel:visited {font-family:Trebuchet MS; font-size:10pt; color:white;} </style>

<table id=”ExportButton” style=”background:#ccc; height:20px; width:150px; align:center;”> <tr> <td style=”text-align:center”> <a href=”#” id=”linkExportExcel” title=”Export To Excel”>Export to Excel</a> </td> </tr> </table>

<script type=”text/javascript”>

$(document).ready(function(){ var linkLoc = $(“ie\\:menuitem[id$=’DownloadSnapshot’]”).attr(‘onMenuClick’); $(‘a#linkExportExcel’).click(function(){ eval(linkLoc); });

$(‘#ExportButton’).parent(‘div’).css(“float”,”right”); });

</script>

The above creates a table that is styled to look like a button and wires the download function to the onclick event.   jQuery is used to find the URL to the script that SharePoint uses to do the download.   The key part is the eval which causes the function to be executed when the button is clicked.