Using Isotope with scrollTo/localscroll

nerd99 · April 27, 2011

Hi,

I'm creating a site that has a fixed navigation menu using scrollTo and localscroll to move vertically through the site's content. I am trying to use Isotope to include some filterable content on a couple of the pages/panels but cannot integrate the two successfully. Does anybody have a suggestion on how to go about this?

Here's the markup...I'm trying to make isotope work within the 'get music' (panel 3) and 'commissioned work' (panel 4) pages.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<!--Framework CSS-->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="no title" charset="utf-8"/> 
<link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen" title="no title" charset="utf-8"/> 
<link rel="stylesheet" href="css/tooltip.css" type="text/css" media="screen" title="no title" charset="utf-8"/> 
<link rel="stylesheet" href="css/isotope.css" type="text/css" media="screen" title="no title" charset="utf-8"/> 
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!-- Javascript --> 

</head>
<body>
<div id="mainwrapper">
<!------------------------------------------------------ main page ------------------------------------------------------>
<div id="mask">
	<div id="panel">
		<div id="panel-1">
			<div id="wrapper">
				<div id="contentcolumn">
					<div class="vector-flame">
						<div class="product-logo1"> 
						</div> 
						<div class="product-logo2">
						</div>
				</div><!--END contentcolumn -->
			</div><!--END wrapper -->
		</div><!--END panel-1 -->
		<div id="leftcolumn">
			<div class="logo-navigation">
			<a href="#panel-1" rel="panel"><h1>Logo</h1></a>
				<ul id="nav">
					<li  class="sliding-element"><a href="#panel-2" rel="panel">about</a></li>
					<li  class="sliding-element"><a href="#panel-3" rel="panel">get music</a></li>
					<li  class="sliding-element"><a href="#panel-4" rel="panel">commissioned work</a></li>
					<li  class="sliding-element"><a href="#panel-5" rel="panel">get in touch</a></li>
				</ul>
			</div>
		<div class="logo-navigation">
		</div>
	</div>
	<div id="footer">
		<div id="social" style="float:right;">
			<ul>
				<li class="facebook"><a class="tooltip"  href="http://www.facebook.com" target="_blank" title="Become a fan on Facebook">Become a fan on Facebook</a></li>
				<li class="twitter"><a class="tooltip"  href="http://twitter.com/" target="_blank" title="Follow us on Twitter">Follow us on Twitter</a></li>
			</ul>
		</div>
	</div>
</div>
<!-- end of main page -->

<!------------------------------------------------------ about page ------------------------------------------------------>
<div id="panel-2">
<div id="wrapper">
	<div id="contentcolumn">
		<div id="content-title">
			<div class="content-left">
			<a href="#panel-1" rel="panel">Home</a>
			</div><!-- END content-left -->
			<div class="content-center">
			<h1>about</h1>
			</div><!-- END content-centre -->
			<div class="content-right">
			<a href="#panel-1" rel="panel">Up one page</a>
			</div><!-- END content-right -->
		</div><!-- END content-title -->
		<hr/>
		<div class="content">
		<p>Hello world...</p>
		<p>Hello world...</p>	
		<p>Hello world...</p>
		<p>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </p>
		</div><!-- END class content -->
	</div><!-- END contentcolumn -->
</div><!-- END wrapper --> 
<div id="footer">
	<a href="#top" ><img src="images/a.jpg" width="185" height="42" style="float:right;margin:1em 1em 1em 0;"></a>
</div><!-- END footer -->
</div><!-- END panel -->
<!-- end of about page -->

<!------------------------------------------------------ get music page ------------------------------------------------------>
<div id="panel-3">
<div id="wrapper">
	<div id="contentcolumn">
		<div id="content-title">
			<div class="content-left">
			<a href="#panel-1" rel="panel">Home</a>
			</div><!-- END content-left -->
			<div class="content-center">
			<h1>get music</h1>
			</div><!-- END content-centre -->
			<div class="content-right">
			<a href="#panel-2" rel="panel">Up one page</a>
			</div><!-- END content-right -->
		</div><!-- END content-title -->
		<hr/>
		<div class="content">  
			<section id="options" class="clearfix">    
		    	<ul id="filters" class="option-set floated clearfix">
					<li><a href="#filter" data-filter="*" class="selected">show all</a></li>
		       		<li><a href="#filter" data-filter=".shorts">short films</a></li>
	   	       		<li><a href="#filter" data-filter=".features">feature films</a></li>
			  	   		<li><a href="#filter" data-filter=".ads">commercials</a></li>
   				   		<li><a href="#filter" data-filter=".tv">television</a></li>      
    				</ul>
    		</section> <!-- END options -->

  				<div id="container" class="clearfix">
		    	<div class="element shorts">
			    <img src='images/a.jpg' width='190' height='130'>
			    </div>    
			    <div class="element shorts ads">
			    <img src='images/a.jpg' width='190' height='130'>
			    </div>      
			    <div class="element shorts ads">
			    <img src='images/a.jpg' width='190' height='130'>
			    </div>
			    <div class="element shorts">
			    <img src='images/a.jpg' width='190' height='130'>
			    </div>    
			    <div class="element features">
			    <img src='images/a.jpg' width='190' height='130'>
			    </div>    
			    <div class="element tv">
			    <img src='images/a.jpg' width='190' height='130'>
			    </div> 
		</div> <!-- #container -->

<script type="text/javascript" src="js/jquery.isotope.min.js"></script> 
<script>
  
    var $container = $('#container');

    // filter buttons
    $('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      return false;
    });
    
    
      // switches selected class on buttons
      $('#options').find('.option-set a').click(function(){
        var $this = $(this);

        // don't proceed if already selected
        if ( !$this.hasClass('selected') ) {
          $this.parents('.option-set').find('.selected').removeClass('selected');
          $this.addClass('selected');
        }

      });


    $(function(){

      $container.isotope({
        itemSelector : '.element'
      });
      
    });
  </script>
  	
		</div><!-- END class content --> 
	</div><!-- END content-title -->
</div><!-- END wrapper -->
<div id="footer">
</div>
</div>
<!-- end of get music page -->
<!------------------------------------------------------ commissioned work page ------------------------------------------------------>
<div id="panel-4">
<div id="wrapper">
	<div id="contentcolumn">
		<div id="content-title">
			<div class="content-left">
			<a href="#panel-1" rel="panel">Home</a>
			</div><!-- END content-left -->
			<div class="content-center">
			<h1>commissioned work</h1>
			</div><!-- END content-centre -->
			<div class="content-right">
			<a href="#panel-3" rel="panel">Up one page</a>
			</div><!-- END content-right -->
		</div><!-- END content-title -->
		<hr/>
		<div class="content">
		<br />
		<h3>Filterable content...</h3>
		<p>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </p>			
		</div>
	</div>
</div>
<div id="footer">
</div>
</div>
<!-- end of commissioned work -->

<!------------------------------------------------------ contact page ------------------------------------------------------>
<div id="panel-5">
<div id="wrapper">
	<div id="contentcolumn">
		<div id="content-title">
			<div class="content-left">
			<a href="#panel-1" rel="panel">Home</a>
			</div><!-- END content-left -->
			<div class="content-center">
			<h1>get in touch</h1>
			</div><!-- END content-centre -->
			<div class="content-right">
			<a href="#panel-4" rel="panel">Up one page</a>
			</div><!-- END content-right -->
		</div><!-- END content-title -->
		<hr/>
		<div class="content">
		<br />
		<h3>This is where the contact content goes...</h3>
		<p>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </p>			
		</div>
	</div>
</div>
<div id="footer">
</div>
</div>
<!-- end of contact page -->
		</div> 
	</div>
</div>

<script src="js/jquery-1.5.1.min.js"></script>
  	<script src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery-toppage.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>
<script type="text/javascript" src="js/jquery-custom.js"></script>

<script type="text/javascript">
		$(function(){ 
			$('a.tooltip').aToolTip();
		}); 
</script>
<script type="text/javascript">
	var BrowserDetect = {
init: function () {
	this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
	this.version = this.searchVersion(navigator.userAgent)
		|| this.searchVersion(navigator.appVersion)
		|| "an unknown version";
	this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
	for (var i=0;i<data.length;i++)	{
		var dataString = data[i].string;
		var dataProp = data[i].prop;
		this.versionSearchString = data[i].versionSearch || data[i].identity;
		if (dataString) {
			if (dataString.indexOf(data[i].subString) != -1)
				return data[i].identity;
		}
		else if (dataProp)
			return data[i].identity;
	}
},
searchVersion: function (dataString) {
	var index = dataString.indexOf(this.versionSearchString);
	if (index == -1) return;
	return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
	{string: navigator.userAgent,subString: "Chrome",identity: "Chrome"},
	{string: navigator.userAgent,subString: "OmniWeb",versionSearch: "OmniWeb/",identity: "OmniWeb"},
	{string: navigator.vendor,subString: "Apple",identity: "Safari",versionSearch: "Version"},
	{prop: window.opera,identity: "Opera"},
	{string: navigator.vendor,subString: "iCab",identity: "iCab"},
	{string: navigator.vendor,subString: "KDE",identity: "Konqueror"},
	{string: navigator.userAgent,subString: "Firefox",identity: "Firefox"},
	{string: navigator.vendor,subString: "Camino",identity: "Camino"},
	// for newer Netscapes (6+)
	{string: navigator.userAgent,subString: "Netscape",identity: "Netscape"},
	{string: navigator.userAgent,subString: "MSIE",identity: "Explorer",versionSearch: "MSIE"},
	{string: navigator.userAgent,subString: "Gecko",identity: "Mozilla",versionSearch: "rv"},
	 // for older Netscapes (4-)
	{string: navigator.userAgent,subString: "Mozilla",identity: "Netscape",versionSearch: "Mozilla"}
],
dataOS : [
	{string: navigator.platform,subString: "Win",identity: "Windows"},
	{string: navigator.platform,subString: "Mac",identity: "Mac"},
	{string: navigator.userAgent,subString: "iPhone",identity: "iPhone/iPod"},
	{string: navigator.platform,subString: "Linux",identity: "Linux"}
]
};
BrowserDetect.init();
if(BrowserDetect.browser == "Explorer"){
	/*
		this browser is IE
	*/
	if(BrowserDetect.version < 7){
		/*
			this browser is old (IE6, or lower)
		*/
		/*
			change location to "old" site
		*/
		window.location="http://website.com/old/index.html";
	}else{
		/*
			this browser is new (IE7 and up)
		*/
	}
}
else{
/* 
	this browser is other than IE	
*/
}
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$("a.group").fancybox();
	});
</script>
<script type="text/javascript">
$(document).ready(function() {	
$('#mask').css({'height':$('#panel-1').height()}); 
    $('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
$('#panel').width($('#mask').width());
$('a[rel=panel]').click(function () {
$('#mask').scrollTo($(this).attr('href'), 800);	
if ($(this).attr('href') == '#panel-6')
  {
  $('#mask').css({'height':$('#panel-6').height()}); 
  }
else if($(this).attr('href') == '#panel-2')
  {
$('#mask').css({'height':$('#panel-2').height()}); 
  }
else if($(this).attr('href') == '#panel-3')
  {
$('#mask').css({'height':$('#panel-3').height()}); 
  } 
else if($(this).attr('href') == '#panel-4')
  {
$('#mask').css({'height':$('#panel-4').height()}); 
  }
else if($(this).attr('href') == '#panel-5')
  {
$('#mask').css({'height':$('#panel-5').height()}); 
  }      
else if($(this).attr('href') == '#panel-7')
  {
$('#mask').css({'height':$('#panel-7').height()}); 
  }   
else
  {
$('#mask').css({'height':$('#panel-1').height()}); 
  }	
return false;
});
});
</script>

</body>
</html>

pandanapande · November 25, 2011

Hi! Did you solve this problem? My case is absolutely same. Let me know, please, if there is any solution.

Pikachu2000 · November 25, 2011

This thread is 7 months old. If you have a similar question, start a new thread, including your own code and any errors you're getting.

Sign In

Using Isotope with scrollTo/localscroll

Recommended Posts

nerd99

Link to comment

Share on other sites

pandanapande

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information