CODEWITHSUNDEEP
javascriptjquerycssscroll
Georgi
Georgi

Reputation: 297

jQuery append div in a div to the bottom of a scroll window

I am trying all the stuff I read here and all over the net, but it looks like I am not getting it somehow.

I have been fiddling it for a while but still it does not work.

<div id="blokscubes" class='main'> 
<div id="alldivs">
</div>
<div id="report" class="mydivs"></div>


$('#report').text('One');
  for (i=1;i < 11;i++){    
     var newid = 'report-' + i.toString();
     var oldid = '#report-' + (i-1).toString();
     $('#alldivs').append('<div id=' + newid +  ' class="mydivs">'+ newid + '</div>');
     var hashold = '#' + newid;
     $(hashold).animate({"scrollTop": $(hashold)[0].scrollHeight}, 300);

     $(oldid).css('position','relative');
  }

The last added div always hangs to the bottom of the screen,but not to the bottom of the scrolled down screen.

What am I missing or not writing correctly?

Thanks

Upvotes: 0

Views: 1409

Answers (3)

StackSlave
StackSlave

Reputation: 10627

I would use position:fixed on the last Element, relative to a parent that you should surround $('#blokscubes') with, and create a height on a new empty second to last Element, so there is no word over word overlap. Note that position:fixed and position:absolute are relative to the closest parent that is position:relative or the document.documentElement (html tag), which is position:static. So, you basically have your positioning wrong. Also, there is usually no need to create non-dynamic Elements with jQuery. Just use HTML and CSS.

Upvotes: 0

mmisiarek
mmisiarek

Reputation: 191

I'm not sure why you first set position:absolute for .mydiv and then via js you change to position: relative. Problem is that your last div has still absolute position. You can fix this like this:

$('#report-1').text('One');
$('#report-1').css('position','relative');   

    for (i=2;i < 10;i++){    
        var newid = 'report-' + i.toString();
        var oldid = '#report-' + (i-1).toString();
        $('#blokscubes').append('<div id=' + newid +  ' class="mydivs">'+ newid + '</div>');
        var hashold = '#' + newid;
        $(hashold).animate({"scrollTop": $(hashold)[0].scrollHeight}, "fast");

        $('#' + newid).css('position','relative');
}

Upvotes: 0

kei
kei

Reputation: 20511

The issue is the last div has position:absolute instead of relative.

You can set the CSS to have the mydivs have a relative position, or you can set the last div created to have position:relative (You missed the last one out)

DEMO

Upvotes: 1

Related Questions