Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Make a Div height always round to an even number…

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #197775
    michaeljalmond
    Participant

    Just wondering if its possible to have a div always even height to fix the half pixel translate bug so if my #box is 153px height, we can check and make it 154px, if its even, it just stays the same.

    If the browser is resized and text goes on to a new line, could the js adjusted height also change on the fly?

    Thanks in advance :)

    #197778
    Paulie_D
    Member

    I’m sure it could but most browsers will round anyway.

    Curious to see this half a pixel..I see people mention it but I’m not exactly clear on how it looks.

    #197796
    Senff
    Participant

    The most common way of making sure if a div always has a height that is an even number:

    1) check current height
    2) divide by 2
    3) round up the result to the nearest full number
    4) multiply by 2
    5) apply result to div

    For example:

    1) height is 151 px
    2) half is 75.5
    3) rounding up to 76
    4) multply by 2 gives 152
    5) apply that to div

    OR

    1) height is 200 px
    2) half is 100
    3) rounding up to 100
    4) multply by 2 gives 200
    5) apply that to div

    In the second example nothing actually changes, but that’s OK.

    So in essence, you might want to have a script/listener that checks the height of the div on load/resize (or every X ms) and applies the height.

    #197806
    Shikkediel
    Participant

    Might be neat to use modulus here, something like :

    function adaptSize() {
    
    if (itemheight%2 == 0) return;
    itemheight = itemheight+1;
    }
    

    Very generally speaking of course…

    #197809
    michaeljalmond
    Participant

    Left button has a modified height of 154px (on parent div) – button on the right is from same div with its natural 153px height.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.