Issue with slimScroll.js + iframe in FireFox

Question

I'm encountering an issue with slimScroll / jQuery UI in FireFox only when loading content with an iframe. The code works fine in all other browsers.

If you load the iframe normally it works fine. If you load it hidden to start with (.hide() or display:none;) it will still load, but the slimScroll draggable bar will not be shown (only the rail exists).

I assume it is a FireFox scrolling issue, or perhaps a jQuery UI draggable issue. Either way, I can't figure it out.

Script to put in the parent page (parent.html):

        $(document).ready(function () {
        var tip = $('<div id="tip" style="position:absolute;top:90px;left:190px;height:120px;' + 'width:275px;border:1px solid grey;z-index:2147483647;overflow:hidden;">' + "<iframe frameborder='0' scrolling='no' src='content.html' width='275px' height='120px' id='myiframe' type='content' style='display:block;visibility:visible'></iframe>" + '</div>');
        $('body').prepend(tip);
        $('#showtip').click(function (event) {
            $('#tip').show();   
        });
        $('#tip').hide();  //comment this line out and it works correctly...
        });

Parent page also has a link which shows the iframe:

<a href="#" id="showtip">Click to Show Iframe</a>

The content page script (content.html):

    $(document).ready(function () {
    $('#scroll').slimScroll({
        height: 95,
        railVisible: true,
        alwaysVisible: true,
        allowPageScroll: false
    });     
});

Dummy content for content.html:

<div id="scroll">This is the iframe content area <p>This is the iframe content area</p> p>This is the iframe content area</p> <p>This is the iframe content area</p> </div>

JS References needed:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript" src="https://raw.github.com/rochal/jQuery-slimScroll/master/slimScroll.min.js"></script>

That's it.

Answer 1

Generally all jQuery scrollbars calculate height/width of the container on which it is applied, to put scrollbars on them.

When you do hide() in jQuery, it does a display:none, the element is not rendered at all, and thus no height/width of its own. Therefore, you dont see a slimscroll. ( You will find similar problems with other jQuery scrolls ).

To overcome the situation, either you call $('#scroll').slimScroll() after you unhide it. In this case possible only if iframe is in same domain.

Or a better way, dont use hide(), instead use

$('#tip').css('visibility','hidden'); and $('#tip').css('visibility','visible');