matchHeight issue in Responsive Sheffield Blue

I saw there were some comments on the main support thread for this template on this topic, but I'm not sure there is consensus around the best solution. What I see as the symptom is the error message "$(...).matchHeight is not a function, as shown in the image msg.jpg below.

This arises from

<script  type="text/javascript">
  $(function() {
      $('.grids').matchHeight();
    });
</script>

However, when I comment out the call to matchHeight, I get a gray box next to the quantity box on the product info page, as shown in product_info.png below.

Any thoughts on the best way to fix this?

i am not the jquery expert, however it looks like jquery might be running in no conflict mode.

try changing your code to:

<script  type="text/javascript">
 jQuery(function($){
      $('.grids').matchHeight();
    });
</script>

i think it's complaining that $ is currently undefined.

let us know! best.

I couldn't get rid of matchHeight error - wondered if it was even supposed to be in the template or if it was extraneous from some other edition or working copy.

In the end I deleted the two matchHeight files altogether. To get my product boxes consistent I used min-Height which seems to work ok for that task.

Below are notes I made re my changes:

the product listing boxes are variable in height according to size of image and whether title has more than one line. This can make different size boxes push each other so instead of three in each row there may be one in a row followed by 2 in the next row. The css for this box has min-height but no max or set. The what’s new box and product listing box are styled the same.

So - I split out .centerBoxContentsNew, Featured and Specials on stylesheet.css from .centerBoxContentsProduct at approx #268. For .centerBoxContentsProduct I left the styling except I change min-height to min-height:480 which gives a constant product listing box regardless of image size diffs

But 480 is too big for the ,centerBoxContentsNew,Featured, Specials so putting it in its own line I used the same styling as .centerBoxContentsProduct, but used fixed height:375

soxophoneplayer:

I couldn't get rid of matchHeight error - wondered if it was even supposed to be in the template or if it was extraneous from some other edition or working copy.

while not a fan of the author, i can only assume that matchHeight was intended. else why would you need to do something else to resolve the problem?

In the end I deleted the two matchHeight files altogether. To get my product boxes consistent I used min-Height which seems to work ok for that task.

so rather than using a jquery function, you eliminated that function and accomplished a similar result using css. which validates my above point.... i think...

i find it rather difficult troubleshooting jquery loading issues; especially if i am not doing it all the time. i have burned many hours resolving jquery errors; and any number of them involved loading. if you are a store owner, it is certainly not for the feint of heart...

that said, once you get a better grasp of it, it really is pretty powerful with the things that you can do.

your solution, which works for you, is certainly a valid one. i find css far easier than jquery; but i think jquery is a far more powerful tool to have on one's toolbelt.

swguy:

I saw there were some comments on the main support thread for this template on this topic, but I'm not sure there is consensus around the best solution. What I see as the symptom is the error message "$(...).matchHeight is not a function, as shown in the image msg.jpg below.

I've not used this code, but this was the solution suggested.. jquery-match-height it also is offered up with a CDN provider so if not loading, no function exist.. I also had issues with jquery loading after template script with this template, but I thought that got fixed!

@carlwhat - thanks for your suggestion, but that doesn't fix the problem.

@soxophoneplayer's - if the developer didn't carefully check the console, it might have been assumed that the submitted code worked - it may just be working by side effect if the error handler does something that is desired.

Probably the best path would be to copy in matchHeight (to get rid of the console error) and then debug the UI issue (phantom gray box and unaligned quantity box), but I was hoping someone had done that already .

OK, so the solution for me was to remove the matchheight call in common/html_header.php and then remove the spinner at the top of templates/tpl_product_info_display.php. That way I get a centered quantity box and no error in the console about matchHeight.

Yeah, the spinner was something I also surgically removed. It was giving me errors and I didn't really want it as most products are one offs.

matchHeight wasn't in the original RSB 20 fileset that I have. It was in zc 1.5.5 Classic Responsive and it was suggested to add/copy/adapt over to RSB as part of upgrading the template from zc 1.5.4 to work properly in zc 1.5.5 Min-height was used in the original stylesheet to control the product box sizes - problem for me, that I didn't see until after fligging around with matchHeight was that increasing the px on min-height was a quick work around.

I had some assistance with this around post#855 in the template forum, but to no avail for me - I'm barely literate in css and jquery is WAY above my skill set.