Question

I am using some jQuery from this site but am having problems getting it to work.

When I attempt to validate it, it throws errors with the divs included in the jQuery, however it seems fine when run within the example site.

<!-- Caption Wrap script  -->
<script type="text/javascript">
$(document).ready(function(){
    $("img.captionme").each(function(i){
        var captiontext = $(this).attr('title');
        $(this).wrap("<div class='imgpost'></div>");
        $(this).parent().append("<div class='thecaption'>" + captiontext + "</div>");
    });
});
</script>

I have tried putting the script in an external file but that doesn’t seem to fix it either.

Site is here, the script is pertaining to the image caption (blue section) but the wrap is not working.

http://www.haselden.co.uk/james/docs/

Answer 1

The problem, visually, is because of the overflow:auto; property for #portfoliowrapper div. Simply remove overflow: auto; or change to overflow:visible; and it will display properly.

When you change the overflow, you’ll need to clear your floats. Just before #portfoliowrapper closes, insert a clear (e.g. <br clear="all" /> ).

The problem, with the validator, is because the JavaScript is inline. Embed in an external file, and it will pass.