No css styling on content after appending it (with ajax)

Question

There are dozens of threads out there but after wasting 2 days I still can´t find a solution: I´m trying to create a website with an "infinite scrolling" function. By scrolling to the bottom of the page this is beeing triggered:

$(window).scroll(function() {
   if($(window).scrollTop() == $(document).height() - $(window).height()) {  

   $.ajax({
   url: "loadMoreComments.php?lastComment="+ $(".allvideos:last").attr('id') ,
  success: function(html) {

  if(html){       
  $(html).appendTo(".portfolioContainer");

  }
}
});
}
});

...so the content I would like to append (html) is generated within "loadMoreComments.php". The problem is that the new appended content has no css styling applied to it. This is how the new content looks inside the source code (after appending):

The styling is applied to the ids 1-7 but the newly generated "figures" (ids 8-10) are without any styling. Eventhough they are generated exactly the same way the others are created. Oviously my whole layout goes crazy. Any solutions? Thx.

EDIT: I´m using this bootstrap template: click.... to generate the tiles / figures.

You are styling elements via the style attribute - I'm assuming you are doing this via JavaScript, so could you please post the relevant bit of your code that deals with this? — fstanis
– fstanis, Commented Oct 23, 2016 at 17:24
If you have a CSS file with one of those classes styled correctly, it will apply. Dynamically generated or not, CSS applies to the DOM at all times. — TheValyreanGroup
– TheValyreanGroup, Commented Oct 23, 2016 at 17:32
is there a library setting the style tag for the first 7 ids? — BenG
– BenG, Commented Oct 23, 2016 at 19:13
I´ve read and understood your questions but I don´t know exactly how to answer them. I´m using a bootstrap template (themeforest.net/item/make-multipurpose-onemultipage-theme/…) which generates the tiles / figures for me. Yes I think it is styled by JavaScript @fstanis. But I can´t find the relevant code dealing with it :| — tyler
– tyler, Commented Oct 24, 2016 at 17:33

Ravinthranath A · Accepted Answer · 2016-10-23 17:45:11Z

1

Instead of using inline style, please make it as a class for that, i thought you missed something in the code.

I understand the problem. Please call effect-jazz plugin after appending the content.

answered Oct 23, 2016 at 17:45

Ravinthranath A

2,6241 gold badge26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Araz Shamsaddinlouy · Accepted Answer · 2016-10-24 18:11:22Z

try this:

$(window).scroll(function() {
   if($(window).scrollTop() == $(document).height() - $(window).height()) {  

   $.ajax({
   url: "loadMoreComments.php?lastComment="+ $(".allvideos:last").attr('id') ,
  success: function(html) {

  if(html){       
  $(html).appendTo(".portfolioContainer");
     var oddStyle = $(".effect-jazz").eq(0).attr("style");
     var evenStyle = $(".effect-jazz").eq(1).attr("style");
     $(".effect-jazz:nth-child(even)").attr("style",evenStyle);
     $(".effect-jazz:nth-child(odd)").attr("style",oddStyle);
  }
}
});
}
});

tyler · Accepted Answer · 2016-10-24 22:03:11Z

1

After trying a lot, I found out my bootstrap template uses isotope plugin to layout the tiles. As its documentary indicates (documentary) I had to call the specific isotop method to add and re-layout the new items. I had to use the "insert" method instead of "append" - don´t know why but it works. 4 days of work :|

$('#portfolioContainer').isotope( 'insert', $newItems );

answered Oct 24, 2016 at 22:03

tyler

4245 silver badges18 bronze badges

Collectives™ on Stack Overflow

No css styling on content after appending it (with ajax)

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related