close button moving to keep from overlaying content?

[focusede]

Hi there

I have an issue where in certain popups the close button location conflicts with the appearance of a scroll bar. For now I brute forced a fix, which is in certain popups to go after the #cboxClose element and bump it into place. I would love it to be smart enough in CSS to understand it needs to move though. My code takes into account that these are scrolling elements and will need to be adjusted but there are some monster monitors that might not scroll.

In my CSS:
#cboxClose{background-position:-50px 0px; right:2px;top:1px}

and my code:
` function adjustCloseScroll() {
// called to pull close button to the left due to scroll bar
$('#cboxClose').css("right", "24px");
}

    function showPanel1() {
        var h = window.innerHeight;
        $.colorbox({
            height: h-150,
            width: 820,
            iframe: true,
            href: "panelTablet.htm",
            onComplete: function() {
                adjustCloseScroll();
            }
        });
    }`

[jackmoore]

I would love it to be smart enough in CSS to understand it needs to move though.

I feel your pain. CSS won't have awareness of that state of the scrollbar and an overlaying scrollbar isn't part of the document flow, so I don't think there is going to be a CSS-only solution. I don't really have a better solution than what you've already implemented. A couple of tweaks would be to use the onOpen callback to move the button earlier, use onClose to undo changes, and test to see if there is actually a scrollbar or not before moving the button:

function showPanel1() {
    var h = window.innerHeight;
    $.colorbox({
        height: h-150,
        width: 820,
        iframe: true,
        href: "panelTablet.htm",
        onOpen: function() {
            if (document.querySelector('html').scrollHeight > document.querySelector('html').clientHeight) {
                $('#cboxClose').css("right", "24px");
            }
        },
        onClosed: function() {
            $('#cboxClose').css("right", "");
        },
    });
}

[focusede]

thank you Jack! I had discovered that the CSS was sticking and screwing up the location for the next popup so I did implement a "shouldMove" parameter. My 1 page webapp has 3 different popup flavors so it was easier just to force the popup location myself each call vs trying to clean it up. This means it is always in the right spot.