How to dynamically size a <ul> with jQuery?

[Eraser35]

What I Have:
I have a bunch of inline blocks next to each other like such:

_[A]__[C] _[D]_

Key:
_ = margin
[letter] = box element, <li> in my case

Question:
How do I make it so that the margins on the left and right side of my <li>’s determine the <li>’s width? So, in other words, I am looking for each box element to have a uniform width (so A, B, C, D will all have the same width value), but I would like the margins to in fact determine this value.

In effect, I would like these <li>’s to stretch the width of a larger container (box), so that their width value is maximized, but nonetheless conforms to the margins… Hope this makes sense. Let me know if you need further clarification on understanding what I am trying to accomplish.

[Stack]

Let me try to get this straight. Lets say ur using a margin of 100px, you want each of the boxes and margins to be 100px in width? are these boxes supposed to be static or dynamic? because if they are static you wouldnt need jQuery just CSS using width: 100px; margin: 0 100px;

[Eraser35]

Stack,

Thanks for your reply and trying to help. Ok, please see PhotoShop mockup below of what I am trying to accomplish. I have made a new mockup to aid in my description.

[img]https://files.getdropbox.com/u/9191/ajaxwindow.png[/img]

The green container in fact does not have a specified width, rather I have positioned it by doing Top: 2.6em, Right: 2.6em, Bottom: 2.6em, Left: 2.6em. Therefore… I cannot determine the green boxes’ width as it is dynamic (fluid) depending on the user’s browser window size. Therefore… it is making it difficult to set width dimensions for boxes X, Y, Z. I would like boxes X, Y, Z to be equal in width and span the width of the green container. In addition, another curve ball to throw in the mix here is that I would like have a margin on the left and right side of each of the boxes (X, Y, Z) of 2.6em.

Any idea how I can accomplish this? I thought jQuery might be needed here, but I have no idea how to do this. Thank you and regards.

[asp]

Hi!

I made this using plain CSS.

HTML:

Code:

• content1

• content2

• content3

and the CSS:

Code:

#wrapper {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
padding:0px;
z-index:0;
}

#main {
height:100%;
margin:2.6em;
background-color:#009900;
}

ul {
margin:0px;
padding:0px;
}

.box {
list-style:none;
float:left;
width:27%;
height:auto;
margin-left:3%;
margin-right:3%;
background-color:#0066FF;
}

I used a wrapper around, and then inside it is the main div, that’s 100% width but with 2.6em in margin.
The boxes are using a width of 27%, its not 33% as you’ll expect because the margin has to have some space, and that’s the problem. The margin on the boxes is not constantly 2.6em. I hope you’ll find out of it, this is the best I could do for now.

[Eraser35]

asp,

thanks for the help. though an option like this is not going to work out for me… is jQuery really my only other option?

[asp]

Oki ;) Maybe I’ll try to refine it a little. But is it that the margin always has to be 2.6em that is so important?

[Eraser35]

Yes, basically I am looking for my web application to scale well in different browsers.. for example take a look at this link:

http://jx.myofiz.com/jxviewport.html

as you can see, when you resize your browser by dragging it in the lower right-hand corner, everything expands and contracts very well and retains their specified proportions… this is why i was thinking jquery might be necessary. I believe GMail also has a similar "scaling" functionality as the above link…

[akeenlabs]

"Eraser35" wrote:

Yes, basically I am looking for my web application to scale well in different browsers.. for example take a look at this link:

http://jx.myofiz.com/jxviewport.html

as you can see, when you resize your browser by dragging it in the lower right-hand corner, everything expands and contracts very well and retains their specified proportions… this is why i was thinking jquery might be necessary. I believe GMail also has a similar "scaling" functionality as the above link…

You don’t need JavaScript at all to achieve the layout like that link, you only need CSS and some absolute positioning. If you set all four offsets (top, right, bottom, left) of an absolutely positioned box the width and height will be adjusted automatically.

[Eraser35]

I see… Though, what’s the purpose for using JavaScript in the link I posted? I don’t understand why that would be necessary then.

[akeenlabs]

"Eraser35" wrote:

I see… Though, what’s the purpose for using JavaScript in the link I posted? I don’t understand why that would be necessary then.

As is often the case, the same thing can be accomplished different ways. Maybe the example link was trying to prove a different point or eventually be used for a more sophisticated example. Either way, as is, the example link can be recreated with only CSS. I remember discovering that CSS technique while looking at how Dojo implemented some of its controls; it’s actually pretty neat IMO.

[Eraser35]

Is it safe to say that if a functionality can be accomplished with CSS it is probably a safer bet, since a user can have JavaScript disabled?

[Author]

Posts