[jQuery] Re: IE 8 chokes on HTML5 elements inserted with jQuery
Unfortunately, IE still chokes even if inserting the elements
individually with chained appends like Ricardo described. I've been
fooling around with it for a couple hours and haven't come up with a
syntax that will make it parse correctly. I'm going to try each
append as a separate statement instead of chaining them as a last
resort. If that doesn't work, I think I may have to give up on using
HTML5 for this for now - it's not worth the time it's taking. :
( Thanks again for the help.
On Sep 15, 2:35 pm, Perceptes wrote:
> Fantastic!! Thanks for those excellent replies! Much appreciated. :D
>
> On Sep 15, 12:07 pm, Ricardo wrote:
>
>
>
> > Regarding #1, he is already doing that (in html5.js). IE fails to
> > parse the new elements in innerHTML even after introducing the new
> > tags via createElement.
>
> > #2 works fine. If you provide jQuery a single tag then it will use
> > createElement, ex:
>
> > $('')
> > .append( $('').append( $(' > href="http://www.w3.org";>Guest') )
> > .append( $('').append( $('This is the comment > p>') ) );
>
> > cheers
> > Ricardo
>
> > On Sep 15, 9:29 am, Nick Fitzsimons wrote:
>
> > > 2009/9/15 Perceptes :
>
> > > > I've encountered a problem with the combination of jQuery, IE, and
> > > > HTML5 elements. HTML5 elements inserted into the page after initial
> > > > load via jQuery's DOM manipulation functions are not parsed correctly
> > > > by IE, even with Remy Sharp's HTML5 shiv script.
>
> > > The problem is that jQuery uses innerHTML, rather than DOM methods, to
> > > insert the new content (which is why it's passed to jQuery as a
> > > string). This means it relies on IE's HTML parser to correctly parse
> > > the markup from the string when it is inserted.
>
> > > When IE's parser encounters an element it doesn't recognise the name
> > > of, it creates the element as an empty element (similar to or
> > > ), then parses the content as if it were sibling nodes, then
> > > creates an empty element whose name begins with a slash (/ARTICLE for
> > > example); you can see this on your test page by clicking on the "IE
> > > fail" button and then entering:
> > > > > ame)>
> > > and
> > > > > me)>
> > > in the location bar; the first will show "ARTICLE", and the second
> > > will show "/ARTICLE".
>
> > > To work around this you basically have two options:
>
> > > 1. Before any other script is executed, add the line:
> > > document.createElement("article");
> > > and add equivalent lines for any other HTML5-specific elements you
> > > wish to use (such as section). This prompts IE's HTML parser to expect
> > > blocks with that tagName and it will then parse them correctly.
>
> > > 2. Don't use jQuery's innerHTML-dependent approach to creating new
> > > content; instead, use DOM creation methods directly, for example:
>
> > > var article = document.createElement("article");
> > > var header = article.appendChild(document.createElement("header"));
> > > header.appendChild(document.createTextNode("Hello World");
>
> > > var container = document.getElementsByTagName("div")[0];
> > > container.insertBefore(article, container .getElementsByTagName("h2")[1]);
>
> > > ... and so on. (Actually, you can use jQuery for selecting the correct
> > > insertion point and for inserting the new elements there, as jQuery
> > > can cope with elements when inserting content.)
>
> > > Regards,
>
> > > Nick.
> > > --
> > > Nick Fitzsimonshttp://www.nickfitz.co.uk/
[jQuery] Re: IE 8 chokes on HTML5 elements inserted with jQuery
Fantastic!! Thanks for those excellent replies! Much appreciated. :D
On Sep 15, 12:07 pm, Ricardo wrote:
> Regarding #1, he is already doing that (in html5.js). IE fails to
> parse the new elements in innerHTML even after introducing the new
> tags via createElement.
>
> #2 works fine. If you provide jQuery a single tag then it will use
> createElement, ex:
>
> $('')
> .append( $('').append( $('http://www.w3.org";>Guest') )
> .append( $('').append( $('This is the comment p>') ) );
>
> cheers
> Ricardo
>
> On Sep 15, 9:29 am, Nick Fitzsimons wrote:
>
>
>
> > 2009/9/15 Perceptes :
>
> > > I've encountered a problem with the combination of jQuery, IE, and
> > > HTML5 elements. HTML5 elements inserted into the page after initial
> > > load via jQuery's DOM manipulation functions are not parsed correctly
> > > by IE, even with Remy Sharp's HTML5 shiv script.
>
> > The problem is that jQuery uses innerHTML, rather than DOM methods, to
> > insert the new content (which is why it's passed to jQuery as a
> > string). This means it relies on IE's HTML parser to correctly parse
> > the markup from the string when it is inserted.
>
> > When IE's parser encounters an element it doesn't recognise the name
> > of, it creates the element as an empty element (similar to or
> > ), then parses the content as if it were sibling nodes, then
> > creates an empty element whose name begins with a slash (/ARTICLE for
> > example); you can see this on your test page by clicking on the "IE
> > fail" button and then entering:
> > > ame)>
> > and
> > > me)>
> > in the location bar; the first will show "ARTICLE", and the second
> > will show "/ARTICLE".
>
> > To work around this you basically have two options:
>
> > 1. Before any other script is executed, add the line:
> > document.createElement("article");
> > and add equivalent lines for any other HTML5-specific elements you
> > wish to use (such as section). This prompts IE's HTML parser to expect
> > blocks with that tagName and it will then parse them correctly.
>
> > 2. Don't use jQuery's innerHTML-dependent approach to creating new
> > content; instead, use DOM creation methods directly, for example:
>
> > var article = document.createElement("article");
> > var header = article.appendChild(document.createElement("header"));
> > header.appendChild(document.createTextNode("Hello World");
>
> > var container = document.getElementsByTagName("div")[0];
> > container.insertBefore(article, container .getElementsByTagName("h2")[1]);
>
> > ... and so on. (Actually, you can use jQuery for selecting the correct
> > insertion point and for inserting the new elements there, as jQuery
> > can cope with elements when inserting content.)
>
> > Regards,
>
> > Nick.
> > --
> > Nick Fitzsimonshttp://www.nickfitz.co.uk/
[jQuery] IE 8 chokes on HTML5 elements inserted with jQuery
Hi all, I've encountered a problem with the combination of jQuery, IE, and HTML5 elements. HTML5 elements inserted into the page after initial load via jQuery's DOM manipulation functions are not parsed correctly by IE, even with Remy Sharp's HTML5 shiv script. With the help of jgraham from the WHATWG IRC channel, I have set up a page that shows this problem in two cases: 1) A simplified version of the contact form from my new site where I first encountered this problem. 2) A tiny test script that shows the failure in a stripped down form. The two test cases and full details are here: http://www.jimmycuadra.com/ie8/ Thanks in advance for any insight anyone can provide in how to deal with this.
[jQuery] fadeIn() failing the second time it's called.
Hi all, I'm working on an interface with two different chains of animations. The page shows 5 pets and allows the user to click on one of them for details. When one is clicked, the other pets disappear, the selected one's image slides to the left and the content appears. When the image is clicked again, the reverse happens, the content disappears, the image slides back into its original position, and the other pets appear again. I decided to implement the code for this as a plugin, which I'm calling "Pick An Item," as an exercise in both writing a plugin and abstracting code. Everything is working as expected except for one issue I haven't been able to figure out. After you've gone through a full cycle of selecting/deselecting a pet, the next time you select that same pet, when it gets to the point where the content should appear, it doesn't. Further clicks on the selected pet do not reverse the effect like they should. Each individual pet works correctly for one open/close cycle but then fails for subsequent opens. I've gone over and over it and I don't see what's different between the initial state of the page/script and the state after an open/close cycle has finished. This is my first attempt at writing a plugin so no doubt a lot of it can be done better/more simply, but I'm hoping someone can make sense of what I've written and see where I'm getting tripped up. I've put the page online so you can see it in action: http://www.minibontown.com/dev/ and for your convenience, here is the plugin code in a pastebin: http://pastie.org/580152 Line 73 is where it fails. That call seems to have no effect the second time through. Thanks in advance for any help anyone can provide!
[jQuery] Questions on animate's callback
I have two questions about animate.
1) Animate's callback is called once for every element matched
against. What's the proper way to handle a situation where you want
some code to run only once when all matched elements' animations have
finished? In pseduocode:
$("this matches 4 elements").animate({
opacity: 0
}, "slow", function() {
// run this code only one time after all 4 matched elements have
finished fading out
});
2) In what situations would you use animate's callback vs. queue/
dequeue and vice versa? They seem kind of interchangeable to me in
terms of using them to create a synchronous chain of events. Another
pseduocode example:
Why do this:
$("element").animate({
property: value
}, "speed", function() {
// do this when animation finishes
});
vs. this:
$("element").animate({
property: value
}, "speed")
.queue(function() {
// do this when animation finishes
$(this).dequeue();
});
Thanks in advance for any insight anyone can provide. :)
[jQuery] Superfish: Hovering over top-level li stretches the li to width of its sub ul (IE7 only)
Hi all, I've got a Superfish with Supersubs horizontal menu that is having an issue I haven't been able to solve in IE7. The list items at the top level of my navigation have fixed widths to align with the background graphic, so they need to stay the same width all the time. However, when you hover over a top level list item with a child ul, the hovered li stretches out to the width of the child ul, bumping the rest of the top level items to the right. I tried disabling the JS that calls Supersubs and Superfish but this still happens. The page in question is located here: http://kc-lawyers.einsteinwebsites.com/ As an example of what I mean, hover over any menu item with sub menus, such as About or Practice Areas. I have temporarily given all list items a yellow border so it is easier to see the effect I'm describing. Anyone seen this before or have an idea what I'm missing here? Thank you!
