Disable select text javascript

We can disable select text on site if site admin don't want. By this javascript we can disable select option and copy option also for any Browser.


HTML with Javascript

 
  
  
 
 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Guys keep this code with HTML tags. Enjoy Javascript.

JQuery Disable copy paste

We can disable Copy paste on our site easily by simple JQuery. User can not copy paste of site content from your website.

Use this Jquery for disable copy paste on your site for security.

HTML with Jquery

 
  
  
 
 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

JQuery Disable right click

In our website, We can disable right click for security reason. We can do by Jquery help. it's easy to learn.

Just Use this and you can see below picture for example.

HTML code with JQuery

  
  
  


  

Test

  

Spinner JQuery (Increase or Decrease number by spinner)

We are using JQuery library function.

You can see Picture below for example

HTML code with JQuery

 


  
  
  
  
  
  


 
Select a value:
  


 

 
 

JQuery Loader or Progressbar

Jquery Progressbar, we can use this at the time of any instant action is running behind that.

We are using JQuery library function.

You can see Picture below for example

HTML code with JQuery

 


  
  
  
  
  
  
  


 
Loading...
 
 

Hover text JQuery or Tooltrip JQuery

If any user keep hover on field then it will show text msg, it is nothing but tooltrip jquery.

We are using JQuery library function, By this we can use this tooltrip

HTML code with JQuery

 


  
  
  
  
  

  
  



Your age:

Hover the field to see the tooltip.

JQuery Animation Effect with div

Here we can give any Animation on DIV with JQuery event just  like as click, hover, bind ,change.

We can give some animattion which is listed below from this JQuery

1. Blind
2. Bounce
3. Clip
4. Drop
5. Explode
6. Fade
7. Fold
8. Highlight
9. Puff
10. Pulsate
11. Scale
12. Shake
13. Size
14. Slide
15.Transfer

HTML code with JQuery

 


  
  
  
  
  
  
  


 
  
    
Effect
    
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    
  
 

  Blind
  Bounce
  Clip
  Drop
  Explode
  Fade
  Fold
  Highlight
  Puff
  Pulsate
  Scale
  Shake
  Size
  Slide
  Transfer

  

JQuery Movable Dialog Box

This is JQuery dialog box, you can move this dialog box to any where and close it just like as popup.

But only difference is Popup overlap over front page and Dialog come in-front  of screen.

We can see dialog box in below picture.

HTML code with JQuery

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

JQuery Date-picker

Here we are using simple JQuery date-picker. Only we have to call datepicker function it will give date picker.

After selecting date, date will come in text field, we can see in below picture.

JQuery code

HTML code

 
Date: 

 
 

Simple JQuery Accordation

It is selectable accordation , you can see in below picture

HTML with JQuery

  
  
  
  
  
  


 
Section 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    
Section 2
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    
Section 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    

List item one
List item two
List item three
Section 4
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    

Drag and Drop div by JQuery

We can drag any div and drop any where by using DOM and Jquery.

Here we are using JQuery library function and CSS. It's a very easy and memorable.

you can see in below picture

HTML code with Jquery

  
  
  
  
  
  
  
  
  


 

Drag me to my target

Drop here

JQuery Popup

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

Features

• Can display images, HTML elements, SWF movies, Iframes and also Ajax requests.
• Adds a nice drop shadow under the zoomed item.
• Customizable through settings and CSS.
• Groups related items and adds navigation.
• If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well

You can see Popup in below image

HTML code with JQuery

    
        
        
        
        
    
                       
            Click Here
           
            

                

                    

POPUP
Welcome to you in my blog!


                

You can  DOWNLOAD from here

JQuery Image Zooming

You can try EasyZoom just to the left, simply move your mouse or swipe your finger over the Image. 

You can use simple jquery zoom, 

HTML with Jquery

Zip file is available for you please DOWNLOAD

Export Table in Excel sheet by Javascript

If Any person have table data in his site and he want to Export or download table data in Excel sheet format then he can export by JavaScript.

In below picture you can see, Table have some data listed, now somebody want to this data in Ms-excel sheet or Ms-word sheet then it can be possible by below code with one click. 

After Export

This is sample code for export table data in excel format.

Export


 
 


   
Name
   
Phone No.
   
Age
   
Address
  

   
Ashish
   
123465678
   
20
   
Bangalore
  

   
Ashish
   
123465678
   
20
   
Bangalore
  

   
Ashish
   
123465678
   
20
   
Bangalore
  

   
Ashish
   
123465678
   
20
   
Bangalore
  

   
Ashish
   
123465678
   
20
   
Bangalore
  

Use JavaScript Cookies

How to create javascript cookies, get and delete cookies, just follow below code.

if you are using SESSION in php and you want to use this session in JavaScript then it will be not possible session php to JavaScript. so here you can use cookie in JavaScript.


Create cookies
 

function setCookie(c_name,value,exdays){
 var exdate=new Date();
 exdate.setDate(exdate.getDate() + exdays);
 var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
 document.cookie=c_name + "=" + c_value;
}

Here c_name is cookie name, value is nothing but value which you want to stored in cookie name and exdays is time period after this time cookie will delete.
 
Get cookies
 

function getCookie(c_name){
 var c_value = document.cookie;
 var c_start = c_value.indexOf(" " + c_name + "=");
 if (c_start == -1){
    c_start = c_value.indexOf(c_name + "=");
  }
 if (c_start == -1){
    c_value = null;
 }else{
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1){
   c_end = c_value.length;
    }
    c_value = unescape(c_value.substring(c_start,c_end));
 }
 return c_value;
}

Delete cookies

function delete_cookie(name){
    document.cookie = name+'=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

Here name is cookie name which you want to delete.
Now you can use these cookie very easily let see,

Set cookie 

setCookie("name_of_cookie",value_of cookie,1);

1 is time period after this time this cookie will delete automatically.  

Get cookie 
to retrieve the cookie
 

var price = getCookie("name_of_cookie");

Delete cookie

delete_cookie("name_of_cookie");

Autocomplete JQuery

Auto-complete JQuery:

The Auto-complete widgets provides suggestions while you type into the field. if user want to find any thing then at the time typing this jQuery will give suggest option which user want to find.

This is auto complete functionality, it is very useful in our project.

 


  
  
  
  
  
  
  


 

  Tags: 
  

Here "availableTags" variable has all data, if you have data then you can use any way and it will display auto complete result when you type some thing. 

Auto-complete with selected character JQuery:

For Demo: Just Copy below code and create html file, paste all code and run then you can see demo.

Introduction
After seeing how GMail made its auto-complete, I took the idea and implemented my own version of the auto-complete control.


Auto-complete textbox control:



 


Timeout: 3000ms
Deliminator: ; and , 
Options: ('an apple','alligator','elephant','pear','kingbird','kingbolt', 'kingcraft','kingcup','kingdom','kingfisher','kingpin') 

It's Running Jquery

Javascript Validation

Validation

We will create JavaScript functions (one for each input field whose value is to validated) which checks whether a value submitted by user passes the validation. 

HTML Code of the Sample Registration Form

Name
      
       
      






Email
      
       
      

JavaScript code for validation



Name validation
 

Email Validation
 

    
    var email = document.registration.email.value;
    if (email == "") {
        document.getElementById("error2").innerHTML = "Enter email";
        return false;
    }else if (email != "") {
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!filter.test(email)) {
            document.getElementById("error2").innerHTML = "Enter valid email address";
            document.registration.email.focus;
            return false;

        }
    } else {
        document.getElementById("error2").innerHTML = " ";
        return true;
    }

Phone No. Validation
 

    var phone = document.registration.phone_no.value;
    if (phone == "") {
        document.getElementById("error1").innerHTML = "Enter phone no";
        return false;
    } else if (isNaN(phone)) {
        document.getElementById("error1").innerHTML = "Phone_no should be integer";
        return false;
    } else if (phone.length != 10) {
        document.getElementById("error1").innerHTML = "Phone_no should be 10 digits";
        return false;
    } else {
        document.getElementById("error1").innerHTML = "";
        return true;
    }

Gender Validation

  
if(document.registration.malegender.checked){
 x++;
} 
if(document.registration.femalegender.checked){
  x++; 
}
if(x==0)
{
document.getElementById("error1").innerHTML = "";
return true;
}else{
document.getElementById("error1").innerHTML = "Select Gender";
return false;
}

Select Box Validation

 







Select Type
Freshers
Experienced
Under_Studying

Javascript Overview

 What is JavaScript ?

JavaScript is a scripting language. JavaScript made its first appearance in Netscape 2.0 in 1995 with a name LiveScript  but Netscape changed the name, possibly because of the excitement being generated by Java.to JavaScript.

And Latest JavaScript version is 1.8

1. JavaScript is a lightweight, interpreted programming language with object-oriented  
    capabilities that allows you to build interactivity into otherwise static HTML pages.
2. Complementary to and integrated with Java.
3. Complementary to and integrated with HTML.
4. Open and cross-platform.
5. All Browsers (IE,Mozila,Chrome,Safari) supports JavaScript language.

Javascript has 2 type of script:

1. Client-side JavaScript
2. Server-side Javascript

 Client-side JavaScript:

• Actually JavaScript is purely client side JavaScript language which is executed on any Browser without reloading page. Before redirecting it verifies all JavaScript code then it will redirect to url.

•  The JavaScript client-side mechanism features many advantages over traditional CGI server-side scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.

• The JavaScript code is executed when the user submits the form, and only if all the entries are valid they would be submitted to the Web Server.

• JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user explicitly or implicitly initiates.

 Limitations

• Client-side JavaScript does not allow the reading or writing of files. This is keep for security reason.
• JavaScript can not be used for Networking applications because it will not support available.
• JavaScript doesn't have any multi-threading or multiprocess.

 If you are using JavaScript on HTML page then you have write like this so  browser will understand,
The <script> tag alert the browser program to begin interpreting all the text between these tags as a script.


 

 Server-side JavaScript: 

In many language like as PHP, Python, ASP, Perl,etc... you can see if user submit any form after filling then this server side script will check all data which is filled by user and validate, if user information is not correct then it will throw serverside javascript validation after reloading the page.

 

Sticky scroll Jquery

Simple JQuery for fixed position element

we have used this sticky jquery in many project in which we wanted their statically positioned sidebars to stick to the top of the page when you scroll down. 

when scrolling up a page, the sticky element needs to stop sticking when it returns to its original position. But I would say that almost equally important is having a bottom boundary on the page where the sticky element will stop sticking so that it doesn't spill into the footer or even outside of the page itself. With 1 options provided, the plugin will use the <body> element as the bottom boundary.

Example:

Header
    

Navigation
    

Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll
        applicake pastry. ...

In this example, we will create a simple webpage that consists of the header, the navigation and the content.

And, we will apply the sticky position to the navigation. 

But first, we will define the styles in the stylesheet, like so.

.sticky {
 position: fixed;
 width: 100%;
 left: 0;
 top: 0;
 z-index: 100;
 border-top: 0;
} 

Then, we will apply that class to the navigation conditionally with jQuery.

$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();
     
if (scrollTop > stickyNavTop) { 
    $('.nav').addClass('sticky');
} else {
    $('.nav').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
 stickyNav();
});
}); 

Finally, you can see the demo from the link below.

• DOWNLOAD SOURCE

• • VIEW DEMO