The code:
<a ng-repeat="..." href="{{...}}"></a>
I am using a plugin that requires the href attribute, so data-ng-href can't be used :(
Is there an alternative to keeping an AngularJS expression inside a href attribute, and have it validate under the W3C HTML5 validator? Thanks in advance, will mark answer as correct :)
Unless it's an absolute requirement, I wouldn't be too concerned about the standards validity of Angular templates. Strictly speaking, they aren't actually HTML5, but Angular's extension of its functionality. As far as I'm aware Angular is not designed to allow this sort of conformation. I think you'd be best just to leave validation behind.
Another opinion here,
using data-ng-href will still produce an href once the template has been initialized, so perhaps your plugin can run once the template is ready? Here is the relevant code right from the angular docs:
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
becomes
<a id="link-3" ng-href="/123" href="/123">link 3</a>
on the page.
ref - https://docs.angularjs.org/api/ng/directive/ngHref
I personally really like the fact that one can use angular and still have valid html5-
Related
I'm just starting angular and am able to display the homepage via the url: http://localhost:8002/app/#/home
Now, I want to use a name tag, to go to 'FAQ' section within the same page by using:
FAQ and <section id="faq">
However, this is not working. Can anyone please guide me here ?
You can also use $anchorScroll (better solution). You can see an sample and more details here. I don't test ng-href but i think it is bad solution.
You should write in the href attribute #/faq, with a slash.
and another issue, is using ng-href, as written in angular docs(https://docs.angularjs.org/api/ng/directive/ngHref):
Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.
I'm working on a mail server that sends HTML emails down to a mail client. Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent? The integrated browser in our custom client could inspect the HTML to determine what user agent to use and then take that into account when opening the URL.
If it's possible to add a custom (non-standard) attribute to the <a> element or possibly a child element to it, that'd work too, if it's valid to do so. Thanks in advance.
Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent?
Not in any standard way.
If it's possible to add a custom (non-standard) attribute to the element or possibly a child element to it, that'd work too, if it's valid to do so.
"non-standard" is practically invalid by definition.
There is a loophole in data- attributes (since they are defined by the specification as a way to add extensions) but:
"These attributes are not intended for use by software that is independent of the site that uses the attributes"
HTML 5 is a Candidate Recommendation, not a standard.
I need to verify using Selenium (or similar framework) that certain HTML content/items are on the page using known unique identifiers.
I have control over the generation of the HTML, so I will mark the HTML tags with an attribute, but sometimes the usual candidates of id, name etc aren't available for me to use.
Is there an industry standard for such an attribute?
If not, anyone have any good suggestions?
The attribute shouldn't collide with any known attributes of any HTML elements or affect the web experience/behaviour (I don't care if someone reads the HTML source and sees it).
Some ideas I have are:
trace
debug
uid
Here's how I would like to use it for the example identifier "123456789":
<a trace="123456789" href="http://www.someurl.com">Click me!</a>
<span debug="123456789">Hello world</span>
<strong uid="123456789">Wow</strong>
Use a HTML5 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.
More information here: http://developers.whatwg.org/elements.html#embedding-custom-non-visible-data-with-the-data-*-attributes
They won't cause any problems in older browsers: http://caniuse.com/dataset
I am trying to validate a page in which I have implemented Lightbox and W3C thinks rel="lightbox['gallery']" is invalid code. Code is :
<a rel="lightbox[gallery]" href="link-to-image">
...image...
</a>
Error:
Bad value lightbox[gallery] for attribute rel on element a: Keyword lightbox[gallery] is not registered.
Any insight into this is welcomed.
At least for me it's more comfortable to use "target" instead of "rel" or "data-rel" (which is not a standard link attribute anyway), thus still pass w3 HTML5 validation and do not mess with page's CSS setup ("class" is commonly used for layout and such). Of course all "*.getAttribute('rel')" in javascript source has to be updated accordingly.
You're trying to validate HTML5, right?
It's simple enough I'm afraid; whereas HTML4 allows pretty much any content in rel, HTML5 is much stricter and "lightbox[gallery]" isn't a registered rel type.
I've seen a fix which should work: get Lightbox to look for class="lightbox[gallery]" instead of rel="lightbox[gallery]", but so far my inept tweaks haven't worked. I'm trying to contact the Lightbox dev to ask him about this, but his forum is giving 500 errors. Not a good sign. :(
Or a better idea - in my opinion ofc - instead of rel use data-rel. But also you have to modify lightbox a little bit ;-)
With Lightbox2, you should use
<strong><a data-lightbox="lightbox[gallery]" href="link-to-image"></strong>
instead of
<strong><a rel="lightbox[gallery]" href="link-to-image"></strong>
This will validate as HTML5.
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')