Developers Archive for the 'Javascripts' Category

onbeforeunload Javascript

onbeforeunload Javascript Thursday, March 6th, 2008

There are some cases where you might want to instruct the user before he/She is navigating to the next page. That might be a meaningful message like “Are you sure you want to navigate away from the current page?”
Probably end user pressed the X button by mistake and he/she might loose his/her current state

There is onbeforeunload event for the JavaScript that fires when you are navigating away from the current page.
Here is the Code for that.

script type=”text/javascript”
function close()
{
event.returnValue = “This will navigate to next page.”;
}
script

body onbeforeunload=”close()”

a href=”microsoft.com” Click Here to navigate to Microsoft a

body

html

Note:
The default statement that appears in the dialog box, “Are you sure you want to navigate away from this page? … Press OK to continue, or Cancel to stay on the current page.”, cannot be removed or altered.

Windows Media Player object in both Firefox and Internet Explorer

Windows Media Player object in both Firefox and Internet Explorer Wednesday, February 20th, 2008

We can create a media player which work well both in IE and netsacpe. It requires a windows media player plugin for firefox. You can install the plugin from Windows Media Plugin for Firefox.

This player can be used for playing audio and / or video.

For IE the object is

<object id=”contentPlayer” classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″ width=”320″

height=”240″>
<param name=”URL” value=”‘+url+’” />
<param name=”uiMode” value=”none”>

Note: IE required the object ID. And url is a javascript variable for the location of the video /

audio file

And for Netscape the object is

<object id=”contentPlayer” type=”application/x-ms-wmp” data=”‘+url+’” width=”320″ height=”240″>
<param name=”URL” value=”‘+url+’” />
<param name=”uiMode” value=”none”>

Note: Netscape requires object type as application/x-ms-wmp this will be available from the

plugin mentioned earlier.

We can use additional parameter like
<param name=”autostart” value=”false”> to control the automatic playing of the audio/video.

Control can be create for various player events like play, pause, stop etc as follows

var wmp = document.getElementById(’contentPlayer’);

wmp.controls.play();
wmp.controls.pause();
wmp.controls.stop();
wmp.controls.fastForward();
wmp.controls.fastReverse();
wmp.settings.mute = true;
wmp.settings.volume = 50;
wmp.fullScreen = true;
wmp.URL = ‘./videos/my_video.wmv’;

JavaScript Object Notation

JavaScript Object Notation Monday, February 18th, 2008

JSON

JavaScript Object Notation (JSON,) is one of the new buzzwords popping up around the AJAX theme. JSON, simply put, is a way of declaring an object in javascript. Let’s see an example right away and note how simple it is.

var myPet = { color: 'black', leg_count: 4, communicate: function(repeatCount){
for(i=0;i<repeatCount;i++) alert('Woof!');} };

Let’s just add little bit of formatting so it looks more like how we usually find out there:

var myPet = {
color: 'black',
legCount: 4,
communicate: function(repeatCount){
for(i=0;i<repeatCount;i++)
alert('Woof!');
}
};

Here we created a reference to an object with two properties (color and legCount) and a method (communicate.) It’s not hard to figure out that the object’s properties and methods are defined as a comma delimited list. Each of the members is introduced by name, followed by a colon and then the definition. In the case of the properties it is easy, just the value of the property. The methods are created by assigning an anonymous function, which we will explain better down the line. After the object is created and assigned to the variable myPet, we can use it like this:

alert('my pet is ' + myPet.color);
alert('my pet has ' + myPet.legCount + ' legs');
//if you are a dog, bark three times:
myPet.communicate(3);

You’ll see JSON used pretty much everywhere in JS these days, as arguments to functions, as return values, as server responses (in strings,) etc.

What do you mean? A function is an object too?

This might be unusual to developers that never thought about that, but in JS a function is also an object. You can pass a function around as an argument to another function just like you can pass a string, for example. This is extensively used and very handy.

Take a look at this example. We will pass functions to another function that will use them.

var myDog = {
bark: function(){
alert('Woof!');
}
};

var myCat = {
meow: function(){
alert('I am a lazy cat. I will not meow for you.');
}
};

function annoyThePet(petFunction){
//let's see what the pet can do
petFunction();
}

//annoy the dog:
annoyThePet(myDog.bark);
//annoy the cat:
annoyThePet(myCat.meow);

All material @ copyrighted by chrisranjana.com. If you want to link to this article you are welcome to do so. Unauthorized publication is strictly prohibited. This developer tutorial website contains articles by Php programmers , Software developers, Mysql programmers and asp c# programmers. This website also contains ajax tutorials and advanced mysql sql stored procedures and functions tutorials and sample codes.