Problem JS script same height columns and how to set column shadow on hover?

Hi There,

some of my earlier reported problems are fixed by building the pages all new and leaving out as many plugins as possible.

Now I stumble on a problem with same height problems and the JS you provide on the forum.
When I load a page, only the images load and the text is placed beneath the other images. (see image) When I refresh the page, the page looks fine. Do you have a fix for it?

JS used:

jQuery(document).ready(function($) {
var max = 0;
$(".x-klanten .x-column").each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(".x-klanten .x-column").css(‘height’, max);
});

Question 2:
How do I create a hover effect (shadow) on a column?

Kind regards,
Victor

Hi there,

As we do not have access to your website I suggest that you use the snippet from our KB article:

Thank you.

Hi,
but this is the exact code I use. What am I missing?

You need to change the #x-section-4 section with the ID of the section which you use. You cn change the ID by going to the Customize tab of a section and change the ID there:

If for example you set the id of the section to sameheight then the code should change to:

jQuery(document).ready(function($) {
	var max = 0;
	$("#sameheight .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$("#sameheight .x-column").css('height', max);
});

Thank you.

it seems I was using a . in front of the #
Thanks, it now seems to work.

Any ideas on the shadow on hover effect?

You can use the box shadow property. The code would looks like

#sameheight .x-column:hover {
  box-shadow: 5px 10px #888888;
}

Please note that we’re using custom code here. This is outside the scope of our support and the code provided serves only as a guide. Issues arising from the use of it and further enhancements would be your responsibility.

Thanks.

Would you kindly please open up a separate thread regarding the shadow request to keep things clean for the other customers that may have the same height question to be able to find the necessary information?

Keeping each request in a separate thread will help us focus on the matter better.

Thank you for your understanding.

Thanks for the quick replies, and sorry for adding multiple questions in one thread.

You’re welcome.

Sorry, I have an additional question about the same height columns.

What JS do I use when I want 1 section with same height columns and another section with same height columns, however, the height of the two sections are different.
I tried to add 2x JS you added above with different section names but that added a lot of space somewhere on the page.

Do you have another solution?

Hi there,

You have to modify your that code to something like this

jQuery(document).ready(function($) {

$('.sameheight').each( function() {

    var max = 0;
	$(this).find(".x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	}).css('height', max);

} );

});

Then instead of adding sameheight to column’s Class, you have to add it to the row’s Class. You may enhance it based on your preference, but we can’t provide any further customization regarding this.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.