CODEWITHSUNDEEP
javascriptjqueryhtml
sublime
sublime

Reputation: 4161

How to place a div inside a bigger scrollable div at particular position

I have a div with height = 10*screen-height.

I want to add another smaller div to it with height = screen height

Assuming that I can add 10 such smaller div's onto the bigger div, I want to add this div at particular position on the bigger div. Say starting from 4*screenheight pixel. How do I do that using jQuery?

Upvotes: 0

Views: 77

Answers (2)

user1467267
user1467267

Reputation:

See here how you can access and manipulate the body's height and the big div's inners afterwards;

JSfiddle

HTML

<div id="biggy">
    <div class="smally">Smally :)</div>
    <div class="smally">Smally 2, don't forget me :D</div>
</div>

CSS

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#biggy {
    width: 200px;
    background-color: orange;
    position: relative;
}

.smally {
    width: 100%;
    background-color: blue;
    color: white;
    text-align: center;
    position: absolute;
}

JavaScript

$(document).ready(function() {
    var bh = $('body').height();
    var smally_offset = (bh / 10);

    // Set biggy to be the body's height
    $('#biggy').css('height', bh);

    // Make all smallies 10% of the set height
    $('.smally').css('height', smally_offset);

    // Handle the different smallies :)
    $('.smally:nth-child(1)').css('top', smally_offset * 0);
    $('.smally:nth-child(2)').css('top', smally_offset * 1);
});

Upvotes: 0

Ashley
Ashley

Reputation: 5947

Presumably you already have the screen height stored, and the two divs created at the correct heights, so:

$(inner_div).css('position', 'relative').css('top', 4*screen_height);

You may not need position:relative in your style if it's in your css already

Upvotes: 1

Related Questions