Can't get css("left") of Stack Exchange help drop down - returns auto, wanted in px

Question

I want to get left property of Stack Exchange help drop down which has class .help-dialog, but it always returns auto, and I'd like to see it in px.

To avoid complicated explanations, just execute this in your address bar after any SE site is loaded:

javascript:alert($(".help-dialog").css("left"))

You'll get auto in the alert. How to solve it?

^{I have already seen this question, but second and third suggestions don't appear to work, other ones are inapplicable.}

What does `$` refer to? jQuery? if so, you should tag it in the question as well — Hashem Qolami, Mar 22 '15 at 12:50
If you inspect and see on page load the help-dialog is after the link `help` and when clicked its put into a div called topbar with `left` calculated so you wont get a value on load. What you can do is get the left value of the link `help`. — anpsmn, Mar 22 '15 at 12:52

score 2 · Accepted Answer · edited Mar 22 '15 at 12:53

2

It returns auto because the element is not visible after page load, see:

$('.help-dialog').is(':visible')

The help menu is initialized on click and that's when the left attribute is set. Click on it after page load and try again:

$('.help-dialog').css('left'))

To solve this, use:

$('a.js-help-button').click();
var left=$('.help-dialog').css('left');
$('a.js-help-button').click();
alert(left);

edited Mar 22 '15 at 12:53

nicael

18,550
13
57
90

answered Mar 22 '15 at 12:43

Alex

7,743
1
18
38

Could you explain why you need *two* click events? – Bram Vanroy Mar 22 '15 at 13:03
1

@Bram So as not to leave the dialog expanded. Because that was not my aim - to expand the dialog, so we hide it after getting data. – nicael Mar 22 '15 at 13:03

score 1 · Answer 2 · edited Mar 20 '17 at 10:29

1

This returns 840.5 on my screen at https://meta.stackexchange.com/.

javascript:$('.help-dialog').show();var left=$(".help-dialog").offset().left;$('.help-dialog').hide(); alert(left)

edited Mar 20 '17 at 10:29

Community

1
1

answered Mar 22 '15 at 12:50

Rick Hitchcock

35,202
5
48
79

Do you get a different value, or do you still get "auto"? What stackexchange site are you viewing? – Rick Hitchcock Mar 22 '15 at 12:53
I am viewing directly on this page, getting 0. – nicael Mar 22 '15 at 12:54
1

My bad, I had manually set it to visible first. Updated answer. – Rick Hitchcock Mar 22 '15 at 12:56

score 1 · Answer 3 · answered Mar 22 '15 at 13:00

1

Try position method instead of css method,

$('a.js-help-button').click();
$(".help-dialog").position();

.help-dialog is hidden, try to make it visible by clicking on it. and then get its position . You will get its top and left in px

answered Mar 22 '15 at 13:00

Captain

75
9

Good answer but the OP is not interested in genuine answers but in gaming the system and giving preferential treatment to certain accounts +1. – Mr. X Mar 22 '15 at 13:12

score -1 · Answer 4 · edited Mar 22 '15 at 12:58

-1

Did you try this?

$('.help-dialog')[0].offsetLeft;

edited Mar 22 '15 at 12:58

nicael

18,550
13
57
90

answered Mar 22 '15 at 12:48

Mr. X

264
3
6

@nicael How come? It returns 0 not `auto` – Mr. X Mar 22 '15 at 12:50
1

While it is around 700. Differs for different screen sizes, but it is not 0. – nicael Mar 22 '15 at 12:51

Can't get css("left") of Stack Exchange help drop down - returns auto, wanted in px

4 Answers4