[jQuery] jQuery Snippets

[RayLin]

Back to Top Button

$('a.top').on('click', function(){
	$(document.body).animate({scrollTop : 0},800);
	return false;
});

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

Nav Stay on top

$(function(){
	var $win = $(window)
	var $nav = $('.mytoolbar');
	var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
	var isFixed=0;

	processScroll()
	$win.on('scroll', processScroll)

	function processScroll() {
	var i, scrollTop = $win.scrollTop()

	if (scrollTop >= navTop && !isFixed) { 
		isFixed = 1
		$nav.addClass('subnav-fixed')
	} else if (scrollTop <= navTop && isFixed) {
		isFixed = 0
			$nav.removeClass('subnav-fixed')
	}
}

Enabling/Disabling Input Fields

$('input[type="submit"]').attr("disabled", true);
$(‘input[type="submit"]').removeAttr("disabled”);

Zebra Striping

$('li:odd').css('background', ‘#e7e7e7’);

Prevent Link Functionality

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

Toggle Classes

$(“.main”).toggleClass(“selected”);

Automatically fix broken images

$('img').error(function(){
	$(this).attr('src', 'img/broken.png');
});

Detect Copy, Paste and Cut Behavior

$("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});

Tabs Switch

$('.tab_nav li:first').addClass('active').show();
$('.content').hide();
$('.content:first').show();

$('.tab_nav li').on('click', function(){

    $('.tab_nav li').removeClass('active');

    $(this).addClass('active');
    $(".content").hide();

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(1000); //Fade in the active ID content
    return false;

});


<!-- TAB SECTION  -->
<div id="tabs">
    <ul class="tab_nav">
        <li><a href="#tab1">tab 1</a></li>
        <li><a href="#tab2">tab 2</a></li>
    </ul>
    <div class="tab_content">
        <div id="tab1" class="content"></div>
        <div id="tab2" class="content"></div>
    </div>
</div>