Positioning decorated series of div tags on screen using offset, DOM JQUERY RELATED

Question

Hi,

I am using JQuery to position a series of div tags which basically use a class inside of the tag which decorates the divs as bars. So the div is a green box based on its css specifications to the glass.

I have a list of STARTING postions,

a list of left coordiantes- for the starting points I wish to position my DIV say 556, 560, 600 these automatically are generated as left positions in a list

I have a list of ENDING postions,

a list of left coordiantes- for the ending points I wish to position my DIV say 570, 590, 610 these automatically are generated as left positions in a list

now for each start and end position, the bar(green box) i want to be drawn with its appropriate width as follows. so say f is the offset or position of the start and ff the offset or position of the end :

Below draws the green box based on only one start and end position LEFT.

 if (f.left != 0) {

                        $("#test").html($("<div>d</div>")).css({
                            position: 'absolute',
                            left: (f.left) + "px",
                            top: (f.top + 35) + "px",
                            width: (ff.left - f.left) + 25 + "px"
                        }).addClass("option1");

                    }

I am looking to loop through the list of positons in the list and draw multiple green boxs based on the positions on the screen. The above code draws just one green box from the last offset position.

Answer 1

Ok,

So loop through your array of f.

as f and ff are the same length I know that position 0 of array f relates to position 0 of array ff.

currently you are putting a div inside an element called test and then applying absolute positioning to the "test" element and then a class.

changing the code slightly instead of using html I would use append

append should leave any code you may have already added to the "test" element.

I would tend to build the entire style and class attributes at this point too.

$("#test").append("<div style='position:absolute;left:" + f[i].left + "px;top:" + ...
... + " class='optonal'>d</div>");

I may have a few syntax errors sorry about those