javascript - 根据内容高度调整 joomla 模块的数量

Question

我想找到一种根据主要内容高度动态调整模块数量的方法。有可能吗？怎么做？在 CSS 中？javascript？

目的是避免在没有内容的情况下出现空白页。

提前致谢

凡妮莎

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 安装提供）。此外，我的元素选择器可能不适用于您的模板。

同样，即使要删除一些模块，服务器仍将发送所有模块。另一件事是，这将在您网页的 DOM 完全加载时开始，这意味着用户可能会看到模块消失。因此，最好在开始时隐藏所有模块，然后使用类似的循环逐个显示模块。

编辑：您可能更喜欢的另一个示例。

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;
    }
});