Question about window resizing issue.

[sborrowman]

I'm using this plugin for a couple pages that I'm working on but have ran into a slight issue that I am hoping you could help me out with.
I have the animation working exactly the way I want, however, when I resize the browser a lot of the content sizes change as well. This means that all my starting and stopping points, and my transform amount all have to be different.
I see you have a refresh call, which looks like it calls the init again, but is there a way to update the data amounts before you refresh?
Thanks in advance.

[commonpike]

I'm not prinzhorn, but I had the same issue; I ended up rewriting the attributes dynamically (using jquery) before calling refresh(). That worked fine. I had to 'chain' the refresh call after rewriting the attributes, as in

setTimeout(function() { skrollr.get().refresh()},0)

probably to give the browser time to apply the DOM changes.

$2c,
*-pike

[sborrowman]

That is what I was thinking about doing as well. I already have the code to remove all the current attributes but had hoped there would be an easier way hah.

[sborrowman]

pike67, how were you able to get it to work? For some reason, mine only seems to work the first time you resize. If you resize again it breaks. I have my code setup to remove all the data tags, then check to see if you're done resizing. When that check passes, it reloads all my functions that I need to change content heights and add my data tags for skrollr but I still end up with extra data tags and the wrong skrollr amounts.

[commonpike]

My question about this was here .. #387

Let me see if I can paste code here:

Suppose you want to change the attributes on an element called $elm:

    // zap existing attributes
    var attrs = $elm.get(0).attributes, anames = [];

    // harvest first
    for (var ac=0;ac<attrs.length;ac++) {
        if (attrs[ac].name.match(/data-\d+/)) {
            //console.log('rem '+attrs[ac].name);
            anames.push(attrs[ac].name);
        } else {
            //console.log('ign '+attrs[ac].name);
        }
    }

    // now remove
    for (var ac=0;ac<anames.length;ac++) {
        $elm.removeAttr(anames[ac]);
    }

    // write new attributes
    with (your_logic_here) {
        var newcss = your_logic_here();
                    var newoffset = your_logic_here();
        // set the attribute
        $elm.attr('data-'+newoffset,newcss);

    }

And then, when all is done,

    setTimeout(function() { skrollr.get().refresh()},0)

This worked throughout ie7 to ipad. There may be typoos in the above code .. it was abstracted from my thing.

[sborrowman]

I used an each function instead of a for loop. Like this:

         $('.skrollable').each( function() {
            var $skroll = $(this);
             $.each( $skroll.data(), function( key ) {
              $skroll.removeAttr( 'data-' + key );
               });
        });

Maybe I'll try the for loop though. Mine doesn't seem to be working exactly the way I want it to. Sometimes it only removes one of the data attributes instead of both.

[commonpike]

That would also remove any other data- attributes, but if you dont care, thats ok. Mine checks for data-xxx where xxx is numeric.

[sborrowman]

Ya, I don't have any other data attributes so I built mine as kind of a "remove all" function. Either way, I still can't get it to work the way I need it to. When the window resizes, my function that adds the data attributes seems to add them before my function can remove them all so I end up with way too many and my skrollr gets messed up.

[sborrowman]

Now I'm just really confused. I have been able to get it to work sometimes the first time the browser is resized, but it never works any time after that.
I may have to switch to a different plug in to get my animations to work because I have to be able to reset the values when the window is resized. It's a shame because on initial load, this plugin works great.

[Prinzhorn]

Try this: Listen to the resize event yourself and call refresh. Here's an example with underscore (there are other (stand-alone, jQuery, etc.) debounce implementations as well)

window.addEventListener('resize', _.debounce(function() {
    //Update data attributes here.

    skrollr.get().refresh();
}, 300), true);

Debouncing is needed because some OSs (e.g. Windows) fire resize events constantly while resizing, but you don't want to re-parse all elements all the time.

[sborrowman]

The issue isn't updating all my variables, the issue is that I can't seem to update the data attributes that skrollr is using. Most of my vars I want to update constantly while resizing because I'm changing a bunch of images and content blocks depending on the height of the window. This code works fine, however, once all my heights change, the starting and stopping points of my animations, as well as how much they animate, also needs to change. I can't just add new data attributes, and I can't seem to remove them before I add them again and get skrollr to update.

After a bunch of testing, I'm noticing that, even though I'm adding the data attributes with jqeury on load, when I remove them and re-add them, my script to detect them is no longer seeing them.

[Prinzhorn]

my script to detect them is no longer seeing them

Could you share your script? Do you by any chance use .data() ?

Edit: Well, seems like you do. Read the docs about it again http://api.jquery.com/data/

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

You need to use .attr()

[commonpike]

Oops, yes, forgot to mention. it seems <a data-123="foobar"> did not always return as $a.data('123') in jquery. Which I figured was a jQuery issue (after all, '123' is a weird variable name, too). So I loop the attributes in my loop above, not the .data() object.

[sborrowman]

Ya, I use .attr() to add the values and .removeAttr() to get rid of them.
My code to add them looks something like this:

$this.attr('data-' + start, 'transform:translateY(' + windowHeight + 'px)').attr('data-' + end, 'transform:translateY(-' + (windowHeight * 0.75) + 'px)');

and my code to remove them is what I showed you earlier:

$('.skrollable').each( function() {
    var $skroll = $(this);
    $.each( $skroll.data(), function( key ) {
       $skroll.removeAttr( 'data-' + key );
     });
});

[Prinzhorn]

and my code to remove them is what I showed you earlier:

Which is using .data(), which does NOT reflect the data attributes.

[sborrowman]

I figured out the problem, or at least the solution. I need to add both the .attr('data') and the .data() at the same time, with the same information. Then remove them both at the same time.

[KevinOrfas]

Hi guys, Could you post the solution snippet? #sborrowman

[sborrowman]

I ended up adding both .attr('data') and .data to the elements. So, a line of code would look something like $(element).attr('data-0', 'transform:translateY(0px)').attr('data-' + stop, 'transform:translateY(-' + $(element)outerHeight() + 'px)').data('0', 'transform:translateY(0px)').data(stop.toString(), 'transform:translateY(-' + $(element).outerHeight() + 'px)');
On resize, I would remove both attr and data with:

clearTimeout( checkResize );

checkResize = setTimeout(function() {
    $('.skrollable').each( function() {
        var $skroll = $(this);
        $.each( $skroll.data(), function( key ) {
            $skroll.removeAttr( 'data-' + key );
            $skroll.removeData();
        });
    });
}, 250);

Then, call my function that adds them again.

Basically, I had to add and remove both attr and data every time the window resizes. I hope this helps.

[KevinOrfas]

Thanks a lot mate, that was helpful.

[AlexandraKlein]

$(function() {
skrollr.get().refresh();
});

Putting that after init did it for me.