Monthly Archives: December 2013

jQuery datepicker: change position of month and year drop down

As we have seen how to add month and year drop down and how to customize year drop down range. Here I am going to explain how to switch position of month and year drop down. Usually, you can see in jQuery datepicker month and year drop down respectively but sometime you need to change position of both like first year then month. It is pretty simple. You just need to pass one more parameter.

showMonthAfterYear : true

jQuery Calender - 2

jQuery(‘div’).datepicker({
changeMonth : true,
changeYear  : true,
showMonthAfterYear : true // you are looking for
})

A complete example.

jQuery Calender: Manage Year Range

calender-month-year

If you are building high interactive web application and want to add calender then jQuery UI is perfect pick for you. jQuery UI gives so many customizable things in calender. As we have seen how to add month and year in calender in previous article. It has +10 year range in jQuery datepicker but you can give cusomizable year range as per your requirement. It’s also pretty simple. You just need to add yearRange:”-10:+10″.

yearRange:”-10:+10″

See you can write any year [1990] instead of -10 or also can give -15,-20,… and same as for +10 i.e for bottom year.

There are some sample code:

yearRange:”-20:2015″
yearRange:”1990:+20″
yearRange:”-20:+20″
yearRange:”1990:2015″

jQuery(‘div’).datepicker({
        changeMonth:true,
        changeYear:true,
        yearRange:”-20:2015″
      });

A full example code:

jQuery Calender: Include month and year dropdown

As you have seen how to add a simple jQuery calender in your project, Now think about enhancement. A jQuery Calender have much more predefined function. Here I am going to explain how to add month and year drop down in jQuery Calender so user can move one to another month or year directly instead of next/previous button.

calender-month-year

It’s pretty simple to add month or year in a calender. You just need to pass parameter for showing month and year drop down.

jQuery(‘.calender’).datepicker({
changeMonth : true,
chanagYear : true
})

If you want to show only month then add only changeMonth:true and vice versa.

A full example code:

jQuery Datepicker

jquery datepicker

Here you can see how to add jQuery datepicker in your web project.

In order to add jQuery datepicker in your web page you have to download source code of jQuery UI library. You can also use CDN URL for that. Open jQuery UI site and see at bottom you can get CDN URL just copy and put in your page. see below code for reference.

 <link type=”text/css” href=”//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css” rel=”stylesheet” />
<script src=”//code.jquery.com/jquery-1.9.1.js”></script>
<script src=”//code.jquery.com/ui/1.10.3/jquery-ui.js”></script>

Put above code in <head> section then make a dom <div>. Now bind jQuery datepicker with <div>. Put below code in <script>.

jQuery(function(){
jQuery(‘div’).datepicker();
})

That’s it. A calender in a page. :)

For <input /> go with same process.

jQuery(function(){
jQuery(‘input[name=datepick]’).datepicker();
})

A Full source code.

Turn on/off Autocomplete for Input

It just a input attributes. Use autocomplete=”off” attributes in input.

<input name=”name” type=”text” autocomplete=”off” />

It useful when unique text input. Such as captch text, auto-suggest or autocomplete feature, credit card information or where you need one time user input.

Using jQuery.

jQuery(‘input’).attr(‘autocomplete’,’off’);

or

jQuery(‘input’).prop(‘autocomplete’,’off’);
// prop is replaced attr method in current jquery version. I think in 1.4 version of jQuery not sure.

Why it required?

In current era browser cached more and more user input to give better and quick performance. In case you do not want to auto complete fill up in input element so you can off it using autocomplete attribute.

For example:

auto complete

A normal input field might be like :

<input name=”name” type=”text” />

To off autocomplete just add autocomplete=”off”. That’s it.

<input name=”name” type=”text” autocomplete=”off” />

jQuery check dom element exists in page

Here I am going to explain how to check or validate DOM element exists in a page or not.

we used to check DOM element existence like jQuery(‘#ID’) or jQuery(‘.Class’) but keep in mind jQuery always return array weather DOM element exists or not. If not exists then it returns blank array so we must check array length to know is array has element or not.

Syntax:

// wrong way
if(jQuery(‘#id’)){}

// Correct way
if(jQuery(‘#id’).length){}

Get URL Parameters With JavaScript

In this example you can see how to get URL parameter in JavaScript. Using window.location object you can perform this task.

window.location.search

window.location.search returns a query string in JavaScript.

 ?blog=sourcecodemart&artical=1789

Now remove “?” from the string. You can use substring() function to remove chars.

window.location.search.substring(1);
// blog=sourcecodemart&artical=1789

Now split query string into array using JavaScript split() function.

var arr = window.location.search.substring(1).split(‘&’);
//Output: [“blog=sourcecodemart”,”artical=1789″]

You are almost done. Just split this array and set value into object.

var queryObj = new Object(); // var queryObj = {};
arr.forEach(function(a){
arr2 = a.split(‘=’);
queryObj[arr2[0]] = arr2[1];
})

It’s Done. Use queryObj to retrive query parameter value.

Full Example.

var queryStr = window.location.search;
queryStr = queryStr.substring(1);
arr = queryStr.split(‘&’);
var queryObj = new Object(); // var queryObj = {};
arr.forEach(function(a){
arr2 = a.split(‘=’);
queryObj[arr2[0]] = arr2[1];
})
console.log(queryObj);

Host your site on google drive

Nowadays Google is giving a free and good service to the world. There is a big list of Google services and one of the service is Google Drive. Using Google Drive you can upload your files and folder on web and access it anywhere from the world. One more thing I want to share you about Google drive feature. You can not only share your files and folder from Google Drive but also you can host your website on Google Drive as well. It provides ability to host html, css and JavaScript content website. How is it let see step by step.

In order to host your website on Google Drive you must have Google account. :) Yeah, You have then login with Google Drive and follow below steps one by one and sure you will be happy to know about this one more feature. If happy then share as much as.

1. Create a folder.

Create Folder

give folder name

2. You can take any name.

take folder name

3. After creating a folder, select folder and share it.

Share folder

4. For sharing your folder you have to change it’s permission to public.

Change Access

Give public access

Click to done

5. Now you can see your folder Shared.

Open folder

6. Open your folder and upload files and folders of your website in it.

Upload files and folders

Upload

7. Click on index.html or your website’s main files. Then you can see at bottom of page “Open” button. Click on it.

Open files

get url

8. Now you just one step behind from your Google Drive Host URL. Click on “Preview” and get your url. Copy URL and Share with world.

preview file

copy url

Get selected checkboxes from comma separated list with jQuery

Basically, there are several method to get selected value into comma sparated. But in today’s era jQuery is most popular JavaScript librery and reduce less line of code.

Using $.map() function we can perform task in a few line of code.

var ele = jQuery(‘input[name=nameofelement]:checked’).map(function(){
return this.value;
}).get().join();

Full Example:

Copy and paste below code into your web page and see how it works.