Question

I have a jquery buttonset that is populated dynamically. The only problem is that if there are too many dynamically added buttons, they wrap onto the next line, and don’t do it gracefully. Here is what displays:
(element a|about|us|lorem|
|ipsum|and|done)

The main problem with this is that the element on the far right of the first line, and the element on the far left of the second line don’t have rounded corners, they have square corners like all the other button elements that aren’t in the first or last position of the buttonset. Is there anyways to get a display like so?
(element a|about|us|lorem)
(ipsum|and|done)

Thanks!

Answer 1

Using offset() as Peter said is definitely the right direction. After finding the right elements all you need to do is add the .ui-corner-right and .ui-corner-left classes.

$("#box label").each(function(){   //loop through all the labels for the buttons
    var self = $(this);
    if( self.offset().top > self.height() ){ //find the first element on the second line
        self.addClass("ui-corner-left")
        .prev().prev().addClass("ui-corner-right") // move to the previous label on the above line
        return false;  // break out of the .each
   }
});

http://jsfiddle.net/KEfau/ Of course this only works for things that are on two lines and the conidition inside the .each() might be different depending on your layout. For multiple lines of buttons I would have a variable which stores the current top offset of the line then when an element doesn’t match it do the class additions.