Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to dynamically size a <ul> with jQuery?

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #25174
    Eraser35
    Member

    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.

    #59320
    Stack
    Member

    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;

    #59397
    Eraser35
    Member

    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.

    #59384
    asp
    Participant

    Hi!

    I made this using plain CSS.

    HTML:

    Code:



    Test

    • 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.

    #59429
    Eraser35
    Member

    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?

    #59432
    asp
    Participant

    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?

    #59533
    Eraser35
    Member

    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…

    #59537
    akeenlabs
    Participant
    "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.

    #59553
    Eraser35
    Member

    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.

    #59554
    akeenlabs
    Participant
    "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.

    #59566
    Eraser35
    Member

    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?

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.