jump to navigation

Kung-fu jQuery Solution to Bill Simser’s Post on Changing the Home tab in Multipage Meeting Workspaces October 14, 2009

Posted by willhlaw in jPoint, jQuery.
Tags: , , , , ,
trackback

Bill Simser posted a blog article two days ago that I wanted to reply to. The title was “Changing the Home tab in Multipage Meeting Workspaces with jQuery”. However, when I posted my comment, it did not show up. I know that sometimes, it takes a while. I waited, reposted my comments in Chrome rather than in IE7 and waited some more. But after an entire day and Bill tweeeting he did not see any comments, I am resorting to responding with a blog post.

Thus, here is a re-hash of the problem Bill was trying to solve. On a Multipage meeting workspace, you can change the name of each meeting tab except for the “Home” one. Bill came up with a jQuery solution for changing the “Home” to “Zombieland”, or whatever you wish. However, he needed two separate script solutions on the “Home” page and the other pages because the structure of the tab changed whenever it was the current selected page (no link is necessary to click on the tab that you are already on).

Here were Bill’s two solutions.

To change the Home Page tab name we’ll need two Content Editor Web Parts (CEWP). One when the Home tab is active and one when it’s not. Using jQuery we simply find the tab and change the text. Seriously it’s this easy:

<script type=”text/javascript”>

$(document).ready(function(){

$(‘.ms-tabselected:contains(“Home”)’).text(“Zombieland”);

});

</script>

And here’s the code when the tab is inactive (it has a different classname):

<script type=”text/javascript”>

$(document).ready(function(){

$(‘.ms-tabinactive:contains(“Home”) a’).text(“Zombieland”);

});

</script>

And here is Bill’s problem:

I thought I would be smart and use the className^=”ms-tab” wildcard so it would work on any page but the content changes if the page is active. Even with the class selector when the page is active, there’s no hyperlink to the page (which makes sense) so no ‘a’ selector to find. When the tab isn’t active it’s there. My JavaScript kung-fu prevents me from figuring out something that works for both situations but feel free to post a snippet in the comments and I’ll update the post.

This is my answer to Bill and it would have been a comment on his blog but for some reason, my 4 attempts to comment did not work. (Don’t worry, I tried everything, including just writing about the first part of the solution and leaving out the whole configurable script part.)

[metadata would have looked something like this] Monday, October 12, 2009 3:55 PM by willhlaw

Okay, I am not sure if you need your code on one line, but the following ninja code should work.

<script type=”text/javascript”>

$(document).ready(function(){

var homeTab = $(“span .ms-tabinactive, .ms-tabselected”).find(“:contains(‘Home’)”);

homeTab.html(homeTab.html().replace(“Home”,”ZombieLand”));

});

</script>

Basically, I use find to search the children. And so as not to affect the structure, I do a string replace.

I created a quick configurable script using jPoint so a user with edit page permissions can change the new tab name from “Zombieland” to something else. It uses the jPoint configuration model, so if you are familiar with it, it should be simple. If you are not, just drop the script onto a content editor webpart and you will see a yellow config screen with an edit button.  Click that edit button to change the NewTabName from “Zombieland” to anything else. After the page refreshes, you’ll see your changes. No need for power users to mess with code.

Here is the configurable script with the script tags replaced with [script] to make sure it will appear:

<script type=”text/javascript”>

var myjLocalOptions={NewTabName:’ZombieLand’};

</script>

<script type=”text/javascript” src=”//sharejpoint.googlecode.com/files/jPart-0.4-template-expanded.js“></script>

<script src=”/src/jPoint_dev/webparts/jPart.replaceMeetingHomeTab.js”></script>

Here are the pictures to help explain the configurable script for Changing the Home Tab of a Multipage Meeting Workspace.

A close up.

When you click the Edit button, you will see the following configuration screen for the script webpart.

A close-up.

So now, without having to be a developer, a power user or site admin could change the name of the “Home” tab to ZombieFire.

Click Update and you will see the changes.

.

Advertisements

Comments»

1. willhlaw - October 14, 2009

Update: my comments did go through to Bill Simser’s post, but apparently it takes over 2 hours for Community Server to update comments.

2. Arindam Sengupta - November 16, 2009

Great post ! Thanks for the “extra” trick !

3. christopher - October 1, 2013

Where is src=”/src/jPoint_dev/webparts/jPart.replaceMeetingHomeTab.js ????

4. christopher - October 1, 2013

How do you change for SharePoint 2010 v4 MasterPage?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: