Scroll to down in textarea with jQuery and Javascript

Below is the sample code to scroll down to the textarea using jquery  and javascript :


Code to scroll to down in textarea with jQuery and javascript  :

//using jquery
 var textArea = $('#textarea');
 textArea.scrollTop( textArea[0].scrollHeight - textArea.height()   );

//using javascript
var textarea = document.getElementById('textarea');
textarea.scrollTop = textarea.scrollHeight;

Click to jsfiddle with the example.

Note*: this example is tested on Google Chrome.

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

Enter key event in jQuery

To capture key press event in jQuery we can have key press event and then we can get code of key which is pressed.

Below are few key codes
Enter : 13
Esc    : 27
Space: 32
Tab    : 9

check here for all key codes

Below example will handle the enter and esc key press event  using jquery :

$('#textarea').keyup(function(event){

//use event.which in firefox
var keycode = (event.keyCode ? event.keyCode : event.which);

        alert("Key code for pressed key "+keycode);

       //enter pressed
if(keycode == '13'){
//perform enter key press operation on textarea
}
       //esc pressed
        if(keycode == '27'){
//perform esc key press operation on textarea
}
});

Click to see demo in jsfiddle.

If you found this post useful please comment and share, Thanks :)

Get value of selected option of Select Box in jQuery

Goal : This tutorial will explain how to get the value of selected elements id,value and text of select box using jquery with example:

Below is the html code :

<select id="jqueryVersions" >

    <option>Select jquery version</option>

    <option id="id_1" value="value_1">Jqurey 1.9.1</option>

    <option id="id_2" value="value_2">Jqurey 1.8.1</option>

    <option id="id_3" value="value_3">Jqurey 1.7.1</option>

    <option id="id_4" value="value_4">Jqurey 1.6.1</option>

</select>    

Below is the jquery code to get the selected options value,text and id :

$("#jqueryVersions").change(function(){

        var selectedOption = $("#jqueryVersions :selected");

    

        var selectedText   = selectedOption.text());

        var selectedId       = selectedOption.attr("id");

        var selectedValue = selectedOption.val();

});

Click on this link to check demo

If you find this tutorial userful. please comment share this post. Thanks :)

JQuery pagination with good css

 

Below is the fully functional pagination which uses this jQuery Pagination Plugin .I have provided some nice pagination css which can be further modified to fulfil the requirement.

 Download example

Below is screen shot of jquery pagination css :

 Download example

How to use it :

1) Extract the rar.
2) Run index.html.
3) Check pagination.css for the css you liked.
4) index.html contains below jQuery code to initialize the pagination:

Below code demonstrate how to initialize the jQuery pagination and set pagination options.Also it explains how to handle page select event to do some ajax stuff.

 

         
 //function will be called when any page is selected.perform some ajax and load the contents in div.
 function pageselectCallback(page_index, jq){
         
             //below if is only for demo purpose.
             if(page_index ==6 ){
               return;
             }
             alert("Perform some ajax stuff for page number :"+(page_index+1));
             return false;
         }
         $(document).ready(function(){
         
         //set properties of pagination.
         var totalEntries = 500;
         var options =    {
             items_per_page:10,
             num_display_entries:6,
             current_page:6,
             num_edge_entries:2,
             link_to:"#",
             prev_text:"Prev",
             next_text:"Next",
             ellipse_text:"...",
             prev_show_always:true,
             next_show_always:true,
             callback:pageselectCallback
           };
           
           //provide pagination functionality inside specified pagination div.
           $("#Pagination").pagination(totalEntries, options);
           $("#bootstrap_pagination").pagination(totalEntries, options);
           $("#grey_pagination").pagination(totalEntries, options);
           $("#orange_pagination").pagination(totalEntries, options);
           $("#pagination_1").pagination(totalEntries, options);
         
         });

5)Pagination.js is the pagination plug-in which take care of pagination functionality.

 Download example

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

Creating new tabs,closing tab,showing tabs,loading contents in tab and more with Bootstrap tabs

Twitter Bootstrap tabs are very light weight and very easy to use with few lines on code.But if you want perform operations like adding new tab ,adding close button to tab and removing tabs then you need to customise as per the requirement.
Below is a sample example which will allow you to perform below operations :

• Adding new tab
• Deleting tab
• Showing tab
• Adding close icon to tab
• Getting element from current tab ( example : if there are two tabs having  textarea with same id or same class name then when $("#someId") will return both the text area from these two tabs this method will take care of this )

Note This example uses bootstrap v 2.2.2 and jquery v1.9.
Download Example Here
Below is demo: (Run below fiddle in full screen to see the proper output )


Click below links to see jsfiddle demo :

• Jsfiddle Demo 
• Demo with full screen

 Download Example Here

If you find this post useful please share and comments. Thanks you :)