CSS Media Queries For Common Devices

/* All Smartphones in portrait and landscape ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in landscape ----------- */
@media only screen 
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in portrait ----------- */
@media only screen 
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}

/***** ANDROID DEVICES *****/

/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}

/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}

/* Android(Samsung Galaxy) in Landscape 685 X  380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}

/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}

/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}

/***** ALL GENERATION IPADS *****/

/* iPads in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */  
}

/* iPad in landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}

/* iPad in portrait----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}



/***** Retina IPAD 3 & 4*****/

/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}




/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/

/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in landscape ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in portrait ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}

/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}

Create your own Autocomplete for Adding Multiple emails using JQuery

<html>
<head>
<style>
#auto_email_to
{
    border:1px solid #cccccc;
    width:auto;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:15px;
    height:auto;
    margin-top:0px;
    list-style:none;
    position: absolute;   /*display:none;*/
    padding: 0;
    background-color: #EAEAEA;
    z-index:1;
    box-shadow:6px 6px 8px #cccccc;
}

#auto_email_to li
{
    height:25px;
}

#email_to
{
    width:800px;
}

.services li.selected{
    background-color:#636060;
    color:#ffffff;
}
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript">
</script>
<script>


var email_to = ["Albert@tom_jerry123.com","Allen@tom_jerry123.com","Aladin@tom_jerry123.com","Nilesh@tom_jerry123.com","Dharmesh@tom_jerry123.com","Aakesh@tom_jerry123.com","Pankaj@tom_jerry123.com","Vijay@fakebook.com","Manoj@fakebook.com","Zahir@fakebook.com","Mukesh@fakebook.com","Kishor@fakebook.com","Sachin@fakebook.com","Rakesh@fakebook.com"];

$(document).ready(function(){

var seperator = "";


//alert(123);
if($("#email_to").length > 0)
    {
   
        $("#email_to").unbind('keyup').keyup(function(e){
            var str = $("#email_to").val();
       
            var last_char = str.slice(-1);
       
          
            if(last_char == ",")
            {
               
                seperator = ",";   
            }
            else if(last_char == ";")
            {
              
                seperator = ";";   
            }
       
           
       
            if(seperator == ",")
            {
                if(str.lastIndexOf(",") == -1)
                {
                    //var Index = "";

                }
                else
                {
                   
                    var Index = str.lastIndexOf(",")+1;
                }
   
            }
            else if(seperator = ";")
            {
                if(str.lastIndexOf(";") == -1)
                {
                    //var Index = "";
                   
                }
                else
                {
                   
                    var Index = str.lastIndexOf(";")+1;
                }
       
            }
       
            if(Index < str.length)
            {

               
                var result = str.substring(str.lastIndexOf(""+seperator+"") + 1);  
               
                if(e.keyCode == 13) 
                {//("Enter");
                   
                    var text_value = $("#email_to").val();
                    var sub_val = text_value.substring(0,text_value.lastIndexOf(""+seperator+""));
                    var my_value = $(".selected").attr('id');
                    var final_value = sub_val + seperator + " " + my_value;
                    if(my_value != undefined)
                    {
                        $( "#email_to" ).val(final_value);
                        $( "#email_to" ).focus();
                        $("#auto_email_to").slideUp();
                        $(".services").empty();
                    }
                }
                else if(e.keyCode == 38) 
                { //up
                    var selected = $(".selected");
                    $(".services li").removeClass("selected");
                        //alert(selected.prev().length);
                        // if there is no element before the selected one, we select the last one
                        if (selected.prev().length == 0) 
                        {
                            var child = selected.siblings().length + 1;
                            //alert(child);
                        $(".services li:nth-child("+child+")").addClass("selected");
                        } 
                        else 
                        { // otherwise we just select the next one
                        selected.prev().addClass("selected");
                        }
                        
                }
                else if(e.keyCode == 40) 
                { //down
                   
                    var selected = $(".selected");
                    $(".services li").removeClass("selected");
                   
                    if (selected.next().length == 0) 
                    {
                        $(".services li:nth-child(1)" ).addClass("selected");
                    } 
                    else 
                    {
                        selected.next().addClass("selected");
                    }
               
                }
                else
                {
                    call_email(result, "email_to", seperator);
                }
            }
            else
            {
           
                if(e.keyCode == 13) 
                { // enter
       
   
                    if ($(".services").is(":visible"))
                    {
       
                        my_value = $(".selected").attr('id');

                            $( "#email_to" ).val(my_value);
                            $(".product_class").empty();
                        $(".services").empty();
                        $("#auto_email_to").slideUp();
                        
                    }
                     else
                     {
                        $(".services").show();
                    }
                    //menuOpen = !menuOpen;
                 }

                else if(e.keyCode == 38) 
                { // up

                    var selected = $(".selected");
                    $(".services li").removeClass("selected");
                    
                    // if there is no element before the selected one, we select the last one
                    if (selected.prev().length == 0) 
                    {
                        var child = selected.siblings().length + 1;
                       
                    $(".services li:nth-child("+child+")").addClass("selected");
                    } 
                    else 
                    { // otherwise we just select the next one
                    selected.prev().addClass("selected");
                    }
                }

                else if(e.keyCode == 40) 
                { // down
                    var selected = $(".selected");
                    $(".services li").removeClass("selected");
                    if (selected.next().length == 0) 
                    {
                        $(".services li:nth-child(1)" ).addClass("selected");
                    } 
                    else 
                    {
                        selected.next().addClass("selected");
                    }
                  }
                  else
                  {
                      call_name("email_to");
                  }
            }
       
        });
       
    }
});


function call_email(value, param, seperator)
{
    //alert(seperator);
    $(".services").empty();
    var biller_name = value.toUpperCase().trim();
    //alert(biller_name + "  " + param);
    var container = "";
    $("#auto_"+param+"").empty();
    if(biller_name != "")
    {
        if(param == "email_to")
        {
            var j = 0;
            for(i=0;i<email_to.length;i++)
            {
                container = email_to[i].toUpperCase().toString();
               
                if(container.indexOf(biller_name) >= 0)http://jsfiddle.net/7418/hzZJA/1/
                {
                   
                    if(j == 0){var selected = 'selected';}else{var selected = 'abc';}
                    $("#auto_"+param+"").append("<li class='listing "+selected+"' id='"+email_to[i]+"'>"+email_to[i]+"</li>");               
                    j++;
                }
                else
                {
                    $(".services").hide();
                   
                }
            }
        }
       
        $("#auto_"+param+"").slideDown();
       
            $(".services li").mouseover(function() {
            //alert(param);
http://jsfiddle.net/7418/hzZJA/1/             $(".services li").removeClass("selected");
            $(this).addClass("selected");
            });
           
            $(".services li").click(function() {
               
                var text_value = $("#"+param+"").val();
                var sub_val = text_value.substring(0,text_value.lastIndexOf(""+seperator+""));
                //alert(sub_val);
                var my_value = $(this).attr('id');
               
                var final_value = sub_val + seperator + " " + my_value;
                    selectOption(final_value, param);
                    $("#"+param+"").focus();
                $(".services").empty();
                $("#auto_"+param+"").slideUp();
            });
           
    }
    else
    {
            $("#auto_"+param+"").slideUp();
    }
   
}


function call_name(param)
{
    $(".services").empty();
    //alert(param);
    var temp_name = $("#"+param+"").val().toUpperCase().trim();
    var container = "";
    $("#auto_"+param+"").empty();
    if(temp_name != "")
    {
        if(param == "email_to")
        {
            var j = 0;
            for(i=0;i<email_to.length;i++)
            {
                container = email_to[i].toUpperCase().toString();
               
                if(container.indexOf(temp_name) >= 0)
                {
                   
                    if(j == 0){var selected = 'selected';}else{var selected = 'abc';}
                    $("#auto_"+param+"").append("<li class='listing "+selected+"' id='"+email_to[i]+"'>"+email_to[i]+"</li>");               
                    j++;
                }
                else
                {
                    $("#auto_"+param+"").hide();
                }
            }
        }
       
           
           
        $(".services li").mouseover(function()
        {
            $(".services li").removeClass("selected");
            $(this).addClass("selected");
        });
       
        $(".services li").click(function() {
            var my_value = $(this).attr('id');   
                selectOption(my_value, param);
                $(".product_class").empty();
            $(".services").empty();
        });
        var my_width = $("#"+param+"").width() + 5;
   
        $("#auto_"+param+"").width(my_width);
        $("#auto_"+param+"").width(my_width);
        $("#auto_"+param+"").slideDown();
       
        if(param != "email_to")
        {
            $("#"+param+"").unbind('blur').blur(function() {
                var my_value = $(".selected").attr('id');
                var my_id = $(".selected").attr("value");
                if($("#"+param+"").val() == "")
                {
                    $("#"+param+"_id").val("");
                }
       
                    selectOption(my_value, param, my_id);
                $("#auto_"+param+"").slideUp();
                $(".services").empty();
            });
        }
       
           
    }
    else
    {
            $("#auto_"+param+"").slideUp();
    }
   
}

function selectOption(my_value, param, my_id)
{
   
    $( "#"+param+"" ).val(my_value);
    $( "#"+param+"_id" ).val(my_id);
    $("#auto_"+param+"").slideUp();
}

</script>
</head>
<h3>For separating Email addresses use "," or ";"</h3>
<input type="text" class="" id="email_to" value="" placeholder="Enter Email" autocomplete="off"/>
<ul class="services" id="auto_email_to">
                   
</ul>
</html>

Live Demo :

HTML5 canvas using JavaScript

The canvas is HTML5 element used to draw graphics using JavaScript. 

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid #000000;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
//ctx.fillStyle='#FF0000';

  for (var x = 0, y = 0; x < 150 && y < 200; x += 50, y += 37) {
var i = x+125;

var color ='FF0'+i;
//alert(color);
ctx.fillStyle='#'+color;
ctx.fillRect(x,y,60,60);
  }

</script>

</body>
</html>

Demo :  http://jsfiddle.net/7418/FHT3R/

Fetch GooglePlus Feeds using PHP

<?php function fetchAPI($url) {

$content = '';

if (ini_get('allow_url_fopen') == true) {
$content = file_get_contents($url);
}
else {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url . $key);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
}
return $content;
}


// Google+ ID
$googlePlusID = 'YOUR ID';
$url = "https://plus.google.com/YOUR ID/posts";
// Google+ API key
$key = 'DEVELOPER KEY';

$url = 'https://www.googleapis.com/plus/v1/people/' . $googlePlusID . '/activities/public?alt=json&pp=1&key=';

$content = fetchAPI($url . $key);

if ($content)
file_put_contents($cacheFile, $content);
if (!$content)
die('Failed to load G+ data');
$gplus = json_decode($content);

if (!$gplus)
die('Failed to decode G+ data');
echo "<pre>";
print_r($gplus);
die;