Josh Young
Josh Young

Reputation: 135

jquery offset left property not working

I have this line:

$("#"+genId).css({"border":"2px solid black", "background-color":"white", "position":"fixed", "z-index": "10000000000", "top": (pos.top + h + 10)},"left", pos.left + w + 10);

When I remove the left part at the end it works, but when I add the left part the element disappears.

Not sure what is happening:

Full Function:

function showPopUp(element){

  var pos = element.offset();
  var h = element.height();
  var w = element.width();
  var newDiv = document.createElement('div');
  var genId = ("a" + (new Date).getTime() + Math.floor(Math.random() * 20));

  newDiv.id = genId;
  document.getElementsByTagName('body')[0].appendChild(newDiv);
  $("#"+genId).css({"border":"2px solid black", "background-color":"white", "position":"fixed", "z-index": "10000000000", "top": (pos.top + h + 10), "left": (pos.left + w + 10)});
  $("#"+genId).append("<p> Tag:" + element.prop("tagName") + " || Em: "+ getEm(element) + "em || Px: " + getPixel(element) + "</p><p>Font Family: " + getFontFam(element) + "</p>");

}

EDIT

Fixed typo in code from copying from file

... "top": (pos.top + h + 10), "left": (pos.left + w + 10)});

Upvotes: 0

Views: 389

Answers (2)

Josh Young
Josh Young

Reputation: 135

Not sure if this is the best fix but it worked for me.

I used the margin-left property instead of the left property and it is working now.

Upvotes: 0

Ionut Necula
Ionut Necula

Reputation: 11472

You're using css() method wrong. It can't look like that. css() method takes only one argument like that(a string or an array). So this:

$("#" + genId).css({
  "border": "2px solid black",
  "background-color": "white",
  "position": "fixed",
  "z-index": "10000000000",
  "top": (pos.top + h + 10)
}, "left", pos.left + w + 10);

Should look like this:

$("#" + genId).css({
  "border": "2px solid black",
  "background-color": "white",
  "position": "fixed",
  "z-index": "10000000000",
  "top": (pos.top + h + 10),
  "left": (pos.left + w + 10)
});

Please read the documentation from here and you will understand.

It's like .css( propertyName )

So you can either have this:

.css('display', 'block')

Or this:

.css({'display': 'block', 'color': '#f00'})

Upvotes: 2

Related Questions