CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MoHamed HaSsn
MoHamed HaSsn

Reputation: 555

get offset then make position absolute

Hello People what I need is get offset for any section then make position of all sections is absolute: the problem that all sections return with 0px of offset

$(document).ready(function () {
    $('section').each(function (index, element) {
        var $this = $(this);
        $this.css('top', $this.offset().top + 'px');
        $this.css('position', 'absolute');
    });
})
section {
    width: 100%;
    height: 400px;
    background-color:#ff5b74;
}
.section-2{
    height:500px;
    background-color:#00ff6b;
}
.section-3{
    background-color:#5066e9;
}
.section-4{
    background-color:#ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>

Upvotes: 1

Views: 226

Answers (3)

Chiller
Chiller

Reputation: 9738

The problem is that for each section you set the position absolute which makes it out of the flow before you change the remaining sections. so the remaining sections will ignore the space taken by this section and fill it.

That's why they all take the same top position

You need to set the absolute position after you complete setting the top position for all sections, meaning outside the loop function.

$(document).ready(function() {
  $('section').each(function(index, element) {
    var $this = $(this);
    $this.css('top', $this.offset().top + 'px');
   
  });
  $('section').css('position', 'absolute');
})
section {
  width: 100%;
  height: 400px;
  background-color: #ff5b74;
}

.section-2 {
  height: 500px;
  background-color: #00ff6b;
}

.section-3 {
  background-color: #5066e9;
}

.section-4 {
  background-color: #ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>

Upvotes: 2

caramba
caramba

Reputation: 22480

The problem you are facing is as soon as you are in the each loop and set the first element to position: absolute; it will lose it's height cause it is position: absolute; Or that's what position: absolute; does. It takes element out of the flow.

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. Information from here here

Sooo to accomplish you need to set the height by the height and the position of the previous element.

$(this).prev().offset().top + $(this).prev().outerHeight()

I left the console.log() there if you are interested to see the different values.

$(document).ready(function () {
    $('section').each(function (index, element) {
         // console.log(
            // $(this).offset().top,
            // $(this).outerHeight(),
            // ($(this).offset().top + $(this).outerHeight()),
            // ($(this).prev().offset().top + $(this).prev().outerHeight())
        // );
        $(this).css('top',  $(this).prev().offset().top + $(this).prev().outerHeight() + 'px');
        $(this).css('position', 'absolute');
    });
})
section {
    width: 100%;
    height: 400px;
    background-color:#ff5b74;
}
.section-2{
    height:500px;
    background-color:#00ff6b;
}
.section-3{
    background-color:#5066e9;
}
.section-4{
    background-color:#ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>

Upvotes: 1

Badshah Sahib
Badshah Sahib

Reputation: 184

<style>
    section {
        width: 100%;
        height: 400px;
        background-color:#ff5b74;
    }
    .section-2{
        height:500px;
        background-color:#00ff6b;
    }
    .section-3{
        background-color:#5066e9;
    }
    .section-4{
        background-color:#ff6a00;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>

<script>
    $(document).ready(function () {
        $('section').each(function (index, element) {
            var $this = $(this);

            if (index != 0) {

                $this.css('top', (Number($this.offset().top)+Number($('.section-'+(Number(index)+1)).height())) + 'px');
            }
            $this.css('position', 'absolute');
        });
    })

</script>

Upvotes: 0

Related Questions