Winchester Responsive

[DivaVocals]

would like to have the featured products scroller advance to the next 4 products versus the next single product as it currently does..

I know if I change this section in the includes/templates/winchester_responsive/templates/tpl_index_default.php and includes/templates/winchester_responsive/templates/tpl_index_categories.php files from:

<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",
                  }
            });
        });

to:

<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",
                  }
            });
        });

This works perfectly UNTIL.. you view it on a mobile device.. So how can I set it to scroll 4 on devices up to 979px and just scroll 1 at a time on smaller devices..

[picaflor-azul]

would like to have the featured products scroller advance to the next 4 products versus the next single product as it currently does..

I know if I change this section in the includes/templates/winchester_responsive/templates/tpl_index_default.php and includes/templates/winchester_responsive/templates/tpl_index_categories.php files from:

<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",
                  }
            });
        });

to:

<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",
                  }
            });
        });

This works perfectly UNTIL.. you view it on a mobile device.. So how can I set it to scroll 4 on devices up to 979px and just scroll 1 at a time on smaller devices..

I am sorry, but I have no idea. My guess is that you will have to write some javascript.

Thanks,

Anne

[rbarbour]

would like to have the featured products scroller advance to the next 4 products versus the next single product as it currently does..

I know if I change this section in the includes/templates/winchester_responsive/templates/tpl_index_default.php and includes/templates/winchester_responsive/templates/tpl_index_categories.php files from:

<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",
                  }
            });
        });

to:

<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",
                  }
            });
        });

This works perfectly UNTIL.. you view it on a mobile device.. So how can I set it to scroll 4 on devices up to 979px and just scroll 1 at a time on smaller devices..

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
      }
?>

[picaflor-azul]

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
      }
?>

Yes, that is the way to do it! Thank you for pointing it out, I had forgotten about the device specific js that can be added with the new version of DIY responsive default, very cool

Thanks,

Anne

[DivaVocals]

<p>
**grrr**</p>

[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
      }
?>

[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.

[DivaVocals]

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.

As Rick has indicated.. checking the page source from the mobile browsers isn't easy.. I have an HTML source viewer app on my phone and tablet (Both Android devices), but I am not confident that it is reporting results from the mobile browsers POV.. Let me finish getting ready for work, and I'll post the results from my smartphone when I get to work..

[DivaVocals]

The default responsive css..

Here's the scroller code being called.. Note it's using the non-mobile code.;

 
<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",
                  }
            });
        });

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.