javascript - コンテンツの高さに基づいて joomla モジュールの数を調整します

Question

メイン コンテンツの高さに基づいてモジュールの数を動的に調整する方法を見つけたいと思います。それは可能ですか？CSSで？ジャバスクリプト？

目的は、コンテンツがない場合に空白のページが表示されないようにすることです。

前もって感謝します

ヴァネッサ

Answer 1

これは多くの方法で達成できますが、他の方法よりもエレガントな方法もあります。私が考えることができる最も単純なものは、Javascriptのみを使用することです。

1. すべてのモジュールコンテンツはHTMLで送信されます。（今のように）
2. メインコンテンツの高さを取得します。
3. メインコンテンツがモジュールの高さよりも高い間に、最後のモジュールを削除します。

次のようなもの:(コードはテストされていません）

window.addEvent('domready', function() {
    // Get heigth of main content
    var contentHeight = document.id('content').getHeight();

// While the height of the main content is more than 200
// and less than the height of the modules
    while(contentHeight > 200 && contentHeight < document.id('modules').getHeight()) {
        // Get the last module and remove it.
        $$('#modules .moduletable').getLast().dispose();
    }
});

これは、mootools（おそらくJoomlaインストールによってすでに提供されている）を使用していることを前提としていることに注意してください。また、私の要素セレクターがテンプレートで機能しない場合があります。

この場合も、一部のモジュールを削除する場合でも、サーバーはすべてのモジュールを送信します。もう1つのことは、これはWebページのDOMが完全にロードされたときに開始されることです。つまり、ユーザーにはモジュールが表示されなくなる可能性があります。したがって、最初にすべてのモジュールを非表示にしてから、同様のループを使用してモジュールを1つずつ表示する方がよい場合もあります。

編集：あなたが好むかもしれない別のサンプル。

window.addEvent('domready', function() {
    // Get heigth of main content
    var contentHeight = document.id('gkContent').getHeight();

    // While the height of the modules is more than 500
    // and less than the height of the modules
    while(document.id('gkRight').getHeight() > 500 && contentHeight < document.id('gkRight').getHeight()) {
        // Get the last module and remove it.
        var banners = $$('#gkRight .adsense2, #gkRight .bannergroup');
        if(banners.length > 0) banners.getLast().dispose();
        else break;
    }
});