0

[SlabText][1] というプラグインを使用しようとしています。これは素晴らしく、複数のブラウザーで動作しますが、適切なサイズ設定で問題が発生しました。テキストが最初にロードされるとき、割り当てられたスペースは使用されていません。ページを更新またはサイズ変更すると、突然適切にスケーリングされます。

最初は、他のプラグインがほぼ同時にキックオフしたためだと思ったので、これに遅延を追加しましたが、まだ同じ問題があります. いろいろ試したようですが、原因がわかりません。

これに価値があるかどうかはわかりませんが、ほとんどのサイズ変更はプラグインで行われますが、すべてをまとめる方法は次のとおりです.

$(".banner").unslider({
        speed: 1500,              //  The speed to animate each slide (in milliseconds)
        delay: 25000,             //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcut
        dots: true,               //  Display dot navigation
        fluid: false              //  Support responsive design. May break non-responsive designs
    });


    var stS = "<span class=\'slabtext\'>",
        stE = "</span>"
        prc = "<div class=\"mar20top alnRt\"><a class=\"btn\" href=\"/pricing\"><span class=\"uico ui-icon-tag icoSpan\"></span>Pricing</a> &nbsp; ",

        txt_CS = [
            "improve information architecture (IA) with",
            "CARD SORTING",
            "Try our online (remote) tool",
            "get instant results with built-in data analytics",
            "unlimited tests & participants / open, closed or hybrid test / images, text or mixed Cards"
        ],
        lnk = prc + "<a class=\"btn\" href=\"/features/Card_Sorting\"><span class=\"uico ui-icon-star icoSpan\"></span>Features</a> &nbsp; <a class=\"btn\" href=\"/CardSorting\"><span class=\"uico ui-icon-newwin icoSpan\"></span>Learn more about Card Sorting</a></div>";

    $("#CardSort_HDR").html(stS + txt_CS.join(stE + stS) + stE).slabText();
    $("#CardSort_HDR span:nth-child(2)").css({"color":"#b9cde5", "line-height":"0.8"});
    $("#CardSort_HDR span:nth-child(3), #CardSort_HDR span:nth-child(5)").css({"color":"#999", "line-height":"0.8"});
    $("#promo li:nth-child(1)").append(lnk).hide().delay(1000).fadeIn(2200);

HTML

<div id="contArea" class="banner">
<ul id="promo">
    <li class="h1" id="CardSort_HDR"></li>
    <li class="h1" id="PrMatrix_HDR"></li>
    <li class="h1" id="heurEval_HDR"></li>
</ul>
</div>
4

0 に答える 0