CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Äñäñd Ayan
Äñäñd Ayan

Reputation: 89

How to check bottom of child div touching parent bottom

i'm trying to change position of a child element(with varying height based on text) using range input,i would like to stop applying top position once the child div touches the bottom of the parent having fixed height.

$('#change_position').on('input', function () {
    var val = +$(this).val(),
        ScrSize = parseInt($('.screen').css('height')), 
        Stop = $('.screentip').offset().top, 
        h = parseInt($('.screentip').css('height')), 
        tofsset = Stop - h;

    if (tofsset < ScrSize) {
        $('.screentip').css('top', val + "%");
    }
});

Upvotes: 0

Views: 517

Answers (1)

Daniel F.
Daniel F.

Reputation: 81

The height you are expecting jQuery to return is actually a string with the ending "px". You can use the function .height(). This will return you the height of the element as integer. I have tried a slightly modiefied version of your code:

$('#input').on('input', function () {
    var val = parseInt($(this).val()),
        ScrSize = parseInt($('#container').height()),
        TxtSize = parseInt($("#text").height()), 
        Stop = ScrSize - TxtSize,
        valInPixel = ScrSize * val / 100;

    if (valInPixel < Stop) {
        $('#text').css('top', val + "%");
    }
    else
    {
      $("#text").css("top", Stop + "px");
    }
});

The else part will position your element to the bottom, if the number exceeds the frame. You may also have to be aware of padding and margin. This could also lead to mispositioning.

Hope this helps.

Upvotes: 1

Related Questions