• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 575
  • Last Modified:

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
0
TLN_CANADA
Asked:
TLN_CANADA
  • 19
  • 19
1 Solution
 
Eddie ShipmanAll-around developerCommented:
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/
0
 
Eddie ShipmanAll-around developerCommented:
Can you post some example data?
0
 
Eddie ShipmanAll-around developerCommented:
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

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
TLN_CANADAAuthor Commented:
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
0
 
Eddie ShipmanAll-around developerCommented:
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

0
 
Eddie ShipmanAll-around developerCommented:
I will look a little closer when I get home in a couple of hours.
0
 
Eddie ShipmanAll-around developerCommented:
Do you have any sample data you can post?
0
 
TLN_CANADAAuthor Commented:
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)

Enquiries
I could send you the sql file but one of the fields contains full html pages so it's messy to read.
0
 
Eddie ShipmanAll-around developerCommented:
Modify your export, replacing the HTML with "<HTML></HTML>"

Show me line 9 in /home/clear555/public_html/allenq_isotope.php
0
 
Eddie ShipmanAll-around developerCommented:
I won't be able to get back to it til tomorrow.
0
 
TLN_CANADAAuthor Commented:
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

0
 
TLN_CANADAAuthor Commented:
No problem at all Eddie, tomorrow is fine. I will send you the sql file in a couple of minutes.
0
 
TLN_CANADAAuthor Commented:
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

0
 
Eddie ShipmanAll-around developerCommented:
Remove the comment on line 9:
// class to filter set to one of your $rec_category_name values.

Open in new window

0
 
TLN_CANADAAuthor Commented:
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
0
 
Eddie ShipmanAll-around developerCommented:
You didn't make the change I showed above in comment 38812339
0
 
TLN_CANADAAuthor Commented:
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

0
 
TLN_CANADAAuthor Commented:
It is still giving the same error message though.
0
 
Eddie ShipmanAll-around developerCommented:
You only posted the enquiries (gen_enquiry_table) table, I also need the categories table (gen_enq_category)
0
 
Eddie ShipmanAll-around developerCommented:
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

0
 
TLN_CANADAAuthor Commented:
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.
0
 
Eddie ShipmanAll-around developerCommented:
How can I give you examples if I don't have any data from that table?
0
 
TLN_CANADAAuthor Commented:
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

0
 
Eddie ShipmanAll-around developerCommented:
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

0
 
TLN_CANADAAuthor Commented:
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.
0
 
Eddie ShipmanAll-around developerCommented:
0
 
TLN_CANADAAuthor Commented:
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
0
 
TLN_CANADAAuthor Commented:
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

0
 
Eddie ShipmanAll-around developerCommented:
Ok, I think I have it now, all that is left is making sure you have the data laid out correctly and to style it like you want.

Add this to the stylesheet:
.category {
  width: 110px;
  height: 110px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: red;
  color: white;
  -webkit-border-top-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
          border-top-right-radius: 1.2em;
}

Open in new window


Here is the code:
<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>
 <section id="options" class="clearfix">
    <div class="option-combo">
      <h2>Filter:</h2>
      <ul id="filter" class="option-set clearfix" data-option-key="filter">
        <li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
        <li><a href="#elements" data-option-value=".element:not(.feature)">elements</a></li>
        <li><a href="#categories" data-option-value=".category">categories</a></li>
      </ul>
    </div>
    <div class="option-combo">
      <h2>Sort:</h2>
      <ul id="sort" class="option-set clearfix" data-option-key="sortBy">
        <li><a href="#mixed" data-option-value="number" class="selected">mixed</a></li>
        <li><a href="#original" data-option-value="original-order">original</a></li>
        <li><a href="#alphabetical" data-option-value="alphabetical">alphabetical</a></li>
      </ul>
    </div>
    <div class="option-combo">
      <h2>Layout: </h2>
      <ul id="layouts" class="option-set clearfix" data-option-key="layoutMode">
        <li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li>
        <li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li>
        <li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li>
      </ul>
    </div>
  </section>
  <br>
<?php
	// Connecting to the DB
	mysql_connect('localhost','na_dbuser','n4lli4nce') or die ( mysql_error() );
	mysql_select_db("na_db1") 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">';
	$x = 0;
	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	
		if($x%2 == 0) {
		  $c = 'category';
		} else {
		  $c = 'element';
		}
		$x++;
		// =**= Displaying the fetched values on the page =**= \\
		echo "<div class='".$c."' 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({
        masonry: {
          columnWidth: 160
        },
        sortBy: 'number',
        getSortData: {
          number: function( $elem ) {
            var number = $elem.hasClass('element') ? 
              $elem.find('.number').text() :
              $elem.attr('data-number');
            return parseInt( number, 10 );
          },
          alphabetical: function( $elem ) {
            var name = $elem.find('.name'),
                itemText = name.length ? name : $elem;
            return itemText.text();
          }
        }
      });
    
      
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
      });
    
    });
	
</script>
</body>
</html>

Open in new window


Good Luck.
0
 
TLN_CANADAAuthor Commented:
Thank you so much Eddie! This is wonderful!
0
 
TLN_CANADAAuthor Commented:
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
0
 
Eddie ShipmanAll-around developerCommented:
I would think the positioning has to do with the length of the strings or the CSS.
0
 
TLN_CANADAAuthor Commented:
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
0
 
Eddie ShipmanAll-around developerCommented:
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.
0
 
TLN_CANADAAuthor Commented:
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
0
 
TLN_CANADAAuthor Commented:
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.
0
 
Eddie ShipmanAll-around developerCommented:
This is what alternates them:
if($x%2 == 0) {
  $c = 'category';
} else {
  $c = 'element';
}

Open in new window

0
 
TLN_CANADAAuthor Commented:
Yes, that`s what I altered. Thank you
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 19
  • 19
Tackle projects and never again get stuck behind a technical roadblock.
Join Now