Using Javascript to move elements positioned using CSS Top Bottom Left Right

Question

I have a container that does not have any set dimensions. I want the size of the container to be driven by it's contents. Like so:

    #containerTL{
    position:absolute;
    bottom: 0px;
    right: 0px;
    margin: 5px;
    border: 1px solid black;
    cursor: default;    
    }

    #content{
    position:relative;
    background: gray;
    margin: 0px;
    top: 0px;
    height: 100px;
    width: 120px;
    cursor: default;    
    }

    <div id="containerTL"><div id="content"></div></div>

I also want to move the position of the container and have it's contents come along for the ride. Setting the position by modifying the containers style.top & style.left is easy, the problem I have is that the elements may be positioned using "bottom" or "right". Without set dimensions, the container grows, rather than move when I set the top and left properties.

I think I understand the problem. Lets say the style specifies a bottom and left position, and I update the top and left properties using javascript, the top and left properties get set, but the style specifies a bottom property.

I suppose I could always set the bottom and right properties to "auto" once I update top and left... but what if I wanted to be able to send each element back to it's original position, generically, without writing a special case for each element.

Here's a fiddle to illustrate the problem: fiddle

circusbred · Accepted Answer · 2011-08-17 14:28:21Z

3

You can do:

this.style.right = '';
this.style.left = '';
this.style.top = '';
this.style.bottom = '';

and it will unset anything you set via .style and revert back to what you defined in the stylesheet.

See this fiddle for an example. Clicking once moves it, clicking again should move it back to the original position.

answered Aug 17, 2011 at 14:28

circusbred

1,2408 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Demo

You need the following code for the other two sides

this.style.bottom = "auto";
this.style.right = "auto";

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 17, 2011 at 14:25

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Collectives™ on Stack Overflow

Using Javascript to move elements positioned using CSS Top Bottom Left Right

2 Answers 2

Comments

Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related