Проблем със slimScroll.js + iframe във FireFox

Срещам проблем с потребителския интерфейс на slimScroll / jQuery във FireFox само при зареждане на съдържание с iframe. Кодът работи добре във всички други браузъри.

Ако заредите iframe нормално, той работи добре. Ако го заредите скрито, за да започнете с (.hide() или display:none;), то пак ще се зареди, но лентата за плъзгане slimScroll няма да бъде показана (съществува само релсата).

Предполагам, че това е проблем с превъртане на FireFox или може би проблем с плъзгане на jQuery UI. Така или иначе, не мога да го разбера.

Скрипт за поставяне в родителската страница (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...
        });

Родителската страница също има връзка, която показва iframe:

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

Скриптът на страницата със съдържание (content.html):

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

Фиктивно съдържание за 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:

<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>

Това е.


iframe jquery firefox jquery-ui slimscroll
person Marc M    schedule 26.10.2012    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Обикновено всички ленти за превъртане на jQuery изчисляват височината/ширината на контейнера, върху който се прилагат, за да поставят ленти за превъртане върху тях.

Когато правите hide() в jQuery, той прави display:none, елементът изобщо не се изобразява и следователно няма собствена височина/широчина. Следователно не виждате тънък свитък. (Ще откриете подобни проблеми с други jQuery свитъци).

За да преодолеете ситуацията, или се обадете на $('#scroll').slimScroll(), след като го разкриете. В този случай е възможно само ако iframe е в същия домейн.

Или по-добър начин, не използвайте hide(), вместо това използвайте

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

person Jashwant    schedule 04.11.2012
comment
Използване на $('#tip').css('visibility','hidden'); заедно с $('#myiframe').css('visibility','hidden'); изглежда върши работа, благодаря! - person Marc M; 04.11.2012

arrow_upward
0
arrow_downward

Мисля, че рамката се добавя към тялото, но не може да се обвърже с DOM, трябва да обвържете iframe с document и да опитате

 $("#showtip").live('click',function(){

    //use .live instead of `click`
 });

Дано разбереш.

person Rajnish    schedule 04.11.2012