CODEWITHSUNDEEP
javascriptjquerycss
Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

How can I keep small divs close to resizable container border?

It's easier to explain with what I have: http://jsfiddle.net/Kuq5a/

My objective is to keep all four colored boxes at the same distance (10 px each way) from each corner of the dotted box. It is easy when the bounding box is static, but in my case it will get resized by the user, with the slider as one method.

Specifically, when the bounding box grows, I'm trying to get green to slide right, blue down, and yellow diagonally down and right.

My friend suggested using position: absolute but it is not doing what I need. Shown with gray boxes, they attach to the whole window!

Upvotes: 0

Views: 46

Answers (2)

Haru
Haru

Reputation: 1381

If you wanted to do it soley with Jquery this is how you would do it.

function resize(px) {
    $(".colorbox").css("width", px+"px");
    $(".colorbox").css("height", px+"px");
    $("#g").css("margin-left", px-100+"px");
    $("#b").css("margin-top", px-100+"px");     
    $("#y").css("margin-left", px-100+"px");
  }

Upvotes: 1

Jonny Burger
Jonny Burger

Reputation: 921

I did it: JSFiddle

I used instead of top: 10px bottom: 10px.

I am not quite sure how the gray boxes should react, so I did not change the properties of them...

Upvotes: 1

Related Questions