gabi gabi -4 years ago 175
jQuery Question

jQuery add icons inline. auto new line

I tried to find related subject with no help.

I need to build grid like in IPhone, with fixed number of columns. I need to find a solution to add it from function and want to do new line automatically.

For example, I need the grid to be 5 columns, and have 1 icon.

Calling the function will add inline, now I will have 2 icons in same line.

Calling the function 7 more times need to be 5 icons on first line and 4 icons on second line.

Does Jquery has UI handle it? Or i need to implement table and counter for column num and getting new line?

Answer Source

make the column as wide as 5 icons + margins between icons, then float each icon to the left. This should do the trick.

EDIT: a little code in order to help you.

Lets say the icons are 50px wide, with 10px of margin between each one.

HTML

<div id="iphone">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
</div>

CSS

#iphone {
    width: 290px;
    height: auto;
}

.icon {
    width: 50px;
    height: 50px;
    margin: 0 10px 10px 0;
}

.icon:nth-child(5n+0) {
    margin-right: 0px;
}

here is a fiddle in order to test it:

http://jsfiddle.net/6EkNw/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download