CODEWITHSUNDEEP
javascriptjqueryhtmlcssoffset
demoncoder
demoncoder

Reputation: 343

jquery get width of div to left side window

And I want to get the width or distance or pixel that between the div and left side of of window/viewport. And another width again between the div to the right side of the window. I will use the width to create a left line and right line. But I am poor in jQuery, I try offset but seems nothing happen. So I back to 0 again so I didn't include fiddle here since I got nothing inside. But I have attached with the image link as below, to explain my question. Please help me on try to get the width, I can create the line myself. Thank you.

enter image description here

Upvotes: 2

Views: 6922

Answers (5)

Zentryn
Zentryn

Reputation: 554

You can do that with JavaScript, no need for jQuery:

var mydiv = document.getElementById('mydiv');
var offset = mydiv.getBoundingClientRect();

var offsetRight = document.documentElement.clientWidth - offset.right;
var offsetLeft = offset.left;

JSFiddle

Upvotes: 0

Andrew Bone
Andrew Bone

Reputation: 7291

We can work out that where the box starts with .offset(). Next, we can work out where the box ends with .offset() + .width(). We now know where our box sits on the x-axis.

Now let's see what we have to the left of our box with .left which can run on our .offset(). We've now worked out how much space there is to the left and how wide our box is.

Finally, we can put what we've worked out together, we can get the page width $(window).width() and minus what there is to the left of our box (stage 2) and the width of our box (stage 1) and that will only leave what is to the right of our box.

That's the theory anyway now let's have a look at some code. You'll see I'm working out all the bits from the theory and then adding some visual representation.

calcSizes = function() {
  var boxPos  = $(".box").offset(),
      toLeft  = boxPos.left,
      toRight = $(window).width() - ($(".box").width() + toLeft);

  $(".left").width(toLeft + "px");
  $(".right").width(toRight + "px");

  console.log("Right: " + toRight + "px");
  console.log("Left: "  + toLeft + "px");
  console.log("Width: " + $(".box").width() + "px");
  console.log(
    $(window).width() + "px = " +
    toRight           + "px + " +
    toLeft            + "px + " +
    $(".box").width() + "px"
  );
  console.log(" ");
}

calcSizes();
body {
  margin: 0
}
.box,
.indicator {
  padding: 10px 0;
  text-align: center
}
.box {
  width: 100px;
  background: #FF5722;
  margin-left: 60%
}
.indicator {
  background: repeating-linear-gradient( 45deg, #F44336, #F44336 10px, #D32F2F 10px, #D32F2F 20px);
  overflow: hidden;
  transform: translatey(-100%);
  opacity: .8
}
.left {
  float: left
}
.right {
  float: right
}
button {
  position: fixed;
  top: 55px;
  left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">BOX</div>
<div class="left indicator">
  LEFT
</div>
<div class="right indicator">
  RIGHT
</div>

<button onclick="calcSizes()">
  Recalculate
</button>

Hope this makes sense and helps you with your project.

Upvotes: 0

BobRodes
BobRodes

Reputation: 6165

This is easier to do with POJ (plain old javascript). Get the position of the element on the screen. Then evaluate its left property. That will be the width of your left line. Then subtract its right property from the width of the screen. That will be the width of your right line.

var x = document.getElementById('myDiv').getBoundingClientRect();
var myLeftLineWidth = x.left;
var myRightLineWidth = screen.width - x.right;

For more information see this post.

If you want the width of the window instead of the screen, change screen.width to window.innerWidth. If you don't want the scrollbar, etc. to be included in the width, use document.documentElement.clientWidth. (For more info on these, see this.)

Upvotes: 0

user6573425
user6573425

Reputation:

There is two options One is you can use red line as image and you can place the div over the red line. Second one, If you want to calculate:

Left div width = parent div width - child div offset;

Right div width = parent div width - child div offset + child div width; 

var parentdiv = document.getElementById("ParentDivID");
var parentWidth = parentdiv.offsetWidth;

var childdiv = document.getElementById("childDivID");
var childWidth = childdiv.offsetLeft;

Upvotes: 0

tomision
tomision

Reputation: 994

var of = $(ele).offset(), // this will return the left and top
    left = of.left, // this will return left 
    right = $(window).width() - left - $(ele).width() // you can get right by calculate

Maybe this can help you. After all, .width() isn't the only answer, like innerWidth() or outerWidth()

Upvotes: 1

Related Questions