I'm confused with data-attributes and my task is to convert this into a html5 valid code:
<xy:search campaign="campaign-name" width="280px" height="32px">
</xy:search>
This is an advertisement and recently we wanted to validate our page but this is the last error I couldn't fix, because of the custom dtd element.
I don't want to write custom dtd file, and yes, this code must be work exactly like before changes, they have a script for this custom element, so I just want to modify the base code and "translate" it to the validator, so the element must be visible/readable somehow for the advertisor's script.
I think it can be solved with html5 data-attributes, but I don't know that method...
Any help would be appriciated.
Assuming campaign it the only attribute you need to convert... it is as simple as prepending data- to the attribute. That's all a data attribute is. Example:
<xy:search data-campaign="campaign-name" width="280px" height="32px">
And then to access the value in something like jQuery, you would use .data():
$("your element").data("campaign"); // getter
$("your element").data("campaign","new value"); // setter
Related
It's ridiculous question,have anyone seen custom attribute "data-ccp-props" in html span tag likes this?
<span data-ccp-props="{"201341983":2,"335559739":160,"335559740":233}" style="line-height: 1.4;"> </span>
I found much similar data by Google enter link description here, that custom attribute makes an error on our html editor.
Read https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.
So, these are custom attributes given by the site author and the issue is with your editor and how it processes them (or fails to do so). Nothing wrong with them being in the html.
If they are properly (as in proper HTML) set, and i do not see something wrong in your sample code, your editor should be able to handle them.
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?
HTML5 allows for custom attributes, as long as they begin with "data-". This is a custom attribute with a specific value.
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.
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?
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.
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/
I've faced two strange attributes of an html tag . They are "data-url" and "data-key".
What are they and how can they be used?
For some reasons i can't show the exact example of the HTML file I've found them in, but here are some examples from the web with such tags:
data-key
data-key
data-url
PS: I've tried to Google, but no useful results were found.
When Should I Use the Data Attribute?
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.
This time the data attribute is used to indicate the bubble value of the notification bubble.
Profile
This time is used to show the text for the tooltip.
This is the link
When Shouldn’t I Use the Data Attribute?
We shouldn’t use data attributes for anything which already has an already established or more appropriate attribute. For example it would be inappropriate to use:
<span data-time="20:00">8pm<span>
when we could use the already defined datetime attribute within a time element like below:
<time datetime="20:00">8pm</time>
Using Data Attributes With CSS (Attribute selectors)
[data-role="page"] {
/* Styles */
}
Using Data Attributes With jQuery (.attr())
Google
$('.button').click(function(e) {
e.preventDefault();
thisdata = $(this).attr('data-info');
console.log(thisdata);
});
Examples and info from here
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 their own usage.
From seeing your code it seems:
The person who has written this code, wants to store some additional
information with the elements. Not sure he may handle this in
Javascript too.
What you should do is to check the Javascript code completely,
whether he is handling those data attributes or if possible check
with him.
Since you code is using jQuery library, check for .data()
method. After a complete code review, if you find it has no use,
then feel free to remove.
data-* attributes are for adding arbitrary data to an element for use solely by the code (usually client side JavaScript) running on the site hosting the HTML.
In order to tell what the three examples you give are for, we would have to reverse engineer the code that comes with them (unless they are documented on the sites) since they don't have standard meanings.
A new feature being introduced in HTML 5 is the addition of custom data attributes. Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation). This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
We are building an image carousel, it displays clickable thumbnails that when clicked, displays the actual image. We therefore need both url to appears in the Html. Since there is no "actualImageUrl" attribute defined in the img tag, we figured out that we could build the thumbnail url like this : /thumb.png?altUrl=actualImageUrl.png. The server does not care of the actualImageUrl querystring param and we can use javascript to parse the scr attribute and figure out the actualImage Url.
How W3C valid is this ?
Changing the URL of the src attribute is perfectly valid - But you could use the data- attribute - new with HTML5 (although that doctype is not a requirement to use them) and its purpose is exactly this, from the specs :
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.
w3 specs for custom attributes
Note - you can test validation here
Anything is valid as a src attribute value, in the XHTML meaning for “valid” (a formal thing). It is also otherwise correct to have a query part in such a value and use it in client-side scripting.
But it might be unnecessarily complicated. As you are working with client-side JavaScript, you could include the URLs in a JavaScript array or object, instead of putting them anywhere in HTML markup. For example, you could use an object with thumbnail image URLs as property names and full image URLs as corresponding values, like
var fullImage = { 'thumb.png': 'actualImageUrl.png', ... }
And you would then use this object to pick up the full image URL when a thumbnail is clicked on.
For a more robust solution, which would work even when JavaScript is disabled, you would need to generate the code server-side, generating a elements around img elements.
I am seeing an anchor tag with a data-folder attribute. What is this for? I researched it but found no info on it.
Also, I see that it has a data-toggle="dropdown" attribute. I researched that and see that it is a HTML 5 attribute used with the Bootstrap jQuery plugin (dropdown.js). So it's: data-toggle="dropdown".
Departments<span class=" caret"></span>
data-folder is custom made data-* attribute that later is used by some other tool, like CSS or JS/jQuery.
By the name of this attribute folder we can tell that it's indicating some reference to folder on server system (maybe ID of departments group?). Not knowing more about what you use we can't tell exactly.
If you are using one of supportable libraries (like jQuery), than you can use Visual Events to check what events does this specific element has.
This is a Custom Data Attribute as specified in W3C HTML5 specification.
Some libraries have methods developed around these type of attributes for easy storing and retrieval of data. Look at the JQuery .data method. This method retrieves/stores values via data attributes.
In your case the the following statement will return the value 4590.
$('<a>').data('folder')