Question

In this jquery plugin:

http://www.stahs.org.uk/jquery.infinitecarousel.bak

There’s this line:

            $(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');

Problem is when it dumps the text node in this div, it aligns to the top of the div. I want text to align to bottom of div. So I decided to create another div within this div:

$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            console.log($('#textholder'+randID));
            $('#textholder'+randID).append('<div style="display:table-cell; height: 94.25px; width: 1000px; vertical-align:bottom;"></div>'); 

The console outputs this:

[div#textholder35196647.textholder]
[div#textholder62315889.textholder]
[div#textholder95654959.textholder]

However, my above append is not working. The nested div never shows up, so when I later do this:

                    if(t != null)
                {
                    $('#textholder'+randID+' div').html(t).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();
                }

No text becomes visible because the nested div never gets created.

So I am extremely confused. If you look at original plugin, this line works:

 $('#textholder'+randID+' div').html(t)

How is it able to target the right div here yet when I append to it right after it’s created, it doesn’t exist, as you guys suggest?

This doesn’t work either:

                var $texthold = jQuery('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0px;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
            $(obj).append($texthold);
            $texthold.append('<div></div>')

Thanks for response.

Answer 1

It appears this worked:

            function showtext(t)
            {

                if(t != null)
                {   

                    if(typeof $('#textholder'+randID).find('div')[0] == 'undefined'){
                        $('#textholder'+randID).append('<div style="display:table-cell; height: 94.25px; vertical-align:bottom;"></div>');
                    }

                    $('#textholder'+randID+' div').html(t);

                    $('#textholder'+randID).animate({marginBottom:'0px'},500); // Raise textholder
                    showminmax();

                }
            }

It’s just kind of crazy I had to resort to using typeof to check whether div is declared or not. Why the author of the plugin decided to randomly assign integers as ids of divs is beyond me. By doing that, it appears javascript has difficulty retaining the randomly created id. That’s my only explanation for the unusual behavior I could come up with.