[Løst] Hjelp til å løse ett lite problem med Infinite Scroll script.

[Dan-Levi]

Hei,

 

Med Infinite Scroll mener jeg den samme funksjonen som når du scroller ned på facebook og nye innlegg dynamisk lastes inn.

 

Jeg har forsåvidt fått det funksjonelle på plass men det er noe galt som skjer når nye elementer lastes inn.

 

Hvis du (link) følger med på når nye elementer lastes inn lastes dem ikke rett under de andre elementene som allerede er inni #article_wall, men ser ut til å lastes inn midt i e.l.

 

Dette er helt sikkert en fillesak, men jeg har sett meg "blind" på koden, så her er 2 bilder som viser hvordan det ser ut nå, og hvordan det ønskede resultatet skal være. Koden jeg har kommet opp med er også under bildene.

 

Nåværende resultat:

 

Ønsket resultat:

 

Markup og PHP for siden som elementene lastes inn på:

<?php
require_once 'core/init.php';
require_once 'configuration.php';
$jConfig = new JConfig;
?>
<div class="container">
	<div class="row" id="article_wall">
		<h3 class="black padding_small" style="color:#fff!important;">Some text to describe that the articles below are from all categories arranged with newest first. Glenn?</h3>
		<?php
		$dbh = new PDO('mysql:host=' . $jConfig->host . ';dbname=' . $jConfig->db, $jConfig->user, $jConfig->password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
		$sth = $dbh->prepare("SELECT introtext, title, id FROM manlynews_content where catid not like 8 and catid not like 13 and catid not like 14 order by id DESC limit 8");
		$sth->execute();
		$r = $sth->fetchAll(5);
		$sth2 = $dbh->prepare("SELECT introtext, title, id FROM manlynews_content where catid not like 8 and catid not like 13 and catid not like 14");
		$sth2->execute();
		$r2 = $sth2->fetchAll(5);
		$actual_row_count = count($r2);
		$x = 4;
		foreach ($r as $article) {
			preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $article->introtext, $image);
			echo '<div class="col-md-3">';
			echo '<a href="index.php?option=com_content&view=full&id='.$article->id.'"><img class="img-responsive" src="'.$image['src'].'" /></a>';
			echo '<h4><a href="index.php?option=com_content&view=full&id='.$article->id.'">'.$article->title.'</a></h4>';
			echo '</div>';
			$x++;
			if (($x % 4) == 0) {
				echo '</div><hr><div class="row">';
			}
		}
		?>
	</div>
</div>

Javascript (jQuery).

$(function () {
	var page = 1;
	$(window).scroll(function () {
		if($(window).scrollTop() + $(window).height() == $(document).height()) {
			page++;
			var data = {
				loadmore: 'fetch',
                page_num: page
            };
            var actual_count = "<?php echo $actual_row_count; ?>";
			$.ajax({
				url: "load_more_articles.php",
				type: "POST",
				data: data,
				success: function(res) {
					$("#article_wall").append(res);
				}
			});
		}
	});
});

load_more_articles.php (Filen nye elementer lastes inn fra)

<?php
require_once 'core/init.php';
require_once 'configuration.php';
if (Input::exists()) {
	if (Input::get('loadmore') && Input::get('loadmore') == 'fetch') {
		if (Input::get('page_num')) {
			$requested_page = Input::get('page_num');
			$set_limit = (($requested_page - 1) * 8) . ",8";
			$jConfig = new JConfig;
			$dbh = new PDO('mysql:host=' . $jConfig->host . ';dbname=' . $jConfig->db, $jConfig->user, $jConfig->password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
			$sth = $dbh->prepare("SELECT introtext, title, id FROM manlynews_content where catid not like 8 and catid not like 13 and catid not like 14 order by id DESC limit {$set_limit}");

			$sth->execute();
			$r = $sth->fetchAll(5);
			$output = '';
			$x = 4;
			foreach ($r as $article) {
				preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $article->introtext, $image);
				$output .= '<div class="col-md-3">';
				$output .= '<a href="index.php?option=com_content&view=full&id='.$article->id.'"><img class="img-responsive" src="'.$image['src'].'" /></a>';
				$output .= '<h4><a href="index.php?option=com_content&view=full&id='.$article->id.'">'.$article->title.'</a></h4>';
				$output .= '</div>';
				$x++;
				if (($x % 4) == 0) {
					$output .= '</div><hr><div class="row">';
				}
			}
			echo $output;
		}
	}
}
?>

Jeg spanderer gjerne noe kaldt å drikke i Oslo på den som klarer å komme opp med løsningen. Bor du ikke i Oslo donerer jeg gjerne vekk noe kaldt å drikke gjennom f.eks. Paypal.

Endret 29. juni 2014 av JanTerjeRiisOttoJohansen

[Dan-Levi]

Der løste det seg!

 

Feilen var at jeg hadde satt .row til å ha #article_wall, men det skulle være det overordnede elementet div.container. Sak løst!

 

[Dan-Levi]

Postet feil...

Endret 3. juli 2014 av JanTerjeRiisOttoJohansen