Adding custom data attribute to DOM element

Question

I want to add data attribute to the DOM elements with jQuery but only when the $(window).width is greater that 800px. So right now I have this code and it's not working.

Note: Chrome Developer Tools doesn't report any issues in the code.

Code:

<div id="wallpaper"></div>
<div id="wallpaper-right"></div>
<div class="container"></div>

jQuery

var width = $(window).width(),
    wallpapers = $("#wallpaper, #wallpaper-right"),
    container = $(".container");

if ( width > 800) {
    wallpapers.data("stellar-ratio") === 0.1;
    container.data("stellar-ratio") === 1;
}

Desired result in HTML after adding the data attributes:

<div id="wallpaper" data-stellar-ratio="0.1"></div>
<div id="wallpaper-right" data-stellar-ratio="0.1"></div>
<div class="container" data-stellar-ratio="1"></div>

Tiki-Web · Accepted Answer · 2014-10-07 16:58:48Z

4

To set a value to a data attribute, you should pass it as the 2nd parameter in .data() method :

wallpapers.data("stellar-ratio", 0.1);
container.data("stellar-ratio", 1);

What you have written here is comparing values and type between data-stellar-ratio and 0.1 or 1.

Here's the doc for .data().

answered Oct 7, 2014 at 16:58

Tiki-Web

1068 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

collab-with-tushar-raj · Accepted Answer · 2014-10-07 17:02:57Z

1

You can also try this

   if ( width > 800) {
        wallpapers.attr({"data-stellar-ratio":"0.1"});
        container.attr({"data-stellar-ratio":"1"});
    }

answered Oct 7, 2014 at 17:02

collab-with-tushar-raj

1,31211 silver badges22 bronze badges

Comments

Marcelo Biffara · Accepted Answer · 2014-10-07 17:00:26Z

1

to set a data value, you need to pass it as the second parameter of the method

var width = $(window).width(),
    wallpapers = $("#wallpaper, #wallpaper-right"),
    container = $(".container");

if ( width > 800) {
    wallpapers.data("stellar-ratio",0.1);
    container.data("stellar-ratio",1);
}

answered Oct 7, 2014 at 17:00

Marcelo Biffara

8314 silver badges8 bronze badges

Collectives™ on Stack Overflow

Adding custom data attribute to DOM element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related