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.

Start downloading file on page load

We can do this by using window.location.href

<body onload="javascript:window.location.href='http://yoursite.com//filename.zip';">


Viewing .pdf file in a DIV

Very few lines of code and it works like charm in all browsers including IE7

<div>
  <object data="sample.pdf" type="application/pdf" width="600" height="600">
      alt : <a href="sample.pdf">sample.pdf</a>
  </object>
</div>