Question

How can I assign absolute left 0px OR absolute right 0px depending on if the absolute positioned div will go outside of its container div.

I guess an easy example of what I mean is: right click in your browser, see it has that menu position to the right of where you click, well not go all the way to the right of the page, instead of going outside of the page, it stays inside of it so it’s still visible.

example: (Hover over boxes)
http://jsfiddle.net/ueSNQ/1/

Answer 1

It sounds like you’ll need to use script to work the “depending on if the absolute positioned div will go outside of its container div” bit, IE supports css expressions but you’re probably after a cross browser solution.

that said it should be a simple matter of something like this

function isOverflow(parent, child){
    var left = 0;
    var op = child;
    while(op && op != parent){
        left += op.offsetLeft;
        op = op.offsetParent;
    }

    return ((left + child.offsetWidth) > parent.offsetWidth);

}

function getHoverHandler(parent, child){
    return function(){
        if(isOverflow(parent, child)){
            child.style.marginLeft = 'auto';
            child.style.right = '0px';
            child.style.left = '';
        }
    }
}

function attach(o,e,f){
    if(o.addEventListener){
        o.addEventListener(e, f, false);
    }else if(o.attachEvent){
        o.attachEvent('on'+e,f);
    }
}

var yellowElement = document.getElementsByTagName('UL')[0];
var list= document.getElementsByTagName('LI');
for(var i = 0; i < list.length; i++){
    var element = list[i];
    var tip = element.getElementsByTagName('DIV')[0];
    attach(element, 'mouseover', getHoverHandler(yellowElement,tip));

}