Develop Reference

Creating a nesting layout with a fixed column that's scroll able

I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!

It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.

Prevent element from scrolling with page when position is fixed?

Is it possible to make an element have fixed position, but stop it from scrolling with the page?
My problem: I am building a tooltip that I dynamically determine the placement for depending on what space is available on the page for it. It needs to pop up over everything else next to its target element and not take up space. So I initially thought position absolute.
But absolute position is based off of the element's parent wrapper. My page gets wrapped in multiple various wrappers that I have no control over (on Salesforce, but this isn't necessarily a Salesforce specific question).
So I need to position it off of the viewport instead of relying on what parent it ends up getting wrapped in. So position fixed, works great.
The only issue is position fixed has the element scroll with the page. I don't really want the tooltip to follow the user as they scroll.
I feel I need to keep the position based on the viewport due to not being able to control the parent wrappers. But all I have found is position fixed, so not sure if some method exists to stop the element from scrolling with the page.

Seems like you want to use position: absolute; instead of fixed.

If you're set on position: fixed, the only way I know of to have the element move with the rest of the page as the user scrolls is by editing the location with JavaScript when the browser scroll event fires. Otherwise, if you position with respect to the viewport at first, you'll be positioned with respect to the viewport on an ongoing basis. However, hooking into the scroll event doesn't necessarily perform well, and although there are debouncer functions available to help with that, it wouldn't be my first choice.
You may be able to use position: absolute without tangling with the extra page wrappers, however. Is there is an element (call it A) that has these properties:
your tooltip lives inside A (or can be moved there)
you can correctly position your tooltip relative to A
the extra wrappers are always outside A
If so, set position: relative on element A. Your tooltip will use A for reference and not an extra wrapper outside A (even if that wrapper also has position: relative set on it).

Position an element with javascript when css zoom is used on the page

I have created a slideshow plugin that takes a list of images and builds a slide show. The slide show is positioned 100px from the top + $(document).scrollTop().
This is pretty simple and works very well. I am running into some issues when someone one has used css zoom on the page. The calculation for the top position will be off due to the zoom. Does anybody know a good way to correct this/ work around?
Thanks in advance!

I had the same problem, and found out that jQuery .offset().top is returning some values which depend on window scroll position if there is CSS zoom added to element that is wrapping the elements we need to get position from.
So, I used the native JavaScript .offsetTop in this context:
$("#scrollDestination").get(i).offsetTop;
But, keep in mind that this will get the position relative to it's parent, not like jQuery .scrollTop() which is returning the scroll bar position. So you will need to do some calculations maybe, but at least you will get the consistent returning value for element's position, when you have CSS zoom involved.

why is this.offsetLeft 0?

I am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img on it and a bar will appear. When you click there the bar is not precise. Its several pixels off.
this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?
-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question
position:relative;

The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.
Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.
The style can also be used to fix positioning and scrolling bugs in Internet Explorer.

It maybe too late for this issue but my experience can be useful here.
I had the same problem, i was getting 0, when i called getOffsetLeft() method.
you must add your widgets into container first and then call getOffsetLeft() method.

Figuring out if overflow:auto would have been triggered on a div

// Major edit, sorry in bed with back pain, screwed up post
One of the ad agencies I code for had me set up an alternate scrolling solution because you know how designers hate things that just work but aren't beautiful.
The scrolling solution is applied to divs with overflow:hidden and uses jQuery's scrollTo(). It's a set of buttons top and bottom that handle moving the content.
So, this is married in places to their CMS. What I have not been able to sort yet is how to hide the scrolling UI when overflow:auto would not have been triggered by the CMS content and the buttons are not needed.
The divs have set heights and widths. Can i detect hidden content? Or measure the div contents' height?
Any ideas?

So you want to get the height of a hidden element? I found this post maybe it is what you are looking for.
Its using jQuery, but the concept is the same. Hope this helps!
Metropolis

I hope i am mistaken, but you would need to emulate overflow by setting properties using some js, then you can get these values using getAttribute or your own method. Otherwise when you set overflow to auto, then the browser will be doing its own thing and the only value returned as a property of overflow would be a string like 'auto'.

Can you explain this better? You want to hide the scrollbar of a div set to overflow:auto when it doesnt have enough text to overflow? Browser does this for you.
You want to hide the scrollbar of a div set to overflow auto when it is scrolled down to some point, but you arent looking at it or hovering or something? That will be sort of complicated.
If you want to know if a div has overflow set to something, you just do:
object.style.overflow
and it will give you a string.
possible values:
visible
hidden
scroll
auto
inherit
you can set overflow the same way
http://www.w3schools.com/css/pr_pos_overflow.asp
from what i understand now is you have these divs with hidden scroll, but some graphic designer custom scroll bar and you use scrollTo to do the actual scrolling. BUT you problem lies when you dont have enough data to actuall need a scrollbar, but your graphic stuff shows up anyway, so you want to hide it.
so the real question here is how do you get the height of content? you want the property offsetHeight, but im pretty sure its still IE only.

What do you mean by CMS?
Yes you can access the div's content height, since you can access all of the div's children in JavaScript. (Sorry for not including example. I haven't work with pure JS in a while now so I don't want to point you in the wrong direction.)
Doing this, you'll kind of be able to "detect hidden content" and then be able to do what you actually want to do.
About your first question, I doubt you can control scroll bars once you've set overflow to auto.

Using jQuery height() on a div containing the content I am able to show/hide the user interface as needed based on whether height exceeds the CSS height of the div with overflow:hidden.