Forums

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

Home Forums JavaScript Random height on element

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #46072
    nuodas159
    Participant

    Hello,
    I want to ask how to do like this:

    1. IF wrapper – height: 200px – block height: 200px

    2. IF wrapper – height: 300px – block height: 300px

    3. IF wrapper – height: 50px – block height: 50px

    4. IF wrapper – height: 10px – block height :10px

    5. IF wrapper – height: 800px – block height: 800px

    and etc…

    P.S. Height numbers will be random.

    http://codepen.io/anon/pen/jFpgr

    #141272
    Paulie_D
    Member

    You can’t use the same ID more than once.

    Try it with classes?

    What is it you are trying to achieve as it may be that, perhaps, you are going the wrong way.

    #141420
    waylaid
    Member

    Here’s a codepen using jQuery (and as @Paulie_D says, classes :p)

    http://codepen.io/waylaid/pen/grEFz

    #141427
    nuodas159
    Participant

    And how to make if like this is?

    http://codepen.io/anon/pen/pDBJw

    #141432
    Paulie_D
    Member

    That really won’t work. The block will be inside the wrapper.

    So, if you get the height of the wrapper and make the block the same height it will then double the height of the wrapper and you would have to start all over again.

    As I asked before, what are you trying to achieve?

    #141435
    nuodas159
    Participant

    Amm, I need to do block(hr) height like wrapper and the block(hr) will be in wrapper. There isin’t any way to do it?

    #141438
    waylaid
    Member

    your welcome :(

    change
    var height = $(this).prev(‘.wrapper’).height();

    to
    var height = $(this).parent().height();

    and remember to select jQuery in the codepen JS menu.

    Of course if you now put content into .block it will affect the height of the wrapper so each block will look higher than the height of the content above it. You can get round that with this but it will start getting messy:

    http://codepen.io/waylaid/pen/yAjIs

    #141440
    waylaid
    Member

    hmm, posted this before you said what you wanted to do with block(hr). Do you mean you want a border under each wrapper that is the same height as the wrapper?

    #141441
    Paulie_D
    Member

    Well, I think this “block(hr) ” you are using (as I recall the concept) is a little odd as I mentioned.

    I think it would make more sense to have a set up like this…

    http://codepen.io/Paulie-D/pen/vjfGx

    …and then use javascript to determine which has the taller height (content or border) and apply a border (left or right) to whichever is tallest.

    Unfortunately, my JS is very poor.

    #141442
    Paulie_D
    Member

    @waylaid No, the block(hr) means that he, effectively, wants a vertical version of the `hr` element…essentially an `vr` which, of course, doesn’t exist.

    He’s faking it with a border….. :)

    #141443
    nuodas159
    Participant

    Amm, if there is more element I mean in wrapper, what to do then?

    #141444
    Paulie_D
    Member

    >Amm, if there is more element I mean in wrapper, what to do then?

    I think you are trying to do something that isn’t quite available as yet. CSS columns as I mentioned in your previous thread would seem to be the answer. but they aren’t fully supported as yet.

    If you have a detailed picture of what the page or section should look like (and I don’t mean a rough example in codepen) we might be able to offer suggestions.

    At the moment we come up with ideas and you keep changing it is what you want.

    Of course, you could always use an bg image. :)

    #141445
    nuodas159
    Participant

    I wrote in css topic about hr veritcal and I thought that I found good method. But I found a mistake that profile height are random I mean – PROFILE HEIGHT > MESSAGE HEIGHT. So I decided to do with javascript like you told me.

    So @waylaid could you tell me how then to do if there in wrapper are more element?
    I tried but this isin’t working.

    var wrapperHeight = $(‘.wrapper’).height();

    #141446
    Paulie_D
    Member

    Hmmm, maybe flexbox with a left border on all internal divs except the first? I will have to think although I do feel that a js solution could be found.

    #141448
    waylaid
    Member

    If you could create an example pen as @Paulie_D says, with a layout close to what you are wanting and with some example content, then we’ll have a better idea of what you’re hoping to achieve.

    At the moment I don’t see why a border on the internal divs wouldn’t do you you need. Have a look at this about border images: https://css-tricks.com/understanding-border-image/

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