theKindOfMe

January 17, 2009

Simple UI for Google Search with Greasemonkey and jQuery

Filed under: Uncategorized — Tags: , , — yasi8h @ 12:10 pm
niceme gm script screenshot 1

'simple google' gm script screenshot 1

niceme screenshot 2

'simple google' gm script screenshot 2

we all agree that most of the google web apps our there are simple. i love simple things too. in fact i am a firm ‘believer’ of the KISS philosophy. any ways getting in to the subject. google search have been very simple so far. and it still is very much simple. but i feel at times that it could be much more simpler that it is. i don’t need it’s menu bar, and i don’t want to see all those other links it have on its page…etc so with my new found love jQuery, i thought of making it a bit more simpler. i just removed(set style to display : none; so its there, but its hidden from the user’s view) all most every thing other than the google logo and the text box in the page from the users view. it was pretty straight forward actually. here the code.

// ==UserScript==
// @name           simplegoogle
// @namespace      thekindofme
// @include        http://www.google.lk/
// @include    http://www.google.lk/webhp*

// ==/UserScript==

//hide the whole document till GM runs letsJQuery()
document.body.style.display = "none";

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://code.jquery.com/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') {window.setTimeout(GM_wait,100);}
        else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        $("body > div").hide();
        $("center > *").hide();
        $("center > div > div").hide();
        $("center > div").show().css("margin-top", "20px"); //the google logo

        $("center > form").show();
        $("center > form > table > tbody > tr > td").hide();
        $("center > form > table > tbody > tr > td:eq(1)").show();
        $("center > form > table > tbody > tr > td:eq(1) > input").hide();
       
        var searchTextBox = $("center > form > table > tbody > tr > td:eq(1) > input:eq(1)").css("padding", "2px 6px 4px 6px").css("color", "#555555").css("background-color", "#E2FFE4").css("border", "#dddddd 2px solid").css("-moz-border-radius", "10px").css("margin-top", "15px");
        $("body").show();

        arrangesearchTextBoxLayout(searchTextBox);

        $(window).resize(function(){
            arrangesearchTextBoxLayout(searchTextBox);
            });

        searchTextBox.show().focus();
    }

    function arrangesearchTextBoxLayout(searchTextBox){
        searchTextBox.css("width", ($(window).width() /2)).css("font-size",($(window).height() /22) + "px");

    }

keep it simple stupid 🙂

Advertisements

4 Comments »

  1. I never thought Google could get more simpler 🙂 Anyway cool work!

    Comment by Lakshan — January 17, 2009 @ 1:01 pm

  2. What about removing the logo too? 😀

    Comment by Chanux — January 17, 2009 @ 2:22 pm

  3. @lackshan 😀 i know. even i didn’t think so until last Friday 😛

    @chanux thats how it was at first! 🙂 but later on i thought to leave it. anyways i have to try it out again. it might be better to hide it as well 🙂
    (btw removing the 30th line of the above code snippet would hide the google logo)

    Comment by yasi8h — January 17, 2009 @ 3:42 pm

  4. hello
    i’m so happy that i saw this page. that posting was so helpful. thanks again i bookmarked this article.
    are you planning to write similar news?

    Comment by Gewinnspiele — May 16, 2010 @ 10:18 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: