Pull value from an HTML data attribute into a jQuery plugins options array

Question

Many jQuery plugins have an options array which allows you to specify certain settings.

Is it possible to write a function directly into the plugins options array to add a value from an HTML data-attribute? or pull any HTML content for that matter?

Example:

The following is for the Circliful plugin which creates a simple circular chart based on the percentage value you specify in percent: which obviously wants an integer.. but what I'd like to do is pull a value from the DOM and add it as the percent value.

I've wanted to do this on a number of occasions but I've always ended up finding workarounds, it'd be great to know if it's possible.

$(document).ready(function() {
    $("#your-circle").circliful({
        animationStep: 5,
        foregroundBorderWidth: 5,
        backgroundBorderWidth: 15,
        percent: 50 //get value of a data attribute and put it here
    });
});

madalinivascu · Accepted Answer · 2016-11-04 09:23:28Z

2

from the plugin documentation you seem to do this by default using data-percent attribute

see:https://github.com/pguso/jquery-plugin-circliful#data-attributes

or you can create a global variable and pass the value to the property:

$( document ).ready(function() {
        var percent = $("#your-circle").attr('data-percent');
        $("#your-circle").circliful({
        animationStep: 5,
        foregroundBorderWidth: 5,
        backgroundBorderWidth: 15,
        percent: percent //get value of a data attribute and put it here
});
});

(note: seems that the data-attributes only work with a earlier version of the plugin )

edited Nov 4, 2016 at 9:23

answered Nov 4, 2016 at 9:11

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

1 Comment

Bevels Over a year ago

This works perfectly! I can't believe it's as simple as adding a var. I was seriously over-complicating it in my head. Thanks very much Madalin.

wscourge · Accepted Answer · 2016-11-04 09:11:15Z

1

You can always read element data from your DOM. It's type is string, so some parsing may be needed tho. You might need to save it somehow beforehand, but if you load your scripts in $( document ).ready(function( //scripts )) it should work fine.

<div id='element' data-abc='def'></div>


percent: $('#element').data('abc')

answered Nov 4, 2016 at 9:11

wscourge

11.4k17 gold badges65 silver badges87 bronze badges

3 Comments

Bevels Over a year ago

This works as well and it's such a simple, clean approach. Madalin submitted a correct answer quicker so I accepted it.. not familiar with S.O. etiquette when it comes to marking or voting answers?

wscourge Over a year ago

Thanks, I am not familiar as well and it doesn't really matter as anyone who is looking for an answer will get it here anyway :)

Bevels Over a year ago

Great attitude! We need more selfless people in the world. Thanks again for your help.

marcinrek · Accepted Answer · 2016-11-04 09:15:53Z

0

Have you tried:

<div id="your-circle" data-percent="50"></div>

$("#your-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: parseInt($(this).attr('data-percent'),10)
});

?

answered Nov 4, 2016 at 9:15

marcinrek

3491 silver badge9 bronze badges

1 Comment

Bevels Over a year ago

Interesting approach. I couldn't get it to work, the percentage counter just keeps counting up indefinitely :-S

Collectives™ on Stack Overflow

Pull value from an HTML data attribute into a jQuery plugins options array

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related