Window width and resize

Question

I would like to calculate the number of icons eg 50px depending on the width of the window for a menu. So I started with:

$(window).width();

While loading the page with document ready function the width will be given. OK!

Now I would calculate the right amount of icons while resize the window.

$(window).resize(function() { //resize just happened, pixels changed });

Tasks

1. Initial width of the window -> if user is not resizing the window
2. Variable width of the window -> if user is resizing the window

Each task is running but i don´t get it together.

Can u help me --> THX!!

How can i calculate the number of icons with an initial width of the window and while resizing the window?

My Start:

var activeItemcount; 

                checkWidth();
                $(window).resize(checkWidth);

                   function checkWidth() {
                        windowSize = $(window).width();
                      //   console.log(windowSize); 

                        var activeItemWidth = '100';                            // width of the icons
                        var maxWidth = windowSize;                              // max div width on screen 
                        activeItemcount = maxWidth / activeItemWidth;           // max icon with actual screen width
                        activeItemcount = Math.round(activeItemcount) -1;       // calculation
                           console.log(activeItemcount);


                   var i = '0'; 

                     $('.platform-view').each(function(){
                            if(i < activeItemcount ){
                            $(this).wrapAll('<div class="iconview-1"  />');
                            i++;
                            }else{  
                                $(this).wrapAll('<div class="iconview-2" />');

                            }




                    });


                   };

Answer 1

I didn't get you clearly. but this code will return the variable width of the windows while resizing.

Jquery: $(window).resize(function() {

$('#log').append('<div>'+$(window).width()+'</div>');

});

HTML:

Example: A sample of the code

Answer 2

Place your calculation into its own function:

function calculateIcons()
{
    var viewport = { width: $(window).width(), height: $(window).height() };
    // Do cool things with viewport.width
}

And then you can simply bind this function to the DOMReady and resize functions in jQuery as follows:

$(calculateIcons);
$(window).resize(calculateIcons);