CODEWITHSUNDEEP
jqueryappendmarkupvalidation
Robert McMahan
Robert McMahan

Reputation: 15

JQuery function is breaking html while appending?

If you look at my code it looks fine.

This is what I'm putting in the source:

<ul id="blinds1" class="window"></ul>

This is a rough idea of what the browser spits out after the jQuery is run:

<ul id="blinds1" class="window">
<li style="background-position: 0px 0px;" class="image"></li>
<li style="background-position: -40px 0px;" class="image"></li>
</ul>

This is the jQuery I'm using:

$(document).ready(function(){
   $(".window").addBlinds();
});

jQuery.fn.addBlinds = function() {
    if ( this.exists() ){
        return this.each(function() {
            var ul = $(this), sect = 0, size = 12, loc = 0, time = 200;

            addSection();

            function addSection() {
                if (sect < size) {
                    setTimeout(function(){  
                        var section = $("<li />")
                        .css({backgroundPosition: loc+"px 0px"})
                        .addClass("image");
                        ul.append(section);
                        section.slideDown(time, "swing");
                        loc-=40;
                        sect++;
                        addSection();
                    }, time);
                }
            };

            ul.append("<div class='clear' />");
        });
    } else { return false };
};

.exists() was a little plugin I created just for the sake of not confusing myself later on when I look at my code.

Oooookay! Now to the point that has me stumped. For some reason when I go to the markup validation I get this:

Line 61, Column 41: end tag for "ul" which is not finished

URL of page in question: http://www.blanktree.com/about/

URL of validation page: http://validator.w3.org/

Can anyone help me out here? What the heck is going on? hahaha

Somewhat Resolved:

Apparently there has to be an existing child <li></li> in the parent <ul></ul> even before the javascript is called for it to accept it as valid code. I simply put an empty child in there to clear the error. However.... This is more of a work around than a resolution. This seems like an issue with the validator more than it is with my code. Is there a better way I should be going about this?

Help is appreciated.

Upvotes: 0

Views: 220

Answers (3)

Buildstarted
Buildstarted

Reputation: 26689

You're adding a div tag inside the ul. You probably meant to call after()

ul.after("<div class='clear' />");

You could also use any developer tools such as Firebug or what not to view the html source and confirm check to see where the error might lie.

ADDITIONAL ANSWER

ul and ol 's are required to have children otherwise it's invalid. To solve this you could wrap your ul in a div and add the ul via javascript as well rather than inserting the ul in code by default.

Upvotes: 1

Athena
Athena

Reputation: 3188

I don't think there's any way to make an empty list (as-is) valid. You can either:

  • creating a temporary empty li (as you've already discovered)
  • use a placeholder div, and either append the ul to it, or replace the div with the ul, in the addBlinds plugin.

Upvotes: 0

John Boker
John Boker

Reputation: 83709

the problem might be your ul.append(...);

append puts whatever you have passed in inside the element.

maybe you want ul.after(...);

Upvotes: 0

Related Questions