CODEWITHSUNDEEP
javascriptjquery
RTC222
RTC222

Reputation: 2323

Cross-browser jQuery incompatibility issue

My page has a set of links in a column on the left and a section with text on the right. The text section is marked with a placeholder called "MTX" which is replaced with content on page load and when any of the links is clicked (the links are all button clicks that call the function ShowMainText). It works fine in all Firefox versions from 56 up, but it doesn't work in Chrome or Safari browsers, or in the Apple iPhone browser.

Here is the code for the div tag:

<div class="main_text">
    <div id="C2"><span style="color:black">MTX</span></div>
</div>

Here is the jQuery code:

<script>
function ShowMainText(type) {
    var filename = "text_" + type + ".htm"
    $( "#C2" ).hide().load( filename ).fadeIn(500);
}
</script>

Here is the C2 ID css code:

#C2{
    color: rgb(117,163,126);
    font-family: camphorW01-Light,calibri,arial;
    font-size: 8pt;
    width: auto;
}

Here is the main_text class css code:

.main_text {
    grid-column: 8 / 14;
    grid-row: 6 / 19;
    overflow: auto;
    text-align: left;
    justify-items: center;
}

I think this is an issue with the jQuery line $( "#C2" ).hide().load( filename ).fadeIn(500);, but I don't know exactly what's wrong.

This code comes from a much larger project. If a complete reproducible example is needed to answer this question, I can create one and post it, but I hoped someone would know the answer because the issue seems to be limited to one line.

EDIT: Chrome 66 dev console shows this: Uncaught ReferenceError: ShowMainText is not defined at onload. index.htm(27). Here's line 27: body onload="ShowMainText(1); LinkLight();" onclick="HideDropdown_B(event); changeColor(event); changeColorBDD(event); getLastGAE(event); getFocusElement(event);">. That seems to be the problem -- Chrome 66 doesn't find this on page load, but Firefox does. I'm working on it but I'll appreciate any ideas. Thanks.

Upvotes: 2

Views: 50

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074258

If you want the fadeIn to happen after the elements have been loaded, you have to wait for them to be loaded by using load's completion callback.

$("#C2").hide().load(filename, function() {
    $(this).fadeIn(500);
});

You can use the arguments to the callback to know whether the load succeeded, see the docs for details.

Upvotes: 2

Related Questions