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:
Here the selector is inserted after the “Settings-menu”:
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
Alexander…your rock! Thanks!
Hi:
Can this be done with the “Site Actions” button too?
Charlie Epes
Hi Charlie,
Yes it can: Move site actions to the left.
Alexander
IS there a way to copy, instead of move the view selector? have it on both sides?
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
🙂
how can I remove the view?
Hi,
To remove the view selector:
$(“td.ms-toolbar:last”).remove();
Also look here for a method of hiding only selected view’s:
Hide menu items in list view toolbar and views in view selector.
Alexander
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.
Yes we can – see updated code.
Alexander
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.
Hi,
Can you give me a screenshot? – i can not see how the expanding of a group can affect the position of the view menu.
Alexander
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.
When you will have paging on list , after click on next page selector will return to right side of the list.
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
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?
Hi,
Which of the two methods are you using?
Alexander
First method:
$(“td.ms-toolbar:last”).insertBefore($(“td.ms-toolbar[width=’99%’]”));
”
$(“td.ms-toolbar:last”).insertBefore($(“td.ms-toolbar[width=’99%’]”));
“
Same result with method 2.
View picker disappears, does not show anywhere.
Hi,
Do you have any other modifications made for that view? Is it WSS 3.0?
Alexander
No other modifications that I know of, no other CEWPs involved.
WSS 3 for sure, SP 2007.
HTTPS environment with CAC required.
What kind of web browser do you use?
Alexander
Still stuck with IE 6. Nothing to be done about that.
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
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).
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???
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
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>Some of my list have more than 10 views. Is there a way to apply this to the entire list instead of having to build it under every single view??
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??
Hi,
You would have to add this code to the master page. I no longer have access to a SP 2007 site and cannot help with the details, sorry.
Alexander
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.