04/09/2009
"Friendfeed Mini" Greasemonkey Script
Download the script
5/30/2009 Updated to work http://friendfeed.com (non-beta)
The new Friendfeed UI beta opened to the public on Monday 2009/4/6 and has been getting great reviews from many tech pundits. The UI is so good that I'm thinking of switching from my current favorite FF tool Twhirl to the web UI. The only problem with the web UI is that it's designed to be used in a large browser window. I prefer this type of content in a slim window off to the side of my desktop. Resizing the window results in the sidebar menu squeezing out the content.
New Friendfeed UI doesn't work in a slim window
To remedy this I wrote this "Friendfeed Mini" Greasemonkey script. This is my first GM script so please comment if you find bugs or have any suggestions. It's a work in progress but it's usable. Note: The script is for the beta site. I'll probably need to update the script when the new UI comes out of beta.
What this script does
- Collapses the top headers and right sidebar
- Stretches content to the window edges
- Modifies styles to increase viewable content
- Adds bars to toggle the header and sidebar visibility
New Friendfeed UI with this script
Script source code
// ==UserScript==
// @name Friendfeed Mini
// @namespace http://kylehasegwa.com/ffmini
// @description Collapses Friendfeed header and sidebar for small windows
// @include http://friendfeed.com/*
// ==/UserScript==
// Hide Divs
var allDivs = document.getElementsByTagName('div');
var topDivs = new Array();
for (var i=0; i < allDivs.length; i++) {
if(allDivs[i].getAttribute('class') == 'box-bar home' ||
allDivs[i].getAttribute('class') == 'sharebox' ||
allDivs[i].getAttribute('id') == 'header' ) {
topDivs.push(allDivs[i]);
allDivs[i].style.display = 'none';
}
}
sidebarDiv = document.getElementById('sidebar');
sidebarDiv.style.display = 'none';
// Add toggle bars
var togMenuDiv = document.createElement('div');
togMenuDiv.id = 'menu-tog';
togMenuDiv.innerHTML = ' ';
togMenuDiv.addEventListener('click', togMenu, true);
document.body.appendChild(togMenuDiv);
var togHeadDiv = document.createElement('div');
togHeadDiv.id = 'head-tog';
togHeadDiv.innerHTML = ' ';
togHeadDiv.addEventListener('click', togHead, true);
document.body.appendChild(togHeadDiv);
// Togglebar functions
function togMenu() {
if(sidebarDiv.style.display == 'none'){
sidebarDiv.style.display = 'block';
}
else sidebarDiv.style.display = 'none';
}
function togHead() {
for (var i=0; i < topDivs.length; i++) {
if(topDivs[i].style.display == 'none') {
topDivs[i].style.display = 'block';
}
else topDivs[i].style.display = 'none';
}
}
// CSS modifications
ffMiniStyle = document.createElement('style');
ffMiniStyle.type = 'text/css';
ffMiniStyle.innerHTML = 'body {margin:0;}'
+'#body {margin-right:0;}'
+'#header {margin-top:15px;}'
+'#container {padding-right:0px; padding-left:0px;}'
+'#sidebar {position:absolute; right:10px; top:30px; z-index:101; '
+'padding:15px; background:#CCC; -moz-border-radius:10px;}'
+'.entry {margin-bottom:0; padding-bottom:5px; padding-top:5px;'
+'font-size:13px; line-height:auto; border-bottom:1px solid #D0D0D0;}'
+'.entry .info, .entry .info a.date, .entry .info a.service, .entry .likes {font-size:11px;}'
+'.entry .info .l_comment, .entry .info .l_like {font-size:12px; padding-right:18px;}'
+'.entry .info .l_like {background:transparent url(/static/images/n-smile.png) no-repeat scroll right top;}'
+'.entry .info .l_comment {background:transparent url(/static/images/comment-lighter.png) no-repeat scroll right top;}'
+'.comment .content {font-size:12px}'
+'.entry .comments {margin-left:20px;}'
+'.bar.search {margin-top:10px}'
+'#menu-tog, #head-tog {background:#3B7AC7; position:absolute;}'
+'#menu-tog {top:110px; right:0px; width:10px; height:' + (window.outerHeight / 3) + 'px;'
+'-moz-border-radius-topleft:5px; -moz-border-radius-bottomleft:5px; overflow:hidden; whitespace:nowrap;}'
+'#head-tog {top:0px; left:0px; width:100%; height:10px; '
+'-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; overflow:hidden; whitespace:nowrap;}';
document.getElementsByTagName('head')[0].appendChild(ffMiniStyle);
// @name Friendfeed Mini
// @namespace http://kylehasegwa.com/ffmini
// @description Collapses Friendfeed header and sidebar for small windows
// @include http://friendfeed.com/*
// ==/UserScript==
// Hide Divs
var allDivs = document.getElementsByTagName('div');
var topDivs = new Array();
for (var i=0; i < allDivs.length; i++) {
if(allDivs[i].getAttribute('class') == 'box-bar home' ||
allDivs[i].getAttribute('class') == 'sharebox' ||
allDivs[i].getAttribute('id') == 'header' ) {
topDivs.push(allDivs[i]);
allDivs[i].style.display = 'none';
}
}
sidebarDiv = document.getElementById('sidebar');
sidebarDiv.style.display = 'none';
// Add toggle bars
var togMenuDiv = document.createElement('div');
togMenuDiv.id = 'menu-tog';
togMenuDiv.innerHTML = ' ';
togMenuDiv.addEventListener('click', togMenu, true);
document.body.appendChild(togMenuDiv);
var togHeadDiv = document.createElement('div');
togHeadDiv.id = 'head-tog';
togHeadDiv.innerHTML = ' ';
togHeadDiv.addEventListener('click', togHead, true);
document.body.appendChild(togHeadDiv);
// Togglebar functions
function togMenu() {
if(sidebarDiv.style.display == 'none'){
sidebarDiv.style.display = 'block';
}
else sidebarDiv.style.display = 'none';
}
function togHead() {
for (var i=0; i < topDivs.length; i++) {
if(topDivs[i].style.display == 'none') {
topDivs[i].style.display = 'block';
}
else topDivs[i].style.display = 'none';
}
}
// CSS modifications
ffMiniStyle = document.createElement('style');
ffMiniStyle.type = 'text/css';
ffMiniStyle.innerHTML = 'body {margin:0;}'
+'#body {margin-right:0;}'
+'#header {margin-top:15px;}'
+'#container {padding-right:0px; padding-left:0px;}'
+'#sidebar {position:absolute; right:10px; top:30px; z-index:101; '
+'padding:15px; background:#CCC; -moz-border-radius:10px;}'
+'.entry {margin-bottom:0; padding-bottom:5px; padding-top:5px;'
+'font-size:13px; line-height:auto; border-bottom:1px solid #D0D0D0;}'
+'.entry .info, .entry .info a.date, .entry .info a.service, .entry .likes {font-size:11px;}'
+'.entry .info .l_comment, .entry .info .l_like {font-size:12px; padding-right:18px;}'
+'.entry .info .l_like {background:transparent url(/static/images/n-smile.png) no-repeat scroll right top;}'
+'.entry .info .l_comment {background:transparent url(/static/images/comment-lighter.png) no-repeat scroll right top;}'
+'.comment .content {font-size:12px}'
+'.entry .comments {margin-left:20px;}'
+'.bar.search {margin-top:10px}'
+'#menu-tog, #head-tog {background:#3B7AC7; position:absolute;}'
+'#menu-tog {top:110px; right:0px; width:10px; height:' + (window.outerHeight / 3) + 'px;'
+'-moz-border-radius-topleft:5px; -moz-border-radius-bottomleft:5px; overflow:hidden; whitespace:nowrap;}'
+'#head-tog {top:0px; left:0px; width:100%; height:10px; '
+'-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; overflow:hidden; whitespace:nowrap;}';
document.getElementsByTagName('head')[0].appendChild(ffMiniStyle);
Parts of this script come from the 7 inch gmail script
- Code /
- css /
- friendfeed /
- gm /
- greasemonkey /
- javascript /
- ui /
- Web 2.0 /
Popular content
- Yamanote chocolate train (Meiji)
- Tesing Out the Drupal Flickr Module
- Twitter lists crowdsource invaluable metadata, will replace follower count
- iMacros script to "test" Spymaster tasks
- How the "to." URL shortener works
- DSynchronize
- Aunty Marialani's "Go Cook 'em!" Hawaiian style cookbook
- What Hawaii expats eat in Hawaii (or how to get fat in Hawaii)
- Poor Man's Dock - add a simple dock style launcher in XFCE
- Shoddy DeLOCK craftsmanship and QA
Recent Comments
Kyle is sysadmin from Hawaii living in Tokyo. His passions include networking & security, gadgets, social networking and especially the philosophy of open content such as FLOSS software and creative commons publications.
Google profile page
RSS feed favorites
Flickr photos
Software I use
All my content in one place
Gadgets I use