Creating Message Box at runtime by handling HTML DOM using JavaScript

While making of some websites or web base application, some time we required to show messages in message box or popup window. There is several methods to show this message in HTML and JavaScript. You may find some ready API for that also. But how to create you won message box and that also runtime by handling HTML DOM using JavaScript.
snap-2
View Demo

Creating JavaScript function to Create Message Box

First let’s write javascript function to create runtime message box.

And style it.

How to Call Message Box

Add CSS and JavaScript file into HTML header .

snap-1
And call message box function by passing title and message text using JQuery or JavaScript.

Download Complete Source

Android Passing Data Between Activities

As you can see in the previous post how we can Link Activities. But one of the most important thing is when we launch one activity to another, at the same time we may need some data passing to another activity too. For example, A product information or A person name and his/her details.
In this article I am going to show you, how we can pass the data between activities.

Passing Primitive Data types using Intent

To pass primitive data types using Intent class you can use putExtra() method. Like String, Integer or Boolean.
See the following code.

When launch the target Activity by using Intent object, you can get all the data attached to the Intent object.
Let’s see how.

Passing Data in Bundle object using Intent

You can also pass the data in Bundle object using Intent class. The Bundle object is like dictionary object. Just Define Bundle object and populate object with keys and its values. And pass the bundle using putExtras() method.
See the code.

After launch targeted Activity to retrieve passed data in bundle object. use getExtras() method.

Download Source of working example.

How to Create 3D Fold Undfold Cube using ActionScript and Away3D

I would like to share with you a very simple example created in ActionScript using Away3D API. In this example I am going to show you how we can make foldable cube.
This example is created in three main parts.

Away3D Fold Unfold Cube

Away3D Fold Unfold Cube

  1. Away3D Scene Setup
  2. Cube Class
  3. Calling Cube class Fold and Unfold method.

Used:


Away3D 4.0, Flash CS6, ActionScript 3.0 and Flashplayer 11.2 or higher

[Download Source]

Away3D Scene Setup

Create new flash file with Document class named “main.as” and setup Away3D Scene.
[as3]
private function init():void{
// Setup View
_view = new View3D();
_view.width = 550;
_view.height = 400;
addChild(_view);
trace(“Setup View Success”);

// Setup Camera
_view.camera.z = -1000;
_view.camera.y = 1000;
_view.camera.x = 500;
_view.camera.lookAt(new Vector3D());
trace(“Setup Camera Success”);

// Setup floor
_plane = new Mesh(new PlaneGeometry(2000, 2000), new TextureMaterial(Cast.bitmapTexture(floor)));
_view.scene.addChild(_plane);
trace(“Setup Floor Success”);
//setup the render loop
addEventListener(Event.ENTER_FRAME, _onEnterFrame);
}

/**
* render loop
*/
private function _onEnterFrame(e:Event):void
{
_view.render();
}
[/as3]

Creating Cube Class

Let’s start creating cube class. Create a new ActionScript file with class name “Cube”. To create fold/unfold functionality here I am creating a cube by using Plane Geometry, So I can handle each individual plane to make fold/unfold animation.
First Create all the sides for Cube using Plane Geometry and position all the sides in cube form.
See the class created below.
[as3]
package{
import away3d.containers.ObjectContainer3D;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import away3d.entities.Mesh;
import away3d.primitives.PlaneGeometry;
import away3d.materials.TextureMaterial;
import away3d.utils.Cast;

public class Cube extends ObjectContainer3D{

private var sides_list:Array = new Array();

private var timer:Timer = new Timer(100);
private var foldUnfold:Number = -1;

public function Cube() {
createCubeSides();
timer.addEventListener(TimerEvent.TIMER, fold_unfold);
}

private function createCubeSides():void{
// Creating base plan
var plane:Mesh = new Mesh(new PlaneGeometry(300,300), new TextureMaterial(Cast.bitmapTexture(side_texture)));
this.addChild(plane);

// creating left,right,front, back and top side
for(var i:int=0; i<5; i++){ var side:ObjectContainer3D = new ObjectContainer3D(); if(i<4){ this.addChild(side); // adding first 4 sides }else{ sides_list[3].addChild(side); // adding last side into the forth side for the top, top should be child of left side, considering 4th side as left side } sides_list.push(side); var floor_texture:TextureMaterial = new TextureMaterial(Cast.bitmapTexture(side_texture)); floor_texture.bothSides = true; var childPlane:Mesh = new Mesh(new PlaneGeometry(300,300), floor_texture); // reset registration point //childPlane.rotationX = 90; childPlane.z = 150; // Adding plan to side container side.addChild(childPlane); } // seting up positions of left,right,front and back side // back side sides_list[0].z = 150; sides_list[0].rotationX = -90; // right side sides_list[1].x = 150; sides_list[1].rotationY = 90 sides_list[1].rotationX = -90; // front side. sides_list[2].z = -150; sides_list[2].rotationY = 180; sides_list[2].rotationX = -90; // left side sides_list[3].x = -150; sides_list[3].rotationY = -90; sides_list[3].rotationX = -90; // top side sides_list[4].z = 300; sides_list[4].rotationX = -90; } private function fold_unfold(e:TimerEvent):void{ for(var i:int=0; i= 0 || sides_list[sides_list.length-1].rotationX <= -90){ timer.stop(); } } // Fold Method public function fold():void{ if(foldUnfold == -1) return; foldUnfold = -1; timer.start(); } // Unfold Method public function unfold():void{ if(foldUnfold == 1) return; foldUnfold = 1; timer.start(); } // Toggle fold/unflod Method private function fold_unfold_toggle(e:MouseEvent):void{ if(foldUnfold == -1){ unfold(); }else if(foldUnfold == 1){ fold(); } } } } [/as3]

Calling Cube fold/unfold Methods

Now create two buttons named “fold”, “unfold” and call methods fold() and unfold() respectively under the button click event.
[as3]
protected function placebuttons():void{
// Creating fold button
var btn_fold:clickButton = new clickButton(‘Fold’);
btn_fold.x = 25;
btn_fold.y = 350;
addChild(btn_fold);
btn_fold.addEventListener(MouseEvent.CLICK, fold_cube);

// Creating unfold button
var btn_unfold:clickButton = new clickButton(‘Unfold’);
btn_unfold.x = btn_fold.x + btn_fold.width + 25;
btn_unfold.y = btn_fold.y;
addChild(btn_unfold);
btn_unfold.addEventListener(MouseEvent.CLICK, unfold_cube);
}
[/as3]

Android Linking Activities

In this article I am going to show how to link android activities using intent.
Suppose there is two or more activities in your application and you want to go one activity to another activity and come back to previous activity. In this example I will show you how we can do this.

Download Source

Launching Activity

Linking Activities

Linking Activities

Assume you are in to Main Activity and now we want to link to another. Simply create a new Intent object and set it target activity constructor and call startActivity() method to launch target activity.

And add targeted activity into AndroidManifest.xml under Application Node.

Launching Previous Activity

Linking Activity Back

Linking Activity Back

There is two ways to come back on Main activity. One is you can use same method as we used above, that is defining by intent and Another way is calling by finish() method.
But what finish() method does exactly?
The answer is, Using Intent we launch an Activity and it stacks but calling finish() method remove the activity from stack and launch previous activity.

Launching Activity using CreateChooser Method

Linking activity chooser
To use createChooser() method you need to specify string name of activity name. See the following code snippet.

Download Source

Animating Soccer Ball using JQuery Animate function

Somewhere I was created a simple animating soccer ball example using JQuery Animate function.
The animate function basically allows to animate various numerical CSS properties. Suppose you want to animate width or height properties, that you can. But you can’t animate position, float, font-family, etc. Because this all are no-numeric properties.
Let’s start with HTML Document to get output like shown in image

JQuery Animate function

JQuery Animate function

Download Source

Style HTML with some CSS rules.

And now time to implement logic to Animate Soccer ball using JQuery.

Rotating A Gun Barrel towards The Target using ActionScript Trigonometric functions

As I already discussed in my previous post, based on trigonometric function, CREATING ROLLING EYES USING TRIGNOMETRIC FUNCTIONS. Here is the simple and small example on the same topic I am going to share with you.
You guys might be or some time played any shooting games like firing the bullets on the target or targeting bow-arrow to aim from fixed centered position. You may noticed, the gun or arrow rotates towards aim while you move the cursor towards aim.
But how it works…? Let’s see with Gun Barrel Example.
When we plan to develop this kind of games, generally we find the 3 main steps to develop, 1. Rotating gun barrel towards the your mouse pointer or the target. 2. Firing bullets along with barrel direction. And 3. Detection of collision between bullet and target.
In this example i am going to show you the step 1. Which is Rotating a gun barrel. Don’t worry in later post I will show how we can archive 2nd and 3rd Step.
In this article I am just trying to show you, how we can use ActionScript built in tangent functions and find the angle of Barrel towards mouse move or aim.
Look at the example below.


Just move the pointer around the area. you can see how the gun barrel is rotating towards the mouse pointer direction.
Using few basic formulas in to Programming (ActionScript) you can make your game or application more effective and live. i.e, adding gravity, flood, motion, friction or acceleration in to your applications & games etc. You can calculate the distance to detect collision between objects, you can make more effective timeline animations with ActionScript which you want. Even you can reuse the code & implement code for many other projects.
Look at example. If you wanted to rotation of a MovieClip towards mouse movement, you need to know its degree.
To determining movie clip angle by using sides described by the triangle formed with x and y as two of it sides, see image.
Trignle formed by x and y
Look at the above image, Angle indicates by “A” and Look at the formulas shown in below. you can use the tangent functions to determine angle.
Formulas
Luckily, you don’t have to worry about the formulas for tangent because these functions are built-in into ActionScript, in the Math Library Classes. So, all you have to do is with built-in methods.
See the code below, how we can find the degree of the angle using actionscript Math trigonometry methods.
Here first we need to find cursor x and y distance from the MovieClip(from Gun barrel co-ordinate).

[as3]
// find relative mouse location
var dx:Number = mouseX – mcGunBarrel.x;
var dy:Number = mouseY – mcGunBarrel.y;
[/as3]
Then determine the angle of the cursor from Gun Barrel using ActionScript Math class.

[as3]
var radian:Number = Math.atan2(dy,dx); // angle in radian
[/as3]

And here is the conversion of radian to degree.
[as3]
var degree:Number =360*(radian/(2*Math.PI)); // angle in degree
[/as3]
Once you get the degree, just assign the degree to rotation property of Gun Barrel MovieClip.
[as3]
// point at cursor
mcGunBarrel.rotation = degree;
[/as3]
See complete source code:
[as3]
package {
import flash.display.*;
import flash.events.*;
import flash.ui.Mouse;

public class pointing extends MovieClip {

public function pointing() {
this.addEventListener(Event.ENTER_FRAME, pointToTarget);
}

private function pointToTarget(event:Event):void {
// Moving pointer with mouse
mcPointer.x = mouseX;
mcPointer.y = mouseY;

// Hide mouse cursor
Mouse.hide();

// Move target left to right
mcTarget.x += 7;

// Reset initial state if the mcTarget
// x co-ord more then 600 pixels
if(mcTarget.x > 600) mcTarget.x = -50;

// find relative mouse location
var dx:Number = mouseX – mcGunBarrel.x;
var dy:Number = mouseY – mcGunBarrel.y;

// get radian and convert to degrees
var radian:Number = Math.atan2(dy,dx); // angle in radian
radianbox.text = “Radian: “+radian.toFixed(2);;
var degree:Number =360*(radian/(2*Math.PI)); // angle in degree
degreebox.text = “Degree: “+Math.floor(degree);

// point at cursor
mcGunBarrel.rotation = degree;
}
}
}
[/as3]
Download [point.zip]
I hope you like this example.
Let me know. If there is enough interest, I can move on to things like gravity, springs, friction, collisions and more…….

How to create Android Contact Book App : Part 5 : Viewing Contact Details using Explicit Intent

In this part we are going to learn, how we can view contact details.


Table of Contents

  1. Creating Contact Details Activity
  2. Setting Click Listener to ListView Item
  3. Sending Data to Contact Details Activity using Intent
  4. Retrieving Data into Contact Details Activity
  5. Download Source

  6. Creating Contact Details Activity

    In the Part 1 we have already created Layout to View Contact Details, Now open project from previous part to continue.
    Right click on src/New/Class and create new activity named “ContactDetails.java”. Once create the activity set the Layout for Activity.

    Now register activity into AndroidMenifest.xml

    ContactDetails

    Setting Click Listener to ListView Item

    Open Main.java. In this Activity we are going to assign onClickListener() to ListView Item. So when we will click on any specific Item of the Contact if will fire Click Event and After click we can jump to Contact Details Activity with Contact Details.

    Sending Data to Contact Details Activity using Explicit Intent

    Android supports two types of Intent. One is Implicit Intent and another is Explicit Intent. To know more about Intents, Visit link.
    In this example we are going to use Explicit Intent to send the data one activity to targeted activity.

    Retrieving Data into Contact Details Activity

    Now in the Contact Details we have to retrieve the data sent from Main activity and display it on Layout.

    ContactDetails_with_Data

CREATING SIMPLE DRAG AND DROP APPLICATION USING STARTDRAG, STOPDRAG AND HITTESTOBJECT METHODS

One of the most popular functionality always you can find or notice in kids educational flash games & applications, That is pickup the things from one place and drop it to another place. Even I was also used same functionality in many kids e-learning applications and games in my e-learning work experience. But how does it works with flash ActionScript. Did you know.

Let’s see…, How!
See below, I have illustrated a simple example application.
Yes…! I know the graphics is poor, but my aim is showing you how it works. 🙂

You can drag the ducks to one pool to another pool.


Setup the MOUSE_DOWN and MOUSE_UP events to the all duck MovieClips.

[as3]
// Contain the duck movieclips into the array;
ducks = new Array(duck1,duck2,duck3);

// Assign events to the ducks MovieClips
for(var i:Number=0; iSource Code [dragndrop.zip]

Creating Image Slideshow using CSS3 and JQuery in Fifteen Minutes.

Whenever I work on any of the huge project or application, I always break that project in small parts and develop it in parts and then combine it. And I would like to share with you one of the part from my work.
This is the very small example of CSS3 Slideshow. I have created this slideshow separately as an experiment basis and achieved as the result as I want. And this all I done in fifteen minutes and then integrated in web page.

DEMO | DOWNLOAD SOURCE

Creating HTML5 Document.
Create html document and arrange the all images. For this example I have used some birds images downloaded from Google image search.

Styling HTML Content using CSS3

Create stylesheet named “style.css”.

And like it with HTML document.

Making Slideshow Interactive using JQuery
Before using JQuery. We have to add Jquery API. In this example I am using CDN path instead of using local JQuery API file.

And this is the code to navigate Slideshow.

Now link this JavaScript file to HTML document below the JQuery API linked.

How to create Android Contact Book App : Part 4 : Display Contact Data from SQLite Database

In this part we are going to cover how to create custom adapter for ListView and display data on ListView.

Custom ListView

Custom ListView

I recommend, before this part start just go through previous 3 parts and take a quick look, so you will get continues reference.
PART 1 : SETTING UP INTERFACE
PART 2 : CREATING SQLITE DATABASE
PART 3 : ADDING CONTACT DATA TO SQLITE DATABASE

So let’s start…..


Table of Contents

  1. Main Layout and Custom ListView Item Layout
  2. Creating Custom Adapter for ListView
  3. Display Data from SQLite Database
  4. Pushing contacts to Test
  5. Download Source

Main Layout and Custom ListView Item Layout

As we have seen in the First Part, How we have created layouts for ListView and ListView Item. Just take a look before start.

And Layout for Custom ListView Item. See Part 1: Setting up Interface

Custom ListView Item

Custom ListView Item

Creating Custom Adapter for ListView

Now we are going to implement a custom adapter class. In this class we will reference custom Layout for ListView Item and set properties of widget controls and then return it.
Right click on src>New>Class. Set super class as “android.widget.BaseAdapter” and name it “CustomAdapter”. See the complete class.

Display Data from SQLite Database

Before fetching contact data let’s see how we have created SQLite databse in Part 3.

In Main.java initiate Custom Adapter and set it to ListView.

Pushing contacts to Test

Now add few contacts to contact book by Click on Add new contact button on Main Activity. So we can test the Custom ListView.

Add Contact

Add Contact