endlessloving

Since this is just a mainly jQuery based solution, there should be no issue in using even if there may be no update at all.

I personally try to reduce the amount of plugins I use for little thing and so I just took the javascript file and registered to my theme and wrote some jquery code in an extra javascript file that I registered as well, so basically I am not even using the plugin but just it’s content. IMHO this is more future proof.

You can find the file here:
https://github.com/MIGHTYminnow/equal-height-columns/tree/master/public/js

After you added it to your theme, you can use code like this
jQuery(‘#event-list div.event-snippet’).initEqualHeights( null, null, 800 );

By the way, you can use this kinda code also with the plugin installed.

Your explanation sounds pretty complicated. I don’t understand it at all ??

This is what I tried:

I am working on a similar thing. Basically I have many elements and I want to make sure that only each set of three is “equlized”. It turns out to be very tricky!

Just imagine you have 6 boxes but they break in a responsive layout into either 3, 2 or 1 elements per row. This is a very common scenario! Now they will simply all have the same height, which can easily look odd when elements break into the next row and still have the same height like the highest element of the first row.
So ideal would be if I can define to equalize a set of 3 with – let’s say – a break point of 960 and a set of 2 with a break point of 800.

To not make it too complicated I started with trying to only equalize every set of 3. Unfortunately the plugin does not seem to work with this.

// every three boxes for breakpoint 960
	var divs = $("#people-list div.box");
	for(var i = 0; i < divs.length; i+=3) {
		divs.slice(i, i+3).initEqualHeights( null, null, 960 );
	}

I have tested it with just .css({‘border’ : ‘1px solid red’}) and it works but not with .initEqualHeights()

Any idea how to make this work?

Hi there,

I am working on a similar thing. Basically I have many elements and I want to make sure that only each set of three is “equlized”. It turns out to be very tricky!
I actually have a feature request! It would be amazing if we can specify the amount of elements that we want to equalize respectively define the amount of elements in a set.

Just imagine you have 6 boxes but they break in a responsive layout into either 3, 2 or 1 element per row. This is a very common scenario! Now they will simply all have the same height, which can easily look odd when elements break into the next row and still have the same height like the highest element of the first row.
So ideal would be if I can define to equalize a set of 3 with – let’s say – a break point of 960 and a set of 2 with a break point of 800.

To not make it too complicated I started with trying to only equalize every set of 3. Unfortunately your plugin does not seem to work with this.

// every three boxes for breakpoint 960
	var divs = $("#people-list div.box");
	for(var i = 0; i < divs.length; i+=3) {
		divs.slice(i, i+3).initEqualHeights( null, null, 960 );
	}

I have tested it with just .css({‘border’ : ‘1px solid red’}) and it works but not with .initEqualHeights()

Any idea how to make this work?

Note: Wrapping them in rows is not a solution, simply because it is not responsive! It will cause an uneven layout when the width of the viewport forces boxes to break into the next row.

Great minds think alike!

hehe!

My website is out of date too – in terms of technology. Too busy working for clients …
https://www.endlessloving.com

I am in Bali. One-man show!
Let’s connect via email if you like. I may have some work for you or maybe even the other way around. Who knows?

sebastianDOTschimpfATgmailDOTcom

I checked out your FB page already and liked it.

Cheers,
Sebastian

You might like to consider doing this with jQuery.
I have used this to do so:
https://github.com/viralpatel/jquery.shorten

In fact I am already using such a thing but I don’t have the read more option because I am using it in boxes that are generated from custom field contents and displayed in several areas of the website.
On the home page I only shorten text to have a clean format for a bunch of boxes, which also automatically get the same height with jQuery. Here is the text shortener:

jQuery('#events div.event-snippet').each(function() {

	// truncate text after x amount of characters
	jQuery(this).find('p:first').each(function() {

		len=jQuery(this).text().length;
		limit=jQuery(this).text().indexOf(' ', 270);
		var mytext = jQuery(this).text();

		if(len>250) {
			var mytext = truncateString(mytext, 270, ' ', ' ...')
			jQuery(this).text(mytext);
		}
	});		

	// to make sure there are no cut words
	function truncateString (string, limit, breakChar, rightPad) {
		if (string.length <= limit) return string;
		var substr = string.substr(0, limit);
		if ((breakPoint = substr.lastIndexOf(breakChar)) >= 0) {
			if (breakPoint < string.length -1) {
				return string.substr(0, breakPoint) + rightPad;
			}
		}

		return substr + rightPad;
	}
});

I see your website is a work in progress.
Do you live in Australia?
Is it a design studio you are running?

Thanks for sharing that!
It sounds sensible and in such case it would also not be that dramatic if one some devices the detection does not work.

I am considering to have a different length introduction text on the homepage of client’s website, because on a mobile phone the willingness to read text decreases for most people.

And you are right about the new WP features related to responsive images. A great feature they added with one of the last updates.

Yes!

Kinda off-topic but it comes to my mind:

I am wondering if this plugin is actually truly reliable.
I read that some people experienced that it didn’t detect samsung phones and just displays the desktop content.

I feel drawn to just drop it and not spend more time with this, trying to optimize the site for different devices but with the risk that it does not work in the end, which would be really bad.

What do you think?
Is it reliable in your experience?

??

yes!
Actually, I decided to not use this plugin because it seems to have problems detecting Samsung phones and just shows the desktop content. I am wondering how reliable this thing is. I have not the means to test it all but I could test with a Samsung phone, an ipad and an ipod – as mobile devices.
I am just afraid to put much time into this and end up throwing it over board.

I know this is kinda off-topic but it just comes to my mind since I decided yesterday, that I don’t want to use the plugin. (After reading some comments about problems people ran into.)

What do you think?

Wouldn’t it be a better practice to check if the function exists first?

if(function_exists(wpmd_is_phone)) :
	if(wpmd_is_phone() == FALSE) :
		// do something on desktops and tablets only
	endif;
endif;

… so in case we deactivate the plugin, we are not running into problems?

I would be willing to pay too! I only have a budget of $50 for it but if some people add a few times $50 …

Yes, that would be awesome!

Awesome!!! That’s a great step. So they are already working on it. That makes me feel happy about the WordPress Development.
Maybe I will have the chance to address the video “issue”. I am pretty sure that the core developers are thinking about solutions in that field as well.

Thanks for sharing your information with me, Shapeshifter 3. I really appreciate that.
And great to know you ended up with the same plugin like I did.

By the way, I found the link for the invitation to the slack communication stream here:
https://make.www.ads-software.com/chat/

Have a great day!

And buy the way, I registered at slack but I can’t see what’s happening here https://wordpress.slack.com/?redir=%2Farchives%2Ffeature-respimg
because I am not part of the team.

THAT sounds awesome, Shapeshifter 3!
Thanks for letting me know. I am excited to observe the development and it would be so great if a solution for responsive images would make its way into the WordPress core.

Does it make sense to address “responsive video embeds” as well?
I am looking at some plugins that promise solutions. This here looks good – I think:
https://www.ads-software.com/plugins/advanced-responsive-video-embedder/

I am wondering if it would make sense to work on a solution for videos as well? I am not a programmer but I have many years of experience developing websites. I am happy to contribute if I can. Just don’t really know where to start.

I could do some testing on some mobile devices, for example.

I have an ipad mini, an ipod touch 2nd generation and an older android phone. I think that’s good stuff to test on. Let me know if I can help.

I found the solution. I looked into the plugin file and found the actions that I need to remove conditionally so that the css and js is not loaded on pages where I don’t need it.

This code here works:

add_action('template_redirect', function() {

		if(!is_page(817)) : // this could even be a custom field value or something else to check for
			remove_action('init', 'miniAudioPlayer_init');
			remove_action('wp_head', 'maplayer_custom_css');
			remove_action('wp_footer', 'miniAudioPlayer_player_head',20);
		endif;

});