JPennington.net» jQuery http://www.jpennington.net The online ramblings of a web programmer Mon, 15 Feb 2010 01:32:16 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 jQuery Before and After Plugin http://www.jpennington.net/2009/07/19/jquery-before-and-after-plugin/ http://www.jpennington.net/2009/07/19/jquery-before-and-after-plugin/#comments Sun, 19 Jul 2009 16:15:09 +0000 admin http://www.jpennington.net/?p=250 This is one cool plugin. This plugin for jQuery will allow you to create a before and after image that will allow you to scroll back and forth to view different sides of the image. Take a look at the images to get a better look at how it works.

before and after right side

before and after left side

You can get the code and documentation on how to do this from: http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

]]> http://www.jpennington.net/2009/07/19/jquery-before-and-after-plugin/feed/ 0 Creating A Virtual Keyboard With jQuery http://www.jpennington.net/2009/07/15/creating-a-virtual-keyboard-with-jquery/ http://www.jpennington.net/2009/07/15/creating-a-virtual-keyboard-with-jquery/#comments Wed, 15 Jul 2009 21:54:56 +0000 admin http://www.jpennington.net/?p=231 This is incredibly cool. This plugin will allow you to have an on screen keyboard to enter data into a text box. It is very simple, and could have a number of uses. The best one that comes to mind is that you could provide your users an interface to enter their passwords in from this in lieu of their keyboards to help prevent any security breaches from their computers that could be infected with key logging software. It could help make parts of your website more accessible for those users that have a touchscreen only device. I am sure there are more reasons than these two, but you get the idea.

on screen keyboard

You can download this code from http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/

]]> http://www.jpennington.net/2009/07/15/creating-a-virtual-keyboard-with-jquery/feed/ 0 iPhone-Like Passwords In jQuery http://www.jpennington.net/2009/07/12/iphone-like-passwords-in-jquery/ http://www.jpennington.net/2009/07/12/iphone-like-passwords-in-jquery/#comments Mon, 13 Jul 2009 00:24:23 +0000 admin http://www.jpennington.net/?p=228 Now I will be the first to admin that this is probably not the most necessary feature one could add to their web application, however sometimes these little features can show that your application has the polish of a mature application.

With this jQuery plugin you can make your password fields work the same way they do on your iPhone/iPod Touch. For those of you that do not use these devices, the last character you type is shown plain text, while the others are shown as the usual bullet. The front end code requires very little code and on the processing end you have minimal modifications. What you get is a cool effect that will make your application stand out from the others.

To download or find out more about this cool plug-in head over to: http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

]]> http://www.jpennington.net/2009/07/12/iphone-like-passwords-in-jquery/feed/ 0 Gritter for jQuery http://www.jpennington.net/2009/07/11/gritter-for-jquery/ http://www.jpennington.net/2009/07/11/gritter-for-jquery/#comments Sun, 12 Jul 2009 01:02:31 +0000 admin http://www.jpennington.net/?p=203 Recently I have become a really hardcore fan of jQuery and the millions of plugins that are available. Today I found one that I think is exceptionally useful. It is called Gritter. What this plugin allows you to do is create bubble like popup notifications for your website. In looking at the code, it really could not be any easier to do. Just a few lines of JavaScript code and you are good to go. Go check it out at http://boedesign.com/2009/07/11/growl-for-jquery-gritter/. If you are looking for a very easy to implement popup notification system, this really could be exactly what you are looking for.

]]> http://www.jpennington.net/2009/07/11/gritter-for-jquery/feed/ 0 Ajax with jQuery http://www.jpennington.net/2009/01/31/ajax-with-jquery/ http://www.jpennington.net/2009/01/31/ajax-with-jquery/#comments Sat, 31 Jan 2009 19:00:23 +0000 admin http://www.jpennington.net/?p=139 Here is the code we are using for today’s discussion on using jQuery to add Ajax to a website. You can download a copy of everything required to do this project here.

Today’s example utilizes the PHP Calendar object I recently released along with a Javascript library called jQuery. We will generate a calendar that will be able to switch month and years using Ajax.

What is Ajax?

Ajax is a way to call back to the webserver without refreshing the entire page. This is done through Javascript. There is a very lengthy discussion I could have with you about this, but there are better resources out there about how it actually works. All you really need to know is that you can use it to call back to the webserver to do whatever you want to. It can be used to add an item to a shopping cart or update a certain part of the page to streamline a process.

On To The Code

I am going to assume you know how the calendar object works. If not please read the PHP Calendar Instructions Page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<?
// Import the PHP Calendar Object
require_once('object.calendar.php');
if( isset($_REQUEST['action']) ) {
	switch( $_REQUEST['action'] ) {
		case 'ajax_generate': {
			$month = $_REQUEST['month'];
			$year = $_REQUEST['year'];
			$calendar = new Calendar($month, $year);
			$next_month = $calendar->getNextMonthYear();
			$previous_month = $calendar->getPreviousMonthYear();
			$calendar->setNextMonthContent('<a href="javascript:ajaxChangeCalendar('.$next_month['month'].', '.$next_month['year'].')"> > </a>');
			$calendar->setPreviousMonthContent('<a href="javascript:ajaxChangeCalendar('.$previous_month['month'].', '.$previous_month['year'].')"> < </a>');
			$calendar->generate();
			exit();
		} break;
	}
}
?>
<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>
</head>
 
<body>
 
	<div id="calendar_group">
		<?
		$month = 1;
		$year = 2009;
		$calendar = new Calendar($month, $year);
		$next_month = $calendar->getNextMonthYear();
		$previous_month = $calendar->getPreviousMonthYear();
		$calendar->setNextMonthContent('<a href="javascript:ajaxChangeCalendar('.$next_month['month'].', '.$next_month['year'].')"> > </a>');
		$calendar->setPreviousMonthContent('<a href="javascript:ajaxChangeCalendar('.$previous_month['month'].', '.$previous_month['year'].')"> < </a>');
		$calendar->generate();
		?>
	</div>
	<?
	$current_month = $calendar->getCurrentMonthYear();
	?>
	<a href="javascript:ajaxChangeCalendar(<?=$current_month['month']?>, <?=$current_month['year']?>)">Current Month</a>
	<br/><br/>
	<select name="move_to_month" id="move_to_month">
		<?
		for($i=1; $i<=12; $i++) {
			?><option value="<?=$i?>"><?=$i?></option><?
		}
		?>
	</select>
	<select name="move_to_year" id="move_to_year">
		<?
		for($i=1900; $i<=2020; $i++) {
			?><option value="<?=$i?>"><?=$i?></option><?
		}
		?>
	</select>
	<input type="button" value="Go To" onclick="ajaxChangeCalendar( document.getElementById('move_to_month').value, document.getElementById('move_to_year').value )" />
	<script type="text/javascript">
		function ajaxChangeCalendar( month, year ) {
			var redraw = $.ajax({
							type: "POST",
							async: false,
							url: "ajax_calendar.php",
							data: "action=ajax_generate&month=" + month + "&year="+year
						}).responseText;
			$("#calendar_group").html(redraw);
		}
	</script>
</body>
</html>

The first thing I am going to bring your attention to is including the jQuery library on line 22. So as you can see we are generating a calendar on lines 29-36. The Next and Previous Month Content. What we are going to put in there is a link that calls a Javascript function called ajaxChangeCalendar.You will also notice that we call this function on lines 42 and 59. Line 42 moves the calendar to the current month and year, while the button on line 59 uses the values from the dropdown menu to determine where to go.

Now for the meat and potatoes of Ajax, the ajaxChangeCalendar function. You will notice that we are utilizing jQuery’s Ajax functionality. We set the type to Post (It could easily be Get if you wanted to), async is set to false, set the URL and the data that should be put into POST. The $.ajax will do all the work for you. It reaches out and takes the text it received and puts it into the variable redraw.

We then take that text and use replace the HTML in the calendar_group div with the value of redraw.

That seems simple right? It really is. Now let’s talk about how we get the data that goes into redraw. This can be found on lines 4-18. You will notice that it looks exactly the same as the code that generated the calendar initially, except for the fact that the month and possibly year have changed. What is happening is that you are outputting the HTML code that will replace the HTML in the calendar_group div.

Also, notice the exit() being called on line 15. We do not want any more HTML to output after the table. Otherwise you will have the entire page put into the value of redraw and that will in turn redraw the entire page. That would defeat the purpose of Ajax in the first place.

Anyways, I hope this helps to explain how you can use jQuery to put Ajax on your site. This was a very simple example but you can do a whole lot more with Ajax if you put your mind to it. If you have any questions post a comment or submit it in the contact form.

]]> http://www.jpennington.net/2009/01/31/ajax-with-jquery/feed/ 0