Geek Answers Handbook

<a> tag offset is off by a few pixels

I wanted to create a simple dotted underline animation for my menu bar, so I wrote the following HTML:

<nav role="navigation" class="navigation">

  <ul class="nav-listed-links">
    <li class="active"><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Our Potfolio</a></li>
    <li><a href="">History</a></li>
    <li><a href="">Contact US</a></li>
    <li class="underline"></li>
  </ul>

</nav>

And the following js code to do underscore.

JS:

$('.nav-listed-links > li > a').hover(function() {

  var offset = ($(this).offset().left - 0),
    width = $(this).outerWidth();

  $('.underline').addClass('on');

  $('.underline').css({
    left: offset,
    width: width
  });

}, function() {

  $('.underline').removeClass('on');


});

Smooth animations are CSS transitions, FIDDLE HERE .

So now let's zero out the problem. In JS code, I am trying to get how far from <a>is to the left of the document, and therefore I have the following code:

var offset = ($(this).offset().left - 0)

However, the underline is slightly different from where the tag starts <a>, see screenshot below:

BUG

Why is this happening. I'm sure this is something stupid, but I really have not been able to figure it out in my whole life.

+4
2

offset()

margin body .

position(), - , ul:

var offset = $(this).position().left,

Fiddle

()

+3

- margin, body . margin: 0 . margin . .

JSFiddle margin-left: 0px; body: https://jsfiddle.net/w8unr0od/2/

+3

More articles:


All Articles