Scrolling div with Javascript

March 5, 2007

You can scroll div with javascript. You need to have one mainContainer which will contain the child for it. eg.

I will have mainArea div with child div myReport.

<div id=”mainArea”>
<div id=”myReport”>


You need to fixed the height for the mainArea div with style

<div id=”mainArea” style=”height:400px;overflow:auto”>
<div id=”myReport”>


Now your div can scroll, You now need to write one line code in any javascript function

function scrollMainArea()
document.getElementById(“mainArea”).scrollTop = 0;

This will move your myReport div to show the top portion of your division.

I am using this codes in my chat application to scroll the messages automatically.


PHP base Chat Application is Up and running

February 28, 2007

I am very excited today, I have finally my chat app ready and working. I have shown my application to all my collegues they throughly enjoyed it.

Soon I will be writing the article about the entire development of this chat application.

PHP and Power of Javascript make this application possible for me. UI is not that good, the application is about functionality. I will work on UI someday Later.

I have created three user for the test.

user:tom, password:tom
user:dick, password:dick
user:harry, password:harry

After logging inside you will find a list of User on the left panel, click on the user and start sending messages to them.

So lets have a real feel of the application. Click here to start

Framework with more features and real usage

February 12, 2007

Months ago when I heard of the term framework which generate Add/Mod/Del functionality, I was quite surprise and realize that how helpful it could be. It will save a lot of hours I spend on the most part, increase efficiency and will be bug free :). After trying with some framework, I found it does the right job but not with style I write the code. Its interanal are too difficult to understand and modifying such code eats up more time than I ever expected. I thought Its better idea to go the way I/we code. Later after thinking for some time on the right concept, its clear many thing and I realizes building framework is not a tough job. In my earlier post I already talked about when I started with it. This time I develop more better version of code.

I used pear DB class for database and Smarty for templating as most of the PHP developers are using it.

What features my frameworks offer this time?

-Generate Class file based on the table Structure.
-Generate Templates for AddUpdate as well as for Listing the records.
-Sorting on the each column field.
-Server Validation for Unique values.
-Javascript validation for Blank Values currently.
-Generate JS map which we can use for further validation.
-Complete Add/Modify/Delete.
-Debug options which allow development message enable disable.
-Generate Links based on the class available.
-Search on the table field

New Features I will be adding this month
-Basic Ajax Functionality

Framework is flexible enough to add new functinality in code. Even this framework has ability to generate Coldfusion, ASP as well as Java code.

I soon will be submitting it to and host it for the developers to take a look about what I am talking.


ExternalInterface to Make your flex methods Callable via HTML/Javascript

December 15, 2006

Its greate Experience working with addCallBack method and finally I got it working. I tried various ways. First I simply register the method in flex using addCallBack function but I didnt succeeded. After looking through live docs and reading more about it I come know swf initiates the and talks with browser that swf is ready to accept the call from HTML pages. How did I achieve this?

Here is my Mxml code

MXML Application:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”; layout=”absolute” creationComplete=”initApp();”>

import flash.external.*;
import mx.controls.Alert;
public var readyTimer:Timer;
public var javascriptMethodCounter:int = 0;

public function initApp():void
if (isContainerReady())
// If the container is ready, register the SWF’s functions.
/* If the container is not ready, set up a Timer to call the
container at 100ms intervals. Once the container responds that
it’s ready, the timer will be stopped. */
readyTimer = new Timer(100);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);

public function showAlert(message:String):void
javascriptCounterText.text = javascriptMethodCounter + ” times javascript function called “;
javascriptMessageLogger.text = message;

public function timerHandler():void
if (isContainerReady())
// If the container is ready, register the SWF’s functions.

//setup the callback function so that HTML can call flex methods
public function setUpCall():void

//Checks wheather HTML page is loaded or not.
private function isContainerReady():Boolean
var result:Boolean =“isReady”);“Result :”+result)
return result;
<mx:Panel x=”10″ y=”10″ width=”386″ height=”200″ layout=”absolute”>
<mx:TextArea x=”10″ y=”36″ width=”346″ height=”114″ id=”javascriptMessageLogger”/>
<mx:Label x=”10″ y=”10″ text=”times javascript function called” width=”260″



Above code comprises of following method :

initApp : This methods will get call on the creationComplete of an event. This checks wheather swf is ready for

to accept call from HTML/javascript or not.

isContainerReady: this simply call one javascript function which returns boolean value.

timerHandler: after calling isContainerReady function if result if false, we register a timer which gets call

every 100ms to register the swf communication. When successful timer get stoped and call setUpCall method.

setUpCall: Simply registers the Flex method with ExternalInterface addCallBack method.

showAlert: This is the method which we are registered to be callable via HTML

Controls :

javascriptMessageLogger : Displays the message passed via javascript method

javascriptCounterText: Shows the number of times methods get called from javascript.

HTML code:

<script language=”javascript”>
var interfaceObj;

function callFlexMethod()

interfaceObj = window[“ExternalInterface1”];
interfaceObj = document[“ExternalInterface1”];

// ——- Private vars ——-
var jsReady = false;

// ——- functions called by ActionScript ——-
// called to check if the page has initialized and JavaScript is available
function isReady() {
return jsReady;

// called by the onload event of the <body> tag
function pageInit() {
// Record that JavaScript is ready to go.
jsReady = true;


isReady : Simply returns the state of jsReady variable

pageInit: this method get called on onload event of page. This function makes jsReady true and get the copy of swf object into interfaceObj variable

callFlexMethod: Determines the browser type and get the proper object out of it

Form Element:

Enter Text : <input type=”text” id=”myText”><input type=”button” value=”Send to Flex” onclick=”interfaceObj.showAlert(document.getElementById(‘myText’).value);”>

myText: This is where we enter the message we want to passed to flex method.

Button : Onclick of button showAlert method of flex application get call with value from textInput.

I was able to successfully makes flex methods available to javascript and call it from javascript. One more thing it should be run from webserver.

Screenshot for the javascript flex communication for the above application

“for in” loop to print object properties with Javascript/Actionscript

December 14, 2006

Do you want to know object properties of any object? Its very easy listing all the properties and values with javascript/actionscript using “for in” looping structure.

Lets see how.


for(prop in object)


Above structure shows how to apply “for in” structure on object.

How it works?
-Its start collecting all properties name to the left side variable (prop) with in the bracket.


<script language=”Javascript”>
var obj = new Object(); //Create new object
obj[“firstName”]=”vijay”; //Assign property firstName with value vijay
obj[“lastName”]=”khambalkar”;//Assign property lastName with value Khambalkar
var str=””; //variable which will hold property values
for(prop in obj)
str+=prop + ” value :”+ obj[prop]+”\n”;//Concate prop and its value from object
alert(str); //Show all properties and its value

I used this technique many times while working with actionscript and javascript. This all me to see all properties and its individual value to track.

How to Get Mouse Coordinates with Javascript !!!

December 11, 2006

Yesterday while working on a script and I wanted to know the cursor X, Y coordinates. Suprisingly I forgot how to get the X and Y coordinates of mouse. After thinking for some time, its strike that everything related to the current state is stored in events. So How to get the X and Y positions.

-capture mousemove event and list down all its properites

This is how I find X and Y coordinates

<title>Get Mouse Coordinates</title>
<script language=”javascript”>
var divObj;

* capture mousemove event, this statement will cause browser to
* call getMouseCoordites function each time mouse moves

*identify which event is supported
* Based on that collect pageX and pageY properties of the event object
* pageX and pageY gets the X and Y cursor coordinates
function getMouseCoordinates(event)
ev = event || window.event;
divObj.innerHTML = “Mouse X:”+ev.pageX + ” Mouse Y:”+ev.pageY;

//assign the mouseCoord Object to divObj
function loadDiv()
divObj = document.getElementById(“mouseCoord”);

<body onLoad=”loadDiv()”>
<div id=”mouseCoord”>Mouse Coordinates position will be displayed here.

Script works well with Mozilla, For IE need to do further modification in finding the exact position by calculating different properties value.

Generate XML from mysql table using PHP

December 4, 2006

Its very easy generating xml from php. I have created the following script to achieve this. The same script I used to create simple query analyser using flex.

function getXML($sql=”Default Query”)
$result = mysql_query($sql,$conn);
echo “<records>”;
foreach($row as $key => $value)
echo $columns;
echo “</records>”;
getXML(“SELECT * FROM tableName”);


This simple function is very useful in different manner. You can used it when you want to write ajax application, Flex Application.