iTechRoom - Technology News, Web Development and more

Skype and XAMPP port conflict

October 30th, 2010

XAMPP is a free and open source cross-platform web server package, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages.

Skype is a software application that allows users to make voice calls over the Internet. Calls to other users within the Skype service are free, while calls to both traditional landline telephones and mobile phones can be made for a nominal fee using a debit-based user account system.

Read the full post on "Skype and XAMPP port conflict"

Password strength checker using javascript

October 13th, 2010

Password strength checker meter is simple way of showing the strength of password. It checks for password length and the strength with various colored meter.

This is very helpful when the general users use just a simple text or numbers for password and they get easily hacked.

The screenshots from the Demo:

The javascript code:

function checkPasswordStrength(pwd)
{
	var strength_text = document.getElementById('strength_text');
	var strength_id = document.getElementById('strength_id');
	var progress_bar = document.getElementById('progress_bar');
 
	var strong = new RegExp('^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$', 'g');
	var medium = new RegExp('^(?=.{6,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$', 'g');
	var enough = new RegExp('(?=.{6,}).*', 'g');
 
	if (strength_text == null)
	{
		return;
	}
 
	strength_id.value = 0;
 
	var width = pwd.length * 10;
 
	if (pwd.length == 0)
	{
		strength_text.innerHTML = '&nbsp;';
		progress_bar.style.backgroundColor = '#FFFFFF';
	}
	else if (false == enough.test(pwd))
	{
		strength_text.innerHTML = 'Too short';
		progress_bar.style.backgroundColor = '#DC143C';
	}
	else if (strong.test(pwd))
	{
		strength_text.innerHTML = 'Strong';
		width = 100;
		progress_bar.style.backgroundColor = '#228B22';
		strength_id.value = 3;
	}
	else if (medium.test(pwd))
	{
		strength_text.innerHTML = 'Medium';
		width = 70;
		progress_bar.style.backgroundColor = '#FF8C30';
		strength_id.value = 2;
	}
	else
	{
		width = 60;
		strength_text.innerHTML = 'Weak';
		progress_bar.style.backgroundColor = '#FFD700';
		strength_id.value = 1;
	}
 
	progress_bar.style.width = width + '%';
 
	document.getElementById('password_strength').style.display = (pwd.length == 0)?'none':'';
}

The html code:

<form name="form" action="" method="post">
<div style="padding:100px 0px  50px 10px;">
Password : <input type="password" name="user_pwd" id="user_pwd" onkeyup="checkPasswordStrength(this.value)" style="width: 130px; border: #BBBBBB 1px solid;" />
 
<!-- Start: Password strength display area-->
<div id="password_strength" style="display: none; margin-top: 5px; margin-left:70px;">
	<div style="width: 130px; border: #CCCCCC 1px solid;">
    	<div id="progress_bar" style="height: 5px; border: #FFFFFF 0px solid; font-size: 1px; background-color: #FFD700;"></div>
    </div>
    <span id="strength_text" style="font-family: Arial; font-size: 10px; color: #888888;">Weak</span>
    <input type="hidden" name="strength_id" id="strength_id" value="1" />
</div>
<!-- End: Password strength display area-->
 
</div>
</form>

View Demo Download

Username availability check using PHP and jQuery

October 6th, 2010

It’s always good to check the username or email for availability before submission. So the user can check it instantly and helps them to enter the valid one.

This can be done using PHP and jQuery. Just a little code will do the rest.

Script used:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
function checkUserName(usercheck)
{
	$('#usercheck').html('<img src="images/ajax-loader.gif" />');
	$.post("checkuser.php", {user_name: usercheck} , function(data)
		{
			   if (data != '' || data != undefined || data != null)
			   {
				  $('#usercheck').html(data);
			   }
          });
}
</script>

The CSS used:

body{
padding:0;
margin:0;
font-family:"Trebuchet Ms";
color:#2a2a2a;
font-size:14px;
line-height:18px;
}
 
.error{
color: #FF0000;
font-size:11px;
}
 
.success{
color: #33CC00;
font-size:11px;
}

The HTML page:

<div style="padding:100px 0px  50px 10px;">
Username : <input type="text" name="username" id="username" onblur="checkUserName(this.value)" />
<span id="usercheck" style="padding-left:10px; ; vertical-align: middle;"></span>
</div>

The PHP (processing) page:

<?php
 
$arr_user=array("itechroom", "trialuser");
$username=$_POST['user_name'];
 
if(in_array($username,$arr_user))
{echo '<span class="error">Username already exists.</span>';exit;}
else if(strlen($username) < 6 || strlen($username) > 15){echo '<span class="error">Username must be 6 to 15 characters</span>';}
else if (preg_match("/^[a-zA-Z1-9]+$/", $username))
{
       echo '<span class="success">Username is available.</span>';
}
else
{
      echo '<span class="error">Use alphanumeric characters only.</span>';
}
?>

View Demo Download

Simple jQuery accordion to show News, Faq, Questions and Answers

September 25th, 2010

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery accordion allows us to show the content of the selected header. Its feature is that only the content of the selected header can be open at once. So it’s useful in showing the news content with header or Frequently asked questions regarding some topic or Questions and Answers etc.

The CSS used:

<style type="text/css">
#accordion { width:700px; margin: 0; padding: 0; }
#accordion p span { cursor:pointer; }
 
.news-title{
	color:#1e6e86;
	font: bold 12px Arial;
	margin-bottom:10px;
	background:#EDEDED;
	padding:5px 10px;
	}
.news_text{
	margin-left:10px;
	line-height:18px;
	}
</style>

jQuery script used:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(document).ready(function($) {
       $('#accordion div').hide();
       $('#accordion p span').click(function(){
               $('#accordion div').slideUp();
               $(this).parent().next().slideDown();
               return false;
       });
});
</script>

Read the full post on "Simple jQuery accordion to show News, Faq, Questions and Answers"

Convert video to mp3 from various video sharing websites like YouTube

September 19th, 2010

Although there are many more online video to mp3 converters, but these are easy and most commonly used.

1. www.video2mp3.net

Video2mp3 is a free YouTube, MyVideo, Clipfish, Sevenload, Dailymotion, MySpace to MP3 Converter and allows you to convert and download a video to MP3 file online. This service is fast, free, and requires no signup. All you need is a Video URL, and our software will transfer the video to our server, extract the MP3, and give you a link to download the audio file. So you are able to listen to your favorite YouTube tracks on every MP3 player.

Read the full post on "Convert video to mp3 from various video sharing websites like YouTube"

Use other javascript library with jQuery using jQuery.noConflict

September 7th, 2010

We all know that many javascript libraries like Prototype, MooTools etc. use $ as a function or variable name and jQuery uses the same.

But in the jQuery $ is just the alias name for “jQuery” and hence we can get all the functionality without the use of $. There by it facilitates us to use other library along with it.

So for this we will override jQuery’s default $ name by calling jQuery.noConflict()

If you are including other library file first then jQuery file then call the function before other library gets used.

Sample format:

Read the full post on "Use other javascript library with jQuery using jQuery.noConflict"