V5 CoolMax skin - not possible to scroll search results on mobile

[Martin Jonas]

Hello,
in this skin, is not possible to scroll in the search pane with results. Here is not a scrollbar and also is not possible to scroll by fingers. Additional results on each page are unavailable.

Martin

[Tim Green]

Hi Martin,

Thanks for reporting this. It appears to be a new problem -- I'll get back to you here as soon as we have a fix for it.

[Martin Jonas]

There are more problems in the search part of the mobile view. For example, on the Samsung Galaxy Tab S7+, the keyboard constantly pops up and it is not possible to hide them permanently.

[Tim Green]

There are more problems in the search part of the mobile view. For example, on the Samsung Galaxy Tab S7+, the keyboard constantly pops up and it is not possible to hide them permanently.

Thanks, I can reproduce this in Chrome on Android. This is also something new. I already have a solution for the scrolling problem but I want to see what can be done about this as well. I'll let you know.

[Tim Green]

Hi Martin,

OK, I've now identified and fixed both issues. The keyboard popping up problem was caused by an old solution for an Android browser bug that is no longer relevant. Please try the following:

1) Keyboard popping up

Edit the hm_webhelp.js file in the baggage of your skin and locate these lines:

Code: Select all

// Bug fix for disappearing divs in some Android browsers
hmWebHelp.navJitter = function() {

insert "return;" directly after the second line, like this:

Code: Select all

// Bug fix for disappearing divs in some Android browsers
hmWebHelp.navJitter = function() {
return;

2) Scrolling problem on mobile

Edit the hm_searchscript.js file in the Baggage and locate this comment line:

Code: Select all

// Functions to perform after all scripts have loaded

Insert the following lines directly after the comment, before anything else:

Code: Select all

// Phones and tablets search adjustment
if (!hmDevice.desktop) {
    $(".searchheading, .summary, .result_pagescount, .sorting").hide();
    $(".results").css({"position": "absolute"});
    }

I'm going to do some more extensive testing before this goes live with an update, but this should help you out for now. Let me know if you experience any problems.

[Martin Jonas]

Hi Tim,
thank You for the quick support. Problem with keyboard is solved, but I still have the issue with scrollbar. My edited part of hm_searchscript.js:

Code: Select all

	// Load all necessary scripts asynchronously
		$.ajaxPrefilter( "json script", function( options ) {options.crossDomain = true;});
		var loaded = 0;
		for (var scr = 0; scr < scripts.length; scr++) {
			$.getScript( scripts[scr], function( data, textStatus, jqxhr ) {
			loaded++;
			if (loaded == scripts.length) {
			
			// Functions to perform after all scripts have loaded
         
                        // Phones and tablets search adjustment
                        if (!hmDevice.desktop) {
                        $(".searchheading, .summary, .result_pagescount, .sorting").hide();
                        $(".results").css({"position": "absolute"});
                        }
			
			// Disable ENTER on iPad because of keyboard popup bug -- user must tap search button
			$("input#zoom_searchbox").on("keydown", function(event) {
				if (hmDevice.ipad && event.keyCode == 13) {
				event.preventDefault();
				}
			});

Is it correct?
Martin

[Martin Jonas]

Next problem: When You hide header from the menu and then tap into search box, the menu appears above the chapter title.

It is something wrong with resolution 2800x1752. Because if I emulate other devices (e.g. Ipad Air) the scrollbar is visible.

[Martin Jonas]

Another thing that doesn't work are the links to return to the top of the page. I mean links to the same chapter (Current topic) without any selected anchors (Top) created in H&M:

Code: Select all

<a href="index.html" class="topiclink">top</a>

[Tim Green]

Hi Martin,

Your scrollbar code is correct, but it won't work if you are testing tablet mode on the desktop. You need to actually be on a mobile device. This may also be the problem with your header. For example, when I test this on a 12.9" iPad Pro it works fine. Also make sure that you are clearing the browser cache completely after making every change. And when you are testing on a desktop with the F12 console and emulation you MUST hit clear cache and hard reload before testing.

This is getting unwieldy to handle on the forum, also because I don't have your versions to test on. Please send a small demo project and your testing details to support AT ec-software.com (replace the AT with @) and then we can discuss by mail and get back here when we have some concrete solutions.

[Tim Green]

Martin,

Update: I just did some more testing and I can confirm that the scroll problem won't be fixed if you are using the F12 console emulation for tablets on a desktop browser because it doesn't provide complete hardware emulation. However, it will work fine on an actual tablet.