HTML Custom Attributes Not Working in Chrome - javascript

When using HTML custom attributes it doesn't works in Chrome.
What I mean is, suppose I have this HTML:
<div id="my_div" my_attr="1"></div>
If I try to get this attribute with JavaScript in Chrome, I get undefined
alert( document.getElementById( "my_div" ).my_attr );
In IE it works just fine.

Retrieving it via getAttribute():
alert(document.getElementById( "my_div" ).getAttribute("my_attr"));
Works fine for me across IE, FF and Chrome.

IE is about the only browser I've seen that honor attributes that do not conform to the HTML DTD schema.
http://www.webdeveloper.com/forum/showthread.php?t=79429
However, if you're willing to write a custom DTD, you can get this to work.
This is a good article for getting started down that direction:
http://www.alistapart.com/articles/scripttriggers/

Got same problem for Safari and using getAttribute(..) made the magic. It looks like cross browser compatible. Here is nice article http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

Are you declaring your page as XHTML compliant? You can't add new attributes to elements willy-nilly if you do. My understanding is that there are ways (after all, ASP.NET succeeds at it), but you have to emit all kinds of gunk (custom schema?). I'm not familiar with the details.

Related

cloneNode() issue with Chrome/IE

I am having a problem. The following javascript works in Firefox, but is returning nothing is IE and Chrome (both latest versions)
var document_copy = document.cloneNode(true);
console.log(document_copy);
I am trying to clone the entire html document.
Am I doing something completely wrong?
Update:
#CBroe came up with a work around using
document.documentElement.cloneNode(true);
IE 10 works fine for me
For chrome it is not implemented yet (since it was implementation dependent, they chose not to support it).
See http://code.google.com/p/chromium/issues/detail?id=258146
I am trying to clone the entire html document.
Clone the html node instead – document.documentElement.cloneNode(true)

Dynamically added AJAX content with wrong markup

i am using jQuery to dynamically add content
$("#articles").prepend('<article><header><p>info</p><h2>You are using Internet Explorer</h2></header><p>It is recommended that you use a modern browser like Firefox, Chrome or install Google Chrome Frame to experience better performance and advanced HTML5 and CSS3 features.</p></article>');
but the HTML i got was
notice the />
jQuery is using innerHTML, which doesn't always work with HTML5 elements even when the normal ‘shiv’ is in use. You would need another extra workaround hack, eg this.
I really don't think the proposed new HTML5 elements are ready for real-world use. They get you no practical gain yet, aren't even finalised, and cause a bunch of problems (working around which can be fragile and cost performance).
They don't really add anything semantic to your warning markup, and you're only ever showing it to IE anyway—the browser that can handle them least well of all.

CKEditor disable HTML transformation

I've got a problem with CKEditor. Especially the br- and img-Tags are transformed to not be valid.
In the source-view I see and but when I inspect the rte-source the slashes are gone as well as when submitting the form.
Can someone tell me where I can disable this or enable XHTML-conformity? The embedding page is XHTML.
Thank to any hints, ideas or solutions.
To solve this problem describe above:
This wasn't a problem of CKEditor. I did use jQuery's html-method that relies on the DOM innerHTML property to get CKEditors contents. This property seems to be unable to handle XHTML at all (tested in FF and Chrome).
You need to replace all slashes manually.

Is HTML 5 supported by all the main browsers?

I am looking at the custom attributes feature of html 5 here at this link
http://ejohn.org/blog/html-5-data-attributes/
This look like the perfect thing for when I am using jquery/javascript.
My question, Is HTML 5 supported by all the main browsers?
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>
Various portions of HTML5 are supported by the different browsers, for various definitions of 'supported'.
Several parts work right now, reliably. The data-* attributes you ask about in your question work just fine in every browser, even IE6; however, nobody yet supports the fun "dataset" method to access them. As long as you're fine with just grabbing them by the full attr name, you're golden. I use them to store state all the time in my webapps, as they're the officially blessed method for doing so.
Wikipedia has a good summary of the various support levels across browsers: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
Parts of HTML 5 are supported by Safari, Firefox and Opera, but they are not necessarily incorporating the same parts.
It seems that Firefox is the most ahead, from my experience, but it will be years before the majority of browsers users use will support it.
So, until then we will need to continue trying to use it when we can, in browsers that support the new features, and having workarounds for users that haven't updated yet, or continue to use IE.
Use some services like
http://caniuse.com/
For example for your question - http://caniuse.com/dataset
As you can see all modern browsers support it
Also you can use something like http://modernizr.com/ in your code (it's already included in http://html5boilerplate.com/)
PS: just notified that this question is too old, but it was linked to some other question i checked before
No.
The Wikipedia page "Comparison of layout engines (HTML 5)" does a good job of listing which engines have implemented which parts of HTML5.
There is currently a lot of red boxes on those tables, and that is based on the latest development version, not the version most users will be using.
Full support of HTML 5 is a way off BUT...
Creating custom attributes is nothing new and is likely to work in all the main browsers - but test to be sure that it will work in your case.
We can use HTML 5 now, just not all of it. A lot of HTML 5 is about formalising the way that HTML is currently used and ensuring backwards compatibility - so if a feature works in browsers now, use it.
Almost no web technology is completely supported by any browser; no bugs, quirks or issues.
HTML5 is designed for backwards compatibility, and it will hardly break your site (take <input type=url> for instance - non-supporting browsers show an ordinary text box, Opera lets you select an URL from history/bookmarks). I'd go by the approach: develop, try in the browsers you need to support - if it works, awesome. If not, don't use it. Just like with other specs.
HTML5 isn't even close to being completely supported on any browser yet, and some browsers (notably the IE's) have no intention of supporting it at this time.
no, not yet. wait at least until gecko and webkit support it.
ps: you could use html 5 with data attributes anyway, if you need it for javascript purposes. or choose some other unused attributes (title, abbr, ...others?)
As of August 25, HTML 5 is still a working draft.
http://dev.w3.org/html5/spec/Overview.html

How viable is ie7-js by Dean Edwards?

I just found out about ie7-js ;
IE7 is a JavaScript library to make
Microsoft Internet Explorer behave
like a standards-compliant browser. It
fixes many HTML and CSS issues and
makes transparent PNG work correctly
under IE5 and IE6.
http://code.google.com/p/ie7-js/
It looks like it's really good, but is it really working (the current issue list looks quite scary)? Have you already worked using this with success?
Another question is how slow the script will make the website in IE ?
In static pages it works pretty well. If you designed a couple of static html pages using modern browsers and standards and want it to be shown correctly in IE6 and 7 this script is gonna help you.
But, and it's a big but, if you add a little javascript to the recipe, this method shows its weaknesses. Anything added later to them DOM or any event triggered afterwards will NOT be affected by this script.
That's it. my one line recommendation is if you have simple and light pages use it. otherwise try solve your problems by looking at the roots!
I think the best answer is: try it on your website and see if it works for your particular code. If it works, and doesn't impact the speed, great, you're done. If it doesn't work, then you're going to have to spend the time to make your site work in IE.

Categories