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

Watch this short clip to see it in action.

Features:

1. Generate on the fly 3 tier chained selects.
2. View the chain after its created.
   
3. Edit an existing chain as easy as you made it.
4. Delete chains.
5. Export chain files.
6. Export chain CSV database file.
7. Build unlimited chains and unlimited options.
8. Upload the generator, create a database, edit 1 file and your ready to make chains!
   

A screenshot of the current version

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.

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.

Finished Data Grid: Demo

So lets start, The data used for the grid will be pulled from a MySQL database.

If you don’t have one ready, use this to get an idea.

CREATE DATABASE `flex_grid` ;

CREATE TABLE `flex_grid`.`grid_data` (
`user_id` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`user_name` VARCHAR( 22 ) NOT NULL ,
`user_email` VARCHAR( 60 ) NOT NULL ,
`user_phone` VARCHAR( 20 ) NOT NULL ,
`user_mobile` VARCHAR( 20 ) NOT NULL ,
PRIMARY KEY ( `user_id` )
) ENGINE = InnoDB;

INSERT INTO `flex_grid`.`grid_data` (
`user_id` ,
`user_name` ,
`user_email` ,
`user_phone` ,
`user_mobile`
)
VALUES (
NULL , 'Joe Blow', 'joe@blow.com', '123-456-7890', '321-654-0987'
);

Ok, once you get this running or if you have your own lets start.

Step 1: Creating the Flex Project

Open up Adobe Flex if you don’t already have it open…… Got it open? Ok good.

Now navigate to File > New > Flex Project

Next lets set up the project.

Create a project name and choose PHP from the dropdown list.

Hit Next,

Now create a folder where you want the project to be added as well as a URL to the project and click Validate Configuration.

Hit Next, the project will be created. Then simple hit Finish.

Step2: Create Application From Database.

You should now have a project with a blank blue canvas.

Navigate to Data > Create Application from Database…

Click “New” to setup a new connection..

Give the connection a name and hit next…

The MySQL Connection info and hit next..

Now just hit Finish.

From here it will create the grid.

Now, navigate to File > Export > Release Build.

Pretty straight forward from here on.

Finished Data Grid: Demo

I hope this helped you with learning a nice feature of Adobe Flex.

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!