jQuery pulgin contentflow for div
<p>I`m a beginner in web design.
I have used a plugin "ContentFlow". But I have some problems.</p>

<p><strong>index.jsp(HTML)</strong></p>

<pre><code>&lt;div id="ajax_cf" class="ContentFlow"&gt;
&lt;div class="flow" id="myFlow"&gt; &lt;/div&gt;
&lt;div class="scrollbar"&gt;&lt;div class="slider"&gt;&lt;div class="position"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="itemcontainer" style="height: 0px; width: 0px; visibility: hidden"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>index.jsp(JavaScript)</strong></p>

<pre><code>var g_ajax_cf = "";

var loadContentFlow = function loadContentFlow(){
    var result = jQuery.ajax({
    type : "POST",
    url : "./ContentFlow.jsp",
    async : false,
    cache : false,
    dataType : "html",
    timeout : 60000, 
    global : false, 
    }).responseText;
    jQuery("#itemcontainer").html(result);

    var ic = document.getElementById('itemcontainer');
    var is = ic.getElementsByTagName('div');
    var k = 0;
    var n = is.length;
    for (var i=0; i&lt; n ; i++ ){
    k=(i*3)+1; 
    if(k&gt;n){
        break;
    }else{
        g_ajax_cf.addItem(is[k], 'last');
    }
    }
};


var closeDiv = function closeDiv(data){
    var parentDiv = jQuery(data).parent();
    g_ajax_cf.rmItem(parentDiv.attr("id"));
};


jQuery(document).ready(function(){
    g_ajax_cf = new ContentFlow('ajax_cf');
    loadContentFlow();

});
</code></pre>

<p><strong>ContentFlow.jsp</strong></p>

<pre><code>&lt;%for(int i=0;i&lt;10;i++){%&gt;
    &lt;div class="item"&gt;
        &lt;div class="content" id="content&lt;%=i%&gt;"&gt;DIV &lt;%=i %&gt;
            &lt;div class="xBtn" id="xBtn&lt;%=i%&gt;" onClick="closeDiv(this);"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;%}%&gt;   
</code></pre>

<p><strong>contentflow.js(34x Line)</strong></p>

<pre><code>    if ($CF(D).nodeName == "DIV") { //modify
//  if ($CF(D).nodeName == "IMG") { //original
    var A = document.createElement("div");
        A.className = "item";
        var I = D.parentNode.replaceChild(A, D);
        I.className = "content";
        A.appendChild(I);


        if (D.title){
            var F = document.createElement("div");
            F.className = "caption";
            F.innerHTML = D.title;
            A.appendChild(F)
        }
        D = A
    }
</code></pre>

<p><strong>contentflow.css</strong></p>

<pre><code>/*orginal*/
/* .ContentFlow .flow .item div.content {
    width: 100%; 
    height: 100%; 
 } 
*/


/*modify*/
 .ContentFlow .flow .item{
    width: 100%; 
    height: 100%;
 }
div.content {
    width: 474px;
    height:293px; 
    text-align:left;
    color:#1E90FF;
    background-image: url("../picture/tab_image.png");
    cursor:default;
} 


div.xBtn{
    position:absolute;
    width:100%;
    height:100%;
    margin-top:-17px;
    margin-left:452px;
    background-image: url("../picture/xBtn.png");
    background-repeat:no-repeat;
    cursor:pointer;
}
</code></pre>

<p>If I insert alert() code in the ready() or I minimize and maximize the browser(IE),
the contentflow is operated correctly.</p>

<p>What is the problem? And how can I fix it?
Please help me.
Thanks.</p>
