» Birthday Bundle - Over $400 worth of Envato files for just $20
Archive for 'November, 2008'

This tutorial will give you an idea of how you can implement an auto-login feature in PHP. Many sites have this option and I use it a lot when I have the chance because there are sites that I visit daily and it would be frustrating for me to type my username and password every time I have to log in. However, there are some things that you should take into consideration before using this option.

To make such a feature we have to use a cookie. You have to make sure that you DO NOT use this option when you’re working on a public computer (example: one from an Internet Cafe). This way, no one that will use the same computer will get access to your account(s) (for example: your Inbox from GMail). There’s also one important aspect: make sure that the saved cookies are not containing your password. Usually you should see a long encrypted string. Sites that do not respect this ‘rule’ shouldn’t be trusted.
Read more from this entry…

This is a simple JS function to show/hide an element. The element is hided by setting its ‘display’ CSS attribute to none. When the element is showed back the ‘display’ attribute is set to block.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>A Basic Show/Hide JavaScript Function</TITLE>
  <META NAME="Author" CONTENT="Bit Repository">

  <META NAME="Keywords" CONTENT="show, hide, js, function">
  <META NAME="Description" CONTENT="A Basic Show/Hide JavaScript Function">

<STYLE TYPE="text/css">

<!--
#info_box {
border: 1px solid green;
padding: 3px;
margin-top: 10px;
-moz-border-radius: 3px;
display: none;
}
-->
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function toggle(name)
{
var id = document.getElementById(name);

  if(id.style.display == '') // Invisible? Show it
  {
  id.style.display = 'block';
  }
  else if(id.style.display == 'block') // Visible? Hide it
  {
  id.style.display = '';
  }
}
//-->
</SCRIPT>

 </HEAD>

 <BODY>

Click <a href="JavaScript: toggle('info_box');">here</a> to show/hide the info box.

<div id="info_box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Curabitur at leo. Quisque tempus.</div>

 </BODY>
</HTML>

DEMO

Basic Usage of the JS onChange() Event Handler

Posted on November 11, 2008, Filled under JavaScript,  Bookmark it

The onChange() event handler is used when the value of an input or select field is changed and based on that change an event is triggered: a form validator, a URL redirection based on the selected value from the dropdown etc. Below I will show you some usage examples of this JavaScript event:

Trigger a form validator (real time)

This is a sample contact form with a JS validator for: name, email & message:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> onChange() Event Handler (Form Validator)</TITLE>
  <META NAME="Author" CONTENT="Bit Repository">

  <META NAME="Keywords" CONTENT="onchange(), form validation, select, redirect">
  <META NAME="Description" CONTENT="Some basic usage examples of onChange();">

<!-- Preload Images (validated & error icons) -->

<SCRIPT language="JavaScript">
<!--
pic1 = new Image(16, 16);
pic1.src="images/icon_tick.gif";

pic2 = new Image(16, 16);
pic2.src="images/icon_error.gif";
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function checkField(field)
{
var okay = '<img src="images/icon_tick.gif" align="absmiddle">';

var icon_error = '<img src="images/icon_error.gif" align="absmiddle">';

// NAME

if(field.id == 'name')
{
	if(field.value.length < 2)
	{
	var str = icon_error + '&nbsp;<font color="red">Error! The name should have at least 2 characters.</font>';
	}
	else
	{
	var str = okay;
	}
}

// E-MAIL

if(field.id == 'email')
{
// http://javascript.about.com/library/blre.htm

emailRe = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2,10})$/

	if (!emailRe.test(field.value))
	{
	var str = icon_error + '&nbsp;<font color="red">Error! You should enter a valid e-mail address.</font>';
	}
	else
	{
	var str = okay;
	}
}

// MESSAGE

if(field.id == 'message')
{
	if(field.value.length < 20)
	{
	var str = icon_error + '&nbsp;<font color="red">Error! The message should have at least 20 characters.</font>';
	}
	else
	{
	var str = okay;
	}
}

document.getElementById(field.id + "_status").innerHTML = str;

return false;
}
//-->

</SCRIPT>

 </HEAD>

 <BODY>

<form name="form" action="javascript:alert('success!');">
  <table width="804" border="0">

    <tr>
      <td width="324">Full Name:<br />
        <INPUT id="name" size="43" type="text" name="name" onChange="JavaScript: checkField(document.form.name);"></td>

      <td width="470"><div id="name_status"></div></td>
      </tr>
    <tr>
      <td>E-Mail:<br />

	  <INPUT size="43" type="text" id="email" name="email" onChange="JavaScript: checkField(document.form.email);"></td>

      <td valign='bottom'><div id="email_status"></div></td>
    </tr>

	<tr>
      <td>Subject (optional):<br />

	  <INPUT size="43" type="text" id="subject" name="subject"></td>
      <td valign='bottom'>&nbsp;</td>

    </tr>

	<tr>
      <td>Message:<br />
	  <TEXTAREA ID="message" NAME="message" ROWS="8" COLS="33" onChange="JavaScript: checkField(document.form.message);"></TEXTAREA></td>

      <td valign='top'><div style="margin-top: 20px;" id="message_status"></div></td>
    </tr>

	<tr>

      <td><input type="submit" name="submit" value="Submit"></td>
    </tr>

	</table>

</form>
 </BODY>
</HTML>



Redirect to URL upon selection

The follow script redirects a visitor based on what he selected from the dropdown:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> onChange() Event Handler (URL redirector upon select)</TITLE>
  <META NAME="Author" CONTENT="Bit Repository">

  <META NAME="Keywords" CONTENT="onchange(), redirector, on select">
  <META NAME="Description" CONTENT="Some basic usage examples of onChange();">

<SCRIPT LANGUAGE="JavaScript">

<!--
function redirect(url)
{
window.location = url;

var status = "<br /><font color='green'>Loading " + url +"...</font>";

document.getElementById("loading_status").innerHTML = status;
}
//-->
</SCRIPT>

 </HEAD>

 <BODY onLoad="document.getElementById('loading_status').innerHTML = '';">

<form name="form" action="javascript:alert('success!');">

Select a website:
<select name="website" onChange="JavaScript: redirect(document.form.website.options[document.form.website.selectedIndex].value);">

<option value="http://www.yahoo.com/">Yahoo</option>
<option value="http://www.msn.com/">MSN</option>
<option value="http://www.cnn.com/">CNN</option>
<option value="http://www.google.com/">Google</option>

</select>

<div id="loading_status"></div>

</form>
 </BODY>
</HTML>


HTML/PHP Dynamic DropDown with countries

Posted on November 8, 2008, Filled under PHP,  Bookmark it

This is a snippet that creates a dynamic dropdown menu with countries. The select is created from the $countries array. You can set a country that will be selected automatically when the drop down is loaded. This can be done by editing the variable $default. You can specify the key from the array (i.e.: 220 for US) or the country name (i.e.: Argentina).

Dynamic DropDown (PHP)

config.php

<?php
/*
---------------
Countries List
---------------
*/

$countries = array('1' => 'Afghanistan',
'2' => 'Albania',
'3' => 'Algeria',
'4' => 'American Samoa',
'5' => 'Andorra',
'6' => 'Angola',
'7' => 'Anguilla',
'8' => 'Antarctica',
'9' => 'Antigua and Barbuda',
'10' => 'Argentina',
'11' => 'Armenia',
'12' => 'Aruba',
'13' => 'Australia',
'14' => 'Austria',
'15' => 'Azerbaidjan',
'16' => 'Bahamas',
'17' => 'Bahrain',
'18' => 'Bangladesh',
'19' => 'Barbados',
'20' => 'Belarus',
'21' => 'Belgium',
'22' => 'Belize',
'23' => 'Benin',
'24' => 'Bermuda',
'25' => 'Bhutan',
'26' => 'Bolivia',
'27' => 'Bosnia-Herzegovina',
'28' => 'Botswana',
'29' => 'Bouvet Island',
'30' => 'Brazil',
'31' => 'British Indian Ocean Territory',
'32' => 'Brunei Darussalam',
'33' => 'Bulgaria',
'34' => 'Burkina Faso',
'35' => 'Burundi',
'36' => 'Cambodia',
'37' => 'Cameroon',
'38' => 'Canada',
'39' => 'Cape Verde',
'40' => 'Cayman Islands',
'41' => 'Central African Republic',
'42' => 'Chad',
'43' => 'Chile',
'44' => 'China',
'45' => 'Christmas Island',
'46' => 'Cocos (Keeling) Islands',
'47' => 'Colombia',
'48' => 'Comoros',
'49' => 'Congo',
'50' => 'Cook Islands',
'51' => 'Costa Rica',
'52' => 'Croatia',
'53' => 'Cyprus',
'54' => 'Czech Republic',
'55' => 'Denmark',
'56' => 'Djibouti',
'57' => 'Dominica',
'58' => 'Dominican Republic',
'59' => 'East Timor',
'60' => 'Ecuador',
'61' => 'Egypt',
'62' => 'El Salvador',
'63' => 'Equatorial Guinea',
'64' => 'Eritrea',
'65' => 'Estonia',
'66' => 'Ethiopia',
'67' => 'Falkland Islands',
'68' => 'Faroe Islands',
'69' => 'Fiji',
'70' => 'Finland',
'71' => 'Former USSR',
'72' => 'France',
'73' => 'France (European Territory)',
'74' => 'French Guyana',
'75' => 'French Southern Territories',
'76' => 'Gabon',
'77' => 'Gambia',
'78' => 'Georgia',
'79' => 'Germany',
'80' => 'Ghana',
'81' => 'Gibraltar',
'82' => 'Greece',
'83' => 'Greenland',
'84' => 'Grenada',
'85' => 'Guadeloupe (French)',
'86' => 'Guam',
'87' => 'Guatemala',
'88' => 'Guinea',
'89' => 'Guinea Bissau',
'90' => 'Guyana',
'91' => 'Haiti',
'92' => 'Heard and McDonald Islands',
'93' => 'Honduras',
'94' => 'Hong Kong',
'95' => 'Hungary',
'96' => 'Iceland',
'97' => 'India',
'98' => 'Indonesia',
'99' => 'Iraq',
'100' => 'Ireland',
'101' => 'Israel',
'102' => 'Italy',
'103' => 'Ivory Coast',
'104' => 'Jamaica',
'105' => 'Japan',
'106' => 'Jordan',
'107' => 'Kazakhstan',
'108' => 'Kenya',
'109' => 'Kiribati',
'110' => 'Kuwait',
'111' => 'Kyrgyzstan',
'112' => 'Laos',
'113' => 'Latvia',
'114' => 'Lebanon',
'115' => 'Lesotho',
'116' => 'Liberia',
'117' => 'Libya',
'118' => 'Liechtenstein',
'119' => 'Lithuania',
'120' => 'Luxembourg',
'121' => 'Macau',
'122' => 'Macedonia',
'123' => 'Madagascar',
'124' => 'Malawi',
'125' => 'Malaysia',
'126' => 'Maldives',
'127' => 'Mali',
'128' => 'Malta',
'129' => 'Marshall Islands',
'130' => 'Martinique (French)',
'131' => 'Mauritania',
'132' => 'Mauritius',
'133' => 'Mayotte',
'134' => 'Mexico',
'135' => 'Micronesia',
'136' => 'Moldavia',
'137' => 'Monaco',
'138' => 'Mongolia',
'139' => 'Montserrat',
'140' => 'Morocco',
'141' => 'Mozambique',
'142' => 'Myanmar, Union of (Burma)',
'143' => 'Namibia',
'144' => 'Nauru',
'145' => 'Nepal',
'146' => 'Netherlands',
'147' => 'Netherlands Antilles',
'148' => 'Neutral Zone',
'149' => 'New Caledonia (French)',
'150' => 'New Zealand',
'151' => 'Nicaragua',
'152' => 'Niger',
'153' => 'Nigeria',
'154' => 'Niue',
'155' => 'Norfolk Island',
'156' => 'Northern Mariana Islands',
'157' => 'Norway',
'158' => 'Oman',
'159' => 'Pakistan',
'160' => 'Palau',
'161' => 'Panama',
'162' => 'Papua New Guinea',
'163' => 'Paraguay',

'164' => 'Peru',
'165' => 'Philippines',
'166' => 'Pitcairn Island',
'167' => 'Poland',
'168' => 'Polynesia (French)',
'169' => 'Portugal',
'170' => 'Qatar',
'171' => 'Reunion (French)',
'172' => 'Romania',
'173' => 'Russian Federation',
'174' => 'Rwanda',
'175' => 'S. Georgia & S. Sandwich Islands',
'176' => 'Saint Helena',
'177' => 'Saint Kitts & Nevis Anguilla',
'178' => 'Saint Lucia',
'179' => 'Saint Pierre and Miquelon',
'180' => 'Saint Tome and Principe',
'181' => 'Saint Vincent & Grenadines',
'182' => 'Samoa',
'183' => 'San Marino',
'184' => 'Saudi Arabia',
'185' => 'Senegal',
'186' => 'Seychelles',
'187' => 'Sierra Leone',
'188' => 'Singapore',
'189' => 'Slovakia',
'190' => 'Slovenia',
'191' => 'Solomon Islands',
'192' => 'Somalia',
'193' => 'South Africa',
'194' => 'South Korea',
'195' => 'Spain',
'196' => 'Sri Lanka',
'197' => 'Suriname',
'198' => 'Svalbard and Jan Mayen Islands',
'199' => 'Swaziland',
'200' => 'Sweden',
'201' => 'Switzerland',
'202' => 'Tadjikistan',
'203' => 'Taiwan',
'204' => 'Tanzania',
'205' => 'Thailand',
'206' => 'Togo',
'207' => 'Tokelau',
'208' => 'Tonga',
'209' => 'Trinidad and Tobago',
'210' => 'Tunisia',
'211' => 'Turkey',
'212' => 'Turkmenistan',
'213' => 'Turks and Caicos Islands',
'214' => 'Tuvalu',
'215' => 'Uganda',
'216' => 'UK',
'217' => 'Ukraine',
'218' => 'United Arab Emirates',
'219' => 'Uruguay',
'220' => 'US',
'221' => 'USA Minor Outlying Islands',
'222' => 'Uzbekistan',
'223' => 'Vanuatu',
'224' => 'Vatican City',
'225' => 'Venezuela',
'226' => 'Vietnam',
'227' => 'Virgin Islands (British)',
'228' => 'Virgin Islands (USA)',
'229' => 'Wallis and Futuna Islands',
'230' => 'Western Sahara',
'231' => 'Yemen',
'232' => 'Yugoslavia',
'233' => 'Zaire',
'234' => 'Zambia',
'235' => 'Zimbabwe');

/*
Searches the array for a given value (insensitive case) and returns the corresponding key if successful
*/

function array_isearch($value, $array)
{
   while (list($key, $val) = each($array))
   {
      $val = strtolower($val);
	  $value = strtolower($value);

      if($val == $value) return $key;
   }
   return false;
}
?>

Read the rest of this entry

Creating the array_isearch() Function

Posted on November 8, 2008, Filled under PHP,  Bookmark it

Hello coders,

We know that arrray_search() is a function used to search the array for given value and return the corresponding key. This works fine in a case sensitive mode, but in an insensitive one we have a problem. If we search for ‘blue’ and there is a value in array ‘BLUE’, our array_search() will return NULL. Here’s a function that works like array_search() & ignores the sensitive case:

<?php
function array_isearch($value, $array)
{
   while (list($key, $val) = each($array))
   {
      $val = strtolower($val);
	  $value = strtolower($value);

      if($val == $value) return $key;
   }
return false;
}
?>

Usage Example:

<?php
$array = array(0 => 'blue', 1 => 'red', 2 => 'green', 3 => 'red');

$key_one = array_isearch('BLUE', $array);

echo 'Key One: '.$key_one;

echo '<br />';

$key_two = array_isearch('GrEeN', $array);

echo 'Key Two: '.$key_two;
?>

How to Create a PHP Word Popularity Script

Posted on November 7, 2008, Filled under PHP,  Bookmark it

This is a function that is meant to calculate the density of the words from a text. Since there are many words that have less then 3 characters, I’ve decided to add a filter that will not take into account words that aren’t bigger then (X) characters (examples: if, or, is, it etc.). Also, you can setup an array with a list of words that you do not want to add in the ranking calculation. Here’s the function (I’ll explain you how it works below):

<?php
function calculate_word_popularity($string, $min_word_char = 2, $exclude_words = array())
{
$string = strip_tags($string);

$initial_words_array  =  str_word_count($string, 1);
$total_words = sizeof($initial_words_array);

$new_string = $string;

foreach($exclude_words as $filter_word)
{
$new_string = preg_replace("/\b".$filter_word."\b/i", "", $new_string); // strip excluded words
}

$words_array = str_word_count($new_string, 1);

$words_array = array_filter($words_array, create_function('$var', 'return (strlen($var) >= '.$min_word_char.');'));

$popularity = array();

$unique_words_array = array_unique($words_array);

foreach($unique_words_array as $key => $word)
	{
	preg_match_all('/\b'.$word.'\b/i', $string, $out);

	$count = count($out[0]);

	$percent = number_format((($count * 100) / $total_words), 2); 

	$popularity[$key]['word'] = $word;
	$popularity[$key]['count'] = $count;
	$popularity[$key]['percent'] = $percent.'%';
	}

function cmp($a, $b)
{
    return ($a['count'] > $b['count']) ? +1 : -1;
}

usort($popularity, "cmp");

return $popularity;
}
?>

Read more from this entry…

I was googling for a way to show a drop down menu with states that populates another menu with counties from the selected state. I found a nice dynamic dependent drop down script (with categories & subcategories) at dreamwebstore.com. However, adding over 2000 counties in a single JavaScript file is not such a good idea because such a script is quite big (200KB+) and in many cases (a slow internet connection, some downloads in progress etc.) it will take some time to load.

I’ve decided to keep the counties from each state in separate files. For instance, if we select Hawaii state (with 5 counties), only the hi.js file will load which has only a size of 515 bytes. To do this I’ve used the powerful JavaScript library JQuery.

Dependent DropDown Select Element

Read more from this entry…