Get yourself the TimThumb source and put it in the root of your site.

Create a folder in the root of your site named “cache” and set the permissions to 777.

Now open your nivo slider js file. Im using jquery.nivo.slider.pack.js, search for the first nivo-control.

<a rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>

Now replace that with

<a rel="'+k+'"><img src="timthumb.php?src='+f.attr("src")+'&h=19&w=35" alt="" /></a>

The changes made are the timthumb.php addition to the image src and the attr change to src.

timthumb.php?src='+f.attr("src")+'&h=19&w=35

adjust the h= and w= to your liking.

Save the file and your good to go, no need to make thumbnails or anything else to the img tag in your nivo slider.

If you would like installation help just contact me via skype: blueicestudios

DEMO

Step 1
So lets start by adding the jQuery into the head of the page where the form is.

$(document).ready(function() {
	//Make sure the loading image is hidden.
	$('#loader').hide();
	//Blur is triggered when you leave the textbox.
	$('#username').blur(function(){
	  //Show the loader once blur is triggered.
	  $('#loader').show();

	  //Post will send the username value to the check page
      $.post("check.php", {
	    //sends the username value check.php?username=value
		username: $('#username').val()

		//grabs the responce from the check.php page
      }, function(response){

		 //This part is more style than function.
		 //The 400 gives the loader time to make it look like its doing something.
		 //The lower the number the faster the the result shows.
        $('#results').fadeOut();
        setTimeout("finishAjax('results', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

//id is results span and responce is the data
function finishAjax(id, response) {
  //hide the loader
  $('#loader').hide();
  //prints the results
  $('#'+id).html(unescape(response));
  //fade the results in
  $('#'+id).fadeIn();
} //finishAjax

Step 2
Now for the form. The only thing needed is a username textbox, the loader image and the spans.

Username:






Password:

Step 3
Now for the server side.

if ($_POST['username']) {
        $username = stripslashes($_POST['username']);

		// Make a MySQL Connection
		mysql_connect("localhost", "username", "password") or die(mysql_error());
		mysql_select_db("database") or die(mysql_error());

		// Retrieve all the data from the usercheck table
		$result = mysql_query("SELECT username FROM usercheck")
		or die(mysql_error());  

		$row = mysql_fetch_array( $result );

		// Print out the contents of the entry
		if($row['username'] == $username){
			echo 'This username is taken.
Please choose another.';
		 }else{
			echo 'Available!';
		}
}

And that is pretty much it. Enjoy.

function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
     alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP");
   }

   return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(page) {

   // Open PHP script for requests
   http.open('get', page);
   http.onreadystatechange = handleResponse;
   http.send(null);

}

function handleResponse() {

   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;

      if(response) {
         // UPDATE ajaxTest content
         document.getElementById("div id").innerHTML = response;
      }

   }

}

function repeatloop()
{
sendRequest('page.php');
setTimeout("repeatloop()", 2000);
}

window.onload=function() {
repeatloop();
}

div id is the div in which the page is loaded.
edit “page.php” as the page to load.
change the timeout to your liking. 2000 is 2 seconds.

You may or may not need this, but it could come in handy at one point in time. So lets start..

I will show you the basics here, you may download the source at the bottom of the page.

View the DEMO

index.html

include these into the head section of the page. ajax.js is the Sack js functions. I will get into Sack later.

this goes into the head as well.

var ajax = new Array();

function getTextList(sel)

{

var color = document.getElementById('color').value; //gets value from text input

document.getElementById('colorReturn').options.length = 0;

if(color.length>0){

var index = ajax.length;

ajax[index] = new sack();

ajax[index].requestFile = 'getColor.php?color='+color; //sends the GET to the php page

ajax[index].onCompletion = function(){ createText(index) };

ajax[index].runAJAX();

}

}

function createText(index)

{

var obj = document.getElementById('colorReturn'); //retruns the options from the php page

eval(ajax[index].response);

}

The form

Filter the colors - Start typing black.

Thats it for the index page. pretty straight forward. So now for the fun part.

getColor.php – This page contains the sql and php that returns the

mysql_connect("localhost", "username", "password") or die(mysql_error());

mysql_select_db("database") or die(mysql_error());

$color = $_GET['color'];

if(isset($_GET['color'])){

$result = mysql_query("SELECT color FROM colors WHERE color LIKE '%$color%' LIMIT 0,10")

or die(mysql_error());

while($color = mysql_fetch_array( $result ))

{

echo 'obj.options[obj.options.length] = new Option("'.$color['color'].'","'.$color['color'].'");';

}

}

Its not the most detailed tutorial, but im not a tutorial guy.

View the DEMO

Download the SOURCE

MySQL Table, used for example.

CREATE TABLE IF NOT EXISTS `percent` (
`per_id` int(11) NOT NULL auto_increment,
`per_num` varchar(255) NOT NULL,
PRIMARY KEY (`per_id`)
) ENGINE=InnoDB;

1. Lets start with the MySQL Connection, I named this file dbcommon.php. Besure to change the username, password and database to your own.

mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("databasename") or die(mysql_error());

2. function.php will contains the script for the query and bar. I setup the 4 function examples as in the demo.

function percent_full(){

  $result = mysql_query("SELECT * FROM percent")
  or die(mysql_error());

	 while($full = mysql_fetch_array( $result )) {
		echo '

'.($full['per_num']).'%
id:'.($full['per_id']).'


';
	 } 

}

function percent_button(){

  $result = mysql_query("SELECT * FROM percent")
  or die(mysql_error());

	 while($button = mysql_fetch_array( $result )) {
		echo '


';
	 }

}

function percent_donation_full(){

  $result = mysql_query("SELECT * FROM percent WHERE per_id=18")
  or die(mysql_error());

	 while($donation_full = mysql_fetch_array( $result )) {
		echo '


 $'.($donation_full['per_num']).'



';
	 } 

}

function percent_donation_button(){

  $result = mysql_query("SELECT * FROM percent WHERE per_id=18")
  or die(mysql_error());

	 while($donation_button = mysql_fetch_array( $result )) {
		echo '


 $'.($donation_button['per_num']).'



';
	 } 

}

3. style.css page will control the way the bars are shown.

@charset "utf-8";
#no-margin {
margin:0px;
}
/* Begin Percentage Bar Full */
#bar_wrap_full {
width:24px;
height:106px;
background:url(img/measure.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_full div.top {
width:20px;
height:3px;
background:url(img/bar_top.gif) no-repeat;
}

#bar_wrap_full div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_full div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_full div.num {
text-align:center;
}

#bar_wrap_full div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

/* Begin Percentage Bar Button */
#bar_wrap_button {
width:24px;
height:106px;
background: url(img/measure_buttons.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_button div.top {
width:20px;
height:3px;
background:url(img/bar_top.gif) no-repeat;
}

#bar_wrap_button div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_button div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_button div.num {
text-align:center;
}

#bar_wrap_button div.overlay {
background: url(img/stripes.png) bottom;
width:24px;
height:auto;
}

/* End Percentage Bar Button */

/* Begin Percentage Bar Full */
#bar_wrap_donation_full {
width:24px;
height:106px;
background:url(img/measure.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_donation_full div.top {
width:50px;
height:3px;
background:url(img/bar_top.gif) no-repeat left;
}

#bar_wrap_donation_full div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_donation_full div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_donation_full div.num {
text-align:center;
margin-left:20px;
line-height:0;
}

#bar_wrap_donation_full div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

/* Begin Percentage Bar button */
#bar_wrap_donation_button {
width:24px;
height:106px;
background:url(img/measure_buttons.gif) no-repeat right;
font-size:9px;
font:Arial, Helvetica, sans-serif;
color:#999;
float:left;
margin-right:20px;
}

#bar_wrap_donation_button div.top {
width:50px;
height:3px;
background:url(img/bar_top.gif) no-repeat left;
}

#bar_wrap_donation_button div.center {
width:20px;
background:url(img/bar_cent.gif) repeat-y;
}

#bar_wrap_donation_button div.bottom {
width:20px;
height:3px;
background:url(img/bar_bot.gif) no-repeat;
}

#bar_wrap_donation_button div.num {
text-align:center;
margin-left:20px;
line-height:0;
}

#bar_wrap_donation_button div.overlay {
background:url(img/lines.png) no-repeat;
width:24px;
height:106px;
}
/* End Percentage Bar Full */

4. index.php
Lets add the database connection and functions.

include('dbcommon.php');
include('function.php');

in the body we will call the functions.

percent_full();

percent_button();

percent_donation_full();

percent_donation_button();

Well everyone, I’m almost done with the generator!!

Watch this short clip to see it in action.

If you are interested in this tool it is for sale, while I get together a payment system you can contact me about trying out a beta.

DEMO

2 and 3 Dropdowns available in the download.

It is fairly simple and consists of only 3 files. An index, database connection and a function file. So lets start.

Make your database table and fields. you can use mine for now.

CREATE TABLE IF NOT EXISTS `two_drops` (
  `id` int(11) NOT NULL auto_increment,
  `tier_one` varchar(255) NOT NULL,
  `tier_two` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM ;

INSERT INTO `two_drops` (`id`, `tier_one`, `tier_two`) VALUES
(1, 'Colors', 'Red'),
(2, 'Colors', 'Blue'),
(3, 'Colors', 'Green'),
(4, 'Colors', 'Yellow'),
(5, 'Colors', 'Black'),
(6, 'Shapes', 'Square'),
(7, 'Shapes', 'Circle'),
(8, 'Shapes', 'Triangle'),
(9, 'Shapes', 'Rectangle'),
(10, 'Shapes', 'Oval');

Make your connection to your database. db.php

mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());

Next we will add the jQuery, loading, results and main form in index.php

add your includes at the top of the page.

  //include your database connection and function files.
  include('db.php');
  include('func.php');

and the rest of the page.

//jquery framework

$(document).ready(function() {
	$('#wait_1').hide();
	$('#drop_1').change(function(){
	  $('#wait_1').show();
	  $('#result_1').hide();
      $.get("func.php", {
		func: "drop_1",
		drop_var: $('#drop_1').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}

Select a Category


    
    
    

Ok, that was easy enough. Now for the functions func.php

//**************************************
//     Page load dropdown results     //
//**************************************
function getTierOne()
{
	$result = mysql_query("SELECT DISTINCT tier_one FROM two_drops")
	or die(mysql_error());

	  while($tier = mysql_fetch_array( $result )) 

		{
		   echo ''.$tier['tier_one'].'';
		}

}

//**************************************
//     First selection results     //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
   drop_1($_GET['drop_var']);
}

function drop_1($drop_var)
{
    include_once('db.php');
	$result = mysql_query("SELECT * FROM two_drops WHERE tier_one='$drop_var'")
	or die(mysql_error());

	echo '

Choose one
'.$drop_2['tier_two'].'


 ';
    echo '
';
}

And thats it. Download the files below.

DEMO

DOWNLOAD

Want more helpful and free scripts? Buy me a cup of coffee to keep me goin!