Scrolling issues on 'Home 3' template (arrow keys and on mobile)

cemsdb

The 'Home 3' template looks great but there are some unfortunate UIX issues, mainly related to scrolling. Two in particular:

1) On laptop, is there a way to activate the up/down arrow-keys allowing users to scroll sideways pushing the down arrow-key?

2) On mobile, scrolling is rather counter-intuitive. While the device is vertical, instead of easily scrolling up/down with one finger (as normal), users actually need to scroll with two fingers (which is altogether difficult). Oddly enough, if one switches the view/device to horizontal and then back to vertical, the one finger scrolling works. How does one get the vertical UIX to behave correctly from the very start (allowing one finger scrolling)?

saguaros

cemsdb Hi

I got your point but this feature is not available now, unfortunately. I will share with team for further consideration on this.

Regards

saguaros

cemsdb On mobile, scrolling is rather counter-intuitive. While the device is vertical, instead of easily scrolling up/down with one finger (as normal), users actually need to scroll with two fingers (which is altogether difficult). Oddly enough, if one switches the view/device to horizontal and then back to vertical, the one finger scrolling works. How does one get the vertical UIX to behave correctly from the very start (allowing one finger scrolling)?

I disabled the swipe on mobile so you can scroll with one finger.

Updated file: /acm/horizontal-projects/tmpl/style-1.php

<script>
  if (window.innerWidth > 767) {
    var swiper = new Swiper(".swiper-wrapper-<?php echo $module->id ;?>", {
      slidesPerView: "auto",
      direction: 'horizontal',
      spaceBetween: 0,
      freeMode: true,
      mousewheel: true,
      parallax:true,
      speed: 5400,
      pagination: {
        el: ".swiper-pagination",
        type: "progressbar",
      },
      breakpoints: {
        0: {
          direction: 'verticle',
        },
        767: {
          direction: 'horizontal',
        }
      },
      
    });
  };
</script>

cemsdb

cemsdb As for issue #1, any suggestions on how best to activate laptop arrow keys (so that 'down' and 'right' arrows scroll to the right, and 'up' and 'left' arrows scroll to the left)?

As mentioned, Chat GPT provided some seemingly good solutions, but I never figured out which file to edit.

cemsdb

saguaros Hi Saguaros, that's unfortunate indeed, as we only learned of this well into our site's development. As is, the mobile UIX is unusable and we may have to change templates (start from scratch), something I'd like to prevent if possible.

Regarding laptop arrow-key scrolling, I asked Open AI about the issue it seems the JavaScript solution is simple enough. Can you at least point the right files to change, so that I can go ahead and experiment with solutions?

As for the mobile one finger/two finger issue, can you also point to the right files to edit, and possibly explain why the problem solves it self once the device changes horizontal/vertical device position?

Thanks for any help you can provide. As you can imagine, these two issues dramatically effect the quality of the template. As you might also imagine, AI might be a perfect tool to provide a solution much sooner/simpler than expected.

saguaros

The JS files of template locates here: /templates/ja_seven/js/

cemsdb

saguaros Hi Saguaros, there are actually a lot of files and folders within '/templates/ja_seven/js/'. Considering this template behaves differently than others, am I correct to assume there are actually only a few files related to its "scrolling issues".

If so, what are the files I should focus on and edit?

cemsdb

saguaros Or should I simply create/use a 'custom.js' file?

And if so, do I need to edit any HTML file with the 'custom.js' file address or is that instruction already default/installed (templates/ja_seven/js/custom.js)?

saguaros

This template doesn't have that custom.js file by default, you can put your JS code into file: /ja_seven/js/template.js

cemsdb

saguaros Hi Saquaros, though I've attempted multiple codes they seem to have no effect at all, thus suggesting I'm likely editing the wrong file.

Regarding issue #1 (sideway scroll, arrow keys): Upon further investigation, it seems the template 'Addon' 'plg.swiper' is mainly responsible for the sideway movements for the 'Home-3' template. Would I be wrong to assume this feature is overriding any changes I'm making on the 'template.js' file?

Regarding issue #2 (small-screen up/down scrolling): It seems 'Home-1' 'Home-2' and 'Home-4' templates works just fine on small screen. It's only 'Home-3' that is inexplicably unable to scroll downwards (even though the [large screen] sideway feature is no longer active). How can I get 'Home-3' template to behave like all the other templates on small screen (thus allowing one finger scrolling upwards/downwards)?

saguaros

cemsdb

I meant if you want to add custom JS code, you can consider to add into template.js file.

Yes, the template uses the Swiper lib, you can find it in: /templates/ja_seven/js/swiper/

cemsdb

saguaros As mentioned, I've experimented with multiple edits on the template.js file but it seems to have no effect. (*I left my last attempted code at the end/bottom of the template.js file)

Issue# 1: Considering the Swiper lib seems to dramatically change the UIX, is it possible the 'swiper.min.js' file is overriding any related UIX edits on the 'template.js' file? If so, should I focus solely on the 'swiper.min.js' file? And if so, should I add code or remove it?

cemsdb

saguaros As for Issue #2, is the solution also via the 'swiper.min.js' file? (or the 'template.js' file?)

This issue seems to be simpler, considering the other Seven home templates work normally on small-screens (one-fingered scrolling). I'm hoping there's a simple way (css, js, etc) to make the Seven-3 template behave as the others on small-screens.

saguaros

cemsdb Yes, I've shared with team on this, will update here when having news.

cemsdb

saguaros Hi Saguaros, thanks for helping and I'm happy to hear Joomlart's dev team is working on this.

These are rather crucial features/problems, and the solution will undoubtedly benefit all other Joomlart customers who download and attempt to use JA Seven's 'Home 3' template now and into the future.

Alas, we'll have to delay our site's launch until this is fixed (otherwise anyone who attempts to visit the site on a small screen will be unable to browse it).

Can you provide an estimate on when these two issues will be resolved?

Issue #2 is likely easier to fix than issue #1. Please provide feedback as soon as either of these problems are resolved first. I'm very eager to resolve any remaining problems as soon as possible, little by little if need be (allowing us to launch sooner than later)

cemsdb

saguaros Thank you Saguaros, you solution solved issue #2 (mobile scrolling) completely!

saguaros

cemsdb As I mentioned above, I will update here when having news from team 🙂

cemsdb

saguaros Hi Saguaros, any progress? It's been over three months and the template still can't provide visitors a most basic website feature (scrolling via arrow and PgUp/PgDn keys). Such limitations should be seriously considered and swiftly resolved.

saguaros

cemsdb Hi

To be honest, we have limited human resources who are working fulltime in Joomla 4 and Joomla 5 migration and monthly templates for both JoomlArt and Gavick brands. We will be back with the update for new features once these migration are done.

We appreciate your understanding in this case.