jquery mouse gestures real demo

A Simple jQuery mouse gestures demo and tutorial.

You can see this example live over top of my blog header, it shows mouse left,right,middle ,over events live. here we learn how did i implemented this.

HTML of demo

Here we use simple logic with four layers for each mouse event. code shown below

<div id="mouse-div">
  <div id="mouse-parts">
    <div id="mouse-left">&nbsp;</div>
    <div id="mouse-right">&nbsp;</div>
    <div id="mouse-blink">&nbsp;</div>    
    <div id="mouse-middle">&nbsp;</div>
  </div>

CSS of Demo

Total mouse main element #mouse-div was positioned absolutely with mouse background.

mouse main element has another element called #mouse-parts and positioned relatively with main element.

#mouse-left element positioned with main background and its mouse left click event background matched exactly with absolute positioning.

#mouse-right element positioned with main background and its mouse right click event background matched exactly with absolute positioning.

#mouse-middle element positioned with main background and its mouse middle click event background matched exactly with absolute positioning.

#mouse-blink element positioned with main background and its mouse over event background matched exactly with absolute positioning.

#mouse-div {
	position: absolute;
	height: 240px;
	width: 200px;
	left: 14px;
	top: 51px;
	background: url(mouse.png) no-repeat left top;
}
#mouse-div #mouse-parts {
	position: relative;
	height: 100%;
	width: 100%;
}
#mouse-parts #mouse-blink {
	height: 43px;
	width: 45px;
	background: url(mouse-over.png) no-repeat center center;
	position: absolute;
	left: 114px;
	top: 165px;
	display:none;
}
#mouse-parts #mouse-left {
	height: 141px;
	width: 114px;
	background: url(mouse-left.png) no-repeat left top;
	position: absolute;
	top: 24px;
	display:none;
}
#mouse-parts #mouse-right {
	height: 142px;
	width: 110px;
	position: absolute;
	background: url(mouse-right.png) no-repeat left top;
	left: 62px;
	top: 0px;
	display:none;
}
#mouse-parts #mouse-middle {
	height: 128px;
	width: 82px;
	position: absolute;
	background: url(mouse-middle.png) no-repeat left top;
	left: 33px;
	top: -1px;
	display:none;
}

jQuery Code

jQuery().ready(function(){
jQuery('#mouse-div').hover(function(){
jQuery('#mouse-blink').show();},function(){
jQuery('#mouse-blink').hide();})
.mousedown(function(e){ //fire the each event when mouse button pressed
e.preventDefault();
if(e.which==1){
jQuery('#mouse-left').show();//show the mouse-left element over the mouse that was brightened
}else if(e.which==3){
jQuery('#mouse-right').show();//show the mouse-right element over the mouse that was brightened
return false;
}else if(e.which==2){
jQuery('#mouse-middle').show();//show the mouse-middle element over the mouse that was brightened
}
return false;})
.mouseup(function(e){jQuery('#mouse-left,#mouse-right,#mouse-middle').hide();})//reset the all images to hidden state when mouse released
.bind('contextmenu',function(){return false;});//hide the default context menu when right clicking on main element.
});

View Demo and Download ‘jquery mouse guestures’

Submitting form to remote server with array of parameters

submit a form with post method to remote server using php curl

We learn how to submit the form data to remote server in my previous example with URL string.
Here we can pass data with POST multipart method,main difference is that we passs it as array.

To submit forms using cURL, we need to follow the below steps:

1. Prepare the data to be posted
2. Connect to the remote URL
3. Post (submit) the data
4. Fetch response and display it to the user or do some other stuff with it.

Below Example Has two files,one to post the data and other is to process the data.

/*
 * Data which is to submitted to the remote URL
 */
 
 
$post_array = array('fname'=>'mahesh','lname'=>'chari');
 
/*
 * Initialize cURL and connect to the remote URL
 * You will need to replace the URL with your own server's URL
 * or wherever you uploaded this script to. 
 */
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://example.com/curlpost_handler.php' );
 
/*
 * Instruct cURL to do a regular HTTP POST
 */
curl_setopt($ch, CURLOPT_POST, TRUE);
 
/*
 * Specify the data which is to be posted
 */
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_array);
 
/*
 * Tell curl_exec to return the response output as a string
 */
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
 
/**
 * Execute the cURL session
 */
$response = curl_exec($ch );
 
/**
 * Close cURL session and file
 */
curl_close($ch );
 
echo $response; // is Welcome Maheshchari.

Handling post data on curlpost_hanlder.php

$firstname=$_POST['fname'];
$lastname=$_POST['lname'];
echo &quot;Welcome &quot;.$firstname.$lastname;

submit a form to remote server with php curl

Submitting form to remote server.

We learned some basics in my previous article cURL basics. Here we cover a topic how to submit a form to remote server.

To submit forms using cURL, we need to follow the below steps:

1. Prepare the data to be posted
2. Connect to the remote URL
3. Post (submit) the data
4. Fetch response and display it to the user or do some other stuff with it.

Below Example Has two files,one to post the data and other is to process the data.

/*
 * Data which is to submitted to the remote URL
 */
 
 
$post_str = urlencode("fname=mahesh&lname=chari");
 
/*
 * Initialize cURL and connect to the remote URL
 * You will need to replace the URL with your own server's URL
 * or wherever you uploaded this script to. 
 */
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://example.com/curlpost_handler.php' );
 
/*
 * Instruct cURL to do a regular HTTP POST
 */
curl_setopt($ch, CURLOPT_POST, TRUE);
 
/*
 * Specify the data which is to be posted
 */
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_str);
 
/*
 * Tell curl_exec to return the response output as a string
 */
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
 
/**
 * Execute the cURL session
 */
$response = curl_exec($ch );
 
/**
 * Close cURL session and file
 */
curl_close($ch );
 
echo $response; // is Welcome Maheshchari.

Handling post data on curlpost_hanlder.php

$firstname=$_POST['fname'];
$lastname=$_POST['lname'];
echo "Welcome ".$firstname.$lastname;

php curl basic reference

cURL basics and functions over view

cURL is a PHP library which allows you to connect and communicate to many different types of servers with many different types of protocols.Main difference is it has session capability unlik fopen. We can make small scale robot script with cURL functions in PHP.

With cURL we can:

  • Implement payment gateways’ payment notification scripts.
  • Download and upload files from remote servers.
  • Login to other websites and access members only sections.
  • Cross site communication with PHP backend and Ajax.

PHP cURL library is definitely the odd man out. Unlike other PHP libraries where a whole plethora of functions is made available, PHP cURL wraps up a major parts of its functionality with following functions.

Curl functions are:

  1. curl_close — Close a cURL session
  2. curl_copy_handle — Copy a cURL handle along with all of its preferences
  3. curl_errno — Return the last error number
  4. curl_error — Return a string containing the last error for the current session
  5. curl_exec — Perform a cURL session
  6. curl_getinfo — Get information regarding a specific transfer
  7. curl_init — Initialize a cURL session
  8. curl_multi_add_handle — Add a normal cURL handle to a cURL multi handle
  9. curl_multi_close — Close a set of cURL handles
  10. curl_multi_exec — Run the sub-connections of the current cURL handle
  11. curl_multi_getcontent — Return the content of a cURL handle if CURLOPT_RETURNTRANSFER is set
  12. curl_multi_info_read — Get information about the current transfers
  13. curl_multi_init — Returns a new cURL multi handle
  14. curl_multi_remove_handle — Remove a multi handle from a set of cURL handles
  15. curl_multi_select — Wait for activity on any curl_multi connection
  16. curl_setopt_array — Set multiple options for a cURL transfer
  17. curl_setopt — Set an option for a cURL transfer
  18. curl_version — Gets cURL version information

curl_setopt is the pivot around which the main cURL functionality revolves. cURL functioning is controlled by way of passing predefined options and values to this function.

A simple example to handle google rss feed

 
/*
*
* Initialize the cURL session
*/
$curl_handler = curl_init();
/*
*
* Set the URL of the page or file to download.
*/
curl_setopt($curl_handler, CURLOPT_URL,
'http://news.google.com/news?hl=en&topic=t&output=rss');
/*
*
* Ask cURL to return the contents in a variable
* instead of simply echoing them to the browser.
*/
curl_setopt($curl_handler, CURLOPT_RETURNTRANSFER, 1);
/*
*
* Execute the cURL session,do some stuff with content
*/
$contents = curl_exec ($curl_handler);
/*
*
* Close cURL session,
*be sure to close the handler as curl stores cookies ,other file data stores on server.
*/
curl_close ($curl_handler);

In the above example we used CURLOPT_URL,CURLOPT_RETURNTRANSFER options.

How to check weather mod_rewrite module is enabled

How to check weather mod_rewrite module is enabled or not?

We know the impotence of the Search Engine Friendly URLs . To make an application SEF preferable we must have .htaccess permissions and mod_rewrite module enabled.

Here we discuss if apache web server mod_rewrite module enabled or not.

Step1: Open your note pad and pate below code in it and Save as phpinfo.php.

<?php phpinfo(); ?>

Step2: Now preview this page and find the “mod_rewrite” in the column of “Loaded modules”.

Step3: If we found this we enabled mod_rewrite module.

Step4:if we didn’t found ,we can enable it by reading my previous article.

Enable mod_rewrite on apache

How to enable mode_rewrite module on apache

Before enabling this module for SEF URL s ,we must have permission to use .htaccess file .Please read my previous post to enable .htacess.

Before beginning this article ,please back up your apache configuration file httpd.conf file located in apache installation.

Now open with note pad this configuration file and find the below the lin

#LoadModule rewrite_module modules/mod_rewrite.so

Now remove the “#” symbol in the above line,results modified looks below

LoadModule rewrite_module modules/mod_rewrite.so

Now Save the file and restart the apache now mod_rewrite module is enabled.

enable htaccess apache

Enable htacces for directories

we know that htaccess permission must on apache web server like making SEF urls, directory permissions..etc.here we discuss about how to check .htaccess enabled.

Before we begin this tutorial, please make sure you make a backup copy of the original httpd.conf apache configuration file located in apache installation folder in case we make a mistake, this way we can always go back to the original configuration file

Now open

httpd.conf

file with note pad and find the below text

<Directory />
    Options FollowSymLinks
    AllowOverride none
    Order deny,allow
    Deny from all
    Satisfy all
</Directory>

Then replace AllowOverride none to AllowOverride All. Modified version looks as below

<Directory />
    Options FollowSymLinks
    AllowOverride all
    Order deny,allow
    Deny from all
    Satisfy all
</Directory>

Above change tells the apache to use .htaccess as per directory bases.
Now we can use .htaccess files .

Remember

Remember while uploading .htaccess file to remote server make sure the file transfer in ASCII mode, generally with windows operating system FTP programs use binary mode.

Generally FTP programs doesn’t display the .htaccess files by default ,we must force the FTP program to show hidden files like .htaccess files.

When you save .htaccess file with note pad it saves as .htaccess.txt .Make sure .htaccess is a file extension not a file name with empty name.

Codeigniter htaccess

Enable SEF URL in Codeigniter

We are familiar with Codeigniter comes with optional SEF URLs, but we use non SEF urls in production or development version.

1
2
http://localhost/index.php/helloworld/welcome/
http://localhost/helloworld/welcom/

In the above snippet we know that line 1 is default URL which contains index.php in URl part that used in development version.
Second line is the deployed version SEF URL, generally we need some tweaks with .htaccess and configure stuff.

htaccess

Open note pad and copy and paste below code into that and save it as .htaccess and copy this file into your codeigniters root directory where it was installed.

1
2
3
4
5
6
DirectoryIndex index.php
RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|js|robots\.txt|favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.php/$1 [L,QSA]

Line 1: set index.php as default directory index instead of index.html

Line 2: Start rewriting engine on

Line 3: start a condition that won’t meet this situation where the request to static resources like images , css, javascript , robot text files

Line 4: make condition user requests a valid request

Line 5: make condition no physical file exists with the given URL

Line 6: if above conditions all met redirect the request to index.php on installation

making changes to config.php file

open the file in the directory system/application/config/config.php make following changes.
Find below line

$config['index_page'] = "index.php";

Replace above line with below code

$config['index_page'] = "";

Now test the new URLs ,it done.