0

I am looking for an alternative method to achieve a similar effect to .toggleClass(), that will toggle a specific class to an element on/off, (since .toggleClass() does not appear to be compatible with Safari.)

This is the line of code that I am using to implement the class I am wanting to toggle between:

$window.on('scroll', function() {
  div2.toggleClass('show', scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2));
});

Additionally, I have provided a more extensive snippet of this in my previous post, here: Can toggleClass Work in Safari? (JQuery)

nrweb
  • 211
  • 3
  • 15
  • 1
    You could always use an if/else paired with addClass/removeClass as an alternative. – Taplar Jun 21 '18 at 18:51
  • Thanks @Taplar, Is there any way you would be able to demonstrate this solution on my previous question (https://stackoverflow.com/q/50957582/9214076)? It has a full snippet of this script in action. – nrweb Jun 21 '18 at 18:55
  • Just take your conditional that you are using for the second argument of the toggleClass, put it as your if clause, and then depending upon if you want it to have the class if that is true or not, use the associated addClass('show') or removeClass('show') and do the opposite in the else. – Taplar Jun 21 '18 at 18:56
  • So then, the first argument would be `('show')`, and the second would be `(scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2))`? – nrweb Jun 21 '18 at 19:06
  • 1
    No, the conditional is whatever equation should decided if the show class should be added or removed. `if (whateverYourEquationIs) { div2.addClass('show') } else { div2.removeClass('show'); }` – Taplar Jun 21 '18 at 19:06
  • @Taplar Thanks for the assistance, I applied your recommendation to the snippet from my previous post, (stackoverflow.com/q/50957582/9214076), but it still does not seem to be working in Safari... Maybe I did something wrong? – nrweb Jun 21 '18 at 19:16
  • Try performing a console.log on the equation, and verify it is only returning true when it should be. – Taplar Jun 21 '18 at 19:18
  • The `.show` class is not being added or removed to the selected element in Safari, at all... – nrweb Jun 21 '18 at 19:23
  • But it works in other browsers? Did you do the console.log suggestion? – Taplar Jun 21 '18 at 19:25
  • I know that it works in most other browsers, but I am trying to make this run successfully on all modern browsers. That is why I was open to suggestions for alternative methods to `.toggleClass()` in the first place. – nrweb Jun 21 '18 at 19:28
  • I'm simply asking for confirmation that the changes still work in the other browsers, and only fail in safari. And also that you tried the console.log suggestion to see that the event is happening and that the conditional ever goes true. – Taplar Jun 21 '18 at 19:35
  • I can confirm that it is working in Firefox and Chrome, (but not Safari), and there is nothing presented as an error within the console in Safari. – nrweb Jun 21 '18 at 19:47
  • Resolved, answered here: https://stackoverflow.com/a/51005505/9214076. There was a complication with `document.documentElement.scrollTop`. By replacing it with `$(window).scrollTop()`, the script now runs smoothly cross-browser. – nrweb Jun 25 '18 at 20:48

1 Answers1

0

If I understood correctly, this should be what you're looking for. It's using the same code as you with a little change to use addClass and removeClass functions instead of toggleClass.

$window.on('scroll', function() {

    if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {

        if (div2.is(":visible")) {
            div2.removeClass('show');
        } else {
            div2.addClass('show');
        }

    }

});
Mahan_F
  • 7,839
  • 2
  • 14
  • 26
  • Thanks for your answer. Although I have tried out your solution in this fiddle (https://jsfiddle.net/tvos98zL/), the function is still not running in Safari... You can also take a look at the snippet in a previous question I've posted which further demonstrates what I'm trying to achieve, (https://stackoverflow.com/q/50957582/9214076). – nrweb Jun 21 '18 at 21:45