1

I previously asked on StackOverflow about blurring some components after smooth scrolling to them thanks to Javascript. I got an answer, saw how it works in jsfiddle and was satisfied, until... I tried it on my own. I'm not sure what am I doing wrong, but in my example that solution doesn't work for most of the time. I would say it's completely random, but the truth is when I click some field on the menu and go there - it works, everything else is blurred. So I scroll to the top to see the menu again, click it again and then nothing gets blurred. Mostly it just doesn't work.

Currently I observed that it works for the first and last position from the menu, but not for middle ones. Maybe some variable has to be cleared?

var isBlurred = false;

$('#borders a').on('click', function(e) { 
    var el = $( e.target.getAttribute('href') );
    var elOffset = el.offset().top;
    var elHeight = el.height();
    var windowHeight = $(window).height();
    var offset;

    if (elHeight < windowHeight) {
        offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
    }
    else {
        offset = elOffset;
    }

    $.smoothScroll({
        speed: 700,
        offset: offset,

        // 'blur' elements after scrolling
        afterScroll: function() {
            // blur elements
            $('.item').not(el).addClass('item--blurred');

            // remember that it's blurred
            isBlurred = true;
        }
    });

    return false;
});

$(window).on('scroll', function() {
    // don't do anything if we're not in a blurred state
    if(!isBlurred) return;

    // reset everything to a non-blurry state
    $('.item').removeClass('item--blurred');
    isBlurred = false;
});

Could someone help me and see why in the previous case from here it works and in my case (here's jsfiddle) it doesn't?

Community
  • 1
  • 1
randomuser1
  • 2,733
  • 6
  • 32
  • 68
  • I tried repeatedly and did not obtain your results. Every time I would click a link, window would scroll to that item and other items would fade. If I would scroll, immediately, they would come into normal opacity. Again, I would click some other element, and it would produce result just like above. It seems to be working perfectly fine for me. – Gaurang Tandon Apr 16 '15 at 15:08
  • Same as @GaurangTandon, your fiddle works perfectly. – kosmos Apr 16 '15 at 15:21
  • Ok that's super weird, in my case - and I tested it on 2 separate machines (win+chrome and osx+safari) it doesn't work. I mean on windows it works randomly as I wrote in the original topic, but on Safari it doesn't at all.. Weird.. – randomuser1 Apr 16 '15 at 15:55
  • @randomuser1 That is super weird. What browser(s) did you test in, and more specifically, what versions? – Tim S. Apr 16 '15 at 16:51
  • Hey, I used Safari Version 8.0.2 (10600.2.5) (OS X) - scrolling works, but fade in/fade out not. I also use Chrome under OS X currently (Version 42.0.2311.90 (64-bit)), scrolling works, fading in/out randomly. I have no idea what is causing that problem.. – randomuser1 Apr 16 '15 at 17:13

0 Answers0