Hi, Can someone please help me with the following navigation script I'm trying to use on my page? I have a list of sites in the left div which I would like to be able to filter out. The issue is that it works only once. Once I filter once I can't reclick on the "Refine by category" button and change categories or go back to showing all categories. I'm guessing it's something to do with inner functions, which I don't know enough about yet. Any help would be greatly appreciated.
The site is live at http://pranshuarya.com/test/pthesis. The script: <script type="text/javascript"> $(document).ready(function() { $('#portfolio').hide(); $('#pfolio_close').hide(); $('#categories').hide(); $('#pfolio').click(function() { $.throbberShow({image:'images/ajax-loader.gif', parent:'#sites'}); $('#portfolio').show('slow'); $('#pfolio_close').show('slow'); $('#sites').empty(); $('#site_details').empty(); $('#sites').append('<div id="sites_border"></div>'); $('#sites').append('<div id="refine_by">Refine by category</div>'); $('#site_details').append('<div id="site_details_lower_border"></ div>'); $('#sites').append('<ul>'); $.get('data.php',function(data) { $(data).find('site').each(function() { var $entry = $(this); var $site_title = $entry.find('site_title').text(); var html_site = '<li>' + $site_title + '</li>'; $('#sites ul').append($(html_site)); }); }); var showsites = function() { $.get('data.php',function(data) { $('#sites ul li').bind('click',function() { var index = $('#sites ul li').index(this); $('#site_details').empty(); $('#site_details').append('<div id="site_details_lower_border"></ div>'); $('li:not(this)').removeClass('selected'); $(this).addClass('selected'); $imageURL = $(data).find('imageURL').eq(index).text(); $skills = $(data).find('skills_used').eq(index).text(); $siteURL = $(data).find('siteURL').eq(index).text(); var html_image = '<div><a href="' + $siteURL + '"><img src="' + $imageURL + '" /></a></div>'; $('#site_details').append($(html_image)); $('#site_details div').addClass('screenshot'); if($(data).find('imageURL2').eq(index).text() != '') { $imageURL2 = $(data).find('imageURL2').eq(index).text(); var html_image2 = '<div>'; if($(data).find('siteURL2').eq(index)) { $siteURL2 = $(data).find('siteURL2').eq(index).text(); html_image2 += '<a href="' + $siteURL2 +'"><img src="' + $imageURL2 + '" /></a></div>'; } else html_image2 += '<a href="' + $siteURL +'"><img src="' + $imageURL2 + '" /></a></div>'; $('#site_details').append($(html_image2)); $('#site_details div').addClass('screenshot'); } else $('#site_details div.screenshot').removeClass ('screenshot').addClass('screenshot_single'); $('a...@href^=http]').attr({'target': '_blank'}).attr({'title': 'Visit site'}); if($(data).find('description').eq(index)) { $desc = $(data).find('description').eq(index).text(); var html_desc = '<div id="description">' + $desc + '</div>'; $('#site_details').append($(html_desc)); } if($(data).find('site_details').eq(index) != '') { $details = $(data).find('site_details').eq(index).text(); var html_details = '<div id="details"><br />' + $details + '</ div>'; $('#site_details').append($(html_details)); } var html_skills = '<div id="skills"><strong>Skills used:</ strong><br />' + $skills + '</div>'; $('#site_details').append($(html_skills)); }); }); }; showsites(); $.get('categories.php',function(cats) { $('#refine_by').click(function() { $('#categories').show('slow'); $('#categories').append('<ul>'); $('#categories ul').append('<li id="all">All</li>'); $(cats).find('categories').each(function() { var $entry = $(this); var $cat = $entry.find('category').text(); var category = '<li>' + $cat + '</li>'; $('#categories ul').append($(category)); }); $.get('data.php',function(data) { $('#categories ul li').bind('click',function() { var index = $('#categories ul li').index(this); var $category = $(cats).find('category').eq(index).text(); $('#sites').empty(); $('#sites').append('<div id="sites_border"></div>'); $('#sites').append('<div id="refine_by">Refine by category</ div>'); $('#sites').append('<ul>'); $sites = $(data).find('categories').filter(':contains (JavaScript)'); $sites.each(function() { var $entry = $(this).parent(); var $site_title = $entry.find('site_title').text(); var html_site = '<li>' + $site_title + '</li>'; $('#sites ul').append($(html_site)); }); $('#categories').hide('slow'); showsites(); }); }); }); }); $('#pfolio_close').click(function() { $('#portfolio').hide('slow'); $('#pfolio_close').hide('slow'); }); }); }); </script> Let me know of any other information I can provide to be helpful. Thanks, Precar.