Attempt to keep element in center of screen but contained in parent element

Question

We have a script used to edit certain files inline. Basically, each file is broken down into sections, and hovering over a section will bring up a set of tools (just a div with image buttons) that you can use to edit that particular section. We have the parent elements (sections) set as position: relative, and the set of tools set as position:absolute which are set to the right side of the section. This all works fine, especially since many of these are rather small.

However, we do have many of these sections which can become quite large, reaching lengths of two screens or even more. In these cases we would like for the tools to sort of flow with the user's scrolling, so say if the user is looking at the vertical-middle of the section, the buttons will rest at the vertical middle as well, however, if the vertical center of the user's screen scrolls past the section but the user is still hovering over the section, we would like for the tools to remain within their parent element and not be able to pop out.

We already have a script to move an element with the user's scroll if it goes out of the screen, so I was thinking I could modify that a bit to do that, I'm just not sure how to bound the element by it's parent.

TL;DR: How would I create an element that attempts to be vertically centered in the user's window, but cannot leave it's parent element.

score 1 · Answer 1 · answered Jul 08 '11 at 14:05

1

Keeping it vertically aligned but only displayed when the section is hovered wouldn't do the trick?

answered Jul 08 '11 at 14:05

monsieur_h

1,360
1
10
20

No, the section is not guaranteed to be in the middle of the screen, since many of these may only have one line of text in them. The tools are also hidden when no section is being hovered over, so it wouldn't be possible to get to them if they were outside of the section. The same set of buttons is also shared and reused, so without them in the correct place, a user would not be able to determine which section they were actually editing. – shmeeps Jul 08 '11 at 14:13
Then you can try to make it `position:fixed;`once it's off the screen. But it will involve jQuery, or at least JS. See a simplified example [here](http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to) but thus it's only a workaround. – monsieur_h Jul 08 '11 at 14:39

score 1 · Answer 2 · answered Jul 08 '11 at 14:08

This sounds like a manual positioning. You could use jquery to get the size of the browserwindow, get the scroll offset of the parent and calculate the top of the tools acording to screensize and scrolloffset value of the parent.

I don't thin css can handle this alone.

You could also just use one toolbox for all sections and pass the parent element as parameter.

Best wishes

score 1 · Accepted Answer · answered Jul 08 '11 at 15:29

Here's a quick implementation I came up with based on Andreas's suggestion

$(window).scroll(function(){
    var a = $(window).scrollTop() + ($(window).height() * .35);
    var b = $("#movedelement");
    var c = $(window).scrollTop() + ($(window).height() * .48);

    if (a < (b.parent().offset().top + 8))
        b.css({position: "absolute", top: "1em" });
    else if (c > (b.parent().offset().top + b.parent().height() - 8))
        b.css({position: "absolute", top: b.parent().height() - 100 });
    else
        b.css({position: "fixed", top: "35%" });
}

Tweak some numbers around for the element height. Dirty, but works.

Attempt to keep element in center of screen but contained in parent element

3 Answers3