Jump to content
burt

Equal Height - possible new approach

Recommended Posts

Testers required, in a number of devices.

 

http://template.me.uk/234bs3/index.php?cPath=3_10

Home > DVD Movies > Action

 

The "fire down below" product image is taller than the rest, so (ASSUMING the equal heights module in turned off), it would ruin the display.  

 

However, with this new approach...the display looks good (GRID view, list view is unimportant) in:

 

-Chrome

-IE Edge

-Firefox

 

Please could you test in any devices/browsers you have available?

 

Please note that I have bust the list/grid buttons - so you might be redirected to index if you press them or you might not.  I think it's a cookie problem - (sort of) unrelated to this testing...

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Using Chrome:

 

It does appear to be a cookie problem. I got redirected to index on first visit, and afterwards the list/grid buttons behaved normally. Cleared the browser cache and cookie settings, then got redirected again on first visit.

 

The layout does work like you say.

Share this post


Link to post
Share on other sites

Yeah, not sure what I've bust with regards to grid_list :(

It works intermittently.

 

Thanks for testing, both.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

I had a similar issue with the latest EDGE version few days back and i opened a topic about it.(Bugs in EDGE version or something like that.) I also got redirected a few times before the grid/list switch worked. Or as Henry said once switched it was not possible to change anymore. I had that issue only with Firefox that time.

 

Back on topic, just tested with my Smartphone Android, Chrome browser, same issue as mentioned above by the other two guys.

Edited by Tsimi

Share this post


Link to post
Share on other sites

Hi,

 

just tested it with Opera 12.17 (my default browser) and Opera 31.0.

 

In Opera 12.17 it looks good, in Opera 31.0 however the display is a bit messed up. "Lethal Weapon" slips in the next line, leaving an empty place on the right side of "Fire Down Below" and "Under Siege 2" is alone in the last line.

 

(Sidenote: Opera 12.17 loads the page in Grid-View and the view buttons work perfectly, no redirection to the index-page)

(Edit: Same with Opera 31.0)

 

AD

Edited by AngusD

Share this post


Link to post
Share on other sites

List/Grid works perfect for me (in Chrome).  But that's beside the point.

 

If you can get to a grid view, please try.  And report back on the display...

 

The only problem I can find is in (approx) "tablet" sized view, where the display does exactly as @@AngusD describes...

I prefer that problem to the equal-heights module problem.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Feel free to test this in your own site(s) too...

 

1.  uninstall equal-heights module (admin > modules > header tags)

2.  add this to user.css:

.list-group { display: flex; flex-flow: row wrap; }
.list-group-item { margin-bottom: 10px; }

3.  you might need to remove .css expires from your htaccess and refresh browser multiple times for new css to kick in.

 

4.  feel free to google for "css3 flex" and amend the above code and post back any better solution...

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

here you go

http://caniuse.com/#feat=flexbox

 

I had issue with flexbox on mobile browser but also older macbook where a frequent customer called that they could not see my top bar.

I have now feature detection and have a fallback code for when flex is not supported.

 

I have these modernizr settings

http://modernizr.com/download/#-fontface-flexbox-shiv-cssclasses-teststyles-testprop-testallprops-domprefixes-load

 

HTH


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

I have extended the user.css with this

.grid-group-item { display: flex; flex-flow: row wrap; }
.equal-height { height: auto; width: 100%; }

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

Tested (equal heights issue in Grid view only) in the following:

 

Firefox 40.0.3 -- Works fine in most widths. Dragging narrow will sometimes show 2 products in one row and 3 in the rest.  Sometimes the first row has the two products, sometimes it's the second.

 

Chromium 44.0.2403.89 -- Third product in the first row is bumped down to the next row in most widths. Drag it narrow enough and it comes back up, but the next two rows have only 2 products. Weird.

 

Opera 12.16 -- Same as Firefox.

 

IE 11 -- Same as Firefox, except Fire Down Below sometimes has a blue box around the entire product (not just the image).

 

IE 10 -- Fail. Speed appears below Lethal Weapon (as the only item) in the second row. No change at any width.

 

Android 4.4 -- Works with two items per row in landscape mode. Best I can do with this tiny screen (Samsung Galaxy phone).

 

I didn't try older versions of IE; let me know if you want me to.

 

Regards

Jim


See my profile for a list of my addons and ways to get support.

Share this post


Link to post
Share on other sites

Addendum: MS Edge -- Same as Firefox, except that the width of the product boxes is inconsistent in a narrow browser window. Works fine on a larger screen.

 

Regards

Jim


See my profile for a list of my addons and ways to get support.

Share this post


Link to post
Share on other sites

If using expires for css in htaccess it's best to make the user.css a new name like user2.css if you post this to a live site.  The reason is your customers will not see it correctly if they have user.css cached from a previous visit. 


I'm not really a dog.

Share this post


Link to post
Share on other sites

LOL I see the original equalheight problem when after a wide (landscape) view turn on (portrait) 90° the smart screen. You are right its bad.

 

The best would be a dinamic mediacreen javascript or browser (!) managment for this problem where the content auto allign to screen.


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

I have tried javascript solutions and looks like fine on firefox desktop.

added scripts:

 

landscape/portrait change in ht_div_equal_heights.php:

 

find:

<script>
<!--
$(window).load(function() {
var maxHeight = 0;
$(".equal-height").each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(".equal-height").height(maxHeight);
});
//-->
</script>

change to:

<script>
function doStuff(){
    landscape = window.orientation? window.orientation=='landscape' : true;

    if(landscape && window.innerWidth<1900 && window.innerWidth > 319){
      // reset
      $(".equal-height").each(function() {
        $(this).css("height", "");
      });
      var maxHeight = 0;
      $(".equal-height").each(function() {
        if ($(this).height() > maxHeight) {
          maxHeight = $(this).height();
        }
      });
      $(".equal-height").height(maxHeight);
    }
}
window.onload=window.onresize=doStuff;
if(window.onorientationchange){
    window.onorientationchange=doStuff;
}
</script>

list/grid change :

find in ht_grid_list_view.php

$oscTemplate->addBlock('<script>$(function() {var cc = $.cookie(\'list_grid\');if (cc == \'list\') {$(\'#products .item\').removeClass(\'grid-group-item\').addClass(\'list-group-item\');}else {$(\'#products .item\').removeClass(\'list-group-item\').addClass(\'grid-group-item\');}$(document).ready(function() {$(\'#list\').click(function(event){event.preventDefault();$(\'#products .item\').addClass(\'list-group-item\').removeClass(\'grid-group-item\');$.cookie(\'list_grid\', \'list\');});$(\'#grid\').click(function(event){event.preventDefault();$(\'#products .item\').removeClass(\'list-group-item\').addClass(\'grid-group-item\');$.cookie(\'list_grid\', \'grid\');});});});</script>' . "\n", $this->group);

change to:

          $script = <<<EOD
<script>$(function() {
  var cc = $.cookie('list_grid');
  if (cc == 'list') {
    $('#products .item').removeClass('grid-group-item').addClass('list-group-item');
  } else {
    $('#products .item').removeClass('list-group-item').addClass('grid-group-item');
  }
  $(document).ready(function() {
    $('#list').click(function(event){
      event.preventDefault();
      $('#products .item').addClass('list-group-item').removeClass('grid-group-item');
      $.cookie('list_grid', 'list');
      equalheight();
    });
    $('#grid').click(function(event){
      event.preventDefault();
      $('#products .item').removeClass('list-group-item').addClass('grid-group-item');
      $.cookie('list_grid', 'grid');
      equalheight();
    });

    function equalheight() {
      // reset
      $(".equal-height").each(function() {
        $(this).css("height", "");
      });

      var maxHeight = 0;
      $(".equal-height").each(function() {
        if ($(this).height() > maxHeight) {
          maxHeight = $(this).height();
        }
      });
      $(".equal-height").height(maxHeight);
    }
  });
});</script>
EOD;

$oscTemplate->addBlock($script . "\n", $this->group);

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

@@Gergely,

Works well on my iPad with no problems and good on chrome with different sizes both potrait and landscape. 

 

Thanks for this.

Edited by John W

I'm not really a dog.

Share this post


Link to post
Share on other sites

@@Gergely - thank you.  I would prefer to get away from using javascript ....

 

With that in mind, have a look at:

 

http://template.me.uk/234bs3/index.php?cPath=3_10

 

and resize the browser smaller and larger etc...

 

Thoughts (open to everyone)...


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

All works in chrome Version 45.0.2454.99 m

 

Internet Explorer 9  Speed goes onto its own line. and is right justified.

Safari Does the same as Internet explorer.

 

Doug :thumbsup:

Share this post


Link to post
Share on other sites

Thanks @@burt.

I thought to old BS with javascript.

768x1024 is only one column in firefox. 1024x768 is good.


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

In all devices, anything at 768 or below would be 1 column.

Otherwise:  3 columns.

 

This is done with .css:

 

 

.list-group {display: flex; flex-flow: row wrap;}
@[member=media] only screen and (max-width : 768px) {.list-group {flex-direction: column; }}

 

Quite elegant I think...


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

grid view is very wierd on 768 wide with one left alligned column.


landscape/portrait turn is perfect on my old samsung smartphone.


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

Solves all the problems without resorting to .js 

 

Is it a "real life" problem on 768 wide to have just 1 column ?  


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×