Start Free Trial

asked on

Help setting up jquery isotope

Hi all,

I have a php page that calls an array from the database and I'd like to have it look like this page:

http://isotope.metafizzy.co/demos/elements-partial.html

I've downloaded the source files but the instruction are not clear on how to implement it. There demo files are almost blank and so I can't tell how to reference my variables.

Could someone assist me with this that is familiar with isotope?

Here is how I am printing my array on the page:

while ( $row = mysql_fetch_array( $query ) ) 
		{
			// Getting the values of the selected records
			
			$rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
			$rec_id            =   $row["gen_enq_id"];          // The record's ID
			$rec_category_name =   Category($rec_category_id);  // The record's category name
			$rec_title         =   $row["gen_enq_desc"];        // The record's title
			
			// =**= Displaying the fetched values on the page =**= \\
			echo $rec_category_name . " - " . "<a target='_blank' href = 'xxx>" . $rec_title . "</a>" . "<br>";
		}

Open in new window

Thanks,

D

Check this out. It pertains to using Isotope in Wordpress but the first 2 steps show how to set it up.

http://www.studiopress.com/forums/topic/using-jquery-isotope/

Can you post some example data?

Give this a try to see if it works for you.
If you look at the basic demo code, the elements are defined like this. The class attributes on each item determine the filters that can be used on it. The data-symbol and data-category attributes determine how Isoptope shows it:

    <div class="element other nonmetal   " data-symbol="H" data-category="other">
      <p class="number">1</p>
      <h3 class="symbol">H</h3>
      <h2 class="name">Hydrogen</h2>
      <p class="weight">1.00794</p>
    </div>
          
    <div class="element noble-gas nonmetal   " data-symbol="He" data-category="noble-gas">
      <p class="number">2</p>
      <h3 class="symbol">He</h3>
      <h2 class="name">Helium</h2>
      <p class="weight">4.002602</p>
    </div>

Open in new window

The are contained in a container :

    <div id="container">

Open in new window

Now, in order to do what you need with your data, I would try this:

echo '<div id="container">';
while ( $row = mysql_fetch_array( $query ) ) 
{
    // Getting the values of the selected records

    $rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
    $rec_id            =   $row["gen_enq_id"];          // The record's ID
    $rec_category_name =   Category($rec_category_id);  // The record's category name
    $rec_title         =   $row["gen_enq_desc"];        // The record's title
    
    // =**= Displaying the fetched values on the page =**= \\
    echo  '<div class="'.rec_category_name.'"' data-symbol='".$rec_id .'" data-category="'.$rec_category_id.'">'.
          '  <p class="'.$rec_category_name.'".'</p>'.
          '  <h3 class="name">'.rec_title.'</h3>'.
          '</div>';
}
echo '</div>';

Open in new window

Then this essentially loads the isotope plugin:

  <script>
    $(function(){
      var $container = $('#container');
      $container.isotope({
        itemSelector: '.element' // class to filter set to one of your $rec_category_name values.
      });
    });
  </script>

Open in new window

ASKER

Thank you so much Eddie. Here is what I have on the page now:

<html>
<head>

/* I inserted there two files as I think they are both necessary to run the script? */
<script type="text/javascript" src="isotope.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script>
    $(function(){
      var $container = $('#container');
      $container.isotope({
        itemSelector: '.element' // class to filter set to one of your $rec_category_name values.
      });
    });
  </script>

</head>
<body>

  <?php
	// Connecting to the DB
	mysql_connect('localhost','foxdbmain','xxx!') or die ( mysql_error() );
	mysql_select_db("foxdbmain") or die ( mysql_error() );
	
	// Defining a function which returns the name of a category, based on a given ID, in a string format
	function Category( $cat_id ) {
		// Sending a query to the categories table with the given ID
		$cat_query = mysql_query("SELECT * FROM gen_enq_category WHERE gen_cat_code = '$cat_id' ");
		
		// Making sure a valid category has been selected
		if ( mysql_num_rows( $cat_query ) == 0 )
		{
			// returning an undefined value
			return "UNDEFINED";
		}
		else
		{
			// Storing the row in an array
			$cat_row = mysql_fetch_array( $cat_query );
			
			// Receicing the actual name of the selected category, and saving it into a variable
			$cat_name =  $cat_row["gen_cat_name"];
			
			// Returning the name of the selected category
			return $cat_name;
		}
	}
?>
Here, you can see the latest enquiries available: <br>
  <br>
  <?php
	// Sending a broad query to the target table where all the queries exist
	$query = mysql_query("SELECT * FROM gen_enquiry_table");
	
	// Making sure the table is not empty
	$num_all_enquiries = mysql_num_rows($query);
	if ( $num_all_enquiries == 0 )
	{
		echo "Sorry: No enquiry is available at the moment.";
	}
	else
	{
		// Enquiries found! Using a loop to iterate through all queries
		while ( $row = mysql_fetch_array( $query ) ) 
		{
			// Getting the values of the selected records
			
			$rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
			$rec_id            =   $row["gen_enq_id"];          // The record's ID
			$rec_category_name =   Category($rec_category_id);  // The record's category name
			$rec_title         =   $row["gen_enq_desc"];        // The record's title
			
			// =**= Displaying the fetched values on the page =**= \\
			echo $rec_category_name . " - " . "<a target='_blank' href = 'http://www.clearthemirror.com/showenq.php?id=$rec_id'>" . $rec_title . "</a>" . "<br>";
		}
	}
	
/// Testing Isotope

echo '<div id="container">';
while ( $row = mysql_fetch_array( $query ) ) 
{
    // Getting the values of the selected records

    $rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
    $rec_id            =   $row["gen_enq_id"];          // The record's ID
    $rec_category_name =   Category($rec_category_id);  // The record's category name
    $rec_title         =   $row["gen_enq_desc"];        // The record's title
	$rec_timestamp     =   $row["gen_enq_timestamp"];     // The record's timestamp	
    
    // =**= Displaying the fetched values on the page =**= \\
    echo  '<div class="'.rec_category_name.'"' data-symbol='".$rec_id .'" data-timestamp='".$rec_timestamp.'" data-category="'.$rec_category_id.'">'.
          '  <p class="'.$rec_category_name.'".'</p>'.
          '  <h3 class="name">'.rec_title.'</h3>'.
          '</div>';
}
echo '</div>';	
	
	
?>
</p>
</body>
</html>

Open in new window

When I run this at the moment it is giving the error:

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /home/clear555/public_html/allenq_isotope.php on line 92

Open in new window

    echo  '<div class="'.rec_category_name.'"' data-symbol='".$rec_id .'" data-timestamp='".$rec_timestamp.'" data-category="'.$rec_category_id.'">'.

Open in new window

If we could set it up so if has a filter at the top of the page that filters by date added (the timestamp in the db) then I'm sure I'd be able to figure out the rest of this.

I also added the javascript calls at the top of the page but I'm not 100% sure if these are correct.

Thank you again,

Derek

Chnage line 92 to this and the error will go away:

 echo  '<div class="'.$rec_category_name.'"' data-symbol='".$rec_id .'" data-timestamp='".$rec_timestamp.'" data-category="'.$rec_category_id.'">'.
          '  <p class="'.$rec_category_name.'"</p>'.
          '  <h3 class="name">'.rec_title.'</h3>'.
          '</div>';

Open in new window

I will look a little closer when I get home in a couple of hours.

Do you have any sample data you can post?

ASKER

Thank you very much Eddie!

It is still giving this error :

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /home/clear555/public_html/allenq_isotope.php on line 9

Here is a screenshot of the records (Attached)

User generated image

I could send you the sql file but one of the fields contains full html pages so it's messy to read.

Modify your export, replacing the HTML with "<HTML></HTML>"

Show me line 9 in /home/clear555/public_html/allenq_isotope.php

I won't be able to get back to it til tomorrow.

ASKER

This is line 9

 $(function(){
      var $container = $('#container');
      $container.isotope({
        itemSelector: '.element' // class to filter set to one of your $rec_category_name values.
      });
    });

Open in new window

ASKER

No problem at all Eddie, tomorrow is fine. I will send you the sql file in a couple of minutes.

ASKER

Here is the output on the sql file. I've manually went through it and removed all of the HTML code so hopefully it's correct.

-- phpMyAdmin SQL Dump
-- version 3.5.5
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jan 23, 2013 at 08:54 PM
-- Server version: 5.1.66-cll
-- PHP Version: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `foxdbmain`
--

-- --------------------------------------------------------

--
-- Table structure for table `gen_enquiry_table`
--

CREATE TABLE IF NOT EXISTS `gen_enquiry_table` (
  `gen_enq_id` int(6) NOT NULL AUTO_INCREMENT,
  `gen_enq_txt` text NOT NULL,
  `gen_enq_rating` int(6) NOT NULL,
  `gen_enq_desc` varchar(250) NOT NULL,
  `gen_enq_cat` int(5) NOT NULL,
  `gen_enq_timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `gen_enq_type` int(5) NOT NULL,
  PRIMARY KEY (`gen_enq_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=14 ;

--
-- Dumping data for table `gen_enquiry_table`
--

INSERT INTO `gen_enquiry_table` (`gen_enq_id`, `gen_enq_txt`, `gen_enq_rating`, `gen_enq_desc`, `gen_enq_cat`, `gen_enq_timestamp`, `gen_enq_type`) VALUES
(6, '<!DOCTYPE html></html>', 1, 'Without thoughts etc', 1, '2013-01-15 12:00:00', 1),
(7, '<!DOCTYPE html></html>', 7, '"Everything is okay" ', 2, '2012-12-11 13:00:00', 1),
(8, '<!DOCTYPE html>
</html>', 1, 'Koan - What was your Face ', 3, '2012-12-12 13:00:00', 1),
(9, '<!DOCTYPE html></html>', 4, 'Colour and Shape ', 4, '2013-01-01 18:00:00', 1),
(10, '<!DOCTYPE html></html>', 3, 'Source of the I', 5, '2012-12-09 13:00:00', 1),
(11, '<!DOCTYPE html></html>', 2, 'Thoughts Appearing', 6, '2012-12-20 12:00:00', 1),
(12, '<!DOCTYPE html></html>', 4, 'Another Stephen Wolinsky Enquiry ', 1, '2013-01-02 14:00:00', 1);
INSERT INTO `gen_enquiry_table` (`gen_enq_id`, `gen_enq_txt`, `gen_enq_rating`, `gen_enq_desc`, `gen_enq_cat`, `gen_enq_timestamp`, `gen_enq_type`) VALUES
(13, '<!DOCTYPE html></html>', 5, 'Gestalt - Another Test for Audio', 4, '2013-01-01 18:00:00', 2);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Open in new window

Remove the comment on line 9:

// class to filter set to one of your $rec_category_name values.

Open in new window

ASKER

Thanks, this error is fixed now but it gives me at line 92

echo  '<div class="'.$rec_category_name.'"' data-symbol='".$rec_id .'" data-timestamp='".$rec_timestamp.'" data-category="'.$rec_category_id.'">'.

Open in new window

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /home/clear555/public_html/allenq_isotope.php on line 92

You didn't make the change I showed above in comment 38812339

ASKER

Hi Eddie, I had inserted this code already. Here is what I have on the page now:

<html>
<head>

/* I inserted there two files as I think they are both necessary to run the script? */
<script type="text/javascript" src="isotope.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script>
    $(function(){
      var $container = $('#container');
      $container.isotope({
        itemSelector: '.element' 
      });
    });
  </script>

</head>
<body>

  <?php
	// Connecting to the DB
	mysql_connect('localhost','foxdbmain','xxx!') or die ( mysql_error() );
	mysql_select_db("foxdbmain") or die ( mysql_error() );
	
	// Defining a function which returns the name of a category, based on a given ID, in a string format
	function Category( $cat_id ) {
		// Sending a query to the categories table with the given ID
		$cat_query = mysql_query("SELECT * FROM gen_enq_category WHERE gen_cat_code = '$cat_id' ");
		
		// Making sure a valid category has been selected
		if ( mysql_num_rows( $cat_query ) == 0 )
		{
			// returning an undefined value
			return "UNDEFINED";
		}
		else
		{
			// Storing the row in an array
			$cat_row = mysql_fetch_array( $cat_query );
			
			// Receicing the actual name of the selected category, and saving it into a variable
			$cat_name =  $cat_row["gen_cat_name"];
			
			// Returning the name of the selected category
			return $cat_name;
		}
	}
?>
Here, you can see the latest enquiries available: <br>
  <br>
  <?php
	// Sending a broad query to the target table where all the queries exist
	$query = mysql_query("SELECT * FROM gen_enquiry_table");
	
	// Making sure the table is not empty
	$num_all_enquiries = mysql_num_rows($query);
	if ( $num_all_enquiries == 0 )
	{
		echo "Sorry: No enquiry is available at the moment.";
	}
	else
	{
		// Enquiries found! Using a loop to iterate through all queries
		while ( $row = mysql_fetch_array( $query ) ) 
		{
			// Getting the values of the selected records
			
			$rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
			$rec_id            =   $row["gen_enq_id"];          // The record's ID
			$rec_category_name =   Category($rec_category_id);  // The record's category name
			$rec_title         =   $row["gen_enq_desc"];        // The record's title
			
			// =**= Displaying the fetched values on the page =**= \\
			echo $rec_category_name . " - " . "<a target='_blank' href = 'http://www.clearthemirror.com/showenq.php?id=$rec_id'>" . $rec_title . "</a>" . "<br>";
		}
	}
	
/// Testing Isotope

echo '<div id="container">';
while ( $row = mysql_fetch_array( $query ) ) 
{
    // Getting the values of the selected records

    $rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
    $rec_id            =   $row["gen_enq_id"];          // The record's ID
    $rec_category_name =   Category($rec_category_id);  // The record's category name
    $rec_title         =   $row["gen_enq_desc"];        // The record's title
	$rec_timestamp     =   $row["gen_enq_timestamp"];     // The record's timestamp	
    
    // =**= Displaying the fetched values on the page =**= \\
 echo  '<div class="'.$rec_category_name.'"' data-symbol='".$rec_id .'" data-timestamp='".$rec_timestamp.'" data-category="'.$rec_category_id.'">'.
          '  <p class="'.$rec_category_name.'"</p>'.
          '  <h3 class="name">'.rec_title.'</h3>'.
          '</div>';
}
echo '</div>';	
	
	
?>
</p>
</body>
</html>

Open in new window

ASKER

It is still giving the same error message though.

You only posted the enquiries (gen_enquiry_table) table, I also need the categories table (gen_enq_category)

You can change the line that is giving you the error to this and it should work:

		echo "<div class='$rec_category_name' data-symbol='$rec_id' data-timestamp='$rec_timestamp' data-category='$rec_category_id'>
				<p class='$rec_category_name'</p>
				<h3 class='name'>rec_title</h3>
			  </div>";

Open in new window

ASKER

Sorry Eddie,

The gen_enq_category table is :

gen_cat_code
gen_cat_name

The records are displaying on the page with no errors. If you could give me a couple of examples on how to filter this date (sort by date added, sort by catagory etc) that would be greatly appreciated.

How can I give you examples if I don't have any data from that table?

ASKER

Sorry about that Eddie,

Here is the table for the catagories:

CREATE TABLE IF NOT EXISTS `gen_enq_category` (
  `gen_cat_code` int(11) NOT NULL,
  `gen_cat_name` varchar(150) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `gen_enq_category`
--

INSERT INTO `gen_enq_category` (`gen_cat_code`, `gen_cat_name`) VALUES
(1, 'Stephen '),
(2, 'Hak'),
(3, 'Zen'),
(4, 'Ges'),
(5, 'Ad'),
(6, 'Free'),
(7, 'Dz'),
(8, 'Vip');

Open in new window

I'm not sure how it's supposed to look but you need to also include the stylesheet from the isotope download. I renamed mine isotope.style.css. Give this code a shot and see if it works for you. A reminder, when you go through the same dataset twice, you must reset to the first record before going through again. That is why you weren't getting anything in the isotope part.

<html>
<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.isotope.js"></script>
    <link rel="stylesheet" type="text/css" href="isotope.style.css" />	
</head>
<body>
	<br>
<?php
	// Connecting to the DB
	mysql_connect('localhost','dbuser','dbPass') or die ( mysql_error() );
	mysql_select_db("db") or die ( mysql_error() );
	
	// Defining a function which returns the name of a category, based on a given ID, in a string format
	function Category( $cat_id ) {
		// Sending a query to the categories table with the given ID
		$cat_query = mysql_query("SELECT * FROM gen_enq_category WHERE gen_cat_code = '$cat_id' ");
	
		// Making sure a valid category has been selected
		if ( mysql_num_rows( $cat_query ) == 0 )
		{
			// returning an undefined value
			return "UNDEFINED";
		} else {
			// Storing the row in an array
			$cat_row = mysql_fetch_array( $cat_query );
	
			// Receicing the actual name of the selected category, and saving it into a variable
			$cat_name =  $cat_row["gen_cat_name"];
	
			// Returning the name of the selected category
			return $cat_name;
		}
	}
	
	// Sending a broad query to the target table where all the queries exist
	$query = mysql_query("SELECT * FROM gen_enquiry_table");
	
	// Making sure the table is not empty
	$num_all_enquiries = mysql_num_rows($query);
	
	if ( $num_all_enquiries == 0 )
	{
		echo "Sorry: No enquiry is available at the moment.";
	} else {
		// Enquiries found! Using a loop to iterate through all queries
		while ( $row = mysql_fetch_array( $query ) ) 
		{
			// Getting the values of the selected records
	
			$rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
			$rec_id            =   $row["gen_enq_id"];          // The record's ID
			$rec_category_name =   Category($rec_category_id);  // The record's category name
			$rec_title         =   $row["gen_enq_desc"];        // The record's title
	
			// =**= Displaying the fetched values on the page =**= \\
			echo $rec_category_name . " - " . "<a target='_blank' href = 'http://www.clearthemirror.com/showenq.php?id=$rec_id'>" . $rec_title . "</a>" . "<br>";
		}
	}
	
	// Testing Isotope
	
	// MUST rewind the dataset
	mysql_data_seek($query, 0);
	
	echo '<div id="container">';
	while ( $row = mysql_fetch_array( $query ) ) 
	{
		// Getting the values of the selected records
		
		$rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
		$rec_id            =   $row["gen_enq_id"];          // The record's ID
		$rec_category_name =   Category($rec_category_id);  // The record's category name
		$rec_title         =   $row["gen_enq_desc"];        // The record's title
		$rec_timestamp     =   $row["gen_enq_timestamp"];   // The record's timestamp	
		
		// =**= Displaying the fetched values on the page =**= \\
		echo "<div class='element' data-symbol='".$rec_id."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."'>
				<p>".$rec_category_name."</p>
				<h3 class='name'>".$rec_title."</h3>
			  </div>";
	}
	echo '</div>';	
?>
<script>
	$(document).ready(function(){
		var $container = $('#container');
		$container.isotope({
			itemSelector: '.element' 
		});
	});
</script>
</body>
</html>

Open in new window

ASKER

Thank you Eddie, would you mind sending me the js and css file you are using? There are multiple files in the version I downloaded and it would be helpful to know which one you are using that is working for you. At the moment it is displaying the recordset for me correctly but there are no onscreen filtering options.

Attached.
jquery.isotope.eddie.zip

ASKER

Thanks Eddie with this css they are looking great now. On the top of this page:

http://isotope.metafizzy.co/

you can see it filters the data in particular ways. This is not on the page i have so I wonder could you show me how to include one of these filters and I should be able to do the others myself.

Thanks so much,

Derek

ASKER

I've added the "rating" field from the DB as this is one of the ways I would like to filter the entries.

Here is the code as I have it now, I have the rating inserted in the first test block correctly but am not sure where to put it in the isotope block of code becuase anywhere I put it, it overlays on one of the other elements.

If we could filter then by alphabethical and by rating that would be amazing!

<html>
<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.clear.com/Testing/Enquiry%20Filtering/js/jquery.isotope.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.clear.com/Testing/Enquiry%20Filtering/css/isotope.style.css" />	
</head>
<body>
	<br>
<?php
	// Connecting to the DB
	mysql_connect('localhost','foxdbmain','xxx!') or die ( mysql_error() );
	mysql_select_db("foxdbmain") or die ( mysql_error() );
	
	// Defining a function which returns the name of a category, based on a given ID, in a string format
	function Category( $cat_id ) {
		// Sending a query to the categories table with the given ID
		$cat_query = mysql_query("SELECT * FROM gen_enq_category WHERE gen_cat_code = '$cat_id' ");
	
		// Making sure a valid category has been selected
		if ( mysql_num_rows( $cat_query ) == 0 )
		{
			// returning an undefined value
			return "UNDEFINED";
		} else {
			// Storing the row in an array
			$cat_row = mysql_fetch_array( $cat_query );
	
			// Receicing the actual name of the selected category, and saving it into a variable
			$cat_name =  $cat_row["gen_cat_name"];
	
			// Returning the name of the selected category
			return $cat_name;
		}
	}
	
	// Sending a broad query to the target table where all the queries exist
	$query = mysql_query("SELECT * FROM gen_enquiry_table");
	
	// Making sure the table is not empty
	$num_all_enquiries = mysql_num_rows($query);
	
	if ( $num_all_enquiries == 0 )
	{
		echo "Sorry: No enquiry is available at the moment.";
	} else {
		// Enquiries found! Using a loop to iterate through all queries
		while ( $row = mysql_fetch_array( $query ) ) 
		{
			// Getting the values of the selected records
	
			$rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
			$rec_id            =   $row["gen_enq_id"];          // The record's ID
			$rec_category_name =   Category($rec_category_id);  // The record's category name
			$rec_title         =   $row["gen_enq_desc"];        // The record's title
			$rec_rating        =   $row["gen_enq_rating"];   	// The record's rating	
	
			// =**= Displaying the fetched values on the page =**= \\
			echo $rec_category_name . " - " . "<a target='_blank' href = 'http://www.clearthemirror.com/showenq.php?id=$rec_id'>" . $rec_title . $rec_rating . "</a>" . "<br>";
		}
	}
	
	// Testing Isotope
	
	// MUST rewind the dataset
	mysql_data_seek($query, 0);
	
	echo '<div id="container">';
	while ( $row = mysql_fetch_array( $query ) ) 
	{
		// Getting the values of the selected records
		
		$rec_category_id   =   $row["gen_enq_cat"];         // The record's category ID
		$rec_id            =   $row["gen_enq_id"];          // The record's ID
		$rec_category_name =   Category($rec_category_id);  // The record's category name
		$rec_title         =   $row["gen_enq_desc"];        // The record's title
		$rec_timestamp     =   $row["gen_enq_timestamp"];   // The record's timestamp	
		$rec_rating        =   $row["gen_enq_rating"];   	// The record's rating		
		
		// =**= Displaying the fetched values on the page =**= \\
		echo "<div class='element' data-symbol='".$rec_id."' data-timestamp='".$rec_timestamp."' data-category='".$rec_category_id."'>
				<p>".$rec_category_name."</p>
				<h3 class='name'>".$rec_title."</h3>
				
			  </div>";
	}
	echo '</div>';	
?>
<script>
	$(document).ready(function(){
		var $container = $('#container');
		$container.isotope({
			itemSelector: '.element' 
		});
	});
</script>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Thank you so much Eddie! This is wonderful!

ASKER

Hi Eddie,

I have a quick question to the script that I can't figure out. Many of the elements appear with the text at the top of the div tags and others appear with the text at the bottom of the div tag. I have attached an image of this. I would like them all to appear the same. From the script you wrote, would you know why this is happening? I think it might have something to do with the element part of the javascript that you wrote?

Thanks,

D
edd-isotope.jpg

I would think the positioning has to do with the length of the strings or the CSS.

ASKER

Thanks Eddie, I wonder would you mind quickly having a look at the CSS to see if you could spot where this is happening. I've went through it for quite some time but can't figure it out. I've tried changing different values from relative to absolute etc and also commented out the element css as I thought this might be causing it but this didn't work.

/* Start: Recommended Isotope styles */

/**** Isotope Filtering *****/

.isotope-item {
  width: 150px;
  height: 150px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: blue;
  color: white;
  -webkit-border-top-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
          border-top-right-radius: 1.2em;
}


.category-1 {
  background-color: #ff0000;
}

.category-2 {
  background-color: #ff9900;
}

.category-3 {
  background-color: #ccff00;
}

.category-4 {
  background-color: #00ff66;
}

.category-5 {
  background-color: #0066ff;
}

.category-6 {
  background-color: #cc00ff;
}


.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  padding: 20px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7em;
  background: #1F1E1D;
  color: #FFF;
}

h1, h2, h3, p, ul, ol, pre, dl {
  margin-bottom: 1.0em;
}

h1, h2, #super-list, .element, .tagline, #index-list, 
.super-list .link {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 { font-weight: bold; }

h1 {
  font-size: 32px;
  line-height: 1.1em;
}

h2 {
  font-size: 24px;
  line-height: 1.1em;
}

ul, ol {
  margin-left: 1.5em;
}

a,
a code {
  color: #FB4;
  text-decoration: none;
}

a:hover,
a:hover code { 
  color: #4BF; 
}

a:active,
a:active code {
  color: #1FB;
  background: black;
}

a img { border: none; }

em { font-style: italic; }
strong { font-weight: bold; }

blockquote {
  padding-left: 1.0em;
  margin-left: 1.0em;
  border-left: 1px solid #333;
  font-style: italic;
}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
html,
body {
  height: 100%;
}

#container {
  border: 1px solid #666;
  padding: 5px;
  margin-bottom: 20px;
}

/*.element {
  width: 220px;
  height: 220px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #888;
  color: #222;
  -webkit-border-top-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
          border-top-right-radius: 1.2em;
}*/

.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }
.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }


.element * {
  position: absolute;
  margin: 0;
}

.element .symbol {
  left: 0.2em;
  top: 0.4em;
  font-size: 3.8em;
  line-height: 1.0em;
  color: #FFF;
}
.element.large .symbol {
  font-size: 4.5em;
}

.element.fake .symbol {
  color: #000;
}

.element .name {
  left: 0.5em;
  bottom: 1.6em;
  font-size: 1.05em;
}

.element .weight {
  font-size: 0.9em;
  left: 0.5em;
  bottom: 0.5em;
}

.element .number {
  font-size: 1.25em;
  font-weight: bold;
  color: hsla(0,0%,0%,.5);
  right: 0.5em;
  top: 0.5em;
}

.variable-sizes .element.width2 { width: 230px; }

.variable-sizes .element.height2 { height: 230px; }

.variable-sizes .element.width2.height2 {
  font-size: 2.0em;
}

.element.large,
.variable-sizes .element.large,
.variable-sizes .element.large.width2.height2 {
  font-size: 3.0em;
  width: 350px;
  height: 350px;
  z-index: 100;
}

.clickable .element:hover {
  cursor: pointer;
}

.clickable .element:hover h3 {
  text-shadow:
    0 0 10px white,
    0 0 10px white
  ;
}

.clickable .element:hover h2 {
  color: white;
}

/**** Example Options ****/

#options {
  padding-bottom: 1.0em;
}

#options h3 {
  margin-bottom: 0.2em;
  font-size: 15px;
}

#options h4 { 
  font-weight: bold;
}

#options ul {
  margin: 0;
  list-style: none;
}

#options ul ul {
  margin-left: 1.5em;
}

#options li {
  float: left;
  margin-bottom: 0.2em;
}

#options li a {
  display: block;
  padding: 0.4em 0.5em;
  background-color: #DDD;
  color: #222;
  font-weight: bold;
  text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
  background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:    -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:     -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:      -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
  background-image:         linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) );
}

#options li a:hover {
  background-color: #5BF;
}

#options li a:active {
  background-color: #39D;
  -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
     -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
       -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
          box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
}

#options li a {
  border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );
  border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );
}

#options li:first-child a {
  border-radius: 7px 0 0 7px;
  border-left: none;
}

#options li:last-child a {
  border-radius: 0 7px 7px 0;
}

#options li a.selected {
  background-color: #13F;
  text-shadow: none;
  color: white;
}

/* Combination filter options*/

#options .option-combo {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

#options .option-combo ul {
  margin-right: 20px;
  display: inline-block;
}

#options .option-combo h2,
#options .option-combo h4 {
  line-height: 34px;
  margin-bottom: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;
}

/* Color shapes */

.color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}
 
.color-shape.round {
  -webkit-border-radius: 35px;
     -moz-border-radius: 35px;
          border-radius: 35px;
}
 
.color-shape.big.round {
  -webkit-border-radius: 75px;
     -moz-border-radius: 75px;
          border-radius: 75px;
}
 
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
 
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }

.color-shape a {
  display: block;
  height: 100%;
}

.color-shape a:hover {
  background: white;
  background: hsla( 0, 0%, 100%, 0.5 );
}

/**** Horizontal ****/

.horizontal #container {
  height: 80%;
}

#copy {
  max-width: 640px;
}

/**** Photo demo ****/

.photos .photo {
  width: 320px;
  margin: 5px;
  float: left;
}

.photos .photo img {
  display: block;
  width: 100%;
}

#content {
  margin-left: 210px;
}

.demos #content {
  height: 100%;
}

/**** Docs ****/

.docs #content {
  max-width: 640px;
}

.docs #content a:hover {
  border-bottom: 1px dotted;
}

/**** Doc page nav ****/



#site-nav {
  width: 200px;
  position: absolute;
  left: 10px;
  top: 0px;
  padding-top: 20px;
  font-size: 12px;
}

#site-nav h1 {
  font-size: 24px;
  margin-bottom: 0.5em;
  margin-top: 0;
  font-weight: bold;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#site-nav h2 {
  font-size: 17px;
  font-weight: normal;
  margin: 0 0 0.3em;
  border-top: none;
}

#site-nav h1 a { color: #4FB; }
#site-nav h1 a:hover { color: #4BF; }

#site-nav ul {
  list-style: none;
  margin: 0 0 1.0em;
  font-weight: bold;
}

#site-nav ul ul { margin-bottom: 0; }

#site-nav ul a {
  display: block;
  border: none;
  padding: 1px 5px;
}

#site-nav ul .current a {
  background: hsla( 0, 0%, 0%, 0.3 );
  color: #1BF;
}
#site-nav ul a:hover,
#site-nav ul .current a:hover { color: white; }
  
#site-nav ul .current .toc a {
  font-size: 12px;
  padding-left: 1.2em;
  font-weight: normal;
}

/**** Doc content ****/

.docs #content h2 {
  border-top: 1px solid #333;
  padding-top: 0.8em;
  margin-bottom: 0.8em;
}

.docs #content h2:target { 
  padding: 10px;
  background: white;
  color: #222;
}

.docs #content h3 {
  color: #FEC;
  background: hsla( 0, 0%, 75%, 0.05 );
  padding: 2px 0.5em;
  margin-bottom: 0.5em;
  font-size: 1.15em;
}

.docs #content h4 {
  margin-bottom: 0.5em;
  font-size: 14px;
}


footer {
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid #333;
  padding: 0.8em 0;
}

pre {
  padding: 10px;
}

pre, code {
  background: black;
  color: white;
  font-family: 'Monaco', monospace, sans-serif;
}

#content code {
  font-size: 12px;
}

#content pre {
  line-height: 1.6em;
}

h3#options {
  padding-bottom: 0;
}

.option-def dl dt,
.option-def dl dd {
  float: left;
  padding: 0 1.2em;;
  background: #161616;
  line-height: 36px;
  height: 36px;
}

.option-def dl.header dt,
.option-def dl.header dd {
  background: #444;
}

.option-def dl .option-type {
  font-size: 13px;
  color: #AAA;
  font-style: italic;
}

.option-def dl dd {
  border-left: 1px solid #222;
}

/* Tagline */

.docs .tagline {
  font-size: 22px;
  font-weight: 300;
}

/* as-is from MIT */

.docs .as-is {
  font-size: 95%;
}

/* Commercial license blurb */

.docs #commercial {
  background: white;
  padding: 10px;
  font-size: 14px;
  color: #1F1F1D;
}

.docs #commercial a { font-weight: bold;}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */



/**** Super list ****/


/**** Sites using Isotope ****/

#sites h2 {
  display: none;
  padding: 0.4em;
  line-height: 32px;
  margin-bottom: 0.4em;
  -webkit-transition: background-color 0.8s;
     -moz-transition: background-color 0.8s;
       -o-transition: background-color 0.8s;
          transition: background-color 0.8s;
}

#sites h2 img {
  display: inline-block;
  margin-right: 0.4em;
  vertical-align: bottom;
}

#sites h2.loading {
  background: white;
  color: #222;
}
#sites h2.error {
  background: red;
  color: #222;
}


#sites ul {
  margin: 0;
}

.super-list .example {
  list-style: none;
  float: left;
  width: 230px;
  margin: 5px;
}

.super-list .example a,
.super-list .example b,
.super-list .example img {
  display: block;
}

.super-list .example img { width: 100%; }

.super-list .example a {
  background: #1F1E1D;
}

.super-list .example a:hover {
  background: white;
  color: #111;
}

.super-list .example b { 
  font-weight: bold;
  line-height: 1.3em;
  padding: 3px;
  padding-top: 8px;
}

.super-list .link {
  float: left;
  position: relative;
  font-size: 24px;
  line-height: 1.2em;
  font-weight: 300;
  margin: 5px;
}

.super-list .link {
  width: 230px;
  height: 110px;
}

.super-list .link a {
  display: block;
  padding: 10px;
  padding-left: 65px;
  height: 90px;
  background: #1F1E1D;
  color: #FE5;
  -webkit-border-radius: 14px;
     -moz-border-radius: 14px;
          border-radius: 14px;
}

.super-list .link a:before {
  content: '¿';
  font-size: 70px;
  position: absolute;
  top: 30px;
  left: 5px;
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

.super-list .link.away a:before {
  top: 25px;
  left: 0px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.super-list .link a:hover {
  background: #E58;
  color: white;
}

.super-list .feature .name {
  bottom: auto;
  top: 140px;
  left: 18px;
  font-size: 20px;
}

/**** BIG Graph ****/

.big-graph {
  background: white;
  height: 600px;
  margin: 20px auto;
}

.big-graph .project {
  width: 45px;
  height: 45px;
  float: left;
}

.big-graph .project .icon {
  pointer-events: none;
  width: 31px;
  height: 31px;
  background: white;
  margin-left: 7px;
  -webkit-transition: -webkit-transform 0.25s;
     -moz-transition: -moz-transform    0.25s;
      -ms-transition: -ms-transform     0.25s;
       -o-transition: -o-transform      0.25s;
          transition: transform         0.25s;
}

.big-graph .project:hover {
  z-index: 5;
  
}

.big-graph .project:hover .icon {
  -webkit-transform: scale(3);
     -moz-transform: scale(3);
      -ms-transform: scale(3);
       -o-transform: scale(3);
          transform: scale(3);
}

.big-graph .project.commercial .icon { background: #6B6B6B; }
.big-graph .project.urbanism .icon { background: #00CF00; }
.big-graph .project.public-space .icon { background: #FF8D00; }
.big-graph .project.culture .icon { background: #D61919; }
.big-graph .project.body-culture .icon { background: #00ECFF; }
.big-graph .project.health .icon { background: #FF2251; }
.big-graph .project.education .icon { background: #00A700; }
.big-graph .project.housing .icon { background: #FF02FF; }
.big-graph .project.hotel .icon { background: #0000C3; }
.big-graph .project.media .icon { background: #292929; }

.big-graph .project p {
  line-height: 14px;
  font-size: 10.5px;
  color: black;
  margin-left: 7px;
}

/**** Infinite Scroll ****/

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 30px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Open in new window

Thanks for your help,

D

You *really* need to get Firebug to do your debugging.

Anyway, looks like it is happening because they are different types. Advatis is most likely a category class and Freewill is probably an element class. I'd have to see some of the generated HTML, not just an image.

My demo is that way, every other one is category and every other one is element, use the filtering to see the difference.

ASKER

Thanks Eddie, yes I can see in Firebug now that some of the records are being displayed as "element" and some as "catagory". In the example that you have, what would I need to change so that they all appear the same (let's see changing all of them to "catagory" so that the div tag reads "DIV.isotope-item.category.category-").

I could open a new question about this if you'd prefer?

Thanks for your help.

D

ASKER

I just found it, It was a bit of the PHP code that was defining it. Thanks Eddie again for your help with all of this.

This is what alternates them:

if($x%2 == 0) {
  $c = 'category';
} else {
  $c = 'element';
}

Open in new window

ASKER

Yes, that`s what I altered. Thank you