How to retrieve text content from a div

In the following HTML

<div id='mydiv'>Some Text </div>

To retrieve the text using javascript - this is one method there may be others

var mydiv=document.getElementById('mydiv');

if (mydiv.textContent)
alert(mydiv.textContent); // for IE
else
alert(mydiv.innerText); // everyone else

Handling click and double click on the same object

There is a problem if you want to handle both click and double click events on an html element.
Basically both the click and double click events get fired when the user double clicks when really you want one event or another.

At first I tried handling the double click by counting single click and not setting a double click event. This worked on firefox but not internet explorer(because only one click was triggered for a double click).

I solved the problem by handling both the double click and click events. Basically When the mouse is clicked a timer is set up to insure that double click was not fired. If double click is fired then single click is canceled, otherwise the click function fires.

Heres the code
function mousefunctions(){
}

mousefunctions.singleclick=function(){
clickcount=0;
alert('single click');
}

mousefunctions.doubleclick=function(){
clickcount=0;
alert('doublelick');
}
var clickcount=0;


mousefunctions.endtimer=function(){
if(clickcount==1){
mousefunctions.singleclick();
}
}

mousefunctions.handledbclick=function(){
mousefunctions.doubleclick();
}


mousefunctions.handleclick=function(){
if(clickcount==0)
setTimeout(mousefunctions.endtimer,300);
clickcount++;

}

And the HTML is
<div onclick="mousefunctions.handleclick();"ondblclick="mousefunctions.handledblclick();" >Some Text</div>

Javascript methods/functions

Javascript functions/methods

As a reminder methods are functions that belong to an object or class.

There are two types of object methods in javascript.

• Static


• Dynamic

Dynamic methods
The most common type of method is Dynamic. Dynamic methods are declared inside the object and are referenced from an instance of the object. For Example

function myobject(m){ //constructor for our object
this.message=m;
this.test=test; //assign test to this objects definition
}

function test(){ //global declaration of test function
alert(this.message);
}

// to use this function
o=new myobject('hello'); // creates a new myobject object.
o2=new object('goodbye'); //creates another object

//to reference this method
o.test(); //shows message 'hello'
o2.test(); //shows message 'goodbye'

There is another way of declaring the object without creating the function test using anonymous methods. ie

function myobject(m){ //constructor for our object this.message=m;
this.message=m;
this.test=function(){ //add parameters to function if required
alert(this.message);
}
}

Static or Class Methods
Most people find the difference between static and dynamic methods confusing. The main difference between the two is that a static method is referenced (or called) from the class and not an instance of the class.

function myobject(m){

}

function test(){
alert('class method');
}
//static methods are declared outside the class

//ie

myobject.test=test(); // here the method is assigned to the class itself

to call the method simply access classname.method ie
myobject.test();


Why use this when you can declare functions globally? ie
just
test();
rather than
myobject.test();

In some languages like c# all methods must be part of a class definition. This is of course not necessary in javascript. Here are a couple of reasons that you might think about

• Helps create structured and readable code
• For IDEs that have code completion methods can be exposed by typing the class name followed by period.

Having Problems with Apache when skype installed

Having Problems with Apache when skype installed/Apache not working

I was having a problem with my apache web server. The service was running fine and yet when I entered address http://localhost/ I was getting a page not found message. I checked the error log in c:\program files\apache group\apache\logs and could find no error. Stoping and starting the apache service would sometimes fix the problem. So what was causing the problem?

Every process (program and background service) that provides a network service has a port number associated with it. There are standard port numbers for different services. The standard port number for web servers is port 80.

To get a list of network programs that are running , start a command prompt by selecting run and choosing cmd. In the command prompt type

netstat -pa

This will list all the processes , their port number and PID (Process ID). The results were as following:

Top of this list is

Proto, Local Address, Foreign Address, State ,PID

TCP,main:http, main:0, Listening, 2012

TCP, main:http, main:0, Listening, 1596

Clearly there are two programs using port 80 (http). Only one program can use a port at the same time. Therefore there is a clash between these two programs which explains why the server is not working.

To find out which programs are trying to use port 80. Press Control, Alt and Delete you should get task manager. In task manager select view from the task menu and choose select columns. Tick the PID column and press OK. Select the processes tab and find the PIDs that match those given by netstat. In this case, 2012 and 1596. As it turns out

1596=Apache.exe

2012= Skype.exe

So both apache and Skpye are trying to use port 80/ Behave as webservers.

How to turn off the http port on skype

In skype choose options from the tools menu. Click on the advanced button and then the connection button. Untick port use port 80 and press the save button.

Stop and restart skype. run netstat -oa again . This time only one process should be listening on the http port. Restart the system to make sure it is now working.

Event Co-ordinates

Event Co-ordinates
When an event such as onClick is triggered the returned event object in javascript has details of the mouse position. Different types of co-ordinates are returned in event.screenX, event.clientX, event.offsetX (and corresponding Y values). Details below.

screenX,screenY
Give the screen coordinates when the event occured ie The cursor position on the screen and not on relative to the top left hand corner of the web page.


clientX,clientY

Events coordinates are relative to the browser window instead of the screen. Thus moving the browser around the screen does not affect client co-ordinates. Note that event co-ordinates are not relative to the bottom of the page (ie if the browser window is 800 pixels deep with a page is 2000 pixels long and you scroll to the bottom and click youll get 800 returned as the vertical position and not 2000).


offsetX,offsetY (layerx,layery in firefox)
Gives the co-ordinates within the element on which the event was triggered. If the element is bigger that the browser window - coordinates can exceed the height of the screen.

For more information see
http://www.javascriptkit.com/jsref/event.shtml

A lesson on Javascript event bubbling

Event Bubbles

When a user clicks or performs another event on an HTML element it propigates up the chain.
For example in the following code , when a user clicks on the blue box it triggers an event in both the blue and yellow boxes.

<div style="WIDTH: 200px; HEIGHT: 200px; BACKGROUND-COLOR: yellow" onclick="alert('2 clicked');">l 2 <div style="WIDTH: 100px; HEIGHT: 100px; BACKGROUND-COLOR: cyan" onclick="alert('1 clicked');">1</div</div>

Click on blue to see.
Clicking on yellow doesnt trigger a blue event because the events move up and not down the chain.

2

1

This behaviour can be useful because when the mouse is clicked in blue Yellow knows about it, so blue can ignore the event and let it be handled by yellow.

Sometimes you want to stop events being passed on to parent elements. The following code shows how to do this.

In the following code e represents the event object.

if (e.stopPropagation) e.stopPropagation(); //Code used for w3c compatible browsers (eg firefox)
else
e.cancelBubble = true; // code used for Internet Explorer

Incorporating this code into our example.

function test(e,message){
if(!e) e=window.event;
if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true;
alert(message);
}




<div style="WIDTH: 200px; HEIGHT: 200px; BACKGROUND-COLOR: yellow" onclick="test(event,'2 clicked');">l 2 <div style="WIDTH: 100px; HEIGHT: 100px; BACKGROUND-COLOR: cyan" onclick="test(event,'1 clicked');">1</div</div>

I cant demonstrate this script as blogspot isnt recognising my script tags.

New Project

Having created http://www.imagemapeditor.net/, which lets anyone upload images and create maps I'm embarking on a new project http://www.formeditor.net/.

The basic objective is to create a online form creator. There will be a toolbar for each different kind of form element ie.

Text Field
Hidden Field
Text Area
Check Boxes
Radio Buttons
List
Submit Button

Each type of form field will have a label. Form fields will be dragged from the left of the page to the form canvas where they can be configured (ie add radio buttons). Once added to the form these fields can be dragged up or down to change their order. They can also be deleted.

The output of the form editor will be an HTML form.

There will be instructions on how to use the form. The output from the form can be an email, or record stored in a database. It is envisaged that the latter will be used for marketing quesionaires and will come with a reporting tool that costs money (I have to make money somewhere!).

Ok thats my brief - we'll see how I get on!