1

I recently downloaded a code and it shows

<button data-effect="st-effect-4">Slide along</button>

From what I figured out "st-effect-4" is a class name but can anyone tell me what this data-effect is for?

Praveen
  • 55,303
  • 33
  • 133
  • 164
Rahul Roy
  • 11
  • 1
  • 3

5 Answers5

5

HTML5 allows for custom attributes, as long as they begin with "data-". This is a custom attribute with a specific value.

mattsven
  • 22,305
  • 11
  • 68
  • 104
  • related answer: http://stackoverflow.com/questions/5032841/html5-custom-attributes-why-would-i-use-them – victorantunes Sep 20 '13 at 03:29
  • I though I could add any-named custom attribute to any HTML attribute (and HTML5 is not required )? How are HTML5 data-attributes different? – Yuriy Galanter Sep 20 '13 at 03:50
  • @YuriyGalanter Well, you can technically do that - but I think some browsers (IE probably) have issues with you just *using* custom attributes, I'm not 100% sure. HTML5 is the first version to explicitly allow for it, as well as set a method for doing so. – mattsven Sep 20 '13 at 04:21
4

Those are called HTML5 Custom Data attributes.

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes. Every HTML element may have any number of custom data attributes specified, with any value.

The reason why you can't find it in Google is because those attribute are custom attributes generated by user for there own use.

Praveen
  • 55,303
  • 33
  • 133
  • 164
2

It's not for anything.

HTML5 specifies that (just about) any element can have any "data-*" attributes it wants, which can hold any values they want (as long as they can be treated like strings, to store on the element).

So that might be part of a library, or it might just be somebody's CSS for a selector like:

button[data-effect] { background : blue; }
button[data-effect="st-effect-4"]:active { background : purple; }

Or it's being used as a query selector, in JS, for a game's controls...
Who knows?

Norguard
  • 26,167
  • 5
  • 41
  • 49
0

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

These attributes are not intended for use by software that is independent of the site that uses the attributes.

Every HTML element may have any number of custom data attributes specified, with any value.

Drixson Oseña
  • 3,631
  • 3
  • 23
  • 36
0

For Mary Lou's tutorial - this is to control the animation that brings in the menu. This can be re-assigned to other trigger elements - however the code that makes it live is the DIV element that comes just before - st-trigger-effects.

If you look through the code and the CSS that controls it, you will be able to re-assign that to where-ever you need to use it.

I am currently using this in a bootstrap boilerplate for a University project.

src: http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/

user3656233
  • 1