Sam Henrichs Sam Henrichs - 4 months ago 11
CSS Question

Position.left Not displaying number

This link will be below, but I'll give you the rundown. I need to align a div to the same horizontal position as a span, which is inside nested divs. To do so, I'm trying to figure out how far it is from the right of the page. It looks like this.

var position = $('#creators-toggle').position();
$('#offset').html(position.top);
$('#offset-left').html(position.left);
var marginright = ($(window).width - position.left);


When I display
position.left
, I get
821.890625
Not sure why can anybody help?

The link is here: http://codepen.io/sbhenrichs/pen/ZOjyrm/

Answer

I don't really understand what do you mean by "not sure why", but you get this because this is the position of this element from the left of the window.

If you want to align the div to the same position - you should position if from the left (and not from the right) at the exact same position:

var position = $('#creators-toggle').position();
//$('#offset').html(position.top);
//$('#offset-left').html(position.left);
// This is how you can position the element at the exact horizontal position
$('.creator-dropdown').css('left', position.left);

Here is a example:

$(document).ready(function() {
	var position = $('#creators-toggle').position();
	$('#offset').html(position.top);
	$('#offset-left').html(position.left);
    
	$('.creator-dropdown').css('left', position.left);
	$('.creator-dropdown').hide(0);
  
	$('#creators-toggle').click(function() {
		if($('.creator-dropdown').is(':visible')) {
			$('.creator-dropdown').slideUp(250);
		}
		if($('.creator-dropdown').is(':hidden')) {
			$('.creator-dropdown').slideDown(250);
		}
	});
});
@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400';
html {
  font-family: "Lato", sans-serif;
}

html, head, body {
  margin: 0px;
  padding: 0px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

.navbar {
  border-bottom: 1px solid #eee;
  position: relative;
  height: 70px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
}

.nav-content {
  width: 75%;
  margin-left: 12.5%;
}

.brand-con {
  line-height: 70px;
  height: 100%;
  display: inline-block;
}

.brand {
  font-weight: 300;
  font-size: 150%;
  color: #33bf90;
}

.links-right {
  display: inline-block;
  float: right;
  height: 100%;
  line-height: 70px;
  color: #696969;
  font-weight: 300;
}

.link-right {
  margin-right: 25px;
  transition: all 250ms cubic-bezier(0.17, -0.3, 0.79, 1.29);
}
.link-right:hover {
  color: #33bf90;
}

.creator-dropdown {
  width: 225px;
  border: 1px solid #eee;
  position: absolute;
  font-weight: 300;
  padding: 20px;
  top: 70px;
  background: white;
}

.tab-left {
  margin-left: 25px;
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  </head>
  <body>
    <div class="navbar">
      <div class="nav-content">
        <div class="brand-con">
          <span class="brand">placeholder</span>
        </div>
        <div class="links-right">
          <span class="link-right" id="creators-toggle">Creators</span>
          <span class="link-right">Our Mission</span>
          <span class="link-right">About</span>
          <span class="link-right">Contact Us</span>
        </div>
      </div>
    </div>
    <div class="creator-dropdown">
      <span>Video Creators</span>
      <br />
      <br />
      <span class="tab-left">What we can do for you</span>
      <br />
      <br />
      <span class="tab-left">How you can help</span>
      <br />
      <br />
      <br />
      <span>Bloggers</span>
      <br />
      <br />
      <span class="tab-left">Why our service works best</span>
      <br />
      <br />
      <span class="tab-left">What you can do</span>
    </div>
    <h1 id="offset"></h1>
    <h1 id="offset-left"></h1>
  </body>
</html>

If someone will change with width of the window - your positioning will stop working, and you will need to re-position that element.

You can use this:

$('#creators-toggle').click(function() {
    if($('.creator-dropdown').is(':visible')) {
        $('.creator-dropdown').slideUp(250);
    }
    if($('.creator-dropdown').is(':hidden')) {
        // This will re-position the element every time we should display it in the correct position.
        var position = $(this).position();
        $('.creator-dropdown').css('left', position.left);
        $('.creator-dropdown').slideDown(250);
    }
});