Javascript, List view modification, Requests, SharePoint

Move view selector to the left

33 Comments

06.02.2010 Added another method for floating the view selector on the right side of the page.

I got a request from “tecrms” that sounded like this:

As you know on all list views and document views, the view selector is on the right hand side of the menu bar. This can make it quite cumbersome for users looking at lists with many columns to change the view. A better option would be for the view selector to be on the left hand side and right hand side of the menu bar. I know I can move the view selector via SPD but would rather use a JavaScript options if one was available. Would this be something you would be interested in creating?

It’s often harder to think out the question than to actually solve the issue…

This is the default placement of the view-selector:
IMG

Here the selector is inserted after the “Settings-menu”:
IMG

Here is how it’s done
Add a CEWP below the list view, and add this code (alter the location of the jQuery-scipt as needed)

<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("td.ms-toolbar:last").insertBefore($("td.ms-toolbar[width='99%']"));
</script>

Use this code for a floating menu on the right side of the page:

<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	viewMenuFloatRight();
});

function viewMenuFloatRight(){
	var top = $("td.ms-toolbar:last").offset().top+2;
	var menuWidth = $("td.ms-toolbar:last table").width()+15;
	var left = $(window).width() - menuWidth + $(window).scrollLeft();	
	// Position the menu
	$("td.ms-toolbar:last table").css({'position':'absolute','top':top,'left':left});
	// Paging
	$("td.ms-toolbar td[id='topPagingCellWPQ1'] table").css({'position':'absolute','top':top,'left':left-50});
}

// Handle resize and scroll
$(window).resize(function() {
	viewMenuFloatRight();
}).scroll(function() {
	viewMenuFloatRight();
});
</script>

Regards
Alexander

33 thoughts on “Move view selector to the left”

    1. I tried to just “clone” the selector, but then the menu is opened in the same selector regardless of which menu you click. I reckon this has to do with the id of the selector not being unique anymore…

      It may be possible if you alter the id of the menu, and the function which opens it.

      Alexander

  6. can we float the menu? I have found that old habbits die hard. I still scroll right looking for the selector. so now I am doing double work looking for this. If the selector can float right, just left of the scrollbar it would always be in view and to the right side of the page.

  7. Floating menu is excellent but I find it buggy if you are in a groupby view. When the user expands a groupby view the selector does not move up (a few pixels) with the menu bar.

  8. I cant seem to locate your email address anywhere on your site. I just must be having a bad day.

    But, I did find out that the problem only occurs when IE is not in maximize view.

    1. Hi,
      I have made a small update to the code for a floating menu (line 14) to move the paging selector as well. Try this code and let me know if it’s not working.

      Alexander

  10. It is removing the Views picker from the right of the Toolbar, but it is NOT showing the Views picker anywhere else, much less on the left after the Settings drop-down.

    Using jquery-1.4.2.min.js, does that make a difference?

    6. Hi,
      I have tested it in IE 6.0.2900.5512.xpsp_sp3…

      It does Work there, Please specify the version number (Help>About Internet Explorer) of your IE and i will try to test it if i can get hold of the version you have.

      Have you tested other scripts from my site with success?

      Alexander

  14. Just got upgraded to IE7 (at last!).

    Still does not work.

    The View selector disappears entirely.

    I am using several scripts from a variety of sites (EndUserSharePoint and PathtoSharePoint for example).

    1. Interesting.

      I wsa trying to use this on a web page into which I inserted a list view web part and a CEWP. Did not work.

      But when I opened the list directly and edited that page and added a CEWP, this works.

      I wonder what the difference would be???

    2. This script is intended to be used in a “native” list or library. If you add a list view webpart to a web part page, the view selector does not exist and therefore cannot be moved.

      Alexander

  15. We originally had the view selector moved to the left, however the content in the calendar and list views have increased to the point where the selector scrolls off the screen.

    Since we’re still required to have the view selector on the left, I built on Alexander’s great work and combined the two techniques.

    The code below adds toolbar separators, moves the view selector to the left then floats it during horizontal scrolling. The page buttons always float right.

    <script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

// Insert separators
$("td.ms-separator[img src='/_layouts/images/blank.gif']:first").clone().insertBefore($("td.ms-toolbar[width='99%']"));
$("td.ms-separator:last").clone().insertBefore($("td.ms-toolbar[width='99%']"));

$(document).ready(function(){
	viewMenuFloatLeft();
});

function viewMenuFloatLeft(){
	var top = $("td.ms-toolbar:last").offset().top+2;
	var menuLeft = $("td.ms-toolbar[width='99%']").offset().left;
	var right = $(window).width() - 90 + $(document).scrollLeft();
	// Move the view selector to the left then float to stay visible
	if ($(document).scrollLeft() >= (menuLeft - 10)) {
	    var left = $(document).scrollLeft() + 10;
	} else { 
	    var left = (menuLeft - ($(document).scrollLeft() / 1000 ));
	}
	// Position the menu
	$("td.ms-toolbar:last table").css({'position':'absolute','top':top,'left':left});
	// Paging - always floats on the right
	$("td.ms-toolbar td[id='topPagingCellWPQ2'] table").css({'position':'absolute','top':top,'left':right});
}

// Handle resize and scroll
$(window).resize(function() {
	viewMenuFloatLeft();
}).scroll(function() {
	viewMenuFloatLeft();
});
</script>

  17. I have a similar question as to Red’s. How would you go aboout applying the View Selector on the Left Side or Float to the ENTIRE site rather than a single view? This is fantastic, but needs to be able to be applied globally. How would you do that??

      1. I figured it out. I exported the CEWP with the code to a web part file and added it to the master page. Works wonderfully!!! Thanks.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.