Home

Wednesday 19 June 2013

Tutorial on how to detect browser platform and operating system

Simple JavaScript code to find on which Operating System is the user browsing your web page



The following script what I've written gets the information of the Operating System. This is achieved by writing JavaScript inside the HTML file & loading it via a Web Browser. What the browser does is that: It runs the HTML file and encounters a JavaScript within and then the Java Runtime Engine process it to get the Output.

<script language="JavaScript">

var platform = navigator.platform.substr(0,3);

</script>



What the above code does?



var platform | We're creating a variable called platform to hold the result that is returned by the script.

navigator.platform | navigator here is referred to as Browser & platform is referred to the Operating System on which the user is working.

substr() | It is a method which will return that the first three letters returned from all versions of Operating Systems.

(0,3) | Returns the (start,length) | With start being the position of the character you wish to start with and length being the number of characters that you want the method to evaluate.



How to print the value returned by the above code?



document.writeln("platform");



It will return Win if the user is on Windows

It will return Mac if the user is on Macintosh and so on...



As simple as that!!



No I'll show you the full working script to find the Platform where the user is on!



<head>

   <script language="JavaScript">

     var platform = navigator.platform.substr(0,3);

     document.writeln(platform);

   </script>

</head>



This code should be placed with the <head></head> tag as seen above.



If you didn't get it right, look below for the screen shot & verify if your script is written correctly or not.



JavaScript written in Dreamweaver:

 

World of Amazing Articles - JavaScript Platform detection
World of Amazing Articles - JavaScript Platform detection

 

Output as seen on Firefox Browser on Windows platform: 

 

World of Amazing Articles - JavaScript Platform Detection Output
World of Amazing Articles - JavaScript Platform Detection Output

Great!! Go ahead & apply this script in your Web Page & enjoy!

Wednesday 27 March 2013

How to test your Responsive websites for free

Hi Guys,
You are in the ' Right place ' and at the ' Right time '!!

Today, I'm going to teach you, How you can test your Web Application which is Responsive and if it Responds to conditions when ever it is rendered in various Devices or Screen Resolutions.

There are 3 ways of accomplishing this:

1) Purchase all the Devices like iPhone, iPad, Tablet, Samsung etc on which you want your Web Application to be tested. [Which is a one time investment & costs much]

2) Purchase a Web Application, that gets you the Screenshots/Proofs of your Web Application being Rendered on different Devices. [Which will cost you according to your subscription - either Monthly, Yearly etc...]

3) Use - The Free, The Flexible, The friendly application that is Free for every one in this world.

Yes, It is your Browser what you use to test your application for Cross Browser issues. Along with that - Installing 1 or more add-on will satisfy your testing needs. Keep in mind - This is free for you. You can rely on this for 98% accuracy, the remaining 2% will be issues with Device specifics that a Browser can't show you. Because [Browser specifics differ from Device specifics]

You can use this for Testing you App when you are in a Development stage. Once you want your application to be released World Wide to your customer - you need to chose the 2nd option. Just to confirm that everything renders fine over all devices & Screen Resolutions.

So Guys, for Initial development stages, I suggest you to go with the 3rd option. i.e. your Browser itself. What you need to do to test you application is that [You will need to Re-size your browser to the Device screen resolution to see how your application is rendered in a particular device. For example: If you want it to be tested on for iPhone - You have to re-size to 320px. But the problem is that you don't know when will be the Browser re-sized to 320px. (For that you'll need an add-on.)]

Now that you'll be excited to launch your application on the Browser & test it.
Hold on..... Before launching the same, you'll need to make sure that you have one of the important add-on installed.

Yes, you will also need an add-on to be installed for you Browser before testing. But, I promise - this add-on is not Mandatory. But, if you want that ' Pixel perfect ', then, Yes you need to install this add-on which I'm going to recommend you.

The add-on is called by name ' Web Developer Toolbar '. This add-on is specifically designed for Developers. This add-on can be installed on most of the Major modern Browsers and not limited to Internet Explorer.

It is a Developer friendly add-on that supports & helps any Web Developer who uses it. It comes handy & saves a lot of time. Great people say [ Time matter a lot to this world where we live ].

Click on the following link to get that Developer friendly add-on from one of the trusted Organization. Web Developer Toolbar for Firefox. For any other Browser like Google Chrome, Internet Explorer - Just search these keyword in Google [ Web Developer toolbar for Chrome, Internet Explorer ]. By my knowledge this add-on come pre-installed for Internet Explorer.

Once done, Please Restart you Browser - If you are on an Older version or Do not Restart - If you are on Newer version. This is especially for Firefox.

Once done with the above process - Go ahead and launch your web application via your favorite Browser [Firefox].

Step by step procedure:

Step 1: You will need to find out the Button called 'Resize' on the Web Developer toolbar you just installed.

Web-design-and-development-Web-Developer-Toolbar-Resize icon
Web-design-and-development-Web-Developer-Toolbar-Resize icon

Step 2: Click on the 'Resize' button and a small ' Drop down menu ' with many options will be displayed to you.
Web-design-and-development-Web-Developer-Toolbar-Dropdown Menu
Web design and development-Web Developer Toolbar Drop-down Menu

Step 3: Click on the ' Resize window ' link. A small window will be opened with two small areas to enter the screen resolutions that you want the Browser to be resized to.

For example: If you want to test your application for iPhone - Then,this is how you will need to enter in that small window. See the screen shot for more details.

Web-design-and-development-Web-Developer-window_enter_value
Web design and development-Web Developer window enter value

But, if you remember -I told you earlier that iPhone's screen width is 320px wide. In the screen shot, I have entered 338px. Now you're confused why have I entered 338px.

Here is the calculation on for that:
iPhone's Portrait Orientation: 320px
Browser's either side space: Left - 9px & Right - 9px.

So, now what?
We'll need to add up everything, that will get our 338px.

iPhone's screen resolution
                +                                        => 320+9+9 = 338
Browser's either side spaces

See the screenshot for the visual proof.

Web-design-and-development---Web-Developer-Toolbar-window resized to 338px
Web design and development-Web Developer Toolbar window resized to 338px


Got it? Great then!!
Go ahead & build as many as web applications you require & test it with your Friendly Browser that you believe.

But, as usual - you will need to check for the Cross Browser compatibility test - so that to ensure there is no compatible issues seen.

A Precautionary note: Keep in mind that - If your application accommodates within the Browser's default Vertical space - then, you can stay with resizing you Browser to 338px.

If at all, if your web application exceeds more than the default vertical space allowed. i.e. If your application is very lengthy - Then you might need to re consider the Resize width to 355px.

This is because - If your web application is very lengthy, Browser will still accommodate that as well. But a Vertical Scroll Bar will appear towards the Right side of the Browser. Which is again roughly 17px wide.

So, the calculations change here:

iPhone's screen resolution
                +                                        => 320+9+9+17 = 355
Browser's either side spaces
                +
Browser Scroll bar width

See the screenshot for the visual proof.

Web-design-and-development-Web-Developer-Toolbar_Vertical scroll bar & total resize width of 355px
Web design and development Web-Developer-Toolbar Vertical scroll bar & total resize width of 355px
Isn't it very much simplified? Enjoy then!!