This is test post please ignore it

this is test post please ignore it

Now add the seo related thing via blogger

Popup Div In Css and Jquery Or pop up windows in javascript

Below I have explained how to create simple html div popup div using css and jquery. Try running example and check simple css and jquery code.

Features :

1) Draggable HTML popup div.
2) Elements behind the popup div will be disabled until popup div is active.
3) Easy customizable css.

Click here to see DEMO In broad window

Cick here view source of example html page 

Required Javascript URL's For Popup Div:

• <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
• <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Below is css ,javascript and html of the example:

Screen Shot of pop up window in javascript:

pop up window in javascript

If the information is useful please comment and share. Thanks :)

Jquery parent element selection

JQuery parent element selection is always needed code. Below I have listed how to get parent element in jQuery by tags,class,id etc. 

Try Demo Examples

Get first parent by tag name in jquery

$(“#id”).parent().closest(“DIV”);

Get first parent by id in jquery

$(“#id”).closest(“#id”);

Get first parent by class name in jquery

$(“#id”).closest(“.className”);

Get all parents by tag name in jquery

This will return array of all the parent div elements.

$(“#id”).parents(“DIV”);

Try Demo Examples

Also Check below links
How to select child element in jQuery 

If you found this post useful.Please share and comment. Thanks :)

JQuery Child Element Selection

JQuery parent element selection is always needed code. Below I have listed how to get parent element in jQuery by tags,class,id etc. 

Try Demo Examples

Get first child by tag name in jquery ( 3 ways explained)

$("#someId").children().first('div').attr('id'); $("#someId").find('div:first').attr('id') $("#someId").children('div:first').attr('id')

Get first child by id in jquery ( 2 ways explained)

$("#someId").children("#idToFind:first"); $("#someId").find("#idToFind:first");

Get first child by class name in jquery

$("someId").find(".someClass:first");

Get all child by tag name in jquery

This will return array of all the child tr elements inside the table.

$("#someDivId").find("#myTable tr")

Get all first td's of every row in table in jquery

This will return array of all the first child td elements inside every row of table.

$("#myTable tr td:first-child")

Try Demo Examples

Also Check below links
How to select parent element in jQuery 

If you found this post useful.Please share and comment. Thanks :)

Best JQuery Grid Plugins And JQuery Tables

Showing data in grid is the basic requirement all the time.Once the grid is ready, other necessary features gives good shape to grids like :

1. Sorting grid columns
2. Adding check boxes or other fields to the column
3. Having constant headers (This is many time a basic requirement of the data grid)
4. Loading data to data grid from xml,jason object via ajax call.
5. editing and saving details in the grid.
6. Free
7. Many more.

Below I have listed the best JQuery Grid Plugins which full-fills above requirement and features of grids:


1) jQuery Grid Plugin – jqGrid
This is the most popular and most efficient free JQuery Grid Plugin.Provides very nice documentation for customization.This grid is my favorite one.

Features: 
1) Supports XML,Jason,Arrray
2 )Ajax support
3) Well documented and good customization examples.
4) Demo’s with php support.
5) Many more.

        DEMO AND DOCUMENTATION

         Note * : JQuery grid is not free only 30 days of trial is available. Please check commercial licenses details.

2)Jquery mleibman/SlickGrid · GitHub

This is one of the other nice free jquery grid.Grid has nice support for colspans..Key features of this grid is nice support for filtering grid data.It has nice customisation demos listed.

DEMO AND DOCUMENTATION

Jquery Grid plugin by Slick Grid

3)JQuery Grid Data Table

Key Features :

1. Nice Ajax support.
2. Fully internationalizable.
3. jQuery UI ThemeRoller support.
4. Nice colspan support.




5. CUSTOMIZATION AND DEMO EXAMPLE

JQuery Grid By Data Table

4)JQuery Data Grid :Flexigrid :

        This simple easy to use JQuery Grid with nice UI, which comes with very less configuration and basic features.

DEMO

JQuery Data Grid :Flexigrid

5)Jquery Grid : JTable (JQuery Table)    :

This is one of the nice jquery grid plugin which needs some nice custom css. This has almost all the features.Listed below some key features:

Key features :

• Supports server side paging using AJAX.
• Supports server side sorting using AJAX.
• Row expanding feature is very nice
• Theme Changer
• Well updated and stable
• Many More:

DEMO AND DOCUMENTATION

Jquery Grid By JTable (JQuery Table) 

6) JQuery Table : WATable 

This simple grid and easy to use grid comes with very less configuration.

          DEMO and DOCUMENTATION

JQuery Table By WATable

7) JQuery Data Grid : INGRID 

This is simple jquery data grid. This grid is not updated from long time.

Demo And Documentation

JQuery Data Grid : INGRID

8)Jquery Excel Table : Handsontable

This jquery table works like excel spreadsheet. If you want to implement excel like features then use this Jquery datagrid.

Features :

1) Simple spreadsheet and easy to configure
2) Nice simple  UI
3) Supports Ajx
4) XML,JASON suppot

DEMO AND DOCUMENTATION

Jquery Excel Table By Handsontable

9)Jquery Grid Plugin - Table Sorter  

If you want to implement just sorting feature use this jquery grid plugin.

DEMO AND DOCUMENTATION

Jquery Grid Plugin - Table Sorter

10)JQuery Sheet :

This provides many excel sheet like features:

DEMO

Jquery Grid by JQuery Sheet

11)Jquery Grid: Tree Table

This jquery table plugin provide tree structure inside table like folder hierarchy.

          DEMO

Tree Structured JQuery Data Grid

12)Below are some more grids which has some very basic features:

1. Jquery Data Grid For Filtering Data By column : This grid filters data by column.
2. Best colspan manager Jquery Data Grid : If you have data greed and you want manage colspans efficiently then use this grid.
3. tGrid
4. Nice Table Sorter JQuery Data grid plugin : This provides animated table sorting and animated pagination.

Non-Free JQquery Data Grids

Below Listed Some fully featured well documented non-free JQuery data grid :

1) Juery Easy UI grid :
This is most efficient grid having all the features with well documentation.

Demo  Documentation

 

2) JQuery Grid By JQWidgets : Below is full featured grid by JQWidgets

Demo

Documentation

If you find this post useful please share and leave a comment below, thanks! :)

Find and replace one by one in jquery /javascript

How to replace string one at a time in jquery / javascript ?

 Below is a simple example explaining that how to replace string one at a time.

Example: Replace "jquery"  with cpas "JQUERY" one by one.

click here for demo

Note* :For  below example jquery is not required and code is compatible with most of the major browsers.

//string  "How to replace string in jquery or javascript one at a time !!!" is repeated twice //in text

var text = " How to replace string in jquery or javascript one at a time !!! How to replace string in jquery or javascript one at a time !!! How to replace string in jquery or javascript one at a time !!! ";

var textToReplace = "jquery";
var textReplaceWith = "JQUERY"
    
var numOfOccur = text.match(/jquery/g).length;

//replace content one by one
while(numOfOccur-- >= 0){
    text = text.replace(textToReplace ,textReplaceWith );
}
$("#content").html(text );

Check Below links :

Find and Replace all in jquery

Find and Replace all in jquery

             I was looking for find and replace all  in jquery, but I found that javascript have very nice library for regular expression.Also it is compatible with all the browser. Below is syntax and simple example:

Syntax :

outputString = searchIn.replace(new RegExp("YourExpression", 'g'),"String to Replaced");

or 

strings = strings.replace(/hi/g," bye");

where /g represents all the occurrences of matched string. 


Try out example :

Click  buttons on menu bar to run script. Also using + button you can edit script and test as per need :
 

Ajax In Jquery

  

1)Ajax and Jquery

   Below is the simple example of how to do ajax call in jquery. Below example can be used for  both GET and POST requests by changing type to GET or Post .


var requestParams = {

      name:'James Bond',

      id  :'007'

};

//below param method take cares of special characters in data

requestParams = jQuery.param(requestParams);

$.ajax({

  type : 'GET',//GET Or POST 

  url  : "details.html",

  cache: false, //get fresh copy of details.html instead of cahced one

  data :requestParams,

 

  success: function(response, textStatus, jqXHR){

        //set data in div

        $("#detailsDiv").html(response);

  },

  // callback handler that will be called on error

  error: function(jqXHR, textStatus, errorThrown){

      // log the error to the console

      console.log(

          "The following error occured: "+

          textStatus, errorThrown

      );

  }

 

});

2) Other Simple way for Ajax  GET using JQuery .load()

var params = {    id:'007',

                  name:'James Bond'

            };

 //jquery param method returns serialized parameters

 //(it takes cares of special characters )

var url ="/loadDetails?"+jQuery.param(params);;

//load the details in detailsDiv.

 $("#detailsDiv").load(url, function(response, status, xhr) {

      if (status == "error") {

          var msg = "Sorry but there was an error getting details ! ";

          $("#detailsDiv").html(msg + xhr.status + " " + xhr.statusText);

      }

});

Jquery Date picker to display only month and year or only week

Customization of jquery Datepicker to select date by week,month and year.

          JQuery support nice customization features. In this tutorial we will see how to customize JQuery Date picker to select by week,by month and by year.


1)Select Week :As below image shows that week is highlighted  which allows user to select week. When week is selected it set the Monday's date in input box.

      To achieve above customization with jquery date picker, use following code :.

Click Here to View Demo

//replace  selectWeek with your date pickers id here at all places
$(function() { //this is onload
$("#selectWeek")

      .datepicker(

      {

            firstDay : 1, // set first day of week as monday

            changeMonth : true, // provide option to select Month

            changeYear : true, // provide option to select year

            showButtonPanel : true, // button panel having today and done button

           

        onClose : function(dateText, inst) {

                  if ($(this).val() == "") {

                        return;

                  }

           

                  // below code will calculate the monday and set it in input box

                  var fromDate = $("#selectWeek").datepicker("getDate");

                  var date = fromDate.getDate();

                  var month = fromDate.getMonth() + 1;// +1 as jan is 0

                  var year = $(

                  "#ui-datepicker-div .ui-datepicker-year :selected").val();

     

                  if (fromDate.getDay() != 1) { // if not monday

                        if (fromDate.getDay() == 0) {// if sunday

                              date = date - 6;

                        } else {

                              date = date + (-fromDate.getDay() + 1);

                        }

                  }

                  var dateStr = month + "/" + date + "/" + year;

                  $(this).val(dateStr);

                  $(this).blur();// remove focus input box

        },

            duration : 0,

            onChangeMonthYear : function() {

                  setTimeout("applyWeeklyHighlight()", 100);

                  },// applyWeeklyHighlight is below

                  beforeShow : function() {

                        setTimeout("applyWeeklyHighlight()", 100);

                  }

            });

});//end of onload

/**

 * Set highhlight on the week on hover.

 */

function applyWeeklyHighlight() {

      $('.ui-datepicker-calendar tr').each(function() {

            if ($(this).parent().get(0).tagName == 'TBODY') {

                  $(this).mouseover(function() {

                        $(this).find('a').css({

                              'background' : '#ffffcc',

                              'border' : '1px solid #dddddd'

                        });

                        $(this).find('a').removeClass('ui-state-default');

                        $(this).css('background', '#ffffcc');

                  });

                 

                  $(this).mouseout(function() {

                        $(this).css('background', '#ffffff');

                        $(this).find('a').css('background', '');

                        $(this).find('a').addClass('ui-state-default');

                  });

            }

      });

}

2)Select Month: As below image shows that date grid is hidden and user is allowed to select only month and year.

                                   
      To achieve above customization with jquery date picker, use following code in page onload function.

//replace   selectMonth with your date pickers id here at all places
$('#selectMonth').datepicker( {

    changeMonth: true,      //provide option to select Month

    changeYear: true,       //provide option to select year

    showButtonPanel: true,  // button panel having today and done button

    dateFormat: 'MM yy',    //set date format

    onClose: function(dateText, inst) {

        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();

        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        $(this).datepicker('setDate', new Date(year, month, 1));//here set the date when closing.

            $(this).blur();//remove focus input box

           

    }

});

      //on foucus event on this code is to hide the calender part

$("#selectMonth").focus(function () {

    $(".ui-datepicker-calendar").hide();

    $("#ui-datepicker-div").position({

        my: "center top",

        at: "center bottom",

        of: $(this)

    });

});                

3)Select Year : As below image shows that month and date grid is hidden, user is allowed to select only year .

      To achieve this customization with jquery date picker ,use following code in  page onload function.

//replace selectYear with your date pickers id here at all places
$('#selectYear').datepicker( {

   

    changeYear: true,

    showButtonPanel: true,

    dateFormat: 'yy',

    onClose: function(dateText, inst) {

        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        $(this).datepicker('setDate', new Date(year, 1, 1));

        var strDate ="01/01"+"/"+year;

        $(this).blur();//remove focus input box 

    }

});

      //this code is to hide the calendar part of year calendar

      $("#selectYear").focus(function () {

    $(".ui-datepicker-calendar").hide();

    $("#ui-datepicker-div").position({

        my: "center top",

        at: "center bottom",

        of: $(this)

    });

});

To download source code of the example go to below link :

DatePickerCustomization

How to run after download :
1)Extract the zip file.
2)Open DatePickerCustomization.html in browser
3)This file contains whole source code