Wednesday, September 24, 2014

Random newest jQuery plugins

In this quick post, take a look at some of the newest, interesting and unique jQuery plugins released in last couple of months.

PgwBrowser


PgwModal is a Browser & OS / platform detection plugin for jQuery. It detects desktop and mobile devices. And it is compatible with Windows, Mac, Linux, Android and Apple iOS.

Scroll Advance


ScrollAdvance is a jQuery plugin that adds some useful functions as scrollBottom(), scrollRight() or scrollCenter() for the scroll position.

Goodnight


A super small Javascript plugin for applying special CSS styles at night.

TimePicki


Timepicki - free Time picker jquery plugin, it is simple and clean timepicker so user can understand to set time for your project in input forms.

Cropbox


Cropbox is a lightweight and simple jQuery plugin to crop your avatar.


jQuery.my


jQuery.my is a plugin that binds HTML controls with underlying javascript object using declarative MVVM style manifest. Bindings are bi-directional and real-time.

Blurr


jQuery Plugin to create nice blur backgrounds from an image.

Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Thursday, September 4, 2014

How to fallback to PNG if SVG not supported?

SVG or Scalable Vector Graphics image format has suddenly become popular for showing images on your website and its future graphic format. But not all browsers supports SVG format and that's why SVG format was not so popular though it exists from 1999. So in this post, we will find how to fallback to PNG format if SVG is not supported by browser.


Why use SVG


SVG images are vector based! Meaning that they will be as sharp as hell no matter how big they are. SVG files are smaller and easier to compress than other formats. Graphics with SVG will print in a higher resolution. Editing of SVG can be done with even Notepad. SVG images are zoomable and scalable. Like other graphics, SVG works as a static or animated image. SVGs use XML to define paths and shapes, to create our graphic. Recommended reading "Why Use SVG - What are the Advantages".

You may also like:

SVG Fallback


There are couple of solution for SVG fallback.

  1. Using jQuery and Modernizr

First, we need to detect if SVG is supported or not by browser. And for that we can use Modernizr. It is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.
if (Modernizr.svg) {
    // Supports SVG
} else {
    // Doesn't support SVG (Fallback)
}
So, once it is detected then you can fallback to PNG using a simple jQuery script.
if (!Modernizr.svg) {
   $('img[src*="svg"]').attr('src', function() {
      return $(this).attr('src').replace('.svg', '.png');
   });
}
The above script will find all the image with src "svg" and then replace the extension with PNG.

  1. Using Pure JavaScript (No jQuery)

Following JavaScript code block can also be used for SVG Fallback.
if (!Modernizr.svg) {
    var imgs = document.getElementsByTagName('img');
    var endsWithDotSvg = /.*\.svg$/
    var i = 0;
    var l = imgs.length;
    for(; i != l; ++i) {
        if(imgs[i].src.match(endsWithDotSvg)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

  1. Using jQuery plugins

There are couple of jQuery/JavaScript plugin which can be used for SVG Fallback.

SVGMagic


SVGMagic is a simple jQuery plugin that searchs for SVG images (including background-images) on your website and creates PNG versions if the browser doesn't support SVG.

Just download the SVGMagic.js script include it and initialize it.
$(document).ready(function(){
   $('img').svgmagic();
});
SVGmagic checks which browser your visitor is using. Is it a browser that doesn't support SVG images, than it starts the magic! First of all the script will check which images on your website are SVG and collects their URLs. These URLs are then send to our server which will temporarily download, convert and save them. When that's done the server send back a package with new URLs. The SVG images on your website than get replaced by the new PNG images and your old-school visitor can see the 'SVG' images.

SVGeezy


SVGeezy is in essence, a fallback plugin. It allows you to use SVGs for all your assets, giving you complete resolution independence. It checks if the browser supports SVGs, if not, changes the src of the image to a .png instead (or whatever you pass in).

Just download the svgeezy.js script include it and initialize it.
svgeezy.init(false, 'png'); // this will let the plugin check all images
The first parameter is a class to tell the code not to check. Feel free to pass in false if you want SVGeezy to check all images. This may be because you have no fallbacks for certain SVGs.

The second is a filetype, this can be anything you want, just make sure the file path resolves to an image. ie. '/images/logo.svg', will be replaced with '/images/logo.png'.

Summary


If you are still not using SVG, then start using. SVGs are resolution independent, meaning responsive design. SVG images can also be created directly in your HTML document, without even having to save the file itself.

Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Wednesday, September 3, 2014

5 Latest jQuery Image Crop Plugins

Previously I have posted about "5 jQuery Image Crop Plugin & Tutorials" but after that many new image crop plugins are released. So in this post, find a complied list of latest jQuery image crop plugins.

You may also like:

Cropit


A jQuery plugin for image cropping and zooming. It loads images locally via FileReader, and does cropping using canvas.


croppic


croppic is an image cropping jquery plugin that will satisfy your needs and much more.



Image Cropper


A simple jQuery image cropping plugin.



Fakecrop


jQuery-Fakecrop Plugin takes a collection of images and automatically scale them to fit a custom-defined bounding box. This creates a "fake" cropping effect on those images; which produces convincing thumbnails.


CropZoom


CropZoom is a jQuery plugin to crop, zoom and rotate images.


Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Tuesday, September 2, 2014

12 Handy CSS Snippets for Developers

Find a complied list of 12 handy CSS Snippets for developers or designers. These CSS Snippets addresses most common use cases that are must for websites. These snippets includes like centering a div, rounding corners, targeting chrome and firefox, alternate table row, sticky footer, media queries and many more.


1. Center a DIV with CSS

#idOfTheDiv {
   width: 400px; /* here you put the width that you need */
   height: 200px; /* here you put the height that you need */
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-200px; /* this number always to be the width divided two in negative */
   margin-top:-100px; /* this number always to be the height divided two in negative */
}
Source Link

2. Common @media queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Source Link

3. Print the url after your links

@media print  
{  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}
Source Link

You may also like:

4. Rounded Corners using CSS

#idOfTheDiv {
    border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}
Source Link

5. Transparency for ie, firefox and safari

#element {
    filter:alpha(opacity=50); //For IE
    opacity: 0.5; //Safari
    -moz-opacity:0.5; //Mozilla & Firefox
}
Source Link

6. Sticky Footer

html, body {height: 100%;}
     
    #wrap {min-height: 100%;}
     
    #main {overflow:auto;
    padding-bottom: 150px;} /* must be same height as the footer */
     
    #footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}
     
    /*Opera Fix*/
    body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
    }
     
     
    
Source Link

7. Prevent Long URL's From Breaking Out with CSS

.break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word; 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
 
.ellipsis {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis; /* Required for IE8 */
    -o-text-overflow: ellipsis; /* Required for Opera */
    text-overflow: ellipsis;
}
Source Link

8. Removing Arrows From <SELECT> Tag with CSS

SELECT.no_arrows {
    width:90px; padding-top:0px; margin:-5px 0 0 5px; border:0px;
    background:transparent; -webkit-appearance:none;
    text-indent:0.01px; text-overflow:""; color:#444;
}
SELECT.no_arrows:focus {
    box-shadow:none;
}
SELECT.no_arrows::-ms-expand{
    /* for IE 10+ */
    display:none; 
}
@-moz-document url-prefix(){
    /* for FF */
    SELECT.no_arrows {
        width:auto; padding-top:2px; margin:0 0 0 5px;
        -webkit-appearance: none; -moz-appearance: none;
    }
}
Source Link

9. Targeting Chrome With CSS

@media screen and (-webkit-min-device-pixel-ratio:0) {
    H5 { color:red; }
    P { margin-left:20px; }
    /* other special styles for Chrome here */
}
Source Link

10. Targeting Firefox With CSS

@-moz-document url-prefix(){
    H5 { color:red; }
    P { margin-left:20px; }
    /* other special styles for FireFox here */
}
Source Link

11. Center Website Content with CSS

<style type="text/css">
/* Center your website horizontally */
.wrapper{
   width:960px;
   display:table;
   margin:auto;
}
 
/* Center certain content vertically */
.container{
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}
</style>
 
<div class="wrapper">
    <div class="container">
        <p>Content goes here</p>
    </div>
</div>
Source Link

12. Alternating Table Color Rows in CSS

<style type="text/css">
/* technique 1 */
tbody tr:nth-child(odd){ background-color:#ccc; }
/* technique 2 */
TBODY TR.odd { background-color:#78a5d1; }
</style>
Source Link

Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Tuesday, August 26, 2014

How to serialize ASP.NET web form using jQuery

In this post, find how to serialize ASP.NET web form using jQuery. jQuery provides a very useful function jQuery.serialize() which encodes a set of form elements as a string.

What is serialize and why do we need?


Serialize is a way to combine your form values and create a single string which then can be used to send to server for ajax request. It is useful when your form is huge and you need to post all the form input value to server using ajax. Creating such string manually is not desired. Serialize can help you with this.

Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked.

How to use it?


Consider a following form with 3 input controls with a submit button.
<form action="#" id="form1">
     First name: <input type="text" name="first name" /><br />
     Last name: <input type="text" name="last name" /><br />
     Email: <input type="text" name="email" /><br />
     <input type="submit" value="send" id="btnSubmit" />
</form>
So when we serialize this form, so following serialize string is returned using "$("#form1").serialize();"
"first+name=jQuery&last+name=byexample&email=jquerybyexample%40gmail.com"

You can easily include particular set of controls while serializing the form. For example, you want to include only input controls not select controls.
function SerializeForm()
{
   var sValue = $("#form1")
               .find("input")
               .serialize();
   return sValue ;
}
Above code will only serialize input controls only, ignoring all other controls.

What about ASP.NET Webform?


With ASP.NET Webform, there is an issue. As to maintain states between postback, ASP.NET adds two extra input controls with ID "__VIEWSTATE" and "__EVENTVALIDATION". And we don't want to serialize these two controls input. We need to ignore them otherwise your serialize string will break and code will fail. So use ".not()" selector to ignore these 2 controls.
function SerializeForm()
{
   var sValue = $("#form1")
               .find("input,textarea,select")
               .not("#__VIEWSTATE,#__EVENTVALIDATION")
               .serialize();
   return sValue ;
}
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Monday, August 25, 2014

How to easily validate form and inputs using jQuery

Validation is an important and required functionality for any application. Without proper validations of input, you application will die. So here is a jQuery plugin named "Valideasy " which helps you to validate your forms and input control without worrying about writing long lines of code.
Valideasy is a jQuery plugin that you can use in form validation without writing complex JS script. Everything's done via HTML attributes added to your form fields. And it is is compatible with all modern browsers, starting from IE7. This plugins also allows you to easily customize the validation error message.

You may also like:
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Thursday, August 21, 2014

How to Integrate Facebook Login To Your Web App using jQuery

Adding a Login with Facebook option to your web app is a pain! The process requires multiple requests to the Facebook API, and usually results in a messy callback soup that you get stuck managing.

A typical Facebook login flow usually requires the following sequence:
https://github.com/ryandrewjohnson/jquery-fblogin
  • window.fbAsyncInit
  • FB.init
  • FB.login
  • FB.api(/me)

You may also like:

Include script after the jQuery library:
<script src="/path/to/jquery.fblogin.js"></script>
You will need a valid Facebook App Id and the Facebook JS SDK loaded to use the plugin. After that simply call $.fblogin(options) where options is an object with the desired settings.
// This will login a user with Facebook and return user's public data
$.fblogin({
    fbId: '{FB app id}',
    success: function (data) {
        console.log('Basic public user data returned by Facebook', data);
    },
    error: function (error) {
        console.log('An error occurred.', error);
    }
});

Login requesting Facebook permissions:

// the permissions option is a comma separated list of extended FB permissions
$.fblogin({
    fbId: '{FB app id}',
    permissions: 'email,user_birthday',
    success: function (data) {
        console.log('User birthday' + data.birthday + 'and email ' + data.email);
    }
});
Visit the official website for documentation, sample and find out what other options are available.
Official Website
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...