Easy justify elements with jQuery

 
Sometimes, especially when working with dynamic data and displaying it within objects with defined static width could be not nice to our eyes. Sometimes we don't want to use old tables which were the easy solution for that backdays.

This little script comes in handy - only 332 bytes! - but what a relief

Let's say we have some code:

<span>
    <label>Telefon komórkowy: {/label>
    <input>
{/span>

<span>
    <label>ICQ:{/label>
    <input>
{/span>

 

And the styles:

label{
    float:left;
    display:block;
    margin-right:5px;
    }
span { display:block; }
 
Now it looks like this:

before jquery auto align

We include our script in the HEAD section:
 
<script language="JavaScript" type="text/javascript">
$('label').autoWidth();
</script>
 
of course instead of 'label' we can use other elements or class.
 
I've also added a limit option and a align mode ('left','right','center')
 
 
<script language="JavaScript" type="text/javascript">
$('label').autoWidth({limit: 200, align: 'left'});
</script>

 

 

This work like that: the script counts the width of given elements and choses the maximum width of those elements he can find (if it's not bigger than the limit). Next he sets the width of selected elements and align them if defined.

 

And looks like that: 

after jquery auto align

If you like click HERE to download the script.