Solved

Help setting up jquery isotope

Posted on 2013-01-21
38
543 Views
Last Modified: 2013-02-06
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
Comment
Question by:TLN_CANADA
  • 19
  • 19
38 Comments
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38810607
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38810667
Can you post some example data?
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38810729
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
 

Author Comment

by:TLN_CANADA
ID: 38812104
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38812339
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38812342
I will look a little closer when I get home in a couple of hours.
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38812344
Do you have any sample data you can post?
0
 

Author Comment

by:TLN_CANADA
ID: 38812400
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38813003
Modify your export, replacing the HTML with "<HTML></HTML>"

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

Expert Comment

by:EddieShipman
ID: 38813007
I won't be able to get back to it til tomorrow.
0
 

Author Comment

by:TLN_CANADA
ID: 38813021
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
 

Author Comment

by:TLN_CANADA
ID: 38813022
No problem at all Eddie, tomorrow is fine. I will send you the sql file in a couple of minutes.
0
 

Author Comment

by:TLN_CANADA
ID: 38813063
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38813924
Remove the comment on line 9:
// class to filter set to one of your $rec_category_name values.

Open in new window

0
 

Author Comment

by:TLN_CANADA
ID: 38815311
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38815324
You didn't make the change I showed above in comment 38812339
0
 

Author Comment

by:TLN_CANADA
ID: 38815370
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
 

Author Comment

by:TLN_CANADA
ID: 38816998
It is still giving the same error message though.
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38820412
You only posted the enquiries (gen_enquiry_table) table, I also need the categories table (gen_enq_category)
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 26

Expert Comment

by:EddieShipman
ID: 38820414
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
 

Author Comment

by:TLN_CANADA
ID: 38820461
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38827225
How can I give you examples if I don't have any data from that table?
0
 

Author Comment

by:TLN_CANADA
ID: 38827875
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38828422
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
 

Author Comment

by:TLN_CANADA
ID: 38828702
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38828865
0
 

Author Comment

by:TLN_CANADA
ID: 38828964
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
 

Author Comment

by:TLN_CANADA
ID: 38829098
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
 
LVL 26

Accepted Solution

by:
EddieShipman earned 500 total points
ID: 38829134
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
 

Author Closing Comment

by:TLN_CANADA
ID: 38832150
Thank you so much Eddie! This is wonderful!
0
 

Author Comment

by:TLN_CANADA
ID: 38858388
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38859153
I would think the positioning has to do with the length of the strings or the CSS.
0
 

Author Comment

by:TLN_CANADA
ID: 38860668
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38861591
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
 

Author Comment

by:TLN_CANADA
ID: 38861693
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
 

Author Comment

by:TLN_CANADA
ID: 38861719
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38861769
This is what alternates them:
if($x%2 == 0) {
  $c = 'category';
} else {
  $c = 'element';
}

Open in new window

0
 

Author Comment

by:TLN_CANADA
ID: 38861789
Yes, that`s what I altered. Thank you
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now