Проблема шрифта Face с высотой jQuery - неверное значение до второй итерации - PullRequest
Новая
       3

Проблема шрифта Face с высотой jQuery - неверное значение до второй итерации

5 голосов
/ 05 декабря 2011

Вот jsFiddle с моим кодом

Как видите, высота текстовой области возвращается отлично.Но это потому, что текстовая область не находится в режиме font-face.

На моем сайте текст генерируется font-face, но он получает высоту до загрузки font-face, потому что когда вы наводитеdiv один раз и вторая итерация запускается, она возвращает правильную высоту.

Таким образом, высота jQuery работает, но только после того, как сайт полностью загрузил font-face.

Есть ли работавокруг этого?

Спасибо за любые указатели.

ПРОСТОЙ РАЗМЕР 

<div class="home-mod">    
    <div class="mod-center"><img ... /></div>    
    <div class="mod-info"> <!-- this is the slider, slides up when .mod-info is hovered -->                    
        <a class="mod-link" href="..." title="test">DYNAMIC FONT-FACE TEXT HERE</a>

        <div class="mod-excerpt">                        
            DYNAMIC NORMAL TEXT HERE                            
        </div>            
    </div>                           
</div>

ТЕКУЩИЙ СЦЕНАРИЙ - ПОЛНОСТЬЮ РАБОТАЮЩИЙ ИДЕАЛЬНО, КОГДА ТЕКСТ ЕСТЬНЕ FONT-FACE 

$(function() {
    // positioning the current div.mod-info inside current div.home-mod

    $(".home-mod").each(function() { 
        // this finds the div.mod-link height, and assigns var to div.mod-info top position
        var moduleLink = $(this).find(".mod-link").height(),
        modulePlus = moduleLink+20;

        $(this).find('.mod-info').css("top", "-" + modulePlus + "px");
    });        

    // animating current div.mod-info to new top position

    $("div.mod-info").hover(function() {
        // first iteration
        // getting dynamic overall height of div.mod-info and animate to 

        var moduleInfo = $(this).height();

        // this then animates to new position 
        $(this).animate({ top: "-" + moduleInfo + "px" });        
    }, function() {
        // second iteration
        // returns back to original postion

        var moduleLink = $(this).find(".mod-link").height(),
        modulePlus = moduleLink+20;

        $(this).animate({ top: "-" + modulePlus + "px" });        
    });

    // this justs finds the link and in .home-mod and make its clickable        
    $(".home-mod").click(function() {            
        window.location = $(this).find("a.mod-link").attr("href");
        return false;            
    });                    
});

ОБНОВЛЕНИЕ - РЕШЕНО

Вместо готового документа, это сработало для меня.Небольшая задержка при загрузке, но лучше, чем неправильные значения. 

$(window).load(function(){  

    // my script here...

});

1 Ответ

1 голос
/ 09 ноября 2012

Да.

  1. Самый простой обходной путь - установите высоту строки текста (где вы хотите получить высоту) в пикселях.Если ширина букв в шрифтах одинакова - это будет работать.

  2. Создать 2 скрытых (не через display:none, используйте position:absolute + top:-5000px;) div с текстом + white-space:nowrap.Например, первое с monospace, второе с your_font,monospace font-family.Затем создайте setInterval (задержка 50 мс нормально) со сравнением их высот.Когда высоты становятся другими - ваш шрифт загружен, и вам нужно clearInterval.

  3. Самый длинный путь - используйте $(window).load

...