Question

I have a web page with nothing more than pure HTML, CSS and full Javascript with Jquery and some Jquery UI effects.
The problem is that in certain places of the web page and with certain animations, the page hangs on Chrome 13 and Explorer 8; in Firefox 4/5/6 the page works just perfect. (tested only on these browsers)

Here is the main HTML page:

<div id="contentwrapper">
    <div id="contentcolumn">
        <div id="upperContent"></div>
        <div id="downContent" class="noDisplay">
            <div id="closeContent">
                <img src="@Url.Content("~/Content/images/icons/closebox.png")" alt="X" />
            </div>
            <div id="pageContent">
                @*Here goes the content*@
            </div>

        </div>
        @*Main screen content*@
        <div id="downContent_Main">
            <div id="welcomeMessage_Main" class="gradient"><h3><span></span>Welcome</h3></div>
            <div id="newsTitle_Main">News</div>
            <div id="newsBlocks_Main">
                @*here goes the news divs*@
            </div>
        </div>
    </div>
</div>

These are the styles:

    #contentwrapper
{
    float: left;
    width: 100%;
    height: 480px;
}

#contentcolumn
{
    margin-left: 270px; /*Set left margin to LeftColumnWidth*/
    height: 480px;
}

/* Breadscrumb */
#upperContent
{
    height: 20px;
    padding-left: 3px;
}

/* Option content */
#downContent
{
    height: 450px;

    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

#pageContent
{
    padding-left: 8px;
    padding-right: 8px;
    background: inherit;
    height: 428px;

    overflow: auto;
}

#closeContent
{
    height: 18px;
    padding-top: 2px;
    padding-right: 3px;
    text-align: right;
}

#closeContent img
{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Main screen content */
#welcomeMessage_Main
{
    margin: 10px 10px 0px 10px;
    height: 30px;
}

#newsTitle_Main
{
    margin: 5px 10px 0px 10px;
    height: 25px;
    border: 1px solid #000000;
    border-bottom: 0px; 

    padding: 3px 2px 0 5px;

    font-size: 12px;
    font-weight: bold;
    font-family: normal Arial, sans-serif;
    color: #FFFFFF;
}

#newsBlocks_Main
{
    margin: 0px 10px 5px 10px;
    height: 360px;
    border: 1px solid #000000;

    overflow: auto;
}

The issue is when at runtime I add new content to some of the containers using jquery:

 $.ajax({
        url: pathSite,
        success: function (data) {

            //parse string data to XML
            var xmlData = $.parseXML(data);

            var innerDivs = '';

            //read XML resultant
            $(xmlData).find('news').each(function () {
                var headText = $(this).find('header').text();
                var imageText = $(this).find('image').text();
                var contentText = $(this).find('content').text();

                //trim the text to the maximum allowed on the current container
                if (contentText.length > 205) {
                    contentText = contentText.substring(0, 205);
                }

                //concatenate the resulting news divs
                innerDivs += ('<div class="newsContainer"><div class="newsImage">' + '<img src="' + pathSite + 'Content/images/news/' + imageText + '" alt="NewsImage" />' + '</div><div class="newsContent"><b>' + headText + '</b><br/>' + contentText + '</div></div>');
            });

            //add the html content
            $('#newsBlocks_Main').html(innerDivs);

            //hide loading animation
            $('#newsBlocks_Main').hideLoading();

//Make the parent div sortable <- HERE IS THE ISSUE, NO MATTER WHERE I INITIALIZE THE SORTABLE PROPERTY: HERE OR AT DOCUMENT.READY
            $('#newsBlocks_Main').sortable();
        },
        async: true
    });

As you can see at the end of the previous block of code, I’m trying to make that new content added SORTABLE with Jquery UI, assigning the property to the parent containter div. The content is built fine on the browser but when I attempt to drag one of the new added divs, the browser hangs (Explorer, Chrome) but in Firefox it runs beautifully.

Same case when for example I try to make that dynamically added divs an ACCORDION control (assigning the accordion property to the parent div); in that case the browser (Explorer, Chrome) doesn’t even built the UI, just hangs showing no content.

Please can somebody give me a clue of what is happening here? I never have issues like these before with Jquery.

Thanks.

PD: I’m using the latest versions of Jquery and Jquery UI:

• Jquery: 1.6.2
• Jquery UI: 1.8.14

Answer 1

I found the reason of this behaviour, I forgot to mention that I was using jsTree to build a menu of the left side of the screen, and somehow jsTree conflicts with JQuery UI library causing this browser crashes.

As an advice, I recommend to use carefully jsTree; in my particular case I used DynaTree which doesn’t cause that conflict. Hope this could help somebody else.