26
2010Google Books Fuller Full Screen
Ever since I started using FireFox 4 Beta I’ve been wanting back my favorite plug-ins. Fortunately Firebug has their 1.7a that’s compatible, so that’s good, but GreaseMonkey seems to have been lacking (even with their nightlies). That’s too bad, but then I came across Scriptish by Erik Vold. It’s a great light-weight fork that cuts out the old FireFox code and is lightning fast. Anyways, after editing the plug-in minimum browser version to run with beta 8 I decided to give it a whirl. So here’s my first work-in-progress for Google Books.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// ==UserScript== // @id Google Books Full Full Screen // @name Google Books Full Full Screen // @namespace books.google.com // @description Makes the Google Books Full Screen Toolbar Smaller // @include http://books.google.com/books?id=*v=onepage&q&f=true // ==/UserScript== function addStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style); } addStyle('div#toolbar_container{position:absolute;z-index:9999;background:url("/googlebooks/images/viewport_images-4.gif") no-repeat scroll 1px -24px #DAE3F6;width:25px;height:auto;padding:1px;margin:0 0 5px 0;overflow:hidden;border-bottom:1px solid #6B90DA;border-right:1px solid #6B90DA;}div#toolbar_container:hover{background-image:none;padding:1px;width:auto;height:auto;border-bottom:1px solid #6B90DA;background-color:#FCFCFF;}div#gb-top-search-box{display:none;}div#gbar{display:none;}div.gbh{display:none;}div#guser{display:none;}div#search_bar{display:none;}div#toolbar_container:hover div.top-toolbar-button{border:1px solid #FCFCFF;background-color:transparent;}div#toolbar_container:hover div.top-toolbar-button-checked{background-color:#DAE3F6;}div.top-toolbar-button{border:1px solid #6B90DA;background-color:transparent;}div.top-linkbar-button{display:none;}div.top-toolbar-separator{margin-left:7px;border-left:1px solid #6B90DA;}div#toolbar_container:hover div.top-toolbar-separator{border-left:1px solid #6B90DA;}div#toolbar_container table{margin-left:-9999px;}div#toolbar_container:hover table{margin-left:0;}'); addStyle('div#toolbar_container{-moz-transition:opacity 500ms ease-in-out 0ms, width 500ms ease-in-out 0ms, background-color 500ms ease-in-out 0ms;transition:opacity 500ms ease-in-out 0ms, width 500ms ease-in-out 0ms, background-color 500ms ease-in-out 0ms;}div#toolbar_container:hover{width:425px;}'); |
Currently, I have written it for the full-screen view, however, Google uses some JavaScript to toggle the full-screen/regular views without doing a full refresh of the page – but it’s passed in a variable in the URL – so currently the script will only load if you either start in full-screen mode, or hard refresh after you toggle it. Fortunately since they already have the JavaScript running I should be able to plug into that and make it work with my update. Also, it only works with single-page view-so I’ve hard coded the url for single page and not for double. If I ever get around to finishing it I’ll upload it to Userscripts. Here’s a couple of before/after pics:
Isn’t it amazing what you can do with just a little bit of CSS? The second function call calls the CSS3 Transitions, in case your browser doesn’t support them. If you want just the altered CSS for some other post-processor besides Scriptish or GreaseMonkey then here’s what I have so far:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/* MAIN TOOLBAR */ div#toolbar_container{ position:absolute; z-index:9999; background:url("/googlebooks/images/viewport_images-4.gif") no-repeat scroll 1px -24px #DAE3F6; width:25px; height:auto; padding:1px; margin:0 0 5px 0; overflow:hidden; border-bottom:1px solid #6B90DA; border-right:1px solid #6B90DA; } /* HOVER EFFECTS */ div#toolbar_container:hover{ background-image:none; padding:1px; width:auto; height:auto; border-bottom:1px solid #6B90DA; background-color:#FCFCFF; } div#toolbar_container:hover div.top-toolbar-button{ border:1px solid #FCFCFF; background-color:transparent; } div#toolbar_container:hover div.top-toolbar-button-checked{ background-color:#DAE3F6; } div#toolbar_container:hover div.top-toolbar-separator{ border-left:1px solid #6B90DA; } div#toolbar_container:hover table{ margin-left:0; } /* HIDES */ div#gb-top-search-box,div#gbar,div.gbh,div#guser,div#search_bar,div.top-linkbar-button{ display:none; } /* MISC. */ div#toolbar_container table{ margin-left:-9999px; } div.top-toolbar-separator{ margin-left:7px; border-left:1px solid #6B90DA; } div.top-toolbar-button{ border:1px solid #6B90DA; background-color:transparent; } /* CSS3 TRANSITIONS */ div#toolbar_container{ -moz-transition:opacity 500ms ease-in-out 0ms,width 500ms ease-in-out 0ms,background-color 500ms ease-in-out 0ms; -o-transition:opacity 500ms ease-in-out 0ms,width 500ms ease-in-out 0ms,background-color 500ms ease-in-out 0ms; -webkit-transition:opacity 500ms ease-in-out 0ms,width 500ms ease-in-out 0ms,background-color 500ms ease-in-out 0ms; transition:opacity 500ms ease-in-out 0ms,width 500ms ease-in-out 0ms,background-color 500ms ease-in-out 0ms; } div#toolbar_container:hover{ width:425px; } |
Oh, a couple of last notes – the arrow used comes from the same CSS sprite as the rest of the images, so it’s very useful in that regard – no extra pictures. The book is The Samoan Story of Creation from Forgotten Books.
CSS
Respect to post author, some good information .
Jay
Hi Danny,
I LOVE the idea behind this script!
I’ve installed Scriptish onto FF4, created a new script with ID “test” and with title, “Fuller Screen for Google Books”, then I specified my script editor, and pasted your 20 lines of script into the file that was created for me by Scriptish. Saved that and…. nothing. Not even after rebooting FF.
Do you have any idea where I went wrong? I have very little to no experience with Greasemonkey and/or Scriptish. And I’m not even sure if I need to “activate” your script somehow (I tried pressing F11 for full screen view).
Can you advise me as to how I can experience your cool work?
Cheers,
Jay
Danny Wahl
Jay,
I just reinstalled FF4 final with a new profile and it does work. here’s the procedure (now that you’ve got the script installed properly)
Go to read a book and when it loads with all of google’s frames click the ‘full screen’ button on the google toolbar – not your browser. The button is a rectangle with 4 arrows pointing toward the corners from the center. then you’ll be in the default ‘full screen’ view that Google provides. then click refresh on your browser and you’ll be in my new full screen. Again – it’s not your browser’s full screen view – it’s the google full screen view.
Let me know if that helps.
–Danny
Jeff King
Thank you so much for this script. It’s “almost” perfect for my needs. One question though. Is there a simple way of keeping the toolbar visible all the time? The one that expands when I hover the arrow is the one I’m talking about. Please keep in mind that I’m a total noob with scripts. Thanks again!
Danny Wahl
Sure,
Just remove this part from the very last rule “:hover” – that will change the width to 425px all the time instead of only when hovered.
Jeff King
Many thanks, Danny. I had to remove several “:hover”s (about 3 or 4) before I got what I wanted, but it works like a charm now. Thanks!!
Jeff King
Hi again, Danny,
Your script was working great for me until Google changed their layout for Google books. Now, even using your script and using F11 for true full screen, the upper 25% of the screen is white space and won’t go away. Any chance for an update of your script to get around the new layout?
Thanks,
Jeff King
tanic
Thank you guys! I just pasted your code on the chrome javascript console and it worked!!!