KirkHings.com » jQuery http://kirkhings.com The '-berger' part trips up so many folks that I sometimes simplify my name for you. Yes, just for you. Sat, 13 Jun 2009 18:35:59 +0000 http://wordpress.org/?v=abc en hourly 1 jQuery fadeOut upon click http://kirkhings.com/code/jquery/jquery-fadeout-upon-click/307/ http://kirkhings.com/code/jquery/jquery-fadeout-upon-click/307/#comments Tue, 21 Apr 2009 19:50:52 +0000 Kirk http://kirkhings.com/?p=307
  • Disable Submit Button to Prevent Double-Submit photo credit: kevindooley This programming snippet is from the...
    • ]]>     self with colored tiles
    Creative Commons License photo credit: Joel Bedford

    This programming snippet is from the themeforest.net video series “jQuery for beginners” which I watched and practiced spring 2009. I do not mean to steal from them, but just post how I performed their tutorials for my own later reference and perhaps save someone else the time of watching the videos.

    I post these old code snippets for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, it is just nice for me to have my own code snippet library, to easily find snippets that I remember doing a particular job but I cannot always recall where I found it.

    Challenge: Download jQuery script from jQuery.com (get the production version, not the development version). Link to the jQuery script file form your index.html. Write simple animation script to fade out a div element when a link is clicked.

    Solution: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Beginner's jQuery</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	<style type="text/css">
		#box {
			background: blue;
			width: 200px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<a href="#">Click me</a>
</body>
</html>

    Here is the script to animate the box fading away: 

    // start a generic function
$(function() {
	// when link is clicked, start a sub-function
	$('a').click(function() {
		// make the element with id='box' fade out over 5 seconds
		$('#box').fadeOut(5000);
	});
});

    Note that you can also use fadeOut(’slow’); or ‘fast’ without specifying actual milliseconds.

    Related posts:

    ]]>     http://kirkhings.com/code/jquery/jquery-fadeout-upon-click/307/feed/ 0     Disable Submit Button to Prevent Double-Submit http://kirkhings.com/code/jquery/disable-submit-button-to-prevent-double-submit/170/ http://kirkhings.com/code/jquery/disable-submit-button-to-prevent-double-submit/170/#comments Wed, 25 Mar 2009 18:47:45 +0000 Kirk http://kirkhings.com/?p=170
  • jQuery fadeOut upon click photo credit: Joel Bedford This programming snippet is from...
  • Button-Driven Quotes photo credit: bogenfreund This programming challenge is from a...
    • ]]>     Meow Wars
    Creative Commons License photo credit: kevindooley

    This programming snippet is from the book, “jQuery in Action” which I read and practiced Spring 2009. The Chapter (3) was titled “Bringing pages to life with jQuery”.

    I post these old code snippets for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, it is just nice for me to have my own code snippet library, to easily find snippets that I remember doing a particular job but I cannot always recall where I found it.

    Problem: people sometimes double-click (or more) submit buttons on html forms. Either they do it accidentally because their finger slipped or they did not think they clicked it the first time, or they just like the clicking sound. This can cause a problem with the form being submitted multiple times to the server.

    Solution: This jQuery script disables the submit button after the first click. Of course you still need server side code to prevent multiple submissions in case JavaScript is disabled, but this is a good little script for the front line defense. 

    $("form").submit(function() {
$(":submit",this).attr("disabled", "disabled");
});

    Related posts:

    ]]>     http://kirkhings.com/code/jquery/disable-submit-button-to-prevent-double-submit/170/feed/ 0