Overlay js is a lightweight overlay jQuery plugin. It only weighs 2kb minified. You can style the overlay completely with css. I have added 3 callback functions in new version to help with the overlay. You can now call a function before launching the overlay, after the overlay has completed loaded and after overlay is removed/closed. Please refer to the demo for example usage and preview.

Current version: 2
License: MIT license
Download location: overlay-js 2
Demo : http://demos.codinglog.com/jquery/overlay-js/

bitbucket repository: https://bitbucket.org/mtsandeep/overlay/

VERSION 0.2 (published on Sep 11, 2011)

Overlay js is my first jquery plugin. I needed a simple overlay and i wanted the styling to be from my css, so i made this plugin. Its lightweight, only 1.75kb minified.

As this is my first plugin, it may not be the best coded plugin, so please test it and help me improve it. I have made a bitbucket repository so that anyone can fork it and improve it. Please check the example folder in the download for usage instructions.

I didn’t use any libraries (i heard there are some libraries for ajax in codeigniter, but i decided to go with this method), so make some jquery functions to take the data from the form and submit it to the controller using jquery’s ajax functions. ($.post in particular). but after writing all the ajax queries i realized that i need a validation also. so saw simple jquery validation and it also have an option to enable ajax. (all my coding just got wasted ). so i used that along with this. so here is the code

At first i made a simple form with the below structure

	<form action="<?php echo site_url('user/login');?>" method="POST">
		<fieldset>
			<legend>User Login:</legend>
			<ul>
				<li><label for="username">username:</label><input name="username" type="text" id="username" value="" /></li>
				<li><label for="password">password:</label><input name="password" type="password" id="password" value="" /></li>
				<li><label for="submit">Submit Button:</label> <input class="submit" type="submit" id="ajax_submit" value="Submit" /></li>
			</ul>
		</fieldset>
	</form>
<div id="result"></div>

A few things you need to look in this structure is the “action”, make sure you have an action specified in-order to submit the data of the form or to work even if javascript is disabled. And also the “id” of the submit button, we are listening to the click on this submit button, so make sure you have the id is “ajax_submit”.
Now we have some jquery to help us with that submission.

<script type="text/javascript">
$(function() {
$('#ajax_submit').closest('form').simpleValidate({
  errorElement: 'em',
  ajaxRequest: true,
  completeCallback: function(validated_data) {
  var formData = validated_data.serialize();
	$.post(
		$('#ajax_submit').closest('form').attr('action'),
		formData,
		function(data){
			$('#result').html(data);
		},
		'html'
	);
  }
});
});
	</script>

if anyone need code without validation

<script type="text/javascript">
	$(function() {
		$('#ajax_submit').click(function(e){
			e.preventDefault();
			$.post(
				$(this).closest('form').attr('action'),
				$(this).closest('form').serialize(),
				function(data){
					$('#result').html(data);
				},
				'html'
			);
		});
	});
</script>

Load the simple jquery validation and jquery on top of this.

Now whenever user hits the ajax_submit button everything gets passed to the action url and data is loaded to the result div.

Take the data in your controller as usual and echo the result or alert

The example provided at facebook documentation is

FB.Event.subscribe('edge.create', function(response) {
  // do something with response
});

A typical fb like button xfbml code is

<fb:like href="http://mtsandeep.com" send="true" width="450" show_faces="true" font=""></fb:like>

You can see that we can have “href”, the link we would like to get likes for. if its left empty, the current url of the page is taken as the value. We can use “edge.create” to see when a user likes the above page. but when we have more than one like buttons, we are not able to identify which like triggered. so to track the likes individually, we need to use the “href” value which is the only varying part of the like button code.

so here is the fb edge.create code

FB.Event.subscribe('edge.create', function(href) { //href used instead of response
  if(href=="http://mtsandeep.com") {
	  alert("user liked mtsandeep.com");
  }
  else {
	  alert("user liked some other button");
  }
});

You can view a small demo here

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
	 FB.init({
		appId:'your app key',
		cookie:true,
		status:true,
		xfbml:true
	 });
	$(document).ready(function() {
		$("#facebook-login").click(function(event) {
			event.preventDefault();
			FB.login(function(response) {
			  if (response.session) {
				if (response.perms) {
					// user is logged in and granted some permissions.
					// perms is a comma separated list of granted permissions
					FB.api('/me?fields=name,email', function (response) {
						var fb_name=response.name;
						var fb_email=response.email;
						var loadUrl="path to your login verification script";
						$.post( loadUrl, {email: fb_email}, function(status) {
							if(status=="success"){
								$('#result').html("You have successfully logged in with your facebook account");
							}
							else {
								$('#result').html("User haven't registered yet!");
							}
						});
					});
				}
				else {
				  $('#result').html("user is logged in, but did not grant any permissions");
				}
			  }
			  else {
				$('#result').html("user is not logged in");
			  }
			}, {perms:'email,status_update,publish_stream'});
		});
	});
</script>

For Controller

public function display_list(){
$this->load->library('pagination');
$config['base_url'] = base_url().'lists/display_list/'; //your url where the content is displayed
$config['total_rows'] = $this->db->count_all('TABLE_NAME'); //counting the total no of rows in your table
$config['per_page'] = '10';
$config['num_links'] = '5';
$config['full_tag_open'] = '<p>';
$config['full_tag_close'] = '</p>';
$this->pagination->initialize($config);
$data['offset_no']=$this->uri->segment(3);
$this->load->model('model_name');
$data['lists'] = $this->model_name->get_list($config['per_page'],$data['offset_no']);
$this->load->view('lists/display',$data); // the view file name and data to pass
}

For model

function get_list($limit, $offset) {
$this->db->order_by("ID", "asc");
$query = $this->db->get('TABLE_NAME', $limit, $offset);
return $query->result_array();
}

For view

<?php echo $this->pagination->create_links(); //pagination links ?>
<?php if(count($lists)>0):?>
	<table>
		<tr>
			<th>Sl.No</th>
			<th>Field name 1</th>
			<th>Field name 2</th>
			<th>Field name 3</th>
		</tr>
		<?php for($i=0;$i<count($lists);$i++):?>
		<tr>
			 <td><?=$i+$offset_no+1?></td>
			 <td><?=$lists[$i]['FIELD_NAME1']?></td>
			 <td><?=$lists[$i]['FIELD_NAME2']?></td>
			 <td><?=$lists[$i]['FIELD_NAME3']?></td>
		</tr>
		<?php endfor;?>
	</table>
		<?php else:?>
			<h2>No list to display.</h2>
<?php endif;?>