Winchester Responsive

[DivaVocals]

You are the BEST.. Thanks for this..

Try:

<?php
      if($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){
?>

<script type="text/javascript"><!--
      $(document).ready(function() {
          $("#foo1").carouFredSel({
       
      auto: false,
                align: "center",
                padding: [0, 25, 0, 20],
                width: "100%",
                height: "auto",
                items: {
          },
                scroll: 1,
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });
      --></script>

<?php
      } else {
?>

<script type="text/javascript"><!--
      $(document).ready(function() {
          $("#foo1").carouFredSel({
       
      auto: false,
                align: "center",
                padding: [0, 25, 0, 20],
                width: "100%",
                height: "auto",
                items: {
          },
                scroll: 4,
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });
      --></script>

<?php
      }
?>

[rbarbour]

We will have to consult rbarbour about this. The template does work on both landscape and portrait tablets. Maybe it is the way that you have your devices configured that is not allowing the user agent to be detected by the php mobile detect script? See this:

http://code.google.com/p/php-mobile-detect

and what does this say when you visit on your tablet:

http://demo.mobiledetect.net/

Thanks,

Anne

Android 8" and 10" Tablets detected as tablets.
Android 7" tablet detected as mobile.
Windows 8.1 Pro tablet is detected as desktop.
Windows 8.1 RT tablet detected as tablet.

The php-mobile-detect is open source, active and updated regularly (currently 4 new versions exist). Devices are added and updated in every new version, the code however cannot detect a device with a UA that is not expressed (device browsers mainly) do not express "mobile" or "tablet".

For this reason, the responsive_default.css still exists, to provide common breakpoints and a default layout where the php-mobile-detect code falls short.

Some issues are related to screenwidth, not tablet/desktop because they exist either on tablet or desktop with width resized to the 768 width step.

Any layout issues related to the above screen width should be added to the responsive_default.css file between the @media (min-width:768px) and (max-width:979px) curly brackets {}

Some issue related to the buttons mentioned earlier that have expected functionality but designed functionality is 'do nothing' and require a tap on the teeny arrows instead. Nothing you can do about the built-in feature that do not function as expected by other users.

Core zencart functionality works fine with a tap.
Responsive functionality requires tap and hold to function in some cases which causes confusion when some buttons are tap only functionality and some are tap and hold.

Tap and hold functionality, when used on Windows tablets, opens a typical 'right-click' window instead of expected action.

The tap and tap/hold issues I believe are 3rd party plugin/add-on related and I have not had a chance to view or play with. Will do so, so I can try to better help troubleshoot.

[RixStix]

TNX rbarbour.

I am not a coder, just a technician that can implement changes when I have an example or similar.

I do not own any Apple devices and haven't looked at the screen resolution used by them.

I do own Samsung Android 8 &10 inch tablets. Both screen resolutions are identical 1280 x 800. Some responsive functionality is different between the two tablets but I haven't a clue what in the code would make them different unless it is the UA detection. I listed the various UA by different browsers within them in an earlier post.

I do own 2 Windows tablets but MSFT seems to have given them a mind of their own. I have no known 3rd party plugins installed for touch functionality; just out of the box IE11.

Not being able to make menu selections because the selections extend off the bottom of the screen is a major showstopper. I am assuming it is related to slimmenu. How do we freeze or delay the menu on MouseLeave instead of collapsing the menu. I'm assuming touch input coming off the screen is functionally equivalent to mouseleave.

Whatever I can do to help, please ask either here or PM. You and Anne have my utmost respect in being forthcoming and volunteering time and efforts to the community.

[RixStix]

The php-mobile-detect is open source, active and updated regularly (currently 4 new versions exist). Devices are added and updated in every new version, the code however cannot detect a device with a UA that is not expressed (device browsers mainly) do not express "mobile" or "tablet".

I checked the mobile-detect code and both of my Android tablets are listed so I assume the mobile detect code applies instead of the responsive_default.css code. OR the UA detection has functionality issues with Android UA strings.

In my quest to dig deeper....

Based upon 2nd hand information & tester, Apple touch responses to slimmenu (is that what it's called) are different than Android responses.

• If the menu extends offscreen, Apple tablets can just swipe again to reveal the portion of the menu that extends off the screen. The menu does not collapse when touch input is lifted.
• Android tablets collapses the menu when touch input is removed, making it impossible to select lower menu selections.

Many (dare I say most) Android & Windows tablets fall within "No Man's Land" screen sizes as far as responsive code is concerned.

[rbarbour]

I checked the mobile-detect code and both of my Android tablets are listed so I assume the mobile detect code applies instead of the responsive_default.css code. OR the UA detection has functionality issues with Android UA strings.

Lets try moving past assumption and find out, use the browsers "view page source" to see what responsive css file is being called.

In my quest to dig deeper....

Based upon 2nd hand information & tester, Apple touch responses to slimmenu (is that what it's called) are different than Android responses.

• If the menu extends offscreen, Apple tablets can just swipe again to reveal the portion of the menu that extends off the screen. The menu does not collapse when touch input is lifted.
• Android tablets collapses the menu when touch input is removed, making it impossible to select lower menu selections.

As stated earlier, slimmenu is a 3rd party plugin/addon I have not yet tested and it's touch abilities or not have not been tested by me and would have nothing to do with the responsive code. As time permits I will test and play with, then pass my findings along.

Many (dare I say most) Android & Windows tablets fall within "No Man's Land" screen sizes as far as responsive code is concerned.

You may, the default responsive code covers this so called "No Man's Land" screen sizes per my last post. Both the mobile and tablet responsive code cover all sizes for they return only 1 layout based on the orientation of the device.

[RixStix]

Lets try moving past assumption and find out, use the browsers "view page source" to see what responsive css file is being called.

Not quite so easy to do on an Android tablet but here it is

<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/stylesheet.css"  />
<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/stylesheet_flex.css"  />
<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/stylesheet_responsive_tabs.css"  />
<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/index_home.css"  />
<script src="https://ajax.googleapis.com/ajax/lib.../jquery.min.js"   type="text/javascript"></script>
<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/responsive.css" />
<link  rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/responsive_default.css" />  
<script  src="includes/templates/winchester_responsive/jscript/css_browser_selector.js"  type="text/javascript"></script> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"  rel="stylesheet" />

UA string using http://demo.mobiledetect.net/

Mobile_Detect v. 2.8.0
The lightweight PHP class for detecting mobile devices.
This is a tablet. Your UA is Mozilla/5.0 (Linux; Android 4.2.2; SM-T310 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.114 Safari/537.36

mobile_detect.php
line 179 ..... SM-T310

Doesn't appear that mobile_detect.php is seeing SM-T310 in the UA string

As stated earlier, slimmenu is a 3rd party plugin/addon I have not yet tested and it's touch abilities or not have not been tested by me and would have nothing to do with the responsive code. As time permits I will test and play with, then pass my findings along.

Sorry, I thought that comment was regarding Windows tablets 3rd party plugin, not slimmenu. I never said that it had anything to do with the responsive code, but it does have something to do with the template functionality regarding the user being able to select a product category which happens to be off-screen on Android and Windows tablets.

[rbarbour]

Not quite so easy to do on an Android tablet but here it is

<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/stylesheet.css"  />
<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/stylesheet_flex.css"  />
<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/stylesheet_responsive_tabs.css"  />
<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/index_home.css"  />
<script src="https://ajax.googleapis.com/ajax/lib.../jquery.min.js"   type="text/javascript"></script>
<link rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/responsive.css" />
<link  rel="stylesheet" type="text/css"  href="includes/templates/winchester_responsive/css/responsive_default.css" />  
<script  src="includes/templates/winchester_responsive/jscript/css_browser_selector.js"  type="text/javascript"></script> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"  rel="stylesheet" />

UA string using http://demo.mobiledetect.net/

Mobile_Detect v. 2.8.0
The lightweight PHP class for detecting mobile devices.
This is a tablet. Your UA is Mozilla/5.0 (Linux; Android 4.2.2; SM-T310 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.114 Safari/537.36

mobile_detect.php
line 179 ..... SM-T310

Doesn't appear that mobile_detect.php is seeing SM-T310 in the UA string

OK, so mobile detect is detecting the tablet as a tablet, this is good and working correctly. SM-T310 shouldn't matter because your test returns This is a tablet.

The problem, looking at the files listed from the "view page source" above, is that the responsive_default.css file is being called and not the responsive_tablet.css file.

Have you made any changes to the html_header.php file

[DivaVocals]

Tried this, and it doesn't seem to be working.. mobile devices still scroll 4 ahead..

Try:

<?php
      if($detect->isMobile() && !$detect->isTablet()  && $_SESSION['display_mode']=='isMobile' or  $detect->isTablet() && $_SESSION['display_mode']=='isMobile'  or $_SESSION['display_mode']=='isMobile'){ 
?>

<script type="text/javascript"><!--
      $(document).ready(function() {
          $("#foo1").carouFredSel({
       
      auto: false,
                align: "center",
                padding: [0, 25, 0, 20],
                width: "100%",
                height: "auto",
                items: {
          },
                scroll: 1,
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });
      --></script>

<?php
      } else { 
?>

<script type="text/javascript"><!--
      $(document).ready(function() {
          $("#foo1").carouFredSel({
       
      auto: false,
                align: "center",
                padding: [0, 25, 0, 20],
                width: "100%",
                height: "auto",
                items: {
          },
                scroll: 4,
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });
      --></script>

<?php
      }
?>

You are the BEST.. Thanks for this..

[rbarbour]

Tried this, and it doesn't seem to be working.. mobile devices still scroll 4 ahead..

Crystal,

Will you do the same, check the browsers "view page source" to see what responsive css file is being called.

For some reason I don't think the mobile detect code is functioning and I can't reproduce, but I am getting the same results as you and Rick on the DEMO using the FF UA Switcher.

[RixStix]

OK, so mobile detect is detecting the tablet as a tablet, this is good and working correctly. SM-T310 shouldn't matter because your test returns This is a tablet.

The problem, looking at the files listed from the "view page source" above, is that the responsive_default.css file is being called and not the responsive_tablet.css file.

Have you made any changes to the html_header.php file

I have not modified the html_header.php file version which is included with the template.

This is a zencart v1.5.1 install plus this template and ckeditor installed. I wanted to get the template ironed out before adding any extras.

For testing, I have,

8" Galaxy Tab 3 (4 different browsers)
10" Galaxy Tab 3 (4 different browsers)
7" Generic Tab (3 browers)
Windows SurfaceRT tablet (IE11 only)
Windows 8.1 Pro tablet (3 browsers)