Apologies for such a vage title, but I seriously don't know where the two issues I have are related to. My JavaScript/jQuery skill is on a noob level, so bare with me please :)
I'm working on a AJAX/HTML5 History website which is a pet project of mine. It will be a music site where I use the mixcloud player as a widget (unfortunately) and a custom Soundcloud player which runs on the Soundcloud API.
The page is here: http://gentle.media/mixture/news
You can login with:
username: dani
password: web
On the 'News' page, that you should see now, I have 5 soundcloud items and clicking on 'play track' or 'play set' will change the default mixcloud player at the bottom to a soundcloud player and it starts playing (if autoplay is supported by the browser/device). Clicking on another track/set will change again and starts playing that track/set. So far so good! But.. if a user clicks on an 'info' link to open the artist info and closing it again by clicking on the little cross, I lost control over the player. I can't pause/stop the song anymore untill I click on a 'play track' link again.
The second issue is also on the 'News' page. The artist info is hidden inline (display: none) and by clicking on a 'info' link I create dynamically a list-item (.clone-container) at the end where I load a cloned version of the artist info content. This works fine, but only twice. If user clicks (after closing the artist info with the little cross) again on a 'info' link it opens the artist info, but now the user can't close it anymore.
The following jQuery function does all the magic for the news page. I have to say if I don't empty .clone-container before detaching it, I don't have the second issue, but then I have all the previous artist info still in that div.
(function($) {
function _news() {
var cc = $('<li class="clone-container"></li>'),
sd = $('.show-details'),
cd = $('<button class="close-details"><i class="icon-close"></i></button>')
$('.sc').click(function(e) {
e.preventDefault();
var $href = $(this).attr('href');
$('#main-player').load($href);
var $title = $(this).parent().siblings('h2').find('span').text()
$('#main-player').attr("title", $title).hover(function() {
$(this).attr("title","");
});
});
$(sd).click(function(e) {
e.preventDefault();
$(this).closest('li').addClass('active').siblings().removeClass('active').addClass('hide');
$(this).hide();
$(cc).appendTo('.news-grid').addClass('show');
$(cd).appendTo(cc);
$(this).parent().prev('.artist-info').children().clone().appendTo(cc)
});
$(cd).click(function(e) {
$('li.active').removeClass('active').siblings().removeClass('hide');
$(cc).empty().detach();
$(sd).show();
});
}_news()
})(jQuery);
Thanks for your time guys!
EDIT: I have to say I've tested my progress so far only in Chrome, Firefox and Safari on the Mac, so i really don't know (yet) if it looks and works okay in Windows (IE and etc.).