Firefox and greasemonkey are two things that everybody in the Internet loves. I have already given you a start on greasemonkey, and also a few other sample codes, to play with the greasemonkey.

Today, i have another greasemonkey script to give you - a script that will fill up your email or user name in a form or a page. It is up to the user to identify new pages and new fields, and customize the code for the same. If you find a utility and need help to code, ask the coder.

You may need help on how to get started with the greasemonkey, or to see some sample greasemonkey code for google search.

If you are an intermediate or expert programmer, you can skip the above. You can download greasemonkey from the download page.

Lets get started with the task. We have seen google tool bar doing a auto fill, but the problem is you cannot have multiple email ids and does not customizable fields. greasemonkey to the rescue.

Lets code the first part by filling up the user name in google.com home page.

var url = “” + document.location;

var gmail_id = your_gmail_id_goes_here ;

// gmail or orkut or blogger..
if ( url.match (”www.google.com”) != null )
{
document.getElementById (”Email”).value = gmail_id;
document.getElementById (”Passwd”).focus();
}

First we get the url of the page(obtained as document.location) as a string, in a variable (url).

The match method in javascript searches for the presence of a string and returns a portion of the string. Hence the method will return null if the string is not found.

Next we get the specific field names by using the firebug tool. It must take only seconds to do so.

We fill in the email id field and also set focus in the password field for easy access.

This feature may not be useful if you are using “remember my password” in firefox.

Similarly you can use the same code, a bit optimized of course, in other websites also.

// yahoo

var yahoo_id = your_yahoo_id_goes_here ;

if ( url.match (”login.yahoo.com”) != null )
{
//alert (’Welcome to yahoo..’);
document.getElementById (’username’).value = yahoo_id ;
document.getElementById (’passwd’).focus();
}

// blogger
if (url.match ( “blogger.com “) != null)
{
//alert (’welcome to blogger’);
document.getElementById (’f-username’).value = gmail_id;
document.getElementById (’f-password’).focus();
}

Feel free to expand this feature and use it as you like in your websites. I also wrote another script, which will fill up your email, name , and website, making it easy for you to comment in websites running wordpress. I ll post the same later.

Getting hold of objects in Javascript via methods is quite easy, only when the objects are given proper attributes. Here is a small guide, which you might want to take a look at, before writing some javascript code.

First take a look at elements and proper naming of attributes, and then follow it with a standard list of methods.

1. When using a input tag or element in your page, it is better you put it inside a form tag.

<input type = “text” name = “username”>

will suffice if you want to get the value of the username in the next page. But it is very good practice, to use a id attribute the same as the name. Also, though not required, it is better you close the input tag (a standard in xhtml).

<form id = “loginForm” name = “loginForm” method = “post” action = “process.php”>
<INPUT TYPE=”text” NAME=”username” id = “username” size = “20″ maxlength = “15″/>
</form>

1. Use a form tag and put all your input fields inside.

2. Give a name and a id to your form, and let both be same, as far as possible.

3. Give a end tag to your input tag.

4. Use size and maxlength properties in your text boxes.

5. Put your form inside a div, and use a id and a name for your div also.

Now let us take a look at the actual methods.

1. getElementById (’theIdNameGoesHere’) - This method will return a node of the item, which has the id specified in the input parameter. This is the most used and convenient way to access a node. It can be used only when the id attribute is specified. Hence if you are using a script on your page, make sure all your elements are given proper id attribute.

var myForm = document.getElementById (’loginForm’);

2. getElementsByTagName (’tagName’) - This method is usually used, when the the id attribute is not specified. Assume there is a form tag in the code, but it does not hold a id attribute, you may use this function. Remember that this function returns a array of objects or nodes. It is the developer’s responsibility to get hold of the appropriate object int he array.

var myFormArray = document.getElementsByTagName (’form’);
var myForm = myFormArray (0);

3. getElementsByClassName (className) - Notice the s in the elements. This function returns all elements with the class name specified as the input. This may not be considered a standard function, but mozilla project uses a lot of this function in many places in the firefox code. As again, this object returns a object.

All these functions can be called upon the document element, which is the root element as well as any other element. Here is an example. We have the form object by means of the getElementById (’loginForm’) method, now we can get the inout box inside by

var inputBox = myForm.getElementsByTagName (’input’);

Any questions or need more help, ask coder at codeinsane.com

Playing with pictures is always fun and these days, most pictures lead to one another page. Setting a highlight focus on a event just adds more to your web2.0 site. After all designing web pages is a art which requires both creativity and technique.

Take a look at this small window below. [image focus on select example - popout]

How is this done?

You might be surprised to see that the total frame includes under 40 lines of code and this change is made via a inline javascript call and good old CSS. Lets put each picture in a div (remember that this is a good practice ) and change the property of each div on mouseover and mouseout. We will initialize the divs to be dark, by means of assignment and further change them via javascript.

Take a look at the code below. Snippet 1 shows the CSS.

<style type=”text/css”>
div.dark {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;}

div.light {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
</style>

Snippet two here shows how to call each of the classes, using javascript.

<TD><div class = “dark” onMouseOver = “this.className = ‘light’” onmouseout = “this.className = ‘dark’”> <img src=”ronaldo.jpg”></DIV></TD>

Image and idea coutesy - manutd.com

The css property of - moz-opacity is for older versions of firefox and is not required for firefox 2.0 (source)

The other property of opacity is for bad and old “internet explorer”. The basic idea is to control the opacity property, and change it on an event.

Tip : Set the background color of the page to black (you can use bgcolor = “#000000″) to make this effect pronounced.

Got struck here? Tip 2 : Use the class property to associate a class to a div, and use className property to set it using javascript.
Still need help : mail me at coder@codeinsane.com

I had written about how to get started with a greasemonkey. It was a simple small script on how to change the google logo with your font. It showed you how to install greasemonkey and write your first script. This is possibly a second DO IT YOURSELF (DIY), which will play more with google search, obviously with the greasemonkey.

1. Install greasemonkey, you may see it in the download list of this website. Additionally you may take help from the post, which should have been called - getting started with greasemonkey.

2. Assuming that you are ready to code in top gear, i am starting off with the include patterns for this script.Without doubt, google is (one of) the best search engine(s). I must consider myself silly if i am telling you the google url. But just in case you noted this, the google search engine result page is http://google.com/search?q=your%20search%keyword.

// ==UserScript==
// @name googleNewtab
// @description Opens google search result in new tab
// @include *google.com/search*
// ==/UserScript==

You should have noticed that the search is the context and q is a part of query string (the one that follows a ‘?’. Actually q is the name of the search box.) . The last three words makes up your search keyword(literally!). So your include pattern can read something like http://*google.com/search*

You could have noticed that the first * is for the www, which i prefer to omit. The second * in the expression indicates that any other string could follow.

3. Lets get our hands dirty, just in case you do not have firebug, i feel you must get it before writing a greasemonkey. Firebug to a developer is like a knife to a chef.

4. First lets remove the ads in the page. how to remove google ads in google search?You must use firebug to detect the ads.

Here is a snippet of code, which will remove adsense from google search result page.

var ads = document.getElementById (’mbEnd’);if (ads){ads.parentNode.removeChild (ads);}         

Similarly, you can remove the ads in the sidebar, using a similar script.

var spons = document.getElementById (’tads’);if (spons){spons.parentNode.removeChild (spons);}  

There are three things that a developer must notice here.
1. Always try to use getElementById, rather than other choices like getElementsByTagName or getElementByClass. This would require the element to be present in a div or as a table.

2. Check for the object reference before taking an action. (The if block serves this good)

3. Use parent node to delete a node. Imagine this in lay man terms. You can drop a bedroom from a house, a house from a street. Always use parent node to perform actions on nodes.Looks like a little more code can add some fun. Try adding a link to every search result, which will open in the next tab. (You can do this with a right click -> open in new tab or with the help of ctrl + click)

Download the full script - google new tab greasemonkey script

A few more ideas:

1. Try listing the search results with numbers.

2. Omit duplicate results, you can do this by removing the duplicate results (these are indented, like the one in the image above.)

3. You can get the website logo and prefix it before the link.

4. You can display the pagerank for every link. (This may help you see what page rank is required to top the search results) .If you have your own code or just an idea (i like this) , i would appreciate if you can let us know.

Warning : FIREFOX 3, BETA 1 is for developers only and should be used for testing only. Firefox three is not officially launched. You got to wait some more time, before we developers fix the bugs in this build. Unless you are sure, do not download this version of firefox. (I am not linking now..)

I am a voracious firefox user, and i am really excited to see a new release of the firefox. Firefox 3, beta 1 is released, and it looks pretty cool. I did spend some time in looking through the nightly builds of the firefox 3, and i tried to participate in development of firefox, but you always know - time is a big constraint.

Any way, lets see, what has firefox 3, got to offer to its users. Before i get started, you must understand that its been a year since firefox 2 released and it was then already too good. So, not much can be improved. Still i feel something has been done.

1. The startup time seems to be better than before. This is the only drawback this browser precesses, in comparison to the other standard non-compliant browser.

2. This one would have been a pretty good news, had it been done a couple of years ago. Firefox 3 seems to occupy less memory than before. But with memory almost no longer a constraint, this is trivial. Anyway an improvement is a improvement. An open firefox window with four tabs loaded (google.com) shows lesser memory compared to its counterpart.

3. The address bar comes in with a handy bookmarking tool and will enable users to bookmark in one touch. Extremely similar to the bookmark star, present in the google bookmarks.

4. There is a new easy navigation menu in the bookmarks toolbar, and it may come extremely handy listing the recently opened pages to the most visited pages.

5. The options menu seems to have shrunk a bit. (i see lesser options in safari though) . There is a new application tab in the options menu, which will let users choose how firefox will handle different file types like a pdf doc for instance.

6. You might have used session restore addon to restore your existing tabs. This is now a inbuilt feature of firefox3. When you are done browsing for the day, do not close your tabs. Just close firefox and click on save and quit. This will store your current sessions and will restore the same when reopening firefox.

I have not used firefox 3 for more than an hour, at this moment, but i am really excited. You may have problems in using your old add-ons. It is not a tough task. I ll have another post on this.

Spread firefox - Don’t hurt the web. Leave it open Source.

Most input text boxes take in only standard parameters, like type, name, id, size. most people forget that the size attribute is different from the maxlength property. When size is specified, the length of the text is not limited, but only the size of the box. In order to specify the length of data, you may need to specify the maxlength property. Lets deal it in real time with a example. Try entering your name or email address in the text boxes.

The text box below is built using the code <input size=”25″ type=”text” />

The text box below is built using the code <input size=”25″ maxlength=”5″ type=”text” />

You could have noticed that you cannot enter more than five characters in the second box. You should use maxlength attribute, where you know the length of data before hand, for instance, telephone number. But there are more than these fields, when you are supposed to use this feature, Read on for more.

Assume a normal user and password form, where the form data is submitted to another page in the server using the form action attribute. The full code is shown here.

<HTML>
<BODY>
Please enter your user name and password,
and click on submit.
<FORM METHOD=POST ACTION=”Authenticate.php”>
<TABLE>
<TR>
<TD>UserName </TD>
<TD><INPUT TYPE=”text” NAME=”username”></TD>
</TR>
<TR>
<TD>Password </TD>
<TD><INPUT TYPE=”password” NAME=”password”></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT TYPE=”submit”></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Just a few routine things about this page1. The method is post, because it involves a password.

2. I have used a table, so that i do not have to take care of alignment. using tables in normal HTML pages is no longer welcome. You must use a <div> and use CSS to control the alignment.

In the above form, the user is not limited to any sort of data length in the username field and lets see how this can be exploited.

Please enter your user name and password,
and click on submit.

The following server page may use a normal PHP get method to get the user name and display the same along with a welcome. Like the code as shown below.

<h1> Hi <?php echo $_REQUEST [’username’] ?>,</h1>

Now whatever the user enters in the username field is output as such in the server page. Gear on..

Whats if the user enters the following value? Please enter your user name and password,
and click on submit.

This could effectively mean passing code to be executed on your server, that primarily depends on how your authentication process works. It is more notable that server side component code like <?php // some code ?> can also be embedded inside a script tag. The next posts details on how to restrict the user from playing with your server code.

I have been asked my more than one of my friends about improving alexa ranks. I do not a rank i can boast about, but still its not bad too.

Anyway, on the job, alexa is one more of a measuring factor, in the lines of pagerank and technorati rankings. It is really a head ache to manage one more rating system, but this one is easy. Alexa updates its ratings very often and so you can really see results on the move.

1. Download the alexa toolbar. Good news is that there is one for firefox too. But let it trouble you by its presence. You can hide the menu from the toolbar and the graph from the status bar, so that only the rank stays alive. I suggest you to leave this open, beacuse you can also use this is a phishing measure.

Assume, you get a mail from paypal (or atleast you thought so, it was from paypal) when you open the new link, the alexa ranking of the site is not going to a three digit number. So you get that the site is a fake one.

2. Alexa redirect really works wonders. (it did do really well for me). I would not suggest this to everyone, beacuse it has got its other sides. The trick is to use a link as a redirect, look below for more. You have to use the second link, instead of the first in all your links in the pages. You may benefit, if user clicks many times in your site. You should put redirect before archieves , top posts, and almost everything.

<a href=”http://yourblog.blogspot.com”> new post </a>

<a href=”http://redirect.alexa.com/redirect?http://yourblog.blogspot.com”> some link</a>

Warning : This does improve your alexa ranking, but may have other side effects from google bot. When the bot crawls your page, it sees the link is to the alexa page and not your own site. Remember your side is passed as a parameter to the alexa redirect site. I strongly suggest to investigate, before using alexa redirect. Hence the bot may fail to see your internal links and may not cache them. Even if it caches them, they are not tagged to your site. Here is a small guide to make things better.

3. Download the alexa gadget. this stats your rank and other details of your alexa ranking. The best thing about this widget is that alexa promises that a alexa count is made every time a user (you included ) clicks on this widget. This works on a 24 basis.

4. If you have a website, you must also submit your details to alexa. This would need a email with the same name as the website. Blogspot users cannot do this.

Hope this helps. If you can benefit by improving your alexa rank, please do let me know at least by a comment. I would greatly appreciate if you can link this article in your blog.

Just thought i must add this to this post. How does alexa redirect to your page, when passed a web page as a parameter.

There are two methods to do this on the client side. There is one more on the server side.

In JSP:

The request Dispatcher object takes a resource as a parameter and can be used to include or forward the control to this resource. However this is a server side opertaion. User will not be aware of this.

RequestDispatcher rd = response.getRequestDispatcher (”http://codeinsane.com”) ;
rd.forward (req, res) ;

The client side redirect works like as shown below.

response.sendRedirect (”http://codeinsane.com”) ;

The client is aware of this redirect, when used as in the above case. There is also another method, which involves setting of the header and sending it back tot he client.

response.setStatus(HttpServletResponse.SC_TEMPORARY_REDIRECT);
response.setHeader(”Location”, “http://codeinsane.com”);

There are similar response redirects in PHP, which can be achieved as

<?php
header( ‘Location: http://codeinsane.com’ ) ;
?>

Of the rich user interface websites you have seen, you could hardly have managed to see a normal button.

Just a small round about on html buttons, there are three buttons.

1. Submit <input type = “SUBMIT”> : This is a standard button, you might see, when you find forms. This is a button, on clicking which the form is submitted naturally. NO javascript required. The text on the submit button can be controlled by the value attribute. However, with a rich user experience styled web page, the color and style of the button still remains awkward.

2. Reset <input type = “RESET”>
; : This button is used only on the client side and can be used to set all input fields in the form to its default value. Again the text on the button is controlled by the value attribute. Similar to the submit button, this again cannot have its style tuned.

3. Button <input type = “BUTTON”> : This is another and less used input field, which is primarily used to javascript functions. Alternatively you may also use this as a submit button by using on the onclick attribute. Below is a small example on how to use buttons.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> HTML button usage </TITLE>
<script language = “javascript”>
function validate()
{
var query = document.getElementById (”q”).value;
if (query)
{
document.forms[0].submit();
}else
{
alert (’Enter query string and click on search’);
}
}
</script>
</HEAD>
<BODY>
<FORM action = “http://google.com/search” METHOD = “GET”>
<INPUT TYPE=”text” id=”q” NAME = “q”>
<INPUT TYPE=”button” onClick = “validate()” value = “search”>
</FORM>
</BODY>
</HTML>

You can see how the above code works below.

It was ‘C’, then C++, then java, then perl and many more…

Technology gets better day by day, and today i ll get you started with python in five minutes.

• Python is a very high level language.
• Programmers, who have used c, c++ or java can smell the familiarity, while appreciating the ease of coding.
• Python can also be used as a object oriented notation.
• Python is a interpreted language. (each line is read at runtime)
• Python is extensible from other languages and also to other languages.
• The code looks simple and less complex, compared to other base technologies. For instance, there is no open curly brace and close curly brace, defining a block, but a tab would do.
• Python can be used with GUI too.
• In my opinion, python coders can use data structures effectively for design and implementation, than in any other language.

Downloads Required :

python download (available for windows, mac and unix)

A must see full python tutorial, by which i am influenced.., Here is a moment to say thanks.

Why python?

It is a high level language and you cannot just keep going on with C and C++, for the whole of your life. A more convincing reason - google search is coded in python, and so are so many other google products.

Lets get started. (I assume you have downloaded python and put the IDLE shortcut on your desktop)

You must add the python directory to your class path. In windows, you right click My computer -> Properties -> (Advanced Tab) -> System Variables ->

Add or edit variable “path” to append your python directory path.

Or simply in DOS (requires restart of DOS)

set path=%path%;C:python24

Lets get started with the code..

Resisting the temptation to print a “hello world” , which you can achieve by just saying “hello world” (enclosed in double quotes or in single quotes) and pressing the return key (I told you, its simple), we ll write a function to print the Fibonacci series up to n.

def fib(n):
     a, b = 0, 1
     while b < n:
           a, b = b, a+b
           print b,

>>> fib (10)
1 1 2 3 5 8
>>> fib (100)
1 1 2 3 5 8 13 21 34 55 89
>>>

Things to notice:

1. This must go first actually, the code looks simpler and less complex than c or java.

2. The >>> is the prompt, which you can change like in unix or solaris.

3. The def command declared a function, by getting its signature and there are no irritating return types or even data types for that matter.

4. The tab after the first line specifies that, all code inside it, are enclosed in a block. The same holds good, when we implement the while loop.

5. After the while command, i did not specify any braces to enclose the condition. Python is more intelligent to know it by itself. The return type need not be a boolean (actually there is no boolean).

6. I did not compile or do any thing to the program and it got execute fine.

7. The print command spits the value of the variable to the screen and a return feed (”\n” in java). The comma that follows it, overrides it to maintain the output in the same line.

Lets take up another small program, Lets print the first ‘n’ fibonacci numbers.

Python like most languages is a ocean. There is plenty to learn and implement. Hope this guide gets you started.. Happy programming.

Many a times, you have too many pictures and so small space in your blog. This is so often seen, even in a news article. You do not want users scroll to see all your pictures, do you?

Here is a solution. Well, the solution has been there for quite some time, i did not see the source yet, so i built it tonight. You are free to use, if possible, please do give us a link. (P.S. If you know me personally, i can even host your image.)

What do we have here? Two panels - one showing links and the other a picture bucket.

I know people can be so lazy to even click, yours truly is a living example for that. So, we have made it in to a onmouseover. So, you have to just place your mouse over each link to open up the image in the picture bucket near by. We use javascript for this.

On the OnMouseOver call, we send the file name to the script. The path is already present in the script. (This is a good coding style, you always have to send minimum parameters to the function.)

Just move your mouse over each name to see a pic on the right frame.

Image sources :wikipedia

Here is the actual code:

This makes up for the image bucket on the right.

<div id = “total_container” width = “450″ style = “max-width:450px;”>
<div id = “the_pic_div” width = “200″ height = “200″ style = “float:right;”>
<img src=”http://codeinsane.com/pics/Kobe_Bryant.jpg” id = “the_pic_frame” width = “200″ height = “190″ >
</div>

And this makes up for the links, though i am not showing the styles here.

<div id = “the_image_links” style = “float:left;”>
<ul>
<li><a href=”#” OnMouseOver = “setImage (’Kobe_Bryant.jpg’)”>Kobe Bryant</a></li>
<li><a href=”#” OnMouseOver = “setImage (’David_Beckham.jpg’)”>David beckham</a></li>
<li><a href=”#” OnMouseOver = “setImage (’Maurice_Greene.jpg’)”>Maurice greene</a></li>
<li><a href=”#” OnMouseOver = “setImage (’David_Ortiz.JPG’)”>David Ortiz</a></li>
<li><a href=”#” OnMouseOver = “setImage (’Eminem_rapper.JPG’)”>Marshall Mathers</a></li>
<li><a href=”#” OnMouseOver = “setImage (’alexander.jpg’)”>Alexander</a></li>
</ul>
</div>

And this small script makes up the rotation portion. You may like to have it in the same file, coz it is just a few lines of code.

<script language = “javascript”>
var url = “http://codeinsane.com/pics/”
function setImage (img_name)
{
//alert (”img_name :” + img_name);
var full_path = url + img_name;
var bucket = document.getElementById (’the_pic_frame’);
//alert (full_path);
bucket.src = full_path;
}
</script>

Hope, you have a nice show with your pictures, As always, need some help, ask the sane coder.