[jQuery] Please help with navigation script
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.