Thursday, October 30, 2014

New version of jQuery - jQuery 3.0

Yesterday, jQuery team has announced that jQuery new version will be called 3.0 and it is around the corner for release. We will be updating you with what's new with jQuery 3.0.

Below is excerpt from their blog post

"The concept of versioning gets a little more nuanced with jQuery, where browser compatibility can be just as important as API compatibility. In order to create a slimmer jQuery, the team started shipping two versions in 2013. The first version remained numbered in the 1.x line and, currently at 1.11.1, maintains compatibility with a maximal number of browsers. The second version, starting with 2.0.0 and now at 2.1.1, dropped support for browsers like IE8 or lower in order to streamline the code. Both the 1.x and 2.x versions of jQuery have the same public APIs, even though they differ somewhat in their internal implementations.

The successor to what is now version 1.11.1 will become jQuery Compat 3.0. The successor to jQuery 2.1.1 will be jQuery 3.0. There are two different packages on npm and Bower, but they share the same version to indicate they have the same API behavior.
"

Read complete post
We shall keep you posted with what's comes new and what changes with the new release of jQuery 3.0. Keep visiting!!!!!

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

Tuesday, October 28, 2014

10 jQuery Plugins to make select box/list awesome

Do you feel that HTML select box style is boring, not eye-catching and looks old? If yes, then find a complied list of 10 awesome and free jQuery plugins which will turn your select list or box or dropdown into an awesome, stylish and eye catching control.

You may also like:

Selectator


Selectator is a jQuery-based replacement for select boxes. It supports searching, and affects the original select box directly, which is used as the data container.


FancySelect


FancySelect is a better select for discerning web developers everywhere and it is easy to use.


HeapBox


HeapBox is plugin for jQuery that replace native HTML selectboxes in your webpages. HeapBox supports themes, events, callbacks, ajax and much more.


Select.js


Select.js is a Javascript and CSS library for creating styleable select elements. It aims to reproduce the behavior of native controls as much as is possible, while allowing for complete styling with CSS.


Select or Die


Select or Die is a jQuery plugin to style/replace select elements.


Minimalect


Minimalect is a jQuery plugin for minimal and custom select replacement.


Selectify


Selectify is a jQuery plugin that turns select element into a stylable and customizable element. The element can receive focus and blur. When focussed, all key strokes for selecting elements will work including browsing by pressing the up and down keys.


ikSelect


ikSelect is a jQuery Plugin to Stylize Selects.


Selecter


Selecter is a jQuery plugin for replacing default select elements. Replace those boring default select elements with something a little nicer. It plays nice with that shiny responsive layout.


Selectize.js


Selectize is the hybrid of a textbox and <select> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.


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

Monday, October 27, 2014

5 excellent android apps to learn jQuery

In this post, find a list of 5 excellent and free android apps to learn jQuery on the go. These apps are having detailed documentation with examples and covers most of the things.


You may also like:

jQuery Tutorials


This android apps comes with a cleaner UI with all the information you need on the go about jQuery. This app covers jQuery tutorials, effects, ajax functions, traversing functions and HTML related functions.


Dev Pocket Reference - jQuery


Developer Pocket Reference (jQuery) is package of DPR series in attempt to provide references / guidance for developer on palm. This DPR - jQuery is free and provides a complete and comprehensive manual / reference.


jQuery Dictionary


This app is jQuery API reference. jQuery, jQueryUI and jQuery Mobile API documentation are included in this app.


jQuery API CheatSheet


Application that includes all contents of jQuery, where you can search and view examples in a clear and simple way. It contains all versions of jQuery up to version 1.9.


jQuery Tutorials


Another jQuery tutorial app which covers all the basic details you need to know about jQuery.


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

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...