Div coordinates change when Jquery show function be used

Question

I have two divs that clicking to first dive cause toggle of second div.

#a{ border:1px solid red;width:400px;margin:50px;}
#b{position:absolute;border:1px green solid; width:400px;top:150px;}

and

<div id="a">AAAAAAAAAAAA</div><div id="b">BBBBBB</div><div id="test" >Write Cordinates here</div>
$("#a").click(function(){
    var burasi = $(this).offset();
    var tepe=burasi.top + $(this).outerHeight(true);
    var ici = $("#b");
    ici.offset({top: tepe, left: burasi.left}); 
    window.console.log({top: tepe, left: burasi.left} );
    $("#test").html("top: "+tepe+", left: "+burasi.left);
    ici.fadeToggle("slow");       
})

As here. When A would be clicked toggle is executed so good but when div B going to shown its coordinates be changed. How can I prevent it and make div B at same place?

ici.offset({top: tepe, left: burasi.left}); is needed to my code. I summarized my whole question to this codes. Div with "A" id is any icon that B must be shown at its bottom. So this row (ici.offset) is essential to my code. — Huseyin, Jan 04 '15 at 01:34

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

You can just remove ici.offset({top: tepe, left: burasi.left}); as that's the line that's changing positions. Position your element when the document's ready and then it won't move at all. The reason why it's moving when you use your actual code is because you're trying to set the offset of a hidden element. Check out this answer here in StackOverflow which talks about it: jquery: get the offset of hidden element

As I mention, though, I used $(document).ready() to fix it. Here's my code:

    $("#a").click(function(){
    var burasi = $(this).offset();
    var tepe=burasi.top + $(this).outerHeight(true);
    var ici = $("#b");
    ici.offset({top: tepe, left: burasi.left}); 
    window.console.log({top: tepe, left: burasi.left} );
    $("#test").html("top: "+tepe+", left: "+burasi.left);
    ici.fadeToggle("slow");

});

Feel free to check it working here: http://jsfiddle.net/lrojas94/7hLypdnr/2/

edited May 23 '17 at 12:05

Community

1
1

answered Jan 04 '15 at 01:46

Luis Eduardo Rojas Cabrera

384
3
11

when coordinates calculated at first time it is ok. BUt at second calculations it is going to wrong. – Huseyin Jan 04 '15 at 09:21
Make it displayed by .show() then using .offset() solves the problem. upvote for making new idea for me. – Huseyin Jan 05 '15 at 23:21
Thanks :) That was on the link I mentioned in the post though :) – Luis Eduardo Rojas Cabrera Jan 06 '15 at 02:30

Mohamed-Yousef · Accepted Answer · 2015-01-05T01:28:43.673

0

Read This http://gabrieleromanato.name/jquery-bug-with-offsets-positioning-and-hidden-elements/

you can avoid that by run toggle before offset

$("#a").click(function(){
  var burasi = $(this).offset();
  var tepe=burasi.top + $(this).outerHeight(true);
  var ici = $("#b");
  ici.fadeToggle("slow");
  ici.offset({top: tepe, left: burasi.left}); 
  $("#test").html("top: "+tepe+", left: "+burasi.left);   
});

See DEMO

edited Jan 05 '15 at 01:28

answered Jan 04 '15 at 01:27

Mohamed-Yousef

23,946
3
19
28

This a solution. But I can not to understand why it is accurate? Is there any bug in Jquery? – Huseyin Jan 04 '15 at 09:18
There's no bug. as I explained in my answer, this is because you're trying to move a hidden object. Notice that what the user in this answer does is to move the object ONLY if it is visible. – Luis Eduardo Rojas Cabrera Jan 04 '15 at 12:19
@Huseyin Sorry for delay in replay.. Luis is right about move a hidden objects I just tried to move just when visible .. you can usw fadeToggle before use offset like http://jsfiddle.net/7hLypdnr/5/ or use animate() instead of offset like http://jsfiddle.net/7hLypdnr/7/ – Mohamed-Yousef Jan 04 '15 at 19:57
@Huseyin to check that yourself again just alert coordinates for #b element while its visible and its hidden like http://jsfiddle.net/7hLypdnr/8/ – Mohamed-Yousef Jan 04 '15 at 20:11
@Mohamed-Yousef I think there is a bug http://jsfiddle.net/7hLypdnr/9/ . I simplified my question. If you look it you will see that settin B div by f,xed values returns different results. – Huseyin Jan 04 '15 at 22:44

Div coordinates change when Jquery show function be used

2 Answers2