jQuery Forum

Hi,

I'm not totally new to using jQuery, but I'm wondering if somebody can do the usual sanity check of seeing if this is already done and if it would work and is a good idea.

The idea:

It has to do with absolute positioning.  Say you have a div and want to place things in it at a given position.

Here's the series of steps I tool late that night:

1. Ok, we want absolute positioning.  Probably the most common is using css classes, column divs, etc.
2. There are *lots* of details left out for brevity.  This is absolutely *not* cut-and-paste code.
   
3. So I start going down this path and say, OK, so we split the screen into strips using a div that is set at a certain distance from the left margin and everything that has that class positions there, like:
   .col_10 {
     left:  10px;
   }
   
   Then your div:
   <div class="col_10">
         This starts 10 pixels in
         <img src="blah.jpg">
         More text 10 pixels in after the image
   </div>
   Lots of people have done this, and there are even some standards for how to do it.
   
4. Then, it would be neat to have an outer div and put class tags and have it driven by code:
   <div style="position: relative">
         <div style="position: absolute" class="pos_10_20">Put this text at 10,20</div>
         <img style="position: absolute" class="pos_10_40" class=">
         <div style="position: absolute" class="pos_60_60">Put this text at 60,60</div>
   </div>
   And walk through $('[class^="pos_"]), splitting up pos_xxx_yyy with a regex and putting each thing in place with a function I called vplace().
5. It would really be nice, though, to be able to take care of some other style properties like height and width and borders too.  I played with this idea using classes, but it got cumbersome fast, and the number of characters you can use in a class attribute is really limited.  Finally, I broke down and started using what I call the "ministyle" attribute:
   <div style="position: relative">
         <div style="position: absolute" ms="x:10px; y:20px">Put this text at 10,20</div>
         <img style="position: absolute" ms="x:10px;y:40px">
         <div style="position: absolute" ms="x:60px;y:60px">Put this text at 60,60</div>
   </div>
   Here, x and y simply set the "left" and "top" css properties.
   
6. Now if I could just get rid of all the style="position: absolute" (or at least shorten it down).
   I made up an object that allowed abbreviations so that the HTML started to look like this:
   <div ms="p:relative">
         <div ms="p:absolute;b:1px solid black;x:10px;y:20px">Put this text at 10,20</div>
         <img ms="p:absolute;x:10px;y:40px">
         <div ms="p:absolute;x:60;y:60">Put this text at 60,60</div>
   </div>

And voila!  No messing with css classes.  Instead of the divs forming vertical strips, they now form rectangles with things inside that you can send to absolute x, y positions.  You can nest them inside each other.  You can set position types.  Height and width.  font-xxx settings.  Colors.  The styles are a lot shorter and do more.  You only change the containing HTML at one spot, and it jumps to where you want.  IE and Firefox act pretty similar for all of the settings I checked.

Of course there are caveats.  The only really big one is this:  If you have a javascript error that stops the interpreter from running before vplace() completes, your page will look like somebody spilled a full box of web page pieces on the floor.  Nothing goes to the right place.

The function that walks through and sets positions based on the ms attribute is about 35 lines (non-minimized) and has a nice js object that turns x into "left", y into "top", etc., etc.  I could probably ask my boss at work to release the vplace function into the public or rewrite it from scratch.

Is this worth pursuing?  Would this be a plugin?  Would it be core?  I know it works, because I got it to work.