JS refresh on resize causing multiple versions of content frames to open

[stuartmurphy]

What is the best way to ensure that all colums inside a 3-column row are the same height and all that the content does not spill out of the boxes in the event a user resizes their browser. Currently I am doing it the way described below but X Pro is going beserk and opening multiple instances of its Content Window every time I save the code and then go back and try to open the PAGE again. The only way around this is to quickly try and click JS, select it, delete it, save the page before the next version opens… if i miss this then it does it over and over again until I do this in time - it’s quite funny unless you have this problem - X Pro then becomes unusable.

Please tell me if there is a way to do this and how. The main thing I wish to do is to keep all three columns equal size and to make sure that user resizing the browser (for example when going portrait to landscape or simply dragging the browser window smaller or larger) can do this without the content spilling outside the boxes (which is does without the resize refresh. Any better suggestions would be much appreciated. Thanks.

Code used as follows

CLASS = equalise

//refresh page on browser resize
$(window).bind(‘resize’, function(e)
{
console.log(‘window resized…’);
this.location.reload(false); /* false to get page from cache /
/ true to fetch page from server */
});

// keep columns in row equal size
(function($){
$(window).bind(‘ready load resize’, function(){
var max = 0,
mobile = $(window).width();

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

});
})(jQuery);

[ruenel]

Hello @stuartmurphy,

Thanks for posting in a very detailed information.

To resolve your issue, simply update the Javascript into this:

// keep columns in row equal size
(function($){
	$(window).on('load resize', function(){
	 var max = 0,
	     mobile = $(window).width();

	 if ( mobile > 767 ){
	   $(".equalize .x-column").each(function(index, el) {
	     if( $(this).height() > max ){
	         max = $(this).height();
	     }
	   });
	   $(".equalize .x-column").css('height', max);
	 }
	});
})(jQuery);

We would loved to know if this has work for you. Thank you.

[stuartmurphy]

Hi Rue,

really appreciate your kind and quick response. Much appreciated. The code you returned looks like a cleaner version of the //keep columns in row equal size, that I am already using and it has the exact same effect.

The problem is the JS about //refresh page on browser resize

This is the code which I have had to delete - it works really well and does exactly what I want it to do, but it opens another Content Editor in X Pro and then after a few seconds, it opens another Content Editor, then it does this multiple times until I can delete and save the code without the section //refresh page on browser resize.

Maybe this will explain it better - if I just use the code you sent over then it keeps the boxes equal sizes, however as soon as I drag a window smaller, the text overflows and doesn’t refresh. I need to be able to use some kind of code that I sent over but without it crashing X Pro Content Editor because it is sending it into some kind of loop and making X-Pro crash and refresh itself. Ideally can you help with this and suggest any code which will auto resize the columns after dragging browser size smaller and bigger - if you start off big and drag it small that is when it all overflows.

Thanks. Stuart

[thai]

Hi Stuart,

Actually, you don’t have to use this code. It does nothing on your columns, just refresh the browser when you resizes:

//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});

So you just need to keep the code as @RueNel sent in the previous reply.

Regards!

[stuartmurphy]

Hi Thai,

Thanks, Yes I understand what you and Rue are saying. The point I am asking for help with isn’t what you are saying. I understand that I can simply refresh the browser as you advise, however I am not wanting this because I know that I can do this already. What I need is the ability to have this to work when a visitor to the site visits the page - ie, they won’t refresh a page if they resize it (nobody does this). Visitors will simply expect the site to work and currently with the code Rue sent, the information spills outside the text area and onto the page on a manual resize of the browser.

I can get the code to work by using the original code I sent, which isn’t ideal but it works. The problem is that I can’t use the code because X Pro constantly refreshes its own page (it doesn’t do it online but X Pro does this, making X Pro unusable.

Please can you advise for the original question please which was 'how do I get the content boxes to refresh when the browser is manually dragged, in a way which does not cause X-Pro to crash and be unusable because the JS for some reason is causing a feedback loop with X-Pro. I trust that you understand that I want the browser to be able to resize by itself and the content kept as it should be and not expect visitors to manually refresh a page (which they won’t because the site visitors are not developers and of course on mobile moving from portrait to landscape will also cause this issue.

The main reason for re-asking the question is that we sell new sites to clients and it is important that our new site is a flagship for what we want to showcase. and it was always a risk going down the X-Pro route for our main site however our strategy is to showcase what we can do using WP without needing bespoke development because our clients are all asking for this rather than bespoke sites in today’s market. Thanks Thai, Stuart

[friech]

Hi Stuart,

Thank you for the detailed explanation, I understand the issue so I advise to remove the JS code completely and use the native Flexbox CSS instead.

Add this to Theme Options > CSS

@media (min-width: 768px) {
	.flexbox {
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		align-content: stretch;
	}
}

Then apply the CLASS flexbox to the ROW of the columns that you want to have equal height.

That CSS provided above should do the trick of having equal height column, however, you might need to take some time to study how flexbox works since it works differently than the classic display block that we used to.

A Complete Guide to Flexbox

Hope it helps,
Cheers!

[stuartmurphy]

Hi Friech,

perfect and thank you. A wonderful, clear and concise guide and thanks for suggesting flexbox as the answer. Decided to use it locally on the page rather than through Theme>CSS and it works really well. Just need to do some more background work with Flexbox to get it to behave like I want it to. However, you’re right as it resizes to equal size on the fly as expected. Thanks Friech., Stuart

[christian]

You’re welcome, Stuart. Glad we’re able to help.