Add and remove classes on resize

Question

I'm just a bit confused and can not write or simplify a jQuery code, that adds or removes classes based on the viewport size. I'm pretty sure there's a simpler and more efficient way to write that trivial code. Unfortunately I can not get it.

Here is the current status:

    // initial state
    if ($(window).width() <= 900) {
        $('.readmoresection span.handler').show();
        $('.readmoresection').addClass('reduced');
    }else{
        $('.readmoresection span.handler').hide();
        $('.readmoresection').removeClass('reduced');
    }       

    // on resize
    $(window).on('resize', function(){
        if ($(window).width() <= 900) {
            $('.readmoresection span.handler').show();
            $('.readmoresection').addClass('reduced');
            if($('.readmoresection').hasClass('reduced')){
                $('.readmoresection span.handler').html(' » Weiterlesen');
            }else{
                $('.readmoresection span.handler').html(' » Schließen');
                $('.readmoresection').removeClass('reduced');
            }
        }
        else{
            $('.readmoresection span.handler').hide();
            $('.readmoresection').removeClass('reduced');
        }   
    });

Does anyone know a cleaner way?

if($('.readmoresection').hasClass('reduced')) is always true since you add the calss right before you check the condition. this is probably not the desired behavior — vbranden
– vbranden, Commented Dec 1, 2017 at 23:50
For each resize, I have to check if the condition is true and adjust the innerHTML --> html(' » Weiterlesen'); accordingly. It has only worked in this way so far. — Codehan25
– Codehan25, Commented Dec 2, 2017 at 0:02

Robert I · Accepted Answer · 2017-12-01 23:54:33Z

Using extract method to avoid redundancy

function onResizeReadMoreLayout(){
if ($(window).width() <= 900) {
            $('.readmoresection span.handler').show();
            $('.readmoresection').addClass('reduced');
            if($('.readmoresection').hasClass('reduced')){
                $('.readmoresection span.handler').html(' » Weiterlesen');
            }else{
                $('.readmoresection span.handler').html(' » Schließen');
                $('.readmoresection').removeClass('reduced');
            }
        }
        else{
            $('.readmoresection span.handler').hide();
            $('.readmoresection').removeClass('reduced');
        }  
}



// initial state
 onResizeReadMoreLayout();
 // on resize
 $(window).on('resize', onResizeReadMoreLayout);

Your solution is somehow the only one that works in my case. Find it also very clear and clean. Thanks a lot for this :) — Codehan25
– Codehan25, Commented Dec 6, 2017 at 8:37

chapeljuice · Accepted Answer · 2017-12-01 23:46:17Z

1

I've used matchMedia() quite a bit in the past, it works quite well: https://github.com/paulirish/matchMedia.js/

Example:

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}

Also instead of individually doing .addClass('class') and .removeClass('class') you could use .toggleClass('class').

answered Dec 1, 2017 at 23:46

chapeljuice

\$\begingroup\$ this definitely doesnt answer the question. \$\endgroup\$

vbranden
– vbranden

2017-12-01 23:52:12 +00:00
Commented Dec 1, 2017 at 23:52

Add a comment |

Blindman67 · Accepted Answer · 2017-12-02 05:30:34Z

1

You could reduce complexity via reducing the overall count of function calls to $. There is only one bit of missing information. The state of style.display of the handler span which will be in the CSS. As it is not clear when the code runs I can not assume it is in its initial state.

;(()=>{
    const el = {
        handler : document.querySelector(".readmoresection span.handler"),
        element : document.querySelector(".readmoresection"),
    };
    function resize(){
        if(innerWidth < 900){
            el.handler.style.display = "none";
            el.element.classList.add("reduced");
            el.handler.textContent = " » Weiterlesen";
        }else{
            el.handler.style.display = ???;   // << unknown information
            el.element.classList.remove("reduced");
            el.handler.textContent = " » Schließen";
        }
    }
    resize(); 
    addEventLisener("resize",resize);
})();

answered Dec 2, 2017 at 5:30

Blindman67

22.9k2 gold badges17 silver badges40 bronze badges

\$\begingroup\$ Unfortunately it does not work. In this way, the logic of the classes is no longer correct. They are not properly added and also the terms within .html () are not correct. Your solution does not respond to the viewport size. \$\endgroup\$

Codehan25
– Codehan25

2017-12-06 08:32:19 +00:00
Commented Dec 6, 2017 at 8:32
\$\begingroup\$ @Codehan25 Yes that is because I had no reference to the CSS, did not know initial states. I set textContent rather than HTML as I assumed you were not overwriting actual DOM elements, I used innerWidthbut I don't know your layout. Oh well you will have to continue using jQuery, however I would say it is well worth doing it the vanilla way as it greatly simplifies the code and give significant performance benefits. The above code has only 6 function calls, while your OP has ~31 function calls (excluding hidden jQuery internal calls) \$\endgroup\$

Blindman67
– Blindman67

2017-12-06 12:42:21 +00:00
Commented Dec 6, 2017 at 12:42

Add a comment |

Marc Rohloff · Accepted Answer · 2017-12-04 18:50:48Z

I tend to use toggle instead of show/hide and toggleClass instead of add/removeClass. Something like:

// initial state
var small = $(window).width() <= 900;
$('.readmoresection span.handler').toggle(small);
$('.readmoresection').toggleClass('reduced', small);

// on resize
$(window).on('resize', function() {
    var small = $(window).width() <= 900;
    $('.readmoresection span.handler').toggle(small);
    $('.readmoresection').toggleClass('reduced', small);
    if (small) {
      // note that, as someone else pointed else reduced will always be
      // true here and the `removeClass('reduced') is also redundant
      var reduced = $('.readmoresection').hasClass('reduced');
      $('.readmoresection span.handler').html( reduced ? ' » Weiterlesen' : ' » Schließen');
    }
});

You could also replace your initial state code with $(window).resize(); or $(window).trigger('resize');

I do think, however, that you would be better off doing this in CSS using a media selector.

Carl Edwards · Accepted Answer · 2017-12-02 00:02:07Z

The first thing you can do is cache the two jQuery selectors you're using. It'll save time on the multiple lookups. Since a lot of your functionality is identical on page load and resize you can consolidate it in one function and call it as needed (keeps things nice and DRY).

I also added a few default variables: one, a variable to set whether or not to fire your resizing logic and another for your breakpoint value in the event you want to change it in the future.

$handler = $('.readmoresection span.handler');
$readMoreSection = $('.readmoresection');

toggleState();

$(window).on('resize', toggleState.bind(null, true));

function toggleState(resizing = false, breakpoint = 900) {
 if (window.width <= breakpoint) {
   $handler.show();
   $readMoreSection.addClass('reduced');

   if (resizing) {
     if ($readMoreSection.hasClass('reduced')) {
       $handler.html(' » Weiterlesen');
     } else {
       $handler.html(' » Schließen');
       $readMoreSection.removeClass('reduced');
     }
   }
 } else {
   $handler.hide();
   $readMoreSection.removeClass('reduced');
 }
}

Have tried your suggestion. However, nothing works now. The readmoresection is no longer visible and the classes are not added properly. — Codehan25
– Codehan25, Commented Dec 6, 2017 at 8:27

Stack Exchange Network

Add and remove classes on resize

5 Answers 5

You must log in to answer this question.

Hot Network Questions

Add and remove classes on resize

5 Answers 5

You must log in to answer this question.

Related

Hot Network Questions