Using multiple iScroll in one page

Even in Popup - Here is the working Fiddle I created

Separate CSS for Windows OS Versions using javascript

Windows 8 is way too weird compared to Windows 7, and it is a lot difficult to manage our website on both operating systems, because the browsers are same - for example: IE 10 for WIN7 and WIN8 renders page differently.

Here's how we can link separate CSS file for different Windows OS versions:

For Windows 8 -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 6.2") != -1) {
    //Your css for Windows 8 here
    //alert('Windows 8');
    var head= document.getElementsByTagName('head')[0];
    var addCSS= document.createElement('link');
    addCSS.href = 'css/win8.css';
    addCSS.rel = 'stylesheet';
    addCSS.type = 'text/css';
    head.appendChild(addCSS);
};

For Windows 7 -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 6.1") != -1) {
    //Your css for Windows 7 here
    //alert('Windows 7');   
};

For Windows XP -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 5.1") != -1) {
    //Your css for Windows XP here
    //alert('Windows XP');   
};

CSS image sprite for high resolution retina display - iPad 3

iPad 3 has an incredible 2048 × 1536 pixels high-resolution retina display. If we serve it the same images we used for PC or even for iPad 2, all the images/icons are gonna look blurred on this high resolution iPad 3. Reason is its high resolution.

In order to make our icons look better on high resolution we have to use different background image for high resolution devices with the help of CSS Media Query. I will call the image as: image-2x.png

What is image-2x.png?
Suppose we are using 36x36 size icon for regular screen resolutions, the same icon has to be 72x72 pixels for high resolution. Twice the size of normal resolution. If we are using sprite image for our project and the size is 200x200 for regular screen with all the icons in it, the same image for high resolution devices has to be 400x400 pixles.

How to use it separately for high resolution devices?
CSS Media Query:
/*For regular screen resolutions*/

.spriteImage{ 
  background: url(SpriteImg.png) no-repeat left top;

}

/*For high resolution screens*/

@media (-webkit-device-pixel-ratio: 2){ 
    .spriteImage{
        background: url(SpriteImg-2x.png) no-repeat left top;

    }
}

Note: The -webkit-device-pixel-ratio: 2 will change in future depending on the screen resolutions. Here pixel-ratio 2 is used for iPad 3

Ok - what is the problem?
If we use the 2x background image and background-position based on what it is in that large image, nothing will work.

Why?
The HTML container we are serving the large background image remains the same size, for instance: 36x36. How will I fit 72x72 background image in 36x36 size container? Especially with image sprite.

How?
CSS3 background-size: property to rescue.

What does background-size do?
The background-size CSS property specifies the size of the background images.

The solution:
Consider my hi-res image for iPad 3 has 200x400 dimensions. When I am defining the background-size of this image for hi-res devices I will write it as –
background-size: 100px 200px;

Did you see what happened above? With background-size property I already squeezed the 200x400 image to 100x200. Meaning – the pixels of hi-res image are now been packed together to half size of it, which will result in displaying better quality on high resolution devices.

Also, we have to set the background-position considering the background image size 100x200 px, not 200x400 px.

This technique is a lot more confusing in the beginning. But when you know how it works, then it’s too simple.

Optimizing Web Experiences for High Resolution Screens

iPad 3 and Retina Screen: What it means for your mobile site

http://www.mobify.com/blog/ipad-3-and-retina-screen-what-it-means-for-your-mobile-commerce-site/

- A huge jump in screen resolution from 1024 × 768 pixels to an incredible 2048 × 1536 pixels. Apple calls this super-high-resolution screen its Retina display.

- As Kevin Suttle posted on Twitter: "No seriously, this screen is so bright and crisp it looks fake."

- The iPad 3 screen remains the exact same size as previous iPads – 9.7 inches. Yet that same screen size now packs more pixels than a high-definition 50-inch TV.

- Think about how clear a Blu-Ray movie is on a high-definition TV. Compress the image on that TV to the 9.7-inch screen of the iPad. Then add about 50% more pixels. That’s how crisp and sharp images are on the new iPad's Retina screen.

How Apple.com will serve retina images to new iPads

http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/

- What they’ve chose to do is load the regular images for the site and then if the device requesting the page is a new iPad with the retina display, they use javascript to replace the image with a high-res version of it.

The heavy lifting for the image replacement is being done by image_replacer.js. Jim Newberry prettified the code and placed it in a gist for easier reading.

Another interesting part of image_replacer.js is that it checks for the existence of 2x images before downloading them:

- As far as I can tell, there is no attempt to prevent duplicate downloads of images. New iPad users are going to download both a full desktop size image and a retina version as well.

The price for both images is fairly steep. For example, the iPad hero image on the home page is 110.71K at standard resolution. The retina version is 351.74K. The new iPad will download both for a payload of 462.45K for the hero image alone.

The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded.

-Unfortunately, it means that there are now three http requests for each assets: a GET request for the standard image, a HEAD request to verify the existence of the retina image, and a GET request to retrieve the retina image.

Optimizing Web Experiences for High Resolution Screens:

http://bradfrostweb.com/blog/mobile/hi-res-optimization/

“@Malarkey Screen resolutions are going to increase. Period. Adaptation is the name of the game in web design. The sky is not falling.” — @robweychert

@media queries

We can use @media queries to target hi-res displays and serve them up different styles, including different background images. While not entirely related to images, Brad Birdsall demonstrates how you can finesse designs for hi-res displays. I wonder if there are the same issues regarding media queries and asset downloading with pixel-density as there are with device widths.

Grayscale images with CSS3 Filter Property

img{
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */   
   
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);   
}

Demo

CSS Media Query min-width Vs min-device-width with meta viewport

As I was working on responsive UI, the one thing that confused me a lot was the min-width and min-device-width.

@media screen and (min-width : 320px) and (max-width : 480px) { 
    /*Your CSS goes here*/ 
}

This was working properly in my PC browser as: min-width describes the width of the rendering surface of the output device such as the width of the browser window which changes as I resize my PC browser window.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    /*Your CSS goes here*/ 
}

This was working properly in my iPhone Safari browser as: min-device-width describes the width of the output device, meaning the entire screen or page, rather than just the rendering area.

I was googling for only one media query that should work for both: on the resized PC browser and on iPhone's Safari browser. And here is what worked for me - 

The Solution:
Defining <meta name="viewport" content="width=device-width"> in  HTML page resolves the issue with

@media screen and (min-width : 320px) and (max-width : 480px) { 
    /*Your CSS goes here*/ 
}

This meta tag and media query combination works perfectly on PC browser and iPhone's Safari. Here is more on Combining meta viewport and media queries.

jquery for css media query

Here is how we can target different devices with the help of jquery, modernizr and CSS Media Query -

We need to include Modernizr and jQuery js files in our HTML to get this working -

<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>

<script type="text/javascript">
$(window).resize(function() {
    if (Modernizr.mq('(max-width: 1024px)')) {
        // do something

    }
});
</script>

In this example below we are targeting 'Samsung P6200 Galaxy Tab 7.0 Plus'

<script type="text/javascript">
$(function(){
    if (Modernizr.mq('(max-device-width: 1024px) and (min-device-width: 600px)')) {
       alert('You are in!');

    }
});
</script>

Developing cross platform mobile apps with PhoneGap Build

https://build.phonegap.com/

No separate SDKs are required. No separate IDEs are required (i.e. Eclipse for Android and Xcode for iPhone and so on). PhoneGap Build helps you develop native apps with HTML5, CSS3, and JavaScript for six platforms in one go.

Things you need to know before starting with PhoneGap Build:
Chrome Extension: Ripple Emulator
https://chrome.google.com/webstore/search-extensions/emulator?hl=en

PhoneGap Emulator
http://emulate.phonegap.com/

PhoneGap Build
https://build.phonegap.com/

Introduction to PhoneGap Build

Starting with PhoneGap Android App Development

As we decide to develop a PhoneGap Android App the first thing that strikes is - How can I get started with it?

The PhoneGap website talks about the code solutions but it doesn't tell us anything about setting up the project. So, what are the steps to follow to setup the project we downloaded from PhoneGap website? First of all we need to have the basic platforms installed on our machine such as Eclipse for Android and Xcode for iOS. You can download Eclipse from: http://www.eclipse.org/downloads/

While installing Eclipse you will be prompted for jre/bin/javaw file is not found. To resolve this issue you need to download the JRE (Java Runtime Environment) from http://www.oracle.com/technetwork/java/javase/downloads/index.html Make sure you download the version that supports your operating system and the eclipse application 32 or 64 bit. Install JRE with all default settings, do not change installation path or anything while installation.

Once you are done with JRE installation goto C:\Program Files\Java --> copy the jre7 folder (jre7 version may vary depending on the version you install) and paste it in your eclipse application folder and then rename it to 'jre'. Now your Eclipse should have no issues in installation.

Configuring PhoneGap in Eclipse for Android:
Adobe has posted a very good guide here - Getting started with PhoneGap in Eclipse for Android Just follow the steps and you should be ready with your app.

The second thing that pops up as you start coding is - how to get click events in PhoneGap? Here is a simple example on navigating pages in PhoneGap - http://stackoverflow.com/questions/12280351/how-navigate-one-page-to-another-page-in-android-phonegap
But, for navigating pages in PhoneGap I would suggest you go through the basic a href="abc.html" way, it is much simpler and works well.

For back button function in PhoneGap; use this simple code with cordova js -
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
//navigator.notification.alert("PhoneGap is working");
document.addEventListener("backbutton" , onBackKeyDown, false);
}
function onBackKeyDown(){
navigator.app.backHistory();
}

Adding jquery effects and choosing the best js for PhoneGap: 
http://zeptojs.com/ is considered the lightweight and best suited js file for PhoneGap with necessary effect, actions, and methods.

Using animations with Zepto JS: 
zepto-page-transitions works best with zepto js for page transition effects  https://github.com/dgileadi/zepto-page-transitions or you can choose to write your own CSS for animations.

More References: 
ANDREW TRICE has posted an amazing workflow for Developing PhoneGap Applications

Just in case if you wish to go through a simple example of Android App with PhoneGap, please refer Combining your web skills with PhoneGap to build mobile apps

Curious about knowing more of PhoneGap?
Check this URL: https://build.phonegap.com/
And search on youtube for adobe phonegap build - they have some nice videos.