Is the absolute positioned element on the left or right based on its current location?

Question

Is the absolute positioned element on the left or right based on its current location?

Is there a way to assign absolute positioning with left at 0px or right at 0px depending on whether the positioned div will go outside of its container?

For example, when you right click in a browser and see the menu appear to the right of where you clicked, it doesn't go all the way to the edge of the page. Instead, it stays within the visible area.

Here's an example for illustration (Hover over boxes): http://jsfiddle.net/ueSNQ/1/

javascript jquery html css absolute

Answer 1

Answer №1

It appears that a solution involving scripting will be necessary to address the issue of an absolutely positioned div potentially extending beyond its container. While IE does support CSS expressions, you are likely seeking a cross-browser-compatible approach.

With that said, resolving this issue should involve implementing something along these lines:

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));

}

Answer 2

It appears that a solution involving scripting will be necessary to address the issue of an absolutely positioned div potentially extending beyond its container. While IE does support CSS expressions, you are likely seeking a cross-browser-compatible approach.

With that said, resolving this issue should involve implementing something along these lines:

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));

}

Answer 3

Answer №2

Hello there, Below are some steps you can try:

1. Start by having a container div. When right-clicking on it, show another div containing a list of menus.
2. Create variables for the left position of the container div (**contLeft**) and its width (**contWidth**).
3. Set the oncontextmenu event handler on the container div.
4. In the event handler function, store the mouse x position in **mosX** and the mouse y position in **mosY**. Position the displayed div with top as mosY and left as mosX.
5. To keep the div within the container, calculate the overall screen space occupied by the container as **totPos = (contLeft + contWidth)**.
6. Determine the screen space taken up by the menu div as **posMenu = (mosX + width of div)**.
7. If totPos is equal to or greater than posMenu, display the menu at the same top and left location using the values of mosY and mosX.
8. Otherwise, place the menu at top = mosY and left = (mosX - width of menu div).

I hope these instructions help resolve your issue.

Answer 4

Hello there, Below are some steps you can try:

1. Start by having a container div. When right-clicking on it, show another div containing a list of menus.
2. Create variables for the left position of the container div (**contLeft**) and its width (**contWidth**).
3. Set the oncontextmenu event handler on the container div.
4. In the event handler function, store the mouse x position in **mosX** and the mouse y position in **mosY**. Position the displayed div with top as mosY and left as mosX.
5. To keep the div within the container, calculate the overall screen space occupied by the container as **totPos = (contLeft + contWidth)**.
6. Determine the screen space taken up by the menu div as **posMenu = (mosX + width of div)**.
7. If totPos is equal to or greater than posMenu, display the menu at the same top and left location using the values of mosY and mosX.
8. Otherwise, place the menu at top = mosY and left = (mosX - width of menu div).

I hope these instructions help resolve your issue.

Answer 5

Answer №3

Primarily, when the container div has a specified position, position: absolute, right: 0px or left: 0px will be relative to the container's position. If not set, it will align with the nearest parent node in the hierarchy that has a defined position. Failing this, it will default to being relative to the body element. To pinpoint the appropriate ancestor with a set position, you must search up the chain of parent and grandparent containers. For clarification/examples, feel free to provide additional details for better assistance.

UPDATE:

Upon reviewing your provided example, it appears to mirror the scenario outlined in my initial response. Consider calculating the offsetWidth values of the parent element, adjusting the left attribute to prevent overflowing content. Alternatively, removing the left positioning and setting the right value can achieve the desired alignment. Ensuring consistent width and height adjustments may require considering corner cases for optimal results.

Answer 6

Primarily, when the container div has a specified position, position: absolute, right: 0px or left: 0px will be relative to the container's position. If not set, it will align with the nearest parent node in the hierarchy that has a defined position. Failing this, it will default to being relative to the body element. To pinpoint the appropriate ancestor with a set position, you must search up the chain of parent and grandparent containers. For clarification/examples, feel free to provide additional details for better assistance.

UPDATE:

Upon reviewing your provided example, it appears to mirror the scenario outlined in my initial response. Consider calculating the offsetWidth values of the parent element, adjusting the left attribute to prevent overflowing content. Alternatively, removing the left positioning and setting the right value can achieve the desired alignment. Ensuring consistent width and height adjustments may require considering corner cases for optimal results.

Is the absolute positioned element on the left or right based on its current location?

Answer №1

Answer №2

Answer №3

Similar questions

Does Vuejs have a counterpart to LINQ?

Struggling with z-index or float issues on Chrome and Safari with CSS styling

Stop users from skipping ahead in an HTML5 video

The background suddenly vanishes once the background-image property is set to no-repeat

Using JavaScript, concatenate text from each line using a specified delimiter, then add this new text to an unordered list element

Is there a way to have an image expand to fit the entire screen before scrolling to view another image?

Retrieve the Id value from a Kendo Hierarchical grid

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

How to Use jQuery to Detect Audio Position in HTML

Ways to retrieve the final appearance of element m in array n

When the resolution changes, the text shifts away from the bar in CSS

Show side by side using javascript

Email responses containing unidentifiable values

Steps for deactivating the click event triggered by Bootstrap Collapse API

Has $.support.fixedPosition feature been removed starting from version 1.8?

Begin by executing the initial commit task with Git through Gulp, followed by performing the

Avoid using the JavaScript 'Sys.WebForms..' function if there is no ScriptManager present on the page

Create a custom Android home screen widget using JavaScript or another programming language

Tips for automating the execution of Chrome extension code on pages with infinite scrolling

The triggering of routing in Next.js is not established by useEffect