Google+ Followers

Friday, October 19, 2012

Force Gmail to share the tab with another page!

If you're like me, you probably leave Gmail open somewhere for easy access. This might not ever be a problem if you aren't working on a complex project or if you have multiple monitors (or use Dexpot properly), but I find that my Gmail tab has an annoying habit of wandering off somewhere, forcing me to chase it down every now and then.

Also, I don't know about you, but I generally don't need to read more than the first 20 words of the subject line of emails sitting in my inbox. The normal Gmail email display stretches across the entire width of the page- with most monitors, it's total overkill - I care more about the vertical content (separate emails) than the horizontal content (subject lines)... (see photo). So yesterday I thought, 'wouldn't it be nice if I could have Gmail share the same page/tab with my to-do/note-taking platform?'

I whipped up some code and have since been absolutely loving my new Gmail page. I simply added a little button on the right that will resize Gmail and display my WorkFlowy on click. You can use Advanced Page Injector Chrome Extension to have it automatically inject the code for you (so just copy and paste below!). Just change the workflowy.com to yourtaskmanagerofchoice.com (e.g. asana) where it says src="http://www.workflowy". Also, if you use a Chrome Extension that doesn't automatically include jQuery (the linked one does not), also copy and paste this into your '^https://mail.google.com' rule.

Also be sure to check out my Workflowy chrome extension.

Here's the code (it even includes a keyboard shortcut CTRL+q to open/close workflowy!):


var initialSetup = function() { $('#workflowygmailbutton').remove(); $('#wfiframegmail').remove(); var button = "<button id='workflowygmailbutton'>|||</button>"; $('body').after(button); var buttoncss2 = "button#workflowygmailbutton {width: 20px; display:inline-block; position:absolute; top: -20px; right: 2px;; width:20px;font-size:23px;border:0;background-color:white;color:#4747D1; height:100%; padding: 0 0; margin: 0 auto;-webkit-appearance: caret;cursor:pointer;} button#workflowygmailbutton:hover {-webkit-box-shadow: inset 4px 4px 2px blue; opacity: .5;}"; $("head").append("<style id='dynamicStylesheet'></style>"); $("#dynamicStylesheet").text(buttoncss2); $('#workflowygmailbutton').css('z-index','9999'); $('#workflowygmailbutton').click(function(){openWorkflowy();}); var workflowy = "<iframe src='http://www.workflowy.com' id='wfiframegmail' name='wfiframegmail' style='display:none; z-index:9999'></iframe>"; $('#workflowygmailbutton').after(workflowy); var elstoattack = $('html'); initialPosition(); killbuttons(); } var killbuttons = function(){ $("div[role='button']").css('min-width', '0px'); rapportivewidth = $("div.nH[role='main']").width() * .22; $("#rapportive-sidebar > *").css('max-width', rapportivewidth); $("#rapportive-sidebar").css('z-index', '0'); $('.dw').css('z-index', '2') $("ol.sections").css('width', rapportivewidth); } var initialPosition = function() { windowwidth = window.document.width; newstartwidth = windowwidth - 20; if (windowwidth < 1715) {newstartwidth = 1576;}; if (windowwidth > 1714) {newstartwidth = 1891;}; $(elstoattack).css('max-width', newstartwidth); $('#wfiframegmail').css('display','none'); $('#workflowygmailbutton').css('top', '0') $('#workflowygmailbutton').css('right', '1px'); $('#workflowygmailbutton').unbind('click'); $('#workflowygmailbutton').click(function(){openWorkflowy();}); } var openWorkflowy = function(){ killbuttons(); windowwidth = window.document.width; newwidth = windowwidth * .48; if (newwidth > 910) {newwidth = 1005;}; if (newwidth < 791) {newwidth = 833;}; $(elstoattack).css('max-width',newwidth); $('#workflowygmailbutton').css('right', '46.4%'); $('#workflowygmailbutton').unbind('click'); $('#workflowygmailbutton').click(function(){initialPosition();}); $('#wfiframegmail').css('display','inline'); $('#wfiframegmail').css('position','absolute'); $('#wfiframegmail').css('right','0px'); $('#wfiframegmail').css('width', '46%'); $('#wfiframegmail').css('top','0'); $('#wfiframegmail').css('height','100%'); }; var elstoattack = $('html'); initialSetup(); window.isCtrl = false; $(document).ready(function(){ $(window).keyup(function (e) { if(e.which == 17) window.isCtrl=false; }).keydown(function (e) { if(e.which == 17) window.isCtrl=true; if(e.which == 81 && window.isCtrl == true) { $('#workflowygmailbutton').click() return false; } if(e.which == 220 && window.isCtrl == true) { $('#gbqfq').select(); return false; } }); })

Monday, October 8, 2012

Fix Windows' Snap-To Hotkeys for Spotify AND Control Transparency!

It's irked me for a while that Windows+Right/Left hotkeys don't work with Spotify. I use them all the time to reposition applications- especially when I'm at home with 4 monitors.


However I never quite hit the tipping point to motivated action for this puzzle, until I decided to make Spotify semi transparent so Winamp's Milkdrop visualizer could shine through during a social get-together at my place last night.

I found a great little app called glass2k that enables custom transparency for any window/application - however, it caused Spotify to freeze!

After searching for a while online, I decided that nobody had solved the whole 'Spotify uses a really weird window that doesn't behave normally' thing.

I'm pleased to report that I've found a way to fix Spotify up so it will work normally with Windows' snap-to functions. And to top it off, I also found a way to make Spotify transparent :)

Credit goes to the niftiest Windows program out there called Autohotkey, and community member System Monitor for his transparency script. Head on over to Autohotkey's homepage and install the program (and maybe later spend some time creating awesome hotkeys to paste text you commonly type out, such as your email address, or control music faster/easier, etc).

Once installed, all you have to do is open a text editor/notepad, paste the following, save the file, change the extension from .txt to .ahk, then double click it and you're good to go!

Consider copying it to C:\Users\[your username]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup\ so it will automatically start on boot.

!f::
WinGet, active_id, ID, A
WinGet, Style, Style, A
if (Style & 0x170B0000)
{
 ;MsgBox, Fixing Spotify.
 WinSet, Style, 0x17CF0000, ahk_id %active_id%
 WinSet, Transparent, OFF, ahk_id %active_id%
}
return
!w::
WinGet, active_id, ID, A
WinGet, currentWindow, ID, A
if not (%currentWindow%)
{
   %currentWindow% := 255
}
if (%currentWindow% != 255)
{
   %currentWindow% += 5
   WinSet, Transparent, % %currentWindow%, ahk_id %active_id%
}
SplashImage,,w100 x0 y0 b fs12, % %currentWindow%
SetTimer, TurnOffSI, 1000, On
Return
!s::
SplashImage, Off
WinGet, active_id, ID, A
WinGet, currentWindow, ID, A
if not (%currentWindow%)
{
   %currentWindow% := 255
}
if (%currentWindow% != 5)
{
   %currentWindow% -= 5
   WinSet, Transparent, % %currentWindow%, ahk_id %active_id%
}
SplashImage,, w100 x0 y0 b fs12, % %currentWindow%
SetTimer, TurnOffSI, 1000, On
Return

TurnOffSI:
SplashImage, off
SetTimer, TurnOffSI, 1000, Off
Return
After you fire it up, Alt+f (f stands for 'fix spotify') will fix Spotify, enabling you to use the Windows snap commands!

Alt+w and Alt+s will control transparency of any running program. I haven't gotten Spotify to be interactive while transparent, so if you want to click on it you'll have to Alt+f it again.

Enjoy!

Be sure to check out my other blog and 3D-printed tech accessories site, techneesh. Follow me @tristech for occasional but interesting tweets.