Question

I would like to find a way to dynamically adjust the number of modules based on main-content height. Is it possible and how ? in css ? javascript ?

The purpose is to avoid having blank page if there is no content.

Thanks in advance

Vanessa

Answer 1

This could be accomplished in many ways, some more elegant than others.
The most simple one I could think of is to use Javascript only:

1. All module content is sent in the HTML. (as now)
2. Get the height of the main content.
3. While the main content is higher than the modules height, remove the last module.

Something like: (Code not tested)

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

Note that this assumes you are using mootools (which is probably already provided by your Joomla installation). Also, my element selectors may not work with your template.

Again, the server will still send all modules even if some are to be removed. Another thing is that this will start when the DOM of your webpage has been fully loaded, meaning the user might see modules disappearing. Therefore it could also be nicer to hide all the modules at the start and then use a similar loop to display the modules one by one.

EDIT:
Another sample you may prefer.

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