Re: Winchester Responsive
You are the BEST.. Thanks for this..
Quote:
Originally Posted by
rbarbour
Try:
Code:
<?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
}
?>
Re: Winchester Responsive
Quote:
Originally Posted by
picaflor-azul
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
Quote:
Originally Posted by
RixStix
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.
Quote:
Originally Posted by
RixStix
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 {}
Quote:
Originally Posted by
RixStix
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.
Re: Winchester Responsive
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.
Re: Winchester Responsive
Quote:
Originally Posted by
rbarbour
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.
Re: Winchester Responsive
Quote:
Originally Posted by
RixStix
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.
Quote:
Originally Posted by
RixStix
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.
Quote:
Originally Posted by
RixStix
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.
Re: Winchester Responsive
Quote:
Originally Posted by
rbarbour
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
Code:
<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
Quote:
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.
Re: Winchester Responsive
Quote:
Originally Posted by
RixStix
Not quite so easy to do on an Android tablet but here it is
Code:
<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
Re: Winchester Responsive
Tried this, and it doesn't seem to be working.. mobile devices still scroll 4 ahead..
Quote:
Originally Posted by
rbarbour
Try:
Code:
<?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
}
?>
Quote:
Originally Posted by
DivaVocals
You are the BEST.. Thanks for this..
Re: Winchester Responsive
Quote:
Originally Posted by
DivaVocals
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.
Re: Winchester Responsive
Quote:
Originally Posted by
rbarbour
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)
