homepage Welcome to WebmasterWorld Guest from 54.205.207.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
isotope manual trigger
greencode

5+ Year Member



 
Msg#: 4634129 posted 7:29 pm on Dec 30, 2013 (gmt 0)

Been struggling with this for a few days now. Can't quite figure out what I'm doing wrong. Two things…

1. When using the manual trigger to load another page of content the blocks (.block) appear below the original page and seem to travel down the page into position, rather than just appearing where they're supposed to.

2. I'm using this in a Wordpress template and loading posts. Posts seem to load correctly but the last page of posts are completely wrong i.e. if I load an author's posts on the author template, the last batch of posts are completely random posts not written by them.

Here's the template code:


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="<?php bloginfo( 'template_directory' ); ?>/scripts/jquery.isotope.min.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/scripts/jquery.infinitescroll.min.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/scripts/manual-trigger.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/scripts/imagesloaded.pkgd.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/scripts/respond.min.js"></script>
</head>
<body class="">

<ul id="cat-items" class="clearfix masonry">
<?php while ( have_posts() ) : the_post(); ?>

<li class="g_3 block">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('cat-img'); ?>
<?php else: ?>
<img src="<?php bloginfo( 'template_directory' ); ?>/images/ph.png" width="300" height="200" alt="<?php the_title(); ?>" />
<?php endif ?>
<div class="details clearfix">
<h2 class="title"><?php the_title(); ?></h2>
<div class="date"><?php the_time('jS M, Y') ?></div>
</div>
</a>
</li>
<?php endwhile; // end of the loop. ?>
</ul>

<div id="next-page" class="g_12 clearfix">
<div class="button">
<?php next_posts_link('Show more posts', 0); ?>
</div>
</div>

<script>
var $container = $('#cat-items');
$(window).load(function(){
$container.imagesLoaded( function(){
$container.fadeIn(4000).isotope({
itemSelector: '.block',
getSortData : {
name : function ( $elem ) {
return $elem.find('.title').text();
},
date: function ($elem) {
return Date.parse($elem.find('.date').text());
},
},
sortBy : '.date',
sortAscending : true,
});
});
});
</script>

<script type="text/javascript">

$container.infinitescroll({
navSelector : '#next-page',
nextSelector : '#next-page a',
itemSelector : '.block',
behavior: 'twitter',
loading: {
msgText: 'Loading...',
finishedMsg: 'No more pages to load.',
img: '<?php bloginfo( 'template_directory' ); ?>/images/ajax-loader.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);

</script>
</body>
</html>


Any ideas?

 

greencode

5+ Year Member



 
Msg#: 4634129 posted 12:39 pm on Jan 2, 2014 (gmt 0)

I've managed to fix the second question I had. For some reason there was some weird coding going on in the extra posts that appeared.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved