solution for On “Enter Key” press event in javascript


Hello guys,
while working on a project i needed to add a text input which takes some action when the user press on the “enter key”, you know it’s something like facebook comment text input 😉

as you may know there is no “onenterkey” or “onsubmit” for the text input. I stayed 15 min. trying to get the job done but in vain. That got me mad that i was talking to the text input “hey you mr. input how the hell you get that event fired ?!!!!!!”. finally i got a trick.

Here’s a little trick that may help.

you can use the “onkeydown” event and then check the pressed key if the key code is 13 “actually is the enter key code”. you can get the key code with that command “event.keyCode”

As you can see it seen a little snippet but it got me out of that problem 😀

Here’s a snippet that can demonstrate what i’m talking about

<input type="text" onkeydown="if (event.keyCode == 13) doSomeThing(paam1 , param2.....);" >

Hope you’ve enjoyed
Thanks 🙂

WAMP server problem solution for windows 8


Hi guys hope you are having a good day.

Most of us have tried the latest Microsoft OS (windows 8). It’s really brilliant OS.
As a web developer you have installed one of the local web servers like WAMP.
If you have tried to get WAMP online on windows 8 it will fail. I guessed that other server is listening to port 80 and i was right 😀
To know who is listening on port 80 just run WAMP and have a left click on the tray icon choose Apache->service->Test port 80 the command prompt window will appear and you will know who is listening on port 80.

For windows 8 IIS 8 server is installed automatically and runs also automatically on windows start up. All you’ll need to do is ti disable it from running on start up and here is the solution

launch control panel-> Administrative tools->services from the services search for a service called (World Wide Web Publishing Service) double click on it then set the start up type to disables then press apply the ok, restart your windows, run your WAMP server and every thing will be OK 🙂
Word Wide Web Publishing Service

Hope you enjoyed
Thanks 🙂

Creating interactive forms using jQuery


hi guys,
Today i’ll show you how to create an interactive action for some forms using jQuery. Actually when you want to create a good UI you should make use of every single pixel in your page. Also try to use some interactive action form displaying and hiding your forms.

Here we are gonna use

fadeIn();

and

fadeOut();

actions to do so. Actually this design can be used for example to hide and display login forms or creating any usable forms.

first i’ll show you the mark up below


<html>
	<head>
		<title>Creating Interactive Forms Using jQuery</title>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		
		
		<link rel="stylesheet" type="text/css" href="demos.css" />
		
		<style>
			#form{
				display:none;
				height : 200px;
				width:200px;
				color: black;
				background-color : black;
			}
			
			#mask {
				display: none;
				background: #000; 
				position: fixed; left: 0; top: 0; 
				z-index: 10;
				width: 100%; height: 100%;
				opacity: 0.8;
				z-index: 999;
			}

		</style>
		
	<head>
	<body>
		<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Click Me</span>
		</button>
		
		<center>
			<div id="form">
			</div>
		</center>
	</body>
</html>

as you can see above there is a mask that is hidden, the mask will be the background for the form that will appear when we click on the button.

Then i’ll list the click button action.
When we click on the button the mask must be visible, and the form will be shown above it. So first we will append our markup with the mask element. Then use the

fadeIn();

to display our form.

fadeIn();

takes one parameter the time for the form to be shown in m seconds. Also we’ll use the

fadeIn();

to display the mask after we have appended it’s markup element.
Here we have another action that we must pay attention for, when the user clicks anywhere on the mask element. First its markup must be remove then the mask and the form must be hidden and here we’ll use the

fadeOut();

to do so.

Here’s the button click action code

$(function(){
				
				$("button").button();
				
				$("button").click(function(){
				
					//display the form area
					$("#form").fadeIn(1000);
					
					//add the mask to the html body
					$('body').append('<div id="mask"></div>');
					
					//display the mask
					$('#mask').fadeIn(1000);
				});
				
				$('#mask').live('click', function() { 
				 //hide the mask and form
				 $('#mask , #form').fadeOut(300 , function() {
						//remove the mask to display the normal html page without <div id=""></div>
						$('#mask').remove();  
					})
				});
			});

hope you enjoyed this tutorial, and finally here’s the full code


<html>
	<head>
		<title>Creating Interactive Forms Using jQuery</title>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		
		
		<link rel="stylesheet" type="text/css" href="demos.css" />
		
		<script type="text/javascript">
			$(function(){
				
				$("button").button();
				
				$("button").click(function(){
				
					//display the form area
					$("#form").fadeIn(1000);
					
					//add the mask to the html body
					$('body').append('<div id="mask"></div>');
					
					//display the mask
					$('#mask').fadeIn(1000);
				});
				
				$('#mask').live('click', function() { 
				 //hide the mask and form
				 $('#mask , #form').fadeOut(300 , function() {
						//remove the mask to display the normal html page without <div id=""></div>
						$('#mask').remove();  
					})
				});
			});
		</script>
		
		<style>
			#form{
				display:none;
				height : 200px;
				width:200px;
				color: black;
				background-color : black;
			}
			
			#mask {
				display: none;
				background: #000; 
				position: fixed; left: 0; top: 0; 
				z-index: 10;
				width: 100%; height: 100%;
				opacity: 0.8;
				z-index: 999;
			}

		</style>
		
	<head>
	<body>
		<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Click Me</span>
		</button>
		
		<center>
			<div id="form">
			</div>
		</center>
	</body>
</html>

Sending secure e-mail using PHPMailer


Hi guys,

Here a new PHP class that helps you to send emails securely. This may be so helpful for those who need a contact us or newsletter forms.
This class can send emails using three different ways (via SMTP server, via qMail MTA or via sendmail command).

This differs from the ordinary php mail function. If anyone tried before to use php mail function you’ll find your message in the junk not inbox and you may wonder why this happens. It happens because the mail server did not trust the sender so it see’s your message as spam message and places it in the junk.
PHPMailer uses a secure way to send emails. Here i’ll show you the most important functions that you may use it frequently.

All You need to configure PHPMailer is to download the source files from this link

Then extract the files and copy these three files to the place you will include them

class.phpmailer.php
class.pop3.php
class.smtp.php

Then just include this class.phpmailer.php file and the configuration is done.

require_once 'class.phpmailer.php';

First you need to create and instance of the PHPMailer class as follows

$email = new PHPMailer();

To send email via “SMTP” you need to call this member function

$email->IsSMTP();

To send email via “qMail MTA” you need to call this member function

$email->IsQmail();

To send email via “sendmail command” you need to call this member function

$email->IsSendmail();

Then if you need to enable email authentication you can call this member function

$email->SMTPAuth = true;

Some mail servers will require "SSL" for secure email sending (like Google) so you can call this member function to enable "SSL"
$email->SMTPSecure = 'ssl';

For "SMPT" you need to specify the "SMPT server" so you can call this function

$email->Host = 'smtp.gmail.com';

Actually PHPMailer uses the 465 port to send emails so you can specify it using this function

$email->Port = 465;

In case if you had an error in sending email you can view this error using this function

$email->ErrorInfo;

Here i had written a function that you can use to send emails using PHPMailer all you need is to pass it some usual arguments to specify the sender and the reciever emails, body, subject and sender name


<?php 

	require_once 'class.phpmailer.php';
	
        //setting up Authentication info.
	$authMail = 'YourMailGoesHere@gmail.com';
	$authPass = 'Your Password Goes Here';
	
	define('mail' , $authMail);
	define('password' , $authPass);
	
	function sendEmail($to, $from, $from_Name, $body, $subject)
	{
		$email = new PHPMailer();
		
		$email->IsSMTP(); // enable SMTP to 
		$email->SMTPDebug = 0;  // debugging: 1 = errors and messages, 2 = messages only
		$email->SMTPAuth = true;  // authentication enabled
		$email->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for GMail
		$email->Host = 'smtp.gmail.com'; //specifying SMTP mail server
		$email->Port = 465; 
		$email->Username = mail;  
		$email->Password = password;           
		$email->SetFrom(mail, $from_Name);
		$email->Subject = $subject;
		$email->Body = $body;
		$email->AddAddress(mail);
		if(!$email->Send()) { //call $email->Send() to send emails
			$error = 'Mail error: '.$email->ErrorInfo; 
			echo $error;
			
			return false;
		} else {
			$error = 'Message sent!';
			echo $error;
			
			return true;
		}
		
		
		
	}
	
	
	

?>

Hope you enjoyed 🙂

Famous phpmyadmin error (this is not a number)


hey guys hope you have a good day,

Today a was developing a web app. which a mysql database. I used the famous tool phpmyadmin for that task.

while creating a table in my database i have got an error “this is not a number”. I have search on the web for it and a few people had the right solution.

The solution is to set the length field for nvarchar type and every thing will getting well 😉

so don’t forget to set the length field to get away from that fool error 😀

Creating and hosting Facebook app.s (1)


Hi all,
Though points of view may differ from one person to another we should agree that Facebook is the largest and leading social network ever. Because they always care about users and what is the new for them, they also pay much care for the developers and their different web programming languages. So they have many sdks js, PHP, python …..etc.
Today we’ll have a look about creating free facebook app.s using the latest PHP sdk which they call it GRAPH.

First of all you need to have a facebook developer account and it’s easy and free. You can get a free one through that link facebook developer account and they will send you the activation code for your account as an sms (actually it’s more secure to do so :D).

Then go to your developer account through the previous link. The you click on the app.s tab at the top like that

Create a facebook app.

The click at the create button at the top

create button

The you’ll have the following screen where you can specify your app. name and hosting options.

create screen

as you can see the check box for the Heroku free hosting (which i’ll show you how to deal with in the following post).

The you’ll enter the captcha security key which will appear for you.

The you’ll have the following screen to enter your email to send you the hosting configurations.

hosting config

Then you’ll have your app. screen like that

app screen

if you’ll intend to have heroku free hosting so leave the app. domains blank, the click save you’ll have an error

so remove the text that has been written in the app domains, then every thing will be alright 😀 .

There another thing which you should know, all facebook app.s can be seen as a part of facebook so why we want to have hosting domain for them

THE ANSWER IS, facebook don’t host app.s but can suggest you free hosting domains like Heroku and then facebook app. has some property called CANAVAs which can view the app. as a part of facebook

Here’s a picture the may help you to understand how every thing is doing right

api interaction

Then how will you configure it?!

At the bottom of the page you have a tab called App on Facebook which you’ll specify the url of your app

such as the following picture

canvas config

Then don’t forget to click the “Save Changes” button when yo finish.

Here we are finished and you can get you canavas url as follows

choose the app name from the left tabs on the page and then you’ll find your canavas app. url as follows

canavas page

Then you’ll see the app canvas page as the following picture

canavas view page

And finally we are done, and wait for the next blog i’ll show you how to get started with Facebook Graph PHP sdk.

Hope you enjoyed 🙂

Vertical Accordion jQuery plugin


while developing a website i face a problem that i need a side bar that need some way of tabs the requires viewing sub links when clicking on each tab,

so i have searched more and more i’ve also tried jQuery ordinary accordion but all in vain.

while googling i’ve found a jQuery plug which worked for it as magic 😀

it’s called v-accordion

so guys let’s stop talking and start coding,

this plugin requires some piece of html structure as u’ll see.

All you need to do is to put all your tabs in one div which will be passed to jQuery to get the work done. Then you’ll have a slice for each tab. while coding actually you’ll have some problem that the plug will not work at the first, so here’s the solution.

The name of each slice must match as follows “va-slice va-slice-1” and give each slice a number, then all the job u’ll be okay.

here’s a simple html structure that may help.

<html>
	<head>
		<title>Vertical Accrodion</title>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	  	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="jquery.vaccordion.js"></script>
		<script type="text/javascript" src="jquery.mousewheel.js"></script>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&v2' rel='stylesheet' type='text/css'>
		<script type="text/javascript">
			$(function(){
				$("#content").vaccordion({
					visibleSlices	: 3,
					expandedHeight	: 250,
					animOpacity		: 0.1,
					contentAnimSpeed: 100
				});
			});
		</script>
		<style>
			#fst{
				height: 100px;
				width: 100px;
				background-color: red;
			}

			#snd{
				height: 100px;
				width: 100px;
				background-color:green;
			}

			#trd{
				height: 100px;
				width: 100px;
				background-color: black;
			}
		</style>

	</head>
	<body>
		<div id="content">
			<div class="va-slice va-slice-1">
				First tab
			</div>
			<div class="va-slice va-slice-2">
				Second tab
			</div>

			<div class="va-slice va-slice-3">
				Third tab
			</div>
		</div>
	</body>
</html>

as you can see the .vaccordion has many option that may help you,
Finally there’s three files needed to get the job done
1-jquery.vaccordion.js
2-jquery.mousewheel.js
3-jquery.easing.1.3.js

here the download link for these files
http://www.mediafire.com/?nbnayybznxya81m

hope you enjoyed 🙂

using jQuery ajax with php


hi guys ,here’s a new trick using jQuery ajax,

while working on a login system actually i was using jQuery in building some cool GUI components

so i faced a problem how will i send the user data to the server to check them ?!!

the only solution is to use ajax and the steps to do that

  1. Get the user data from textboxes using JavaScript.
  2. Deal with some jQuery ajax codes to send the user data to the server using post.
  3. The php file will check the user data.
  4. Receive the response from the php file using jQuery ajax.

So now let’s get some geeky behavior with some code snippets

first the html file that contains the form

<html>
<head>
<title>jQuery Ajax Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="ajax_test.js"></script>
</head>
<body>
<p>User Name</p><input type="text" id="userName" />
<p>Password</p><input type="password" id="password" />
<br />
<div id="loginButton"><pre>Sign In</pre></div>
<div id="check"></div>
</body>

</html>

here a put an empty div with an id called check when the user data is true then i’ll user it to inform him,also when invalid data i’ll use it to tell the user

here’s the ajax_test.js


$(function(){
$("#loginButton").button() ;
$("#loginButton").click(function(){

var user = document.getElementById(“userName”).value;
var pass = document.getElementById(“password”).value;
$.post(“login.php”,{userName : user , password : pass } ,function(data) {//assign the php variables userName=user and password=pass
if(data==’yse’){
document.getElementById(“check”).innerHTML=”Login Successfully”;//if the serever respond with yes
}
if (data==’no’) {
document.getElementById(“check”).innerHTML=”Error in user Data”;//if the server respond with no
}
});

});
});

the most important method used here is $.post() it has three parameters

first the requested file on the server,then the passed parameters to the server (we use the : operator as an assignment operator),and last the code that handles the received data

in this tutorial the server is supposed to respond with either yes or no

and finally here’s the full source code

http://www.mediafire.com/?370f95ef27f1p3m

Validating user input in JavaScript


Many developers may face a big problem while dealing with JavaScript; it’s the problem of validating user input using REGULAR EXPRESSIONS

Here are simple steps to do so:

-First what is a regular expression?!

It’s a tool for performing pattern matches and it has to categories

1-literal syntax , it’s something like that

var reg = /pattern/

2-Dynamic regular expression that can be done using the RegExp() constructor , it’s something like that


var reg = new RegExp(“pattern”) ;

after we have got a regular expression we can use it any where

and here’s an example that may be helpful

-In this example we insure that the user enters 6 digits.

first i’ll construct an html form like that

<html>
<head>
<script type=”text/javascript”>
</script>
</head>

<body>
<form name=”iForm”>
<input type=”text” name=”iText” />

<button onclick=”validateInput();”>Click Me</button>

</form>
</body>

</html>

and between the script tags we put our JavaScript code the will get the job done


function validateInput()
{
var reg = /^\d{6}$/
if(document.iForm.iText.value.search(reg)==-1)
{
alert("Wrong input.....Please Enter Valid input !!!!")
}
}

Here i’ll reveal some mysterious about the previous expression

^ this means that it will start comparing from the first digit

d{6}     means that it will do comparing for 6 digits

$     means that it must be 6 digits till the end of the input(actually $ means the end of the input)

here’s another trick if you want to validate email input from the user

w can do this with this function

function validateInput()
{
var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
if(document.iForm.iText.value.search(reg)==-1)
{
alert("Wrong Email.....Please Enter Valid Email !!!!")
}
}

hope you enjoyed this simple tutorial :)