Hello,
I have a Problem with my code.
I would like to load more content by scrolling down. This works fine.
Scrolling down to the end of my page loads via ajax (request.html)
more content.
But the new content ignores my css-statements and destroys my layout.
If I copy the loaded text direct to my code it will be shown correct.
have a look here:
http://www.opteynde.com/test_BilderListe3.html
here my js:
(function($) {
//domready event
window.addEvent('domready',function() {
//settings on top
var initialPosts = 0;
var start = 0; //<?php echo $_SESSION['posts_start']; ?>;
var desiredPosts = 0; //<?php echo $number_of_posts; ?>;
var url = '
http://www.opteynde.com/LazyPagination.php';
var paged = 2;
var requests = 0;
var maxRequests = 5;
var abstandvonunten = 200; /* tolerance */;
var spy;
var spyAct = function() {
var min = document.getScrollSize().y - document.getSize().y -
abstandvonunten;
spy = new ScrollSpy({
min: min,
onEnter: function() {
//alert("jetzt");
if(requests != maxRequests)
datenHolen.send({
data: {paged: paged, ajax: 1, page: null}
});
}
});
};
//wait for first load...
window.oneEvent('load',function() {
spyAct();
});
//ajax!
var datenHolen = new Request.HTML ({
url: url,
method: 'get',
//update: $('hier'),
onRequest: function(){
$('gototop').set('html','Load ...('+paged
+')');
//$('gototop').highlight('#fff','#ccc');
},
onComplete: function(response,html) {
//html[0].inject($('work'),'bottom'); //loads only first
div
html.inject($('work'),'bottom');
//console.log(html);
},
onSuccess: function(){
start += desiredPosts;
requests++;
paged++;
spyAct();
(function() {$('gototop').set('html','Top of
Page');}).delay(1000);
},
onFailure: function(){
alert("failure ajax");
}
});
});
})(
document.id);
thanks for an help in advance (I do not have any idea what could be
wrong here)