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

Monday, August 18, 2014

5 Chrome Extensions for jQuery

Find a complied list of 5 Chrome extension in relation with jQuery. These extension helps in speedy development, testing and debugging your jQuery code right in your browser.

You may also like:

jQuery Audit


jQuery Audit creates a sidebar in the Elements panel containing jQuery delegated events, internal data, and more, as live DOM nodes, functions, and objects.



jQuerify


Inject jQuery latest stable release version into any page you want or indicate presence of jQuery if it is included on page already.



jQuery Maxify


This extension maxifies all minified jQuery references on a page can be toggled on and off by clicking the extensions icon.



jQuery Reference


jQuery Reference Search Extension allows you to search about any jQuery reference without moving to new tab or window.



All Cheat Sheets


jQuery cheat sheet right in your browser for quick help!!!!



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

Thursday, August 14, 2014

How to copy text from one input textbox to multiple textboxes using jQuery

In this post, find jQuery code to copy text from one input textbox to multiple textboxes while typing or in real time or on paste. To achieve this, give a same class name to all the textboxes in which text needs to be copied.

For example, in the below code all the textboxes are having same class named "copyText".
<input type='text' id='txtFirst' class='copyText' /><br/>
<input type='text' id='txtSecond' class='copyText' /><br/>
<input type='text' id='txtThird' class='copyText' /><br/>
Now, attach "keyup", "change" and "paste" event on "copyText" class and then assign the current input value to all other textboxes.
$(document).ready(function(){
    $('.copyText').on('keyup change paste', function(e){
        $('.copyText').val($(this).val())
    });
});
You may also like:
Above code will keep all the textboxes in sync. But if you want to copy text from first input to all others not vice-versa then attach "keyup", "change" and "paste" event on first input text only.
$('#txtFirst').on('keyup change paste', function(e){
     $('.copyText').val($(this).val())
 });
See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...

Thursday, August 7, 2014

How to Limit Number of Characters in Textarea using jQuery

Find jQuery code to limit characters inside textarea control. Below code also handles copy + paste and on drop event.
$(function () {
    var nMaxLength = 150;
    $("#txtDesc").keydown(function (event) {
        LimitCharacters($(this));
    });
    $("#txtDesc").keyup(function (event) {
        LimitCharacters($(this));
    });

    function LimitCharacters(txtDesc) {
        if (txtDesc.val().length > nMaxLength) {
            txtDesc.val(txtDesc.val().substring(0, nMaxLength));
        } else {
            var nRemaining = nMaxLength - txtDesc.val().length;
            $('.remaining').text(nRemaining);
        }
    }
});
To stop drag and drop in textarea, simply set onDrop="return false;".
<textarea name="txtDesc" rows="4" cols="50" id="txtDesc" onDrop="return false;" style="width:70%;"></textarea>
You may also like: Feel free to contact me for any help related to jQuery, I will gladly help you.
Read more...