Here is a jsfiddle where you can see the following code in action. I

Question

0

Editorial Team

Asked: June 11, 20262026-06-11T17:42:58+00:00 2026-06-11T17:42:58+00:00

Here is a jsfiddle where you can see the following code in action. I

0

Here is a jsfiddle where you can see the following code in action.

I try to resize the selected boxes using jquery when the window resize event is triggered.

But it is only the first box with the ‘selected’ class that is affected. Why is this?

How can I make other boxes with the same class work?

Html

    <ul class="selection">
        <li class="selected">selected 1</li>
        <li>2</li>
        <li class="selected">selected 3</li>
        <li class="selected">selected 4</li>
        <li>5</li>
        <li class="selected">selected 6</li>
    </ul>

JQuery

 $(window).resize(function(){


        $(".selected").each(function() {

            //Define ratio & minimum dimensions
            var minwidth = .5*(1024);
            var minheight = .5*(600);
            var ratio = 600/1024;

            //Gather browser and current size
            var imagewidth = $(this).width();
            var imageheight = $(this).height();
            var browserwidth = $(window).width();
            var browserheight = $(window).height();

            //Check for minimum dimensions
            if ((browserheight < minheight) && (browserwidth < minwidth)){
               $(this).height(minheight);
               $(this).width(minwidth);
            }
            else
            {    
             //When browser is taller    
             if (browserheight > browserwidth){
             imageheight = browserheight;
             $(this).height(browserheight);
             imagewidth = browserheight/ratio;
             $(this).width(imagewidth);

                 if (browserwidth > imagewidth){
                   imagewidth = browserwidth;
                   $(this).width(browserwidth);
                   imageheight = browserwidth * ratio;
                   $(this).height(imageheight);
                 }

               }

                    //When browser is wider
                    if (browserwidth >= browserheight){
                        imagewidth = browserwidth;
                        $(this).width(browserwidth);
                        imageheight = browserwidth * ratio;
                        $(this).height(imageheight);

                        if (browserheight > imageheight){
                            imageheight = browserheight;
                            $(this).height(browserheight);
                            imagewidth = browserheight/ratio;
                            $(this).width(imagewidth);
                        }
                    }
                }
                return false;
            });

            });