Jquery offset returns inconsistent values

Using jquery offset(), i’m finding that when called in a function, the values returned are different to what is returned if i get the same offset in the console.

I’m trying to plot points on an image using offset, and currently trying to get this points to redraw correctly when the window is resized.

I’ve currently got a function being called on window resize, that replots the points.

The issue here is that when getting the offset of the image in the function, it may return

{top: 771.21875, left: 391.984375}

but without resizing the window, calling the same offset call in the console will return

{top: 412.53125, left: 391.984375}

This doesn’t seem to be an issue for the left value, but the top value seems inconsistent.

EDIT:

I have the following bound to the resize event

$(window).resize(function(){resequenceDamage();});

function resequenceDamage() {
                var seq = 1;

                damage.map(
                    function ( _e ) {
                        if( _e.sequence != seq ) {
                            _e.sequence = seq;
                            serverUpdateDamage( _e );
                        }
                        seq += 1;
                    }
                )

                // And repaint
                damage.map( removeDamagePointerAndPill );
                damage.map( removeDamageRow )
                damage.map( addDamage );
            }

The resequenceDamage function essentially goes over an array of damage, that removes each one and then readds them, as well as updating any changes we need to record (for this example, serverUpdateDamage isn’t needed).

                function addDamage( _damage ) {
                // Draw pointer on damage diagram
                var offset = $('#damageDiagram').offset();

                var div = $( '<div></div>' );

                div.attr( 'id', 'damagePointer' + _damage.pk );
                div.html( _damage.sequence );
                div.addClass('damageItem');
                div.addClass( _damage.severityLabel );
                div.css( 'left', _damage.x + offset.left + 'px');
                div.css( 'top', _damage.y + offset.top + 'px');
                div.mousedown(
                    function( _e ) {
                        editDamage( _damage )
                    }
                );
                if (_damage.sequence == 1 ){
                console.log('Sequence: ' + _damage.sequence + ' X:' + _damage.x + ' Y: ' + _damage.y);
                console.log(offset);
                console.log($('#damageDiagram').offset());
                }

                $( 'body' ).append( div );

            }

The console.log within this function will return

{top: 771.21875, left: 391.984375}

when the window has been resized, with the above being the last console log out.

Without resizing the window, running

$('#damageDiagram').offset();

in the console will return

{top: 412.53125, left: 391.984375}

You need to sign in to view this answers