jQuery Code Snippets Free JQuery


jQuery Plugins Code Snippets

jQuery Plugins Code Snippets are handy and very useful. They do the job for you without much effort. Hold onto these snippets to use for your next project.

  • Change button text when clicked:

1
2
3
4
5
$(document).ready(function(){
$(“.button”).click(function(){
$(this).val(“Some other text”);
});
});
  • Mark external links with an icon

1
2
3
4
5
6
$(‘a’).each(function(){
if(this.hostname != location.hostname){
$(this).append(‘<img src=”external.png” />’)
.attr(‘target’,’_blank’);
}
});
  • Change DIV background color randomly

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
changeColor();
});
function changeColor() {
var rndColors = ["#00FF00", "#CCCCCC", "#995499", "#FFFFFF", "#FF9900"];
var selColor = Math.floor(Math.random() * rndColors.length);
$('div').css("background-color", rndColors[selColor]);
setTimeout(changeColor, 1000);
}
  • Smooth scrolling to top of the page

1
2
3
4
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
  • Check if file exists on server using jQuery

1
2
3
4
5
6
7
8
9
10
11
$('#btnSubmit).click(function () {
$.ajax({
url: $('#txtUrl').val(),
success: function (data) {
alert('File Exists!!!!!');
},
error: function (data) {
alert('File does not exist!!!!');
}
});
});
  • Check for working internet connection

1
2
3
4
5
6
7
8
function checkInternet() {
var status = navigator.onLine;
if (status) {
alert("Working");
} else {
alert("Not Working ");
}
}

Call this function on click of button:

1
<input type=”button” value=”Check Connection” onclick=”checkInternet()” />
  • Prevent right click

1
2
3
4
5
$(function(){
$(document).on(“contextmenu”,function(e){
e.preventDefault();
});
});
Some jQuery Plugins Code Snippets are here:

1. Hover On/Off

$("a").hover(
  function () {
    // code on hover over
  },
  function () {
    // code on away from hover
  }
);

Source

The jQuery hover method is a quick solution for handling these events. You can determine whether the user is just hovering over your element, or if the user is just leaving the hover state. This allows for two custom functions where you can run two distinct sets of code.

2. Prevent Anchor Links from Loading

$("a").on("click", function(e){
  e.preventDefault();
});

Source

When you create JavaScript applications there are plenty of times where you need a link or button to just do nothing. This is often for triggering some type of dynamic effect, such as a hidden menu or Ajax call. By using the event object during any click, we can manipulate the data sent back to the browser URL. In this scenario I am stopping the whole href from loading anything at all!

3. Scroll to Top

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Source

You have probably seen this functionality becoming popular on all the new social networking websites. I have definitely seen this technique appear on infinite-scrolling layouts such as Tumblr and Pinterest.

The code is very minimal but powerful in some layouts. You are offering a simple link or button display which behaves like a “back to home” link. By using the animate effect in jQuery users won’t notice the jump all at once, but instead over a brief period of milliseconds.

 

Leave a Reply

Your email address will not be published. Required fields are marked *