Wikia

Community Central

Admin Forum:Resize to maximum element

Talk0
94,819pages on
this wiki

This Forum has been archived

Forums: Admin Central Index Technical Help Resize to maximum element
Wikia's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.


I have a series of inline-tables, like these:

IMAGE
Caption
IMAGE
Caption too long
IMAGE
Caption

The header cell's height can be various, so I want to make all the table (basically the captions) the same, equals to the maximum height of the series. I cannot wrap them under a container, or rather the tables are on more then one line, like this:

IMAGE
Caption
IMAGE
Caption too long
IMAGE
Caption

So I cannot find a solution with CSS only, how can I do it with JS? leviathan_89 23:08, 1 May, 2012 (UTC)

This is about creating a template isn't it? If so, there's an extension named ImageSizeInfoFunctions which is apparently enabled on some Wikia wikis. If you can convince Staff to enable that extension for your wiki as well, you can solve this without JavaScript.
For a JavaScript solution you should use jQuery's height() and css() methods. --  pecoes  00:51, May 02, 2012 (UTC) 
I see, you've edited your code. So it's not the images that are causing problems but the text that accompanies them. Is that right? --  pecoes  00:55, May 02, 2012 (UTC) 
That's right, the images are all set to a fixed dimension, it's the caption that can cause troubles. Of course I can set an height tall enough for displaying two lines, for example, but I don't know if there will be captions longer. I just would like to have more solutions to choose from. I already saw those jquery functions, but I did not understand how I can search and store the height of the tallest caption... leviathan_89 01:13, 2 May, 2012 (UTC)

(Reset indent) If you assign all cells a fixed width and give them a common identifier - let's say a class named "stretchable" - then you could do it like so:

$(function () {
    var maxHeight = 0;
    $('.stretchable')
    .each(function () {
        var h = $(this).height();
        if (h > maxHeight) {
            maxHeight = h;
        }
    })
    .css('height', maxHeight + 'px');
});

(untested) --  pecoes  01:25, May 02, 2012 (UTC) 

It works (better with .outerHeight()). Can I make it works differently for each tables? For example, if I have a situation like this:

table.main
 tr
 td
  table.stretchable
  table.stretchable
  table.stretchable
 /td
 /tr
 tr
 td
  table.stretchable
  table.stretchable
  table.stretchable
 /td
 /tr
/table

Maybe it's better for each group to have its own max height. Last thing, do I need to make some corrections for monobook? Anyway it works fine even like this, thank you. leviathan_89 13:05, 2 May, 2012 (UTC)

You could try this:
$(function () {
    $('.stretchable')
    .each(function () {
        if ('undefined' == typeof $(this).parent().data('maxHeight')) {
            $(this).parent().data('maxHeight', $(this).outerHeight())
        } else {
            $(this).parent().data(
                'maxHeight',
                Math.max(
                    $(this).parent().data('maxHeight'),
                    $(this).outerHeight()
                )
            )
        }
    })
    .css('height', $(this).parent().data('maxHeight') + 'px');
});


It's untested as well :P
I don't know much about Monobook, but I doubt it makes a difference. --  pecoes  19:03, May 02, 2012 (UTC) 
I remembered someone told me the monobook execute the js before the loading of the page, so some code must be placed in a dummy function that will be executed after the page is loaded (addOnloadHook). I'll try that, thank you again. leviathan_89 21:17, 2 May, 2012 (UTC)
This code is unlikely to work before the page has fully loaded. That's true under Oasis, under Monobook and under any other skin. That's true on any web page - wiki or not. That's why it's wrapped in the ready function:
$(function () {
    // the code here won't be run before the document has loaded.
});


addOnloadHook does the exact same thing. --  pecoes  21:37, May 02, 2012 (UTC) 
The second code doesn't work, but I guess the first one is enough. leviathan_89 22:16, 2 May, 2012 (UTC)
It should work! I didn't have the patience to set up a test page though. If you can point me to an example page, I'll fix it. --  pecoes  22:20, May 02, 2012 (UTC) 
I'm testing here, but the first code is fine, thank you. leviathan_89 22:46, 2 May, 2012 (UTC)
There are no elements of class "stretchable" on that page. But whatever. If you say the first code is good enough... --  pecoes  23:05, May 02, 2012 (UTC) 
"stretchable" is a class you invented on your own! : ) My target class is galleria-didascalia, of course I substituted it in your code and the second one didn't work. leviathan_89 00:53, 3 May, 2012 (UTC)

(Reset indent) Ah, I see. Well, I never would have guessed what your actual output looks like! Of course, my code didn't work. Che sorpresa! :)

Try this then:

$(function () {
    $('table.galleria-main tr')
    .has('table.galleria-cella')
    .each(function () {
        var maxHeight = 0;
        $(this).find('.galleria-didascalia')
        .each(function () {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        })
        .each(function () {
            $(this).css('height', maxHeight);
        });
    });
})

I don't know how much of this you can read, but it's written under the assumption that there are tables with the class "galleria-main" that contain tables of class "galleria-cella" with cells of class "galleria-didascalia". As long as your code satisfies those assumptions, this JavaScript won't break. --  pecoes  05:33, May 03, 2012 (UTC) 

It works great! Thank you. leviathan_89 21:22, 3 May, 2012 (UTC)

Around Wikia's network

Random Wiki