How do I obtain a floating element's left offset while it is outside the viewport?

Question

Here's my situation. I've created several panels stacked side by side which are wrapped in a main container. Each panel takes 100% the viewport width and height. My goal is to be able to scroll horizontally to each panel when I click on their respective link. This works fine using a pure css approach. However, I'm learning jQuery and I wish to use the .scrollTo() method to achieve this.

When the panels were stacked one below the other (i.e vertically), I was able to obtain the top offset of each panel and scroll to their position nicely.

With the horizontal variation, I'm having troubles to obtain the left offset of the panels. I get a left offset of zero for all of them. If my logic is right, say the viewport is 1920px wide, the 2nd panel's left offset should be at 1920px, the 3rd at 3840px etc.

From the information I've gathered so far, it's because the panels are outside the viewport. And indeed, I've applied a width of 20% to the panels so that they were all visible in the viewport then I tried to alert their left offset. They were prompted to me successfully.

So how do I get around this issue ? It might seem like I'm reinventing the wheel but like I said, I'm learning jQuery so I need to understand why it's behaving as such and how I can solve this. Any help will be highly appreciated :) Below are snippets of what I have so far.

Thanks.

The Markup:

<div class="mainWrapper">
  <section class="panel" id="panel-1"></section>
  <section class="panel" id="panel-2"></section>
  <section class="panel" id="panel-3"></section>
  <section class="panel" id="panel-4"></section>
</div>

The CSS:

.mainWrapper, .panel {
  position: relative;
  height: 100%;
}

.mainWrapper {
  top: 0;
  left: 0;
}

.panel {
  display: inline-block;
  background: rgba(255, 255, 255, 1);
}

The Javascript:

$(document).ready(function() {
  var $panelWrapper = $('.mainWrapper');
  var $panels = $('.mainWrapper').find('.panel');
  var $panelScrollPos = new Array();

  $panels.each(function(i) {
    //This is where I need help. It's not working
    $panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left);

    alert('Panels position are: ' + $panelScrollPos[i]);
  });
});

Please note that I have used .width() method to set the width of .mainWrapper and .panel elements. I haven't included it in the snippet as it is working.

You're alerting `$panelWrapper[i]` in your JS. Shouldn't that be `$panelScrollPos[i]`? Also there's no width on the `.panel` divs in your CSS — Andy, May 17 '15 at 21:21
would be easier if we had the width you're setting. For example, is you main wrapper width as wide as the sum of th four panels width? — Julien Grégoire, May 17 '15 at 21:35
set white-space to no wrap to keep inline-block panels on a single line, no matter width of the parent — G-Cyrillus, May 17 '15 at 21:46
http://jsfiddle.net/n3e6xzbj/ see what i meant :) (this include other comments tips too) — G-Cyrillus, May 17 '15 at 21:54
@Andy sorry for that, it's a copy/paste mistake. I've edited the post. Thanks. — Christopher Adolphe, May 18 '15 at 20:20
@JulienGrégoire Yes the width of these elements aren't in the css because I've set them through jQuery's .css() method so that these widths change dynamically on window resize. — Christopher Adolphe, May 18 '15 at 20:20
@GCyrillus Thanks a lot man!! Adding the white-space property to the .mainWrapper element solve the issue. Now how do I signal your comment as the one which helped me solve the problem ? :P — Christopher Adolphe, May 18 '15 at 20:28

score 1 · Accepted Answer · answered May 18 '15 at 20:49

1

to be able to set your inline-block elements on a single line , no matter the width of the wrapper you should reset the white-space propertie:

#wrapper {
white-space:nowrap;
width:100%;
}
.child {
display:inline-block;
white-space:normal;
width:100%;
}

your fiddle updated : http://jsfiddle.net/n3e6xzbj/

answered May 18 '15 at 20:49

G-Cyrillus

101,410
14
105
129

Thanks for the help ! However, something isn't still clear... these `inline-block` elements weren't they "really" in a single line when they were out of the viewport ? I'm asking this question because initially when I had the width of the child elements set in the CSS file itself, I tried to reduce their width to check whether they were side by side...and they were. I've also noticed that if I applied `float: left;` to the child elements, the `white-space` property does do the trick anymore. – Christopher Adolphe May 18 '15 at 21:24
@Christopher white-space only works for inline, inline-block (or similar as input/img) ,and text. Float has a special behavior, it acts like absolute elements (taken out of the regular flow) but still uses space within the flow of elements.it really is far away from any display values wich it overrides for the behavior. – G-Cyrillus May 18 '15 at 21:47
check this here http://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css & http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell @Christopher – G-Cyrillus May 18 '15 at 21:48

score 0 · Answer 2 · answered May 18 '15 at 08:50

0

You can try the getBoundingClientRect.

The result of that call has a left position which probably is what you seek.

answered May 18 '15 at 08:50

Bas Slagter

9,831
7
47
78

Thanks for sharing this method. It'll surely become handy later on. GCyrillus CSS tip helped me out. – Christopher Adolphe May 18 '15 at 20:34

How do I obtain a floating element's left offset while it is outside the viewport?

2 Answers2