Text beside tabs?

[pacific202]

Is there any way to add some text next to the tabs?  Our users have requested that we write some data (user name, server time, etc.) into the UI and we have a lot of blank space in our tab area.

I have tried adding a span behind the <div> tags, but the span content gets written to the bottom of the page and is not in the tab bar.

The attached image shows where we'd like to write text "Message".

[stworthy]

Try below code:

Code:

var msg = $('<div></div>').appendTo($('#tt').find('div.tabs-wrap'));
msg.css({
	position:'absolute',
	right:0,
	top:0,
	height:'24px',
	lineHeight:'24px',
	paddingRight:'3px'
}).text('Message');

[pacific202]

This worked perfectly!  Thanks!

[pacific202]

One thing I just noticed - when I have nested tabs this writes the text on all the sub-tabs too.

My parent tab container has an id of "tab-container" and the child is called "tab-container-admin".

[tslatt]

If you don't plan to have any messages next to the subtabs, give your message div a class, and then hide it for subtabs:

Code:

var msg = $('<div class="tabmsg"></div>').appendTo($('#tt').find('div.tabs-wrap'));
msg.css({
	position:'absolute',
	right:0,
	top:0,
	height:'24px',
	lineHeight:'24px',
	paddingRight:'3px'
}).text('Message');

Code:

#tab-container-admin .tabmsg { display: none; }

Note: I haven't actually tried this code to see if it works, but I *think* it should.