Writing Selenium RC Test on our own

Earlier in order to create a JUnit Selenium RC Test, we have performed the following steps:

1. Recorded a Test Scenario using Selenium IDE
2. Copied the Selenium  RC code generated by the Selenium IDE
3. Pasted the code into the Eclipse IDE
4. Resolved few errors and warnings
5. Run the Selenium RC test using JUnit in Eclipse IDE

Please refer to “Create a JUnit Selenium RC Test using Selenium IDE”

But how not to use Selenium IDE and write Selenium RC Test on our own. In order to understand how to write Selenium RC Tests on our own, we’ve to start writing the code from Scratch.

Writing Selenium RC Tests on our own (i.e. without using Selenium IDE )

Please follow the below steps:

1. Create a Java Project named “Selenium143” in Eclipse IDE as shown below:

2. Configure the above created Project “Selenium143” to work with Selenium RC ( Please refer to Configure Projects in Eclipse IDE to work with Selenium RC)3. Create a Package named “home_page” under the “Selenium143” project as shown below:

4. Create a Java Class named “OpenURL” under the “home_page” package as shown below:

5. Inside the “OpenURL” class, create a method named “openSelenium143” as shown below:

6. Specify  the “openSelenium143” method with @Test annotation as shown below and ensure that an error is displayed:

7. In order to resolve this error, hover your mouse cursor on this error and select ” Import Test (org.junit) ” option as shown below:

8. Ensure that the import org.junit.Test; import statement got added and the error got resolved on import as shown below:

Note: We are importing a predefined class “Test” from “org.junit” package into our “Selenium143” Class. i.e. The functionality of the @Test annotation is predefined in Test Class as part of JUnit framework.

9. As we already know that Selenium RC server  executes our Selenium RC tests on the specified browser,   we’ve to create a Selenium object in our Selenium RC tests to communicate or connect with Selenium RC Server as shown below:

10. After looking at the above screenshot, its very clear that we have an error displayed on adding Selenium object creation statement. Hover your mouse cursor over this error message and select “Import Selenium (com.thoughtworks.selenium) ” option as shown below to resolve the error:

Note: We are importing a predefined class “Selenium” from “com.thoughtworks.selenium” package into our “Selenium143” Class. i.e. We can now use the Selenium Class in our “Selenium143” Class for creating objects and performing operations on the created object.

11. Ensure that the Selenium error got resolved after adding the selected import statement as shown below:

12. But if you have observed correctly , we’ve one more error displayed for ‘DefaultSelenium’ in the above screenshot unresolved. Hover your mouse cover over this error and select “Import DefaultSelenium (com.thoughtworks.selenium) ” option as shown below to resolve this error:

Note: We are importing a predefined class “DefaultSelenium” from “com.thoughtworks.selenium” package into our “Selenium143” Class. i.e. We can now use the DefaultSelenium Class functionality in our “Selenium143” Class.

13. Ensure that the selected import statement got added and also the error got resolved as shown below:

14. Before going to the next steps, lets understand the below statement:

Selenium object1 = new DefaultSelenium(“localhost”, 4444, “*firefox”, “http://selenium143.blogspot.com”);

1. Selenium is a predefined Class
2. object1 is the object name I have given. In this example object1 is an object of Selenium Class.
3. new is the java keyword used to create an object for the specified class (i.e. object1 object for Selenium class in this example)
4. DefaultSelenium( ) is a predefined constructor calling statement.
5. localhost is the first parameter which gets passed to the DefaulSelenium( ) predefined constructor. This argument is specified as localhost as I’m going to run the Selenium RC test in the same system where I’m writing this code. If you want to run the written Selenium RC test on a different machine, you have to mention the IP Address of the machine on which you want to run this test.
6. 4444 is the default communication TCP/IP protocol. If you have specified any other protocol say 8888 while starting the Selenium Standalone Server then you have to use 8888 instead of 4444, else if you have not specified any protocol to start the Selenium Standalone Server then you will be using 4444 as this is the default communication protocol. (i.e. If you don’t provide any protocol while starting the Selenium Standalone Server, it will take the default protocol i.e. 4444)
7. *firefox is the parameter which tells the Selenium Server which browser to use. As we have mentioned it as *firefox it will use Firefox browser to run the Selenium Test. For chrome and IE browsers we have to specify *googlechrome  and *iexplore respectively.
8. http://selenium143.blogspot.com is the last paramater, which specifies the base URL of the site we are testing.

We can also break the above single statement into two separate statements as shown below:

Selenium object1;    // Declaring the object1 as an instance object of Selenium Class

 

object1 = new DefaultSelenium(“localhost”, 4444, “*firefox”, “http://selenium143.blogspot.com”);   // Assigning the reference to the object1 and calling the DefaultSelenium( ) constructor while the object is getting created.

15. Lets add few more statements inside the openSelenium143( ) method, which uses the ‘object1’ object created by the first statement to 1) starts the Selenium Server Driver in a new Firefox Browser session, 2) open the home page of the base URL specified in the first statement, 3) close the test application and 4) finally to close the Firefox Browser session.

16. First lets start the new Firefox Browser session. Type object1 followed by dot i.e ‘.’ and wait for the selenium commands to appear as shown below:

17. While the selenium commands box is open, type ‘st’ letters and observe that the selenium commands got filtered to four commands from many commands as shown below:

18. Select ‘start( )’ command from the filtered commands as shown below:

19. Ensure that the selected command got added to the code and add a ‘;’ to end the statement as shown below:

20. Save the Selenium RC Test and Run the Test using JUnit as shown below:

21. Ensure that the Test got failed as shown below as we’ve not started the Selenium Standalone Server before running the test using JUnit:

22. Start the Selenium Standalone Server as explained in Start the Selenium Standalone Server and Run the test using JUnit as shown below:

23. Observe that the Firefox has started the  Selenium Server driver as shown below and also observe that the Test got Passed :

24. As we’ve seen in the above steps that object1.start( ); selenium command has opened  Selenium Server Driver which actually Runs the selenium Automation tests in a new Firefox Browser Session, now lets see the   next command which opens the URL of  our Application i.e. object1.open(“http://www.selenium143.blogspot.com”); as shown below:

25. Save and Run the Test using JUnit and observe that the specified URL got opened in Firefox Browser as shown below:

26. Lets write the next command object1.windowMaxmize( ); to maximize the opened Browser as shown below:

27. Save and Run the Test using JUnit and observe that the specified URL got opened in Firefox Browser and the Firefox Browser got maximized as shown below:

28. Lets write the next command object1.close( ); which closes the open Browser having our Application URL as shown below:

29. Save and Run the Test using JUnit and observe that the following Browser Window having the specified URL gets closed as shown below:

30. Lets write the next command object1.stop( ); to stop  the Selenium Server Driver as shown below:

31. Save and Run the Test using JUnit and observe that the Firefox Browser Window which has Selenium Server Driver running gets closed as shown below:

32. As I explained the commands step by step, it will be more clear for you if you can watch the following video of what we have done till the previous step:

Click here to watch the video

33. The selenium commands explained in this post will be used in my next upcoming posts also. So please remember the above commands.

In this post we’ve only used @Test JUnit annotation. We can actually categorize the Selenium Commands used in this post to fall under different JUnit annotations i.e. @Before @Test @After Annotations.

Download this Project:

Click here to download the project used in this post and import into Eclipse IDE on your machine.

Run the Created Selenium RC Test

Prerequisites:

1. Create Selenium RC Test as specified in “Create a JUnit Selenium RC Test using Selenium IDE”
2. Start the Selenium Standalone Server as specified in “Start the Selenium Standalone Server”
3. Ensure a Compatible Firefox Browser is Installed on your machine as explained in “Ensure Compatible Firefox Browser is installed”

1. Run the Selenium RC Test

1. In Eclipse IDE, right click on the ‘ImFeelingLucky’ class and select ‘Run As’ -> ‘JUnit Test’ as shown below:

2. See how our automation test runs on Firefox Browser from the below video:

Click here to watch the video

2. Check the Results after the test run is finished

1. After the test run is finished as shown in the above video, we’ve to find out whether the automation test run by selenium RC is passed or failed
2. In order to do that, view the Eclipse IDE after the test run and view the test results as shown below:

3. Red color bar will be displayed instead of Green color bar if the test gets failed.

Thats it !! This is how we run the Selenium RC tests in Eclipse IDE.

Ensure compatible Firefox Browser is installed

Before Running the created Selenium RC Test we’ve to verify whether a compatible Firefox Browser is installed on your machine.

1. Firefox browser version you are using in your computer machine should be compatible with the Selenium Standalone Server version you are using 


1. View the version of the Selenium Standalone Server  you are using as shown below:

2. Go to http://selenium.googlecode.com/git/java/CHANGELOG and start reading from the first line to find out the first occurrence of “Firefox Version Support” text as shown below:

3. I am writing this post on  March 8th 2013, after I read the above change log from the beginning  I found   “Firefox 18 Support” as the first occurrence of the “Firefox Version Support” text.  And from this log its very clear that Firefox 18 Support is available for the selenium versions starting from 2.29.0 and above as shown below:

4. As I’m using Selenium Standalone Server version 2.31.0  , which is higher than 2.29.0 version and Firefox 18 support is there for versions 2.29.0 and higher versions. Hence Firefox 18 browser is compatible with 2.31.0 version

5. But can I use Firefox 19 browser with Selenium 2.31.0 version as it is available currently. Will my test run ?  The answer is No. Though the latest Firefox version is available, your test wont run if the browser version is not compatible with the selenium version you are using.

2. How to install an older version of Firefox that is compatible with Selenium server version you are using

1. Suppose I’ve Firefox 19 installed on my machine currently but I need Firefox 18 version which supports the Selenium Server version I’m using.
2. I will first of all uninstall the Firefox 19 installed on my machine
3. In order to get the older releases of Firefox, I will open http://filehippo.com/download_firefox/ in my browser and click on ‘Firefox 18’ version as shown below:

4. In ‘Firefox 18’ page of  “Filehippo.com” website, click on the ‘Download this Version’ option as shown below:

5. Install the newly downloaded Firefox 18.exe  file
6. But on launching the Firefox Browser the Firefox version will get upgraded to the latest version. To avoid this go through the following steps immediately after launching the Firefox browser
7. Click on the ‘Tools’ Menu and select ‘Options’ option

8. Select the ‘Advanced’ tab in the displayed ‘Options’ dialog and select ‘Never check for Updates’ option as shown below and click on ‘OK’ button:

9. Click on Firefox Browser -> ‘Help’ Menu and click on ‘About Firefox’ option as shown below:

10. Ensure that ‘About Firefox’ dialog is displayed and confirm that you have “Firefox 18” version in the details as shown below:

Create a JUnit Selenium RC Test using Selenium IDE

Prerequisites:

• Selenium IDE – Please go through Selenium IDE
• Ensure that the Selenium Standalone Server is started as explained in “Start the Selenium Standalone Server”
• At the time of writing these tests the Selenium IDE was configured the explained way please check your version and settings.

1. Record a Test in Selenium IDE

1. Launch Firefox Browser and click on ‘Tools’ Menu -> ‘Selenium’ IDE option as shown below:

2. Ensure that Selenium IDE is launched as shown below:

3. Open any website say www.google.com in Firefox Browser as shown below:

4. Click on ” I’m Feeling Lucky “ button as shown below:

5. Turnoff the ‘Recording’ button on the Selenium IDE to stop recording as shown below:

6. Ensure that the recorded commands are displayed under the table tab as shown below:

2. Enable ‘Experimental Features’ Option

1. In ‘Selenium IDE’,  click on ‘Options Menu’ and select ‘Options’ option as shown below:

2. In ‘Selenium IDE Options’ dialog, select the ‘Enable Experimental Features’ check box option  and click on ‘OK’ button as shown below:

3. Change the Recorded code format from HTML to ‘Java / Junit4 / Remote Control ‘

1. Click on ‘Options’ menu and select the ‘Format’ option to view the ‘Format’ Sub menu options   and ensure that the ‘HTML’ option is selected by default a shown below:

2. Now change the selection from HTML to Java/ Junit 4 / Remote Control as shown below: (If you want your tests to be written using  Selenium RC commands & Java Language and you want your tests to be Run using Junit 4 framework, then you have to select this option else you have select other options based on your requirement)

3. Click ‘OK’ button on the displayed ‘[JavaScript Application]’ dialog as shown below:

4. Ensure that Junit 4 -Selenium RC – Test java code is displayed in the Selenium IDE’s Source tab as shown below:

4. Create a Package named “firstPackage” under the ‘Selenium RC’ configured project 

1.  Create and configure a project as explained in Post# 3 Configure Projects in Eclipse IDE to work with Selenium RC
2.   Right click on the Project and select ‘Package’ option as shown below:

3. Ensure that ‘New Java Package’ dialog is displayed, enter “firstPackage” as Package Name into the ‘Name’ text box and click on ‘Finish’ button as shown below:

4. Ensure that the New Package got added as shown below:

5. Create a New Class under the above created Package

1.  Right click on the newly created package and select ‘Class’ option as shown below:

 

2. Ensure that ‘New Java Class’ dialog is displayed, type “ImFeelingLucky” class name into the ‘Name’ text box and click on ‘Finish’ button as shown below:

 

3. Ensure that the New Class file named as “ImFeelingLucky’ got added under the “firstPackage” as shown below:

6. Copy the code that is generated and converted to Java/Junit4/RemoteControl  in Selenium IDE and paste into Eclipse IDE’s newly created class

1. Copy the source code that is generated by recording and converted to Java/Junit4/RemoteControl format as shown below:

2. Paste the source code without removing the existing code in the newly created class file as shown below:

3. Ensure that few Eclipse Errors got displayed after pasting the source code as shown below:

7. Rectify the first kind of Eclipse Error – Package error

1. As only one package declaration is allowed in a class, but after copying the source code there are now two packages as shown below:

2. As ‘Copied code’s package’ is not available in the Eclipse IDE, lets remove or comment it to resolve this error as shown below:

8. Rectify the second kind of Eclipse Error – Two Class Names Error

1. A single Class File can have only one Class declared inside it, but after copying the source code there are now two class declarations with different names as shown below:

2. Remove or Comment  the existing class declaration as it doesn’t contain any code or we are not going to write any code into it (as shown below):

9. Rectify the third kind of Eclipse Error – Class declaration name in the Class file should have the same name as the Class file Name  error

1. Observe that the Class file name  is different from the Class declaration name as shown below:

2. Change the Class declaration name as Class File Name as shown below:

3. Ensure that all the errors got resolved and no others errors exist in the source code.

10. Remove the warning Messages

1. Observe that there are two warning message highlighted in yellow color icon  as shown below:

2. In this case, the warning message are displayed for the two import statements as these import statements are never used in this source code (You can know this by mouse over this warning icons) as shown below:

3. Remove or comment these import statements to resolve (as shown below):

4. Ensure that now there are neither error message nor warning messages in the code.

11. Add a selenium command to the code, so that the test runs in a maximized browser window

1. Add the “selenium.windowMaximize();” command to the code as shown below ( Will explain about this command in upcoming posts, for now add it blindly):

12. Remove the selenium command, so that after running the test, the selenium server wont close the browser on which it runs the test 

1. Remove or Comment  the  “selenium.stop( )’ in the code ( Will explain about this command in upcoming posts, for now comment it blindly):

Download this Project:

Click here to download this project and import into Eclipse IDE on  your machine.

Start the Selenium Standalone Server

Pre-requisites:

Before running or starting the selenium standalone server , please ensure that you have already configured the Selenium Standalone Server in Eclipse IDE (i.e. As explained in our previous post on link https://dennosecqtinstien.wordpress.com/2013/08/02/configuring-selenium-standalone-server-in-eclipse-ide/)

Steps to Start the Selenium Standalone Server:

1. Click on ‘Configured Run’ icon on Eclipse IDE as shown below and select ‘Selenium Standalone Server’ option (We have given this name while configuring the Run Setup – Refer Above Step – 3):

2. Ensure that the Selenium Standalone Server has launched and started in Console as shown below:

Thats it !!! This is how we start the Selenium Standalone Server.

Configuring Selenium Standalone Server in Eclipse IDE

Before running any Test written in Selenium RC on Eclipse IDE, we’ve to start the Selenium Server first.
In order to start the selenium sever, first we have to configure its Run setup in Eclipse IDE as explained below:
1. In Eclipse IDE, click on the ‘Run’ Menu and select ‘External Tools’ -> ‘External Tools Configurations’ option as shown below:

2. Ensure that ‘External Tools Configurations’ dialog is displayed, select ‘Program’ option and click on ‘New Launch Configuration’ option as shown below:

3. Ensure ‘New Launch Configuration’ options are displayed and change the name in the Name field to “Selenium Standalone Server” as shown below:

4. Click on the ‘Browse File System’ button under the ‘Location’ heading as shown below:

5. Select the Java.exe  file inside the ‘bin’ folder of  C:/Program Files/Java/JDK path as shown below and click on ‘Open’ button:

6. Ensure that the selected ‘Java.exe’ file path got added in the ‘Location’ text box as shown below:

7. Click on ‘Brows Workspace’ button under the ‘Working Directory’ as shown below:

8. Ensure ‘Folder Selection’ dialog is displayed, expand the ‘Project’ folder, select the ‘library’ folder and click on ‘OK’ button as shown below:

9. Ensure that the selected ‘library’ work space path got added into the ‘Working Directory’ text box as shown below:

10. Enter ‘-jar selenium-standalone-server-2.31.0.jar’ command into the ‘Arguments’ text area as shown below:

11. Click on ‘Apply’ Button as shown below:

12. Click on ‘Run’ button as shown below:

13. Ensure that the Selenium Standalone Server has launched and started in Console as shown below:

Configure Projects in Eclipse IDE to work with Selenium RC

1. Create a Project in Eclipse IDE

1. Install Eclipse IDE
2. Launch Eclipse IDE
3. Create a Project in Eclipse IDE

2. Adding Java Client Drivers (i.e. .jar files) in the ‘selenium-remote-control-1.0.8’ extracted folder to the Project created in Eclipse IDE

1. Right click on the Project and select ‘New’ -> ‘Folder’ option as shown below:

2. Ensure ‘New Folder’ dialog is displayed, specify the folder name as ‘library’ and click on ‘Finish’ button as shown below:

3. Ensure whether ‘library’ folder in added to the Project under ‘Package Explorer’ as shown below:

4. Go the Folder where we have extracted the ‘selenium-remote-control-1.0.3.zip’ folder in our previous post as shown below:

 

5. Open the Extracted Folder and ensure that ‘selenium-java-client-driver-1.0.1’  folder exists as shown below:

6. Open the ‘selenium-java-client-driver-1.0.1’ folder and ensure that there are four .jar files as shown below:

7. Copy these four .jar files as shown below:

8. In Eclipse IDE, select ‘libraries’ folder and paste the copied .jar files as shown below:

9. Ensure that all the copied .jar files got pasted as shown below:

3. Adding Selenium-Server-Standalone-Version.JAR file to the Project in Eclipse IDE

1. Go to the folder where the downloaded ‘selenium-standalone-server-version.jar’ file is available as shown below: (i.e. downloaded in our previous post)

2. Copy the ‘selenium-server-standalone-version.jar’ file as shown below:

3. In Eclipse IDE, select the ‘library’ folder and paste the copied .jar file as shown below:

4. Ensure that the copied .jar got pasted under the ‘library’ folder as shown below:

4. Configuring the copied JAR files in Eclipse IDE

1. Right click on the Project and select ‘Properties’ option as shown below:

2. In ‘Properties for Project’ dialog, select ‘Java Build Path’ option as shown below:

3. Select ‘Libraries’ tab as shown below:

4. Click on ‘Add JARs’ butt under the ‘Libraries’ tab as shown below:

5. In ‘JAR Selection’ dialog, select the all the JAR Files copied under ‘library’ folder and click on ‘OK’ button as shown below:

6. Ensure that all the JAR files got added in the properties dialog and click on ‘OK’ button as shown below:

Thats it !!! Now you have configured your project with all the JAR files that are required for working with Selenium RC Code.

Introduction to Selenium RC (i.e. Selenium 1)

 

Selenium RC alias Selenium Remote Control alias Selenium 1 is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website.

Selenium RC is one of the most popular flavors of Selenium as it allows test developers to write tests using their favorite language to test on different browsers.

Pre-requisites for Selenium RC:

• Selenium IDE – These will be described later in the posts
• Java – These will be described later in the posts
• Eclipse IDE – These will be described later in the posts

What is Selenium RC ?

• Selenium RC allows you to write Automation tests in any supported programming language (say Java).
• Selenium RC is also known as Selenium Remote Control and Selenium 1.
• Selenium RC is an open source and free tool.
• Selenium RC was the main Selenium Project for long time (i.e. Currently Selenium 2 is the main project). Selenium 2 still runs Selenium 1’s Selenium RC interface for backwards compatibility.
• Selenium RC has support for almost all browsers
• Selenium RC has support for several programming languages like Java, C#, Ruby, Python, Pearl, Javascript and PHP)

How Selenium RC works?

Selenium RC comes in two parts:

• Server which handles the browsers
• Client Driver for computer language

Selenium RC is the server version of Selenium. You write your tests using a programming language (say Java) and client driver for the programming language. Your tests issues commands, which the client driver sends to the server. The server then performs your actions for you in the browser and reports the results back to your client.

After looking into the above screenshot, its very clear that The client sends the commands to the server and the server runs the commands to drive the browser. Finally the server sends back the results observed on driving the browser to the client.

Selenium RC Server acts as a Proxy:

Due to the security reasons with the Browsers, the website content cannot be accessible by any script from external site. Hence we require a Selenium RC Server which acts as a proxy by taking the script written for automating the web application as input and performing the operations as written in the script on browsers as output as shown below:

The Process of Running Tests using Selenium RC:

1. Suppose you have written Selenium Automation Tests to be performed on any Application in Java Language. The Selenium Automation Tests consists of Selenium Commands which are programmed using Java language.
2. Since we are using Java language, we have to use Java Client Drivers to communicate the Selenium Commands with the Selenium RC server which acts a proxy to avoid security restrictions of any browser.
3. When a test starts, the following happens:

1) The client driver establishes a connection with the Selenium RC server.
2) Selenium RC server launches a browser with a URL specified in the Automation code.
3) The Client driver passes a Selenium command to the Selenium RC Server
4) The Selenium RC Server interprets the command and then triggers the corresponding JavaScript execution to execute that command within the browser.
5) Once all the Selenium Commands got executed, the Selenium RC server closes the browser
6) Selenium RC server communicates the results with the Client driver
7) Hence the Test results are displayed on the Client side.

So to conclude the Selenium RC server acts as a mediator/proxy between the Selenium Code written in any programming language and Browsers with security to resolve the security problems.

To understand more about How the Selenium RC works please go through the following link:
http://docs.seleniumhq.org/projects/remote-control/

Designing a division modal (Div Modal) Box Overlay

Designing a division modal (Div Modal) Box Overlay

Lets start with the designing of the overlay, before procedding with the overlay i would like to introduce why this overlay is named as such. as this overlay is designed using <div> tags used inside html programming language so i named it as such (you are free to name it as like you want)

there are four steps to design this overlay.

1.  Making an div overlay

2. giving it some attractive look

3. functioning of the overlay

4. Calling overlay on some action using mouse

here we goes with the design of the overlay :-

1.  Making an div overlay

<div id=”modalPage”>
<div>
</div>
<div>
<div>
<div><a href=”test.html”>X</a></div>
<div>
<p>i want to show the text box values here….</p>
</div>
</div>
</div>
</div>

Test.html is the name of the page where we are designign the overlay

2. giving it some attractive look

<style type=”text/css”>
body
{
margin: 0px;
}
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px; left: 0px;
}
.modalBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%; height: 100%; background-color: #999999;
position: absolute;
z-index: 500;
top: 0px; left: 0px;
}
.modalContainer
{
position: absolute;
width: 300px;
left: 50%;
top: 50%;
z-index: 750;
}
.modal
{
background-color: white;
border: solid 4px black; position: relative;
top: -150px;
left: -150px;
z-index: 1000;
width: 300px;
height: 300px;
padding: 0px;
}
.modalTop
{
width: 292px;
background-color: #000099;
padding: 4px;
color: #ffffff;
text-align: right;
text-decoration: none;
}
.modalTop a, .modalTop a:visited
{
color: #ffffff;
}
.modalBody
{
padding: 10px;
}
</style>

3. functioning of the overlay

<script language=”javascript” type=”text/javascript”>
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = “block”;
document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID)
{
document.getElementById(divID).style.display = “none”;
}

</script>

4. Calling overlay on some action using mouse

<body>
<input id=”Button1″ type=”button” value=”Click here to be naughty” onclick=”revealModal(‘modalPage’)” />
</body>

so going with the pattern we used here to design the overlay the page layout and design using html programming language can be given as follows :-

<html>
<title>Divison Modal (Div Modal) Box</title>
<head>
<div id=”modalPage”>
<div>
</div>
<div>
<div>
<div><a href=”test.html”>X</a></div>
<div>
<p>i want to show the text box values here….</p>
</div>
</div>
</div>
</div>
<style type=”text/css”>
body
{
margin: 0px;
}
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px; left: 0px;
}
.modalBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%; height: 100%; background-color: #999999;
position: absolute;
z-index: 500;
top: 0px; left: 0px;
}
.modalContainer
{
position: absolute;
width: 300px;
left: 50%;
top: 50%;
z-index: 750;
}
.modal
{
background-color: white;
border: solid 4px black; position: relative;
top: -150px;
left: -150px;
z-index: 1000;
width: 300px;
height: 300px;
padding: 0px;
}
.modalTop
{
width: 292px;
background-color: #000099;
padding: 4px;
color: #ffffff;
text-align: right;
text-decoration: none;
}
.modalTop a, .modalTop a:visited
{
color: #ffffff;
}
.modalBody
{
padding: 10px;
}
</style>
<script language=”javascript” type=”text/javascript”>
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = “block”;
document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID)
{
document.getElementById(divID).style.display = “none”;
}

</script>
</head>
<body>
<input id=”Button1″ type=”button” value=”Click here to be naughty” onclick=”revealModal(‘modalPage’)” />
</body>
</html>

and here is the div overlay looks like the design

that’s all ..

Different Ways to Install Applications On Android Without The Market

Installing apps on Android is relatively straightforward with the Android Market. You search for an app, select it and click install. However, there are often times when you may want to install a newly released app or an app that is not available in the Android Market. In these cases you will usually have to manually download and install an .apk file. An .apk file behaves in a similar manner to a “.exe” file on Windows, you need to copy it to your device and run it. Here are some ways that you can manually install an application without going through the market.

Enable Unknown Sources

Before attempting a manual installation of apps using the .apk files, you must first allow your phone to install from “Unknown Sources” (i.e. non-Market apps).

To do this, navigate to Menu -> Settings -> Applications and check the box marked “Unknown Sources“.

1. Installing app Using The Conventional Method

Step 1: Install File Manager

Android does not natively come with any method of browsing the data on your SD card, so you will need to install a file manager from a market. There are a large variety of file managers available on Android, but my personal favourite is ASTRO File Manager.

Step 2: Copy .apk file to SD card

Once you have ASTRO File Manager installed, connect your Android device to your PC using your USB cable. Mount the SD card and copy over the .apk file you would like to install.

Step 3: Install .apk

On your Android device, navigate to the .apk file using ASTRO File Manager and select it.

This will open a dialog box allowing you to install the app. Select “Open App Manager“.

On the next two pages, select “Install” and “Install” again to install the .apk.

Your new app is now installed.

2. Installing app using Dropbox

Dropbox is really a versatile app and is a waste if we don’t fully utilize it. The method is simple. In your computer, download the apk file to your Dropbox folder. Let it finish syncing. In your phone, open the Dropbox app, navigate to the folder where you keep the apk file, click on it. Dropbox will then download the apk file. The usual installation follows.

3. Installing app Using the Online Apk Installer

The online apk installer is a web app created by a helpful XDA-Developers forum member htc-hd2, with the aim to make manual installation of an .apk file much easier. It is useful if you want to share an apk file with a friend.

Step 1: Upload File

First, navigate to www.apkinstall.com.

Here you will see a black “Browse Files…” button. Select this and choose the apk file on your PC.

The apk file will remain active on the website for 15 minutes.

Step 2: Scan QR Code

Once you have uploaded the file, a QR code will appear on the website.

You must scan this QR code with a Barcode Scanner. The website suggests using Barcode Scanner, however I personally prefer using Google Goggles.

Once the QR code has scanned, you can click on the link to download the .apk file straight to your device.

Step 3: Install .apk

After the .apk file has downloaded to your Android device you can install it by simply clicking on it and navigating through the installation pages.

Conclusion

Most users will probably be comfortable using the conventional method of installing Android apps. However, if you have a less tech-savvy friend who you want to share an apk with, you can always remotely upload it and send them the QR code to scan using their phone. This way they will not have to fiddle around with copying the apk to their phone and opening it using a file manager.

Let us know in the comments if you have been able to use this tool.