Garavani Garavani - 1 month ago 8
jQuery Question

Trying to remove data from a set of elements and reattach it again to each element (on window resize)

I have elements on my page with similar mark up:

<div class="myscrollEl" data-parallax='{"y": -1500, "from-scroll": 0, "to-scroll": 2700, "smoothness":24}'>


I have written the following function (argument collects all desired elements to toggle the data):

// resize parallax

var parallaxSets, parallaxRemoved;

function toggleParallax( $toggle_parallax ) {
var ww = $(window).width();
if ( ww < 1271 && !parallaxRemoved ) {
parallaxRemoved = true;
var parallaxSets = [];
$toggle_parallax.each( function() {
parallaxSets.push( $(this).data("parallax") ); // create an array field with all parallax data sets to remove and reattach
} );
$toggle_parallax.removeAttr("data-parallax");
} else {
if ( parallaxRemoved && ww > 1270 ) {
parallaxRemoved = false;
$toggle_parallax.each( function( i ) {
**$(this).data( parallaxSets[i] );** // reset parallax data to each element again / throws error
} );
};
}
};


My goal is to remove data (parallax parameters for jquery.parallax-scroll) from multiple elements on my page if the browser window gets to small. I could get to work the first part quite easily. But I have to reattach it again when the window is widened again (one time only back and forth).

It seems that my code does the job also to store the data sets (checked with console.log that returns me my array correctly):

Array (7)
0 {y: 240, from-scroll: 0, to-scroll: 5000, smoothness: 50}
1 {y: -50, from-scroll: 0, to-scroll: 500, smoothness: 50}
2 {y: -240, from-scroll: 150, to-scroll: 900, smoothness: 50}
3 {y: -300, from-scroll: 1050, to-scroll: 1270, smoothness: 50}
4 {y: -500, from-scroll: 420, to-scroll: 1500, smoothness: 50}
5 {y: -460, from-scroll: 3000, to-scroll: 3200, smoothness: 50}
6 {y: -500, from-scroll: 270, to-scroll: 3600, smoothness: 50}


But in the following line it stucks:

$(this).data( parallaxSets[i] );


with this error: “TypeError: undefined is not an object (evaluating 'index')”
and I cannot get ahead of it why. My plan was to reattach each data set again to each element.

Maybe there is some syntax error here?
Thanks very much for help!

EDIT

With the help of charlietfl’s idea (Thanks man!) I got it to work like this:

var $toggle_parallax = $("#element_1, #element_2");

$toggle_parallax.each( function() {
$(this).data('backup',$(this).data('parallax'));
} );

toggleParallax( $toggle_parallax );
$(window).on('resize', function() {
toggleParallax( $toggle_parallax );
} );

// resize parallax
var parallaxRemoved;
function toggleParallax( $toggle_parallax ) {
var ww = $(window).width();
if ( ww < 1271 && !parallaxRemoved ) {
parallaxRemoved = true;

$toggle_parallax.each( function() {
$(this).removeAttr("data-parallax").removeAttr("style");
} );
} else {
if ( parallaxRemoved && ww > 1270 ) {
$toggle_parallax.each( function( i ) {
$(this).attr('data-parallax',$(this).data('backup') );
} );
parallaxRemoved = false;
}
}
};


The trick was to change this line:

$(this).data('parallax',$(this).data('backup') );


into that:

$(this).attr('data-parallax',$(this).data('backup') );


Then it worked even if it irritates me that DOM elements afterwards look like that: … data-parallax="[object Object]" …

Guess it is the way the plugin handles data.
But it works, so thanks to you guys!

Answer

If removing the attribute is critical, just store the data on the same element with a different key.

On page load

 $('[data-parallax]').each(function(){
    $(this).data('backup',$(this).data('parallax'));
 });

Then to reset

$toggle_parallax.each( function( i ) {
     $(this).data('parallax',$(this).data('backup') );
});