TechTalks from Nitin

GMScript: Small bubbles of information triggered by double-clicking any word

TheOne — Sat, 29 Sep 2007 18:14:56 +0000

Friends,

While visiting various sites i usually come around this problem. When I don’t know meaning of any word i have to open dictionay.com and than search for it.

So, to get a solution of this is came with a GreaseMonkey Script, which opens information bubble on double-clicking on any word in the page.

Example is shown in screenshot below: The meaning of “Slumped” is shown in a small bubble.

How to install this ?? here is the step by step guide to do so :

Install greasemonkey extension for firefox if you have not already done so.
Go to http://userscripts.org/scripts/show/12637 and click on the “Install this Script” link on the right side

NOTE: This script uses services from answers.com. So all the credits are to them.

Moo.fx: Guide to use it with prototype (part 2)

TheOne — Sat, 08 Sep 2007 16:17:16 +0000

Continuing with me last blog about accordion, here is another code example to use moo.fx V2.0 for changing style.

So lets start……

Just see the following lines of code to change left style property of any DOM element.

var leftdec = new Fx.Style(“panel2″,”left”,{duration:1000});
var d = $(‘panel2′);
leftdec.custom(parseInt(d.style.left), (parseInt(d.style.left) – 105));

Here Fx.Style(“panel2″,”left”,{duration:1000}); is everything. “panel2″ is the id of the DOM element. “left” is the property, and last argument of the constructor is optional properties.

Now it is the last line to change the “left” property. All we have to do is:

leftdec.custom(parseInt(d.style.left), (parseInt(d.style.left) – 105));

Here leftdec is the object we created.

custom is the function which requires two arguments, first is the property “FROM” and second is property “TO”. In this particular example i wanted to change left property current-105 so what is did is (parseInt(d.style.left) – 105).

Isn’t it really easy.

Javascript Effects Library: moo.fx

TheOne — Sat, 08 Sep 2007 16:16:14 +0000

Recently i was very much attracted toward moo.fx library. For my website I was previously using scriptaculous, but because of the size problem i decided to move toward moo.fx. The size of moo.fx library is really pretty low(its just around 3kb).
As a matter of fact i would like to tell u that i just wanted to use moo.fx over prototype, i didn’t wanted to use mootools. Actually initially when the development of moo.fx started it was just built on top of prototype.js, but later on they moved to make mootools as underlying library in place of prototype.
During my study i couldn’t find any good article on web which can give me some example to use just moo.fx. The documentation available on http://docs.mootools.net is using mootools library. Other resources available on internet are using some older version of moo.fx. So i finally thought that it would be better it i write something which can be used directly to use moo.fx library.

I don’t believe in talking about code, its always better to understand code as it is.
The first example is to make an Accordion.

At first include the files in section

Write following code in section.

History

The first suggestion that all organisms may have had a common ancestor and diverged
Venus physique.

Evidence of universal common descent

Common biochemistry and genetic code

All known forms of life are based on the same fundamental biochemical organisation:
common descent. Analysis of the small differences in the genetic code has also
provided support for.

Examples of common descent

Artificial selection

Artificial selection offers remarkable examples of the amount of diversity that can
selection, like the ones below, occurred without the guidance of modern scientific
insight.

Now come the actual catch: Copy this code in last of body section.

I think this would help you in creating accordion using moo.fx.

Wait for next blog, to use moo.fx in changing styles.

Page Layout or

TheOne — Sun, 26 Aug 2007 08:50:11 +0000

So, here i am with my first techtalk.

Today’s question is whether a webdesigner should use tables or div(layers).

Every web designer comes to this question, and it becomes harder to decide. Here I am with some of the points which will definetely help you in deciding layout strategy for your site.

1. My personal experience says it is easier to MAINTAIN or REDESIGN a website with a div(layers) only site in long run.

2. Separation of Structure and Content via CSS i.e., div(layers) makes things more organized.

3. Tables are only meant for tabular data, they are not meant for Page Layout.

4. It is a proven fact that CSS layout is always smaller(in size) than to
tags. Hence smaller page size.
5. Its more a question of convenience. With Div tags and CSS, you can write the CSS once and then never worry about the styling of your site again, and then spend your time entirely on content. With tables, you have to redo things every time content changes significantly(in certain ways). In this way CSS is much more efficient.
This was all about study now comes the final verdict.
K.i.S.S. is more important than table or divs. So remember just KISS.
K.i.S.S. = Keep It Simple Stupid
Moreover, I would recommend tables for sites with little content and/or few changes.
Divs(Layers) are recommended to use for DHTML and lots of ‘active’(web 2.0 sites) content that needs to be hidden and shown depending on users actions.
I Hope this will help you in deciding the layout for your site.

Its just a Start

TheOne — Sat, 25 Aug 2007 19:30:05 +0000

I know now a days its really very easy to start your personal blog, but i don’t know why I till now haven’t started one. Since many months I was thinking of starting of my own blog, but because of one reason or other couldn’t start.

Till now I am not very clear, what should be the domain of my blog. I have several domains in mind, lets see on which i finally decide:

Javascript / CSS / Ajax

moo.fx library

general software information

Software news

Internet development

This is all for now. I’ll try to maintain a regularity in writing blogs.