Thursday, August 27, 2009

Box with Corners and Borders and JavaScript Pin Layout.

Requirements:
I am making project where I needed to make such Layout environment:

  • Layout consists of boxes (divs) that are could be pinned to the borders (sides) of it's container. (for the first time there could be only one container and all divs inside it)
  • If box pinned to right border it should stay on the save length from right border. Same for left, bottom and top.
  • If box pinned to right and left at once, than it should also be always at same lengths from right and left borders. In this case only width should change. Same for top and bottom.
  • If box doesn't pinned to any border, than it should always be in the same place (in percentage to container size).
Also there special requirements to the box itself:



  • Box should consists in most of 10 peaces: 4 borders, 4 corners and center zone.
  • For each zone css background property could be assigned (with tiled picture or color)
  • All except center zones could be omitted.




Box with Corners and Borders
I will start with last requirement. I've made it with CSS and JavaScript. I wrote jQuery plug-in and some CSS that helps with all this.
I've made 2 example demos. For both I used jQuery UI resizable feature. It is just to show dynamics. I didn't fit my work to work in IE like browsers. It works only in normal browsers. =)
JavaScript part only wraps given element with divs, special styles and classes. Everything else is CSS only.

In first demo I've used color to show different parts of box. Try to drag sides of the box to see how it goes.
In the second demo I've used some kind of life demo.

You can find jQuery plug-in here. And CSS for it here.


Usage is follows:
$("#box2").addBorders({
top:{
size:10,
background:"rgba(255,125,0,0.5)"
},
right:{
size:10,
background:"rgba(125,125,0,0.5)"
},
bottom:{
size:10,
background:"rgba(125,255,0,0.5)"
},
left:{
size:10,
background:"rgba(255,0,255,0.5)"
},
center:{background:"rgba(255,0,0,0.5)"},
tl: { background:"rgba(0,0,255,0.5)"},
tr: { background:"rgba(0,0,255,0.5)"},
bl: { background:"rgba(0,0,255,0.5)"},
br: { background:"rgba(0,0,255,0.5)"}
});

TL = Top Left Corner, TR = Top Right Corner and so on.
You can omit any of the: top, right, bottom, left. If you omit top and right than top-right corner won't appear. Also as you see you don't need to provide size for corner blocks, it takes values from sides it produces.

JavaScript Pin Layout
Second part of the whole requirement is Layout system, where each element could be pinned to one of the sides of the container it contains.
I've implemented with JavaScript using event of the object called "propertychange" (in FF it called DOMAttrModified). This event triggered when object changes one of it's properties. I used already written jQuery plug-in that implements this part. I used it to watch for sizes of the container box. When it changes I change coordinates and dimensions of child boxes.

Here you can find demo.


In this demo 4 boxes behave differently.

  • Top-Left have no pins
  • Top-Right pinned to left and right sides. And have no top-bottom
  • Bottom-right pinned to left, top and bottom
  • Bottom-left pinned to every side.
In last demo I combine both requirements.
My jQuery plug-in is here. It depends on this plug-in. Two global parameters should be set - origHeight and origWidth that define size of parent box.
I didn't define any licensees. If you need it I can add any.

No comments:

Post a Comment