What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

Download Source:

http://www.sampsonresume.com/labs/so-sites_minimal.user.js

Description

Greasemonkey script for linking the SO-Sites together. Jeff rightly pointed out that a mere clone of the footer-list takes up a bit too much space, so I thought this would eliminate that problem, or at least minimize that problem.

Each site is represented by a 10x10 colored box. The color of the box of course is associated to the color-scheme of that particular site. The black cube is the blog.

alt text

share|improve this question
    
Related (non-Minimalistic version) meta.stackexchange.com/questions/882/… –  dbr Jul 5 '09 at 18:02
10  
this is very nice, Jonathan, and something we are looking at very closely for inclusion in the site –  Jeff Atwood Jul 13 '09 at 5:55
    
Please do include it! –  R. Martinho Fernandes Jul 16 '09 at 11:20
    
This script will work in opera if "unsafeWindow = window;" is added as the first line in the GM_wait() function. Not sure if this then borks firefox, but I thought you might like to know. –  RobS Nov 16 '09 at 22:13
    
Hmm, it works in superuser and serverfault, but not meta or SO.... –  RobS Nov 16 '09 at 22:16
    
@Jeff, please do, I love this. –  Lance Roberts Mar 10 '10 at 0:34
1  
@Lance: This was later implemented in the footer of all sites. –  Jonathan Sampson Mar 10 '10 at 2:26
2  
yes, and it drives me crazy to have to scroll down a huge page to click on the other links, please keep your script up so I can have the buttons on the top. @Jeff –  Lance Roberts Mar 10 '10 at 15:14
    
@Jonathan, I just noticed that the script is causing my search box to disappear sometimes. I haven't been able to figure out exactly when yet. It may be caused by a conflict with another gm script. I also get a little letter h appearing below the title bar, again it may be a conflict with another gm script. I'm thinking I'll have to learn some greasemonkey. –  Lance Roberts Mar 10 '10 at 17:05
    
Looking at the scripts, I'm sure the problem is with the other one (so-gold-plated) since your script is pretty simple. –  Lance Roberts Mar 10 '10 at 17:22
    
@Lance The search box is being forced onto a new line likely because of the length of your name + the buttons + badges etc. This happens to me even without this script enabled (as a result of having a long name + badges). Click the letter "h," you'll see that it's actually the last letter of the search box peeking out from behind the Stack Overflow logo. To fix this, change the width of the element within the script. $(":input[name='q']").width(50) to make it 50px. –  Jonathan Sampson Mar 10 '10 at 18:57
    
Thanks, that worked great (though I upped it to 100px). –  Lance Roberts Mar 10 '10 at 19:09
    
Hi there. Does it have a colored box for programmers? Can we add one? tx. –  Dr Beco Mar 27 '11 at 18:29
    
@DrBeco You should be able to add one with minimal effort. –  Jonathan Sampson Mar 29 '11 at 13:38

5 Answers 5

Not too sure about pinning it to the top of the window (position:fixed), aside from that it looks quite nice, if a little unintuitive at first ("What are these three little coloured boxes?!")

An alternative idea, using each site's favicon.ico in the toolbar:

Using favicons in toolbar

Code:

(function(){
  function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { 
      window.setTimeout(GM_wait,100); 
    } else { 
      $ = unsafeWindow.jQuery; letsJQuery(); 
    }
  }
  GM_wait();
  function letsJQuery() {
    $("<span></span>")
      .append("<span class='link-separator'>|</span>")
      .append("<a href='http://www.stackoverflow.com'><img src='http://stackoverflow.com/favicon.ico' title='StackOverflow' style='padding:1px'></a>")
      .append("<a href='http://www.serverfault.com'><img src='http://serverfault.com/favicon.ico' title='Visit ServerFault' style='padding:1px'></a>")
      .append("<a href='http://meta.stackoverflow.com'><img src='http://meta.stackoverflow.com/favicon.ico' title='Visit Meta Stack Overflow' style='padding:1px'></a>")
      .appendTo("#hlinks");
  }
})();

Should probably hide the current site's icon..

share|improve this answer
    
Yeah; I had actually suggested icons when I responded to Jeff at first. Not considering the favicons, I just went with three solid boxes :) Unintuitive? I prefer 1337-geeky ;) –  Jonathan Sampson Jul 5 '09 at 18:18
2  
I don't think they're that unintuitive - they just rely on the user learning what the colours mean (which would probably be quite fast, cos we're all geeks here ;) –  Ant Jul 10 '09 at 16:10
1  
you may want to update your answer to include superuser.com .append("<a href='superuser.com'><img src='superuser.com/favicon.ico'; title='Visit SuperUser' style='padding:1px'></a>") –  soldier.moth Jul 16 '09 at 5:31
    
I answered quite similarly- not seeing your answer... I definitely prefer favicons over solid colors ;-) Anyway I added a style='display:inline-block;position:relative;top:4px' to make the images look more aligned (default is too high to my taste) Also consider adding superuser.com ;-) –  cadrian Jul 17 '09 at 12:02

Pre-emptively marking this completed, as we'll roll something like this out soon.

Current mockups:

share|improve this answer
    
Looks cool! :) ... –  Daniel Vassallo Aug 3 '10 at 8:44

I agree with dbr that I don't like the position:fixed, but also I thought the favicons were a little too cluttered for the site's simplistic layout. My solution? Combine both ideas. Also I added link-titles and a link to super user since it will be opening soon.

(function(){
  function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { 
      window.setTimeout(GM_wait,100); 
    } else { 
      $ = unsafeWindow.jQuery; letsJQuery(); 
    }
  }
  GM_wait();
  function letsJQuery() {
    $('#hlinks')
      .append('<span class="link-separator"> | </span>')
      .append("<a href='http://stackoverflow.com' style='display:inline-block;width:10px;height:10px;background:#f60;margin-right:5px' title='Stack Overflow'><span style='display:none'>stackoverflow</span></a>")
      .append("<a href='http://superuser.com' style='display:inline-block;width:10px;height:10px;background:#00ADED;margin-right:5px' title='Super User'><span style='display:none'>superuser</span></a>")
      .append("<a href='http://serverfault.com' style='display:inline-block;width:10px;height:10px;background:#c99;margin-right:5px' title='Server Fault'><span style='display:none'>serverfault</span></a>")
      .append("<a href='http://meta.stackoverflow.com' style='display:inline-block;width:10px;height:10px;background:#ccc;' title='Meta'><span style='display:none'>meta.stackoverflow</span></a>");
  }
})();

Edit: The light maroon color for the Server Fault link made it seem inferior, so I used to bright Red from the logo. Also added the 1px fix (thanks Jonathan).

(function(){
  function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { 
      window.setTimeout(GM_wait,100); 
    } else { 
      $ = unsafeWindow.jQuery; letsJQuery(); 
    }
  }
  GM_wait();
  function letsJQuery() {
    $('#hlinks')
      .append('<span class="link-separator"> | </span>')
      .append("<a href='http://stackoverflow.com' style='display:inline-block;position:relative;top:1px;width:10px;height:10px;background:#f60;margin-right:5px' title='Stack Overflow'><span style='display:none'>stackoverflow</span></a>")
      .append("<a href='http://superuser.com' style='display:inline-block;position:relative;top:1px;width:10px;height:10px;background:#00ADED;margin-right:5px' title='Super User'><span style='display:none'>superuser</span></a>")
      .append("<a href='http://serverfault.com' style='display:inline-block;position:relative;top:1px;width:10px;height:10px;background:#E8272C;margin-right:5px' title='Server Fault'><span style='display:none'>serverfault</span></a>")
      .append("<a href='http://meta.stackoverflow.com' style='display:inline-block;position:relative;top:1px;width:10px;height:10px;background:#ccc;' title='Meta'><span style='display:none'>meta.stackoverflow</span></a>");
  }
})();
share|improve this answer
    
Very nice! I think that will replace my current configuration. The only thing I might change is the amount of space above the cells...needs to be greater IMHO. Nice work. –  Jonathan Sampson Jul 9 '09 at 19:07
    
Thanks! The pixel offset, now that I noticed it, is driving my OCD nuts. If I get some time later I'll fix it. –  tj111 Jul 9 '09 at 19:25
    
position:relative;top:1px; I believe is what I added to each. I might have increase (slightly) the margin-right. The only thing I don't like is how it pushes all of my content over when it loads...kinda distracting. –  Jonathan Sampson Jul 10 '09 at 15:23
    
I've updated the original post with code-changes and a new screenshot. –  Jonathan Sampson Jul 10 '09 at 15:31

I thought this was what I was looking for then I saw the date. I've just got accounts on several extra SE sites and what I'd like is to have the "Stack Exchange v" menu give me a quick link to all of the sites that I currently have an account in.

It's pretty difficult to navigate through 5 different sites of the SE network...

share|improve this answer
1  

Here are the updated colors to match the footer:

$('#hlinks')
      .prepend('<span class="link-separator"> | </span>')
      .prepend("<a href='http://blog.stackoverflow.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#444;margin-right:1px;' title='Blog'><span style='display:none'>blog</span></a>")
      .prepend("<a href='http://meta.stackoverflow.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#969696;margin-right:7px;' title='Meta'><span style='display:none'>meta.stackoverflow</span></a>")
      .prepend("<a href='http://www.superuser.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#00AFEF;margin-right:7px' title='Super User'><span style='display:none'>superuser</span></a>")
      .prepend("<a href='http://www.serverfault.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#E8272C;margin-right:7px' title='Server Fault'><span style='display:none'>serverfault</span></a>")
      .prepend("<a href='http://www.stackoverflow.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#FE7A15;margin-right:7px' title='Stack Overflow'><span style='display:none'>stackoverflow</span></a>")
share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .