javascript - Append DIV content using AJAX - Previous/Next -
so i'm trying append content html document div i've loaded content (from same file) using ajax.
i'm trying have when click "previous" , "next" buttons loads previous or next project.
here's have code.
html (i'm loading content #ajax)
<div class="p-modal"> <div id="p-controls"> <a id="p-close" href="javascript:;">close</a> </div> <div id="ajax"></div> </div>
jquery
$(document).ready(function() { $('.p-load').on('click', function(e) { e.preventdefault(); var href = $(this).attr('href'); if ($('#ajax').is(':visible')) { $('#ajax').css({ display:'block' }).animate({ height:'auto' }).empty(); } $('#ajax').css({ display:'block' }).animate({ height:'auto' },function() { $('#ajax').html('<img id="loader" src="images/loading.gif" width="48" height="48">'); $('#loader').css({ border:'none', position:'absolute', top:'50%', left:'50%', margin:'-24px 0 0 -24px', boxshadow:'none' }); $('#ajax').load('includes/projects.html ' + href, function() { $('#ajax').hide().fadein('slow'); }); }); }); });
demo (scroll down "work" section — works load each project individually if open project , close it, when use same code above on "prev" , "next" triggers inside project popup, doesn't anything)
any appreciated!
bind click events on prev , next button links. make sure on page load ajax complete call. work, tested firebug.
$('a.next,a.prev').on('click', function(e) { e.preventdefault(); var href = $(this).attr('href'); if ($('#ajax').is(':visible')) { $('#ajax').css({ display:'block' }).animate({ height:'auto' }).empty(); } $('#ajax').css({ display:'block' }).animate({ height:'auto' },function() { $('#ajax').html('<img id="loader" src="images/loading.gif" width="48" height="48">'); $('#loader').css({ border:'none', position:'absolute', top:'50%', left:'50%', margin:'-24px 0 0 -24px', boxshadow:'none' }); $('#ajax').load('includes/projects.html ' + href, function() { $('#ajax').hide().fadein('slow'); }); }); });
Comments
Post a Comment