[Addon} Modular Front Page

[mattsc]

Basically it's loading all of the banners on the page, pushing all the content down as it loads one banner after another after another. Once all the banners finish loading it redraws and shows only one and rotates through as expected.

 

This is what it looks like as it's loading the banner images:

http://tyga-usa.com/images/banners/banner_bug.jpg

 

Ugh! :(

[♥kymation]

I've never seen the banners load slowly enough that you could tell they were there before the rotator started. How big are your images? Try compressing them.

 

The Javascript is set up to load in the footer to avoid slowing the page load. You could try loading it in the head instead. Find this code in the module file:

      $oscTemplate->addBlock($add_scripts, 'footer_scripts');

and change it to:

      $oscTemplate->addBlock($add_scripts, 'header_tags');

I have no idea why the Easing selector is not working. It's working on my test site. Maybe a different version of PHP?

 

Regards

Jim

[mattsc]

I've never seen the banners load slowly enough that you could tell they were there before the rotator started. How big are your images? Try compressing them.

 

The Javascript is set up to load in the footer to avoid slowing the page load. You could try loading it in the head instead. Find this code in the module file:

      $oscTemplate->addBlock($add_scripts, 'footer_scripts');

and change it to:

      $oscTemplate->addBlock($add_scripts, 'header_tags');

I have no idea why the Easing selector is not working. It's working on my test site. Maybe a different version of PHP?

 

Regards

Jim

 

The banner images are 50-70kb each. Maybe it's that there's 6 of them... but I know the eventual plan is to have as many as 20-25.

 

PHP version is 5.6.27. I can update the database directly, just seems odd that it's only the pulldown menu that's not updating when the edits are saved to the module config.

 

Changing from footer_scripts to header_tags caused the slider to break. All banner images loaded and never was loaded into the rotator.

[♥kymation]

I'm not doing very well with this. Let me see if I can come up with an idea that won't break the code.

 

Regards

Jim

[♥bruyndoncx]

are you sure you dont have any javascript errors on the page ?

[mattsc]

Yes I'm sure there's no javascript errors. I pushed my latest dev work up to the staging server... so the bug is live now... but at least you may be able to see it to see if there's just something I did which is stupid. You can check for yourself if you think I may be missing something. The server URL is:

http://tyga-usa.com/index.php

 

Is it possible to maybe load the images using a 1x1 pixel height and width, so at least WHILE they are loading it doesn't fill the screen with banner images? That was my best guess at how to possibly resolve it...

[♥kymation]

My thought was to hide the entire module until all of the images have loaded. If I can get that to work without blocking the rotator script or messing up something else. You would have a blank space until it loads, but that would be better than filling the page with images.

 

I've fixed the issue with the Easing selector. Anybody who wants the fix can ask me for it, otherwise I'll wait until the other problem is fixed and upload the whole thing.

 

Regards

Jim

[♥bruyndoncx]

could it be taht the imagesloaded.js is not finished before the slideshow is started, would moving imagesloaded.js into the header maybe help ?

[♥kymation]

I have a proposed fix to both problems now. The code is here for anyone who wants to test it. Please post your results. Once I'm fairly sure this is working, I'll upload a new version to the Addons site.

 

Regards

Jim

[♥kymation]

I've uploaded a new version that contains fixes for the above. Please post here if you still have a problem.

 

Regards

Jim

[TITO4]

@ kymation

Hi Jim. I've just installed this new version, but in my case still with the same problem when changing Easing type. It doesn't have any effect from admin. If I go to the db and change it manually, then it changes, and the change remains

 

@@mattsc

Please, can you tell me how to get that fading effect? I love it! I have it working in Scroll boxes, but don't know how to get it in banner rotator.

 

Regards

[♥kymation]

@@TITO4  If you had a previous version installed, you need to uninstall the module before replacing it with this one. This one is working here, so it should work if you do that.

 

Regards

Jim

[TITO4]

Yes, Jim, that was the first thing I did. Anyway, don't worry at all about it. I'm not changing Easing every day, and it is quite easy to do it directly on the db.

Regards

[HansM]

Hi,

 

I added this add-on: Banner Rotator Content Module

BS3 Edge running. (2.3.4. bootstrap)

 

I see no slide show since the jquery files for the slideshow (rotating banner) are not in the add-on.

Looking in the map: catalg/ext/ I have jquery with only one css file not a .js script or so.

I also don't have a directory called catalog/ext/slideshow

 

Looking in cm_header_carousel.php (lines 211) and cm_footer_carousel.php it assumes these files are there for the slideshow:

 $add_scripts = '  <script src="ext/jquery/slideshow/jquery.easing.1.3.js"></script>' . PHP_EOL;
      $add_scripts .= '  <script src="ext/jquery/slideshow/jquery.imagesloaded.js"></script>' . PHP_EOL;
      $add_scripts .= '  <script src="ext/jquery/slideshow/slideshow.js"></script>' . PHP_EOL;
      $add_scripts .= '		<script type="text/javascript">

They are not in the add-on.

 

Do I miss a add-on to get these files in?

 

 

 

 

[HansM]

I think I had the old version 1.0. Now I just fetched 1.0.2 from December 2016, this has the files inside, so ignore then my previous problem, looks solved.

[♥peterpil19]

Hi,

 

I have the bootstrap version of front page module installed.

It works perfectly on Chrome, Internet Explorer and Firefox showing 3 categories / 3 new products per row.

 

However on Safari, both the new products and category images are all squashed onto one row, rather than falling onto separate rows.

 

Has this been experienced by anyone else and if so is there a workaround?

Link to site in case it is peculiar to the  computers I have tested it on:

www.ancientcointraders.com

 

Regards,

 

Peter

[♥kymation]

The layout should work in any modern browser. It's just CSS, although it uses some fairly recent additions.

 

Is your Safari browser an older version? I don't have Safari (of any version) so I can't test this. If I remember correctly, the modern Safari browser uses the same rendering engine as Chrome, so it should work the same.

 

Maybe somebody who has Safari can test this for us.

 

Regards

Jim

[♥peterpil19]

@@kymation

 

Hi,

 

There appears to be a newer version of Safari. I'll install on work computer  and check tomorrow and report back.

 

A couple of related issues if you don't mind on which I would be grateful for your guidance - if you could just point me in the right direction.

 

1. The front page categories and front page product 'boxes' are not equal heights for some reason.  I see there is a div class="clear thumbnail equal-height" in cm_fp_categories_images.php and similar in the cm_fp_new_products.php.  Where is "equal-height" defined in CSS? I couldn't find it defined anywhere in the bootstrap or oscommerce css files, perhaps that is the issue? 

 

2. Small issue - when viewing on a phone or smaller screen, the new product 'boxes' themselves vary in width based on their content and do not stretch out the full width of the column like categories. Both the categories and new product seem structured almost verbatim.  The columns of each are also set to the same size (sm-6, md-4). Any reason why when the new products collapses it has a varying width? It would look much nicer on a phone if the right hand borders lined up.

 

Thanks,

 

Peter

Edited January 22, 2017 by peterpil19

[BrockleyJohn]

@@peterpil19

 

I've reproduced the reported problem on my windows machine on Safari 5.1.7 which I believe was the last one made for that platform. Interestingly, I only get a horizontal scrollbar so that I can look at the extra content if I shrink the width down to phone size. The other bootstrap widths just disappear off the side. It's probably not a real issue since the only people who really use safari are on apple hardware and likely on version 6.

 

The problem is not apparent on my ipad (presumably a higher safari version but I've no idea how to check) - though the "equal heights" issue is!

[♥BlueBunyip]

Hi,

 

I have the bootstrap version of front page module installed.

It works perfectly on Chrome, Internet Explorer and Firefox showing 3 categories / 3 new products per row.

 

However on Safari, both the new products and category images are all squashed onto one row, rather than falling onto separate rows.

 

Has this been experienced by anyone else and if so is there a workaround?

Link to site in case it is peculiar to the  computers I have tested it on:

www.ancientcointraders.com

 

Regards,

 

Peter

 

 

It seems to working fine on the latest Safari - 10.0 but I experienced the issue you described when using the oldest version I have - 6.1.6.

 

My webstores, 2.3.4BS GOLD and 2.3.4BS EDGE based display fine with Safari 6.1.6

[♥kymation]

@@peterpil19

 

1. You need to install one of the Equal Heights header tag modules. If you are using the latest Edge, there's a good one included in the distribution package that uses plain CSS. There is also one in the Addons section that uses Javascript.

 

2. I have no idea. I haven't seen this happen so I don't even know where to start. Which browser and OS does this happen on?

 

Safari version 6.x and older don't support modern CSS so I would expect rendering problems with them. It might be possible to fix this using some additional CSS directed at those versions, like some sites do for old versions of Internet Explorer, but how much work do you want to do for the very small number of people still using obsolete software?

 

Regards

Jim

[♥peterpil19]

@@kymation

 

Hi Jim,

 

Thanks for the speedy response,

 

1. I am using the latest edge. The distribution package I downloaded did not contain any Equal Heights header tag module (installed or otherwise)? Could you point me towards where I could find it? I've searched the distribution package as well as the modules (installed or otherwise) in Admin.

 

2.  This issue of varying border widths for the new products module presents on every browser which I have tested (Chrome, Safari, Internet Explorer) as well as every iPhone 5/6 I have tested it on (friends and family).

It occurs even if categories images is disabled and only new products appears. Using the mobile phone emulators on Google Chrome or the www.mobilephoneemulator.com website also replicates the same issue.

 

It appears that the border widths of new products are being set by the length (width) of the product title. If they are long titles they push out to the maximum border, if they are shorter titles the border widths become shorter. Does this help narrow down the potential cause?

 

Peter

[BrockleyJohn]

@@peterpil19 here's a link to the change that replaced a header tags module for equal heights with a change to the styles in custom.css:

https://github.com/gburton/Responsive-osCommerce/pull/444/files#diff-7507d91a415fe3500784e96dd5cc83c2

 

What does the business is the styling on listgroup not piGal

 

My advice is:

1. check if you have the correct style for .listgroup in this file

2. check that you have divs with class listgroup on your page

3. if so, see if you can figure out what's interfering with it working

 

Failing that, you can get the code for the header tags module from this change as it's marked as deleted.

[♥peterpil19]

@@BrockleyJohn

 

Unequal heights

I appreciate the suggestion. I did a file compare and my custom.css already matches that one exactly and I've made no relevant overrides in user.css.

I installed the equal height divs by creating the files in the link you gave me and activated it in Admin and it doesn't do anything.  Incidentally I do not understand why it is not included in the EDGE master file for download as I assumed the link supplied on github to the EDGE download file was the up to date version. I even put the divs class to listgroup as suggested and made no difference.

 

Therefore any additional suggestions on this issue would be appreciated.

 

Unequal widths

In the meantime, I think I have resolved the issues of varying widths when the page is seen through e.g .an iphone.

Very simple solution - I added col-xs-12 to the div class for the new products columns.  I don't know why that was necessary but it works. I should have thought of that earlier.

 

Thanks if anyone has continued patience to help point me in the right direction on the above...

 

Peter

[♥kymation]

@@peterpil19  col-xs-12 sets the width to 100% (among other things) so I can see that working. I don't understand why it didn't work in the first place, but if this fixes the problem then I see nothing wrong with doing it.

 

The Equal Heights module works on blocks with the "equal-height" class, so check that your product containers have that class.

 

Regards

Jim