How to proportions resize elements of overflow list and fit on the screen?

Question

I want to do this:

I have a inline list which N elements. Elements can be of different widths, respectively, the list can go overflow the screen. Need to set the width of each item so that all elements fit on the screen.

---

Problem:

But there was one problem. When you do resize the window to a minimum, and then again stretched to the initial width, the width of all elements is equal to - lost original proportions, unnecessarily in each list can be written in the text of various widths.

http://jsfiddle.net/v2pwww/42PdV/2/

Possible solution:

You can remember the width of each item in the array and increase the width after the collapse of the window to the width of which is stored in the array. Contact the array and list items can be a arr (N) and ul.list li: nth-child (N). Maybe there is another solution.

And I do not know how to do this, please help :)

Answer 1

I don't know if this is quite what you are after but you can use attributes to store the initial widths.

 $(document).ready(function() {
    $('ul.list li').each(function(index) {
        $(this).attr("initial-width",$(this).innerWidth());
    });

Then instead of

     $(this).innerWidth($(this).innerWidth() - res);

use

     $(this).innerWidth($(this).attr("initial-width") - res);