Harry Bailey

If you’re ever browsed the Twitter Bootstrap javascript documentation then you’ll know that the modal parts of the Bootstrap library require some javascript to show and hide them.

Part of the javascript is related to events which you can attach listeners to so you know when your modal shown and hidden.

What they don’t tell you is that you can add a single global (or semi global if you want) listener to all modal events which will fire when any modal is shown or hidden.

$('body').on('shown', '.modal', function () {
 
	console.log('we have shown a modal');
 
});

For example the above will console log “we have shown a modal” when any modal is shown. You can switch the shown event to be show, shown, hide or hidden.

Twitter’s bootstrap css currently doesn’t support tabs on the right hand side or floated right. We’ll here is the css to allow it.

We’ll stick to existing naming. Twitter use secondary-nav within topbar so let’s use that…

.tabs .secondary-nav {
	float:right;
	margin-left:10px;
	margin-right:0;
}

The the html for the tab you want to float right you need:

<li class="secondary-nav"><a href="#">Link Text</a></li>

The outcome is most tabs on the left and any with the new class positioned over to the right.

Update: Twitter has now added this to the site and the bookmarklet below is no longer of any use.

Got the new Twitter?
Annoyed that when you click the bar that says ‘x new tweets’ you can’t find the last one you had already read?
Harry Bailey to the rescue.

Update: Now works in Chrome, Safari, Firefox. Anyone checked Internet Explorer?

Drag the following link to your bookmark bar, go to the Twitter page that’s annoying you, click the bookmarklet:

Twitter Last Read Bar

Now when you click the 'x more tweets' link you will see a dark bar just above the last tweet you had previously read.

Lets hope Twitter add this as a standard feature soon!

If you are interested in the actual javascript used (let me know if you improve it) then here you go:

(function(){
$('head').append('<style>.marker{border-top:2px solid #666 !important;</style>');
setInterval(function()
{
	var last_read = $('div.stream-item.last-read');
	if(!last_read.length)
	{
		$('div.stream-item:first').addClass('last-read');
	}
	else if(last_read.prev().length)
	{
		$('div.stream-item.marker').removeClass('marker').removeAttr('style');
		last_read.removeClass('last-read').addClass('marker');
		$('div.stream-item:first').addClass('last-read');
	}
}, 2000);
}();

Update: You can now signup and help in testing. http://bucket.harrybailey.com

I have been working on something recently to make my Twitter life a lot easier.

I don’t have an iPhone and I’m not planning one getting on in the near future, so I send sms messages to Twitter to update my status. Simple enough when you have one Twitter account. You just add your device ( phone ) to Twitter, tell it when to send you sms messages, and what to send you and off you go.

Sadly you can only apply a device to one Twitter account and can only send updated to one account from your device via sms.

Until now!

Continue Reading… »