Winchester Responsive

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

On another note, this template came RIGHT ON TIME for a project that dropped into my lap last week.. I'll be replacing the very popular ########## Responsive template on with this template for a client..

Too many things about the ########## template that the client doesn't like, and many more that I DESPISE!!! Told the client that I could have the conversion done in a few days.. Showed him this template and walked him through my conversion plan.. Client wasn't convinced that this was "doable", but trusted my judgement.. He just saw my first draft of the conversion using this template as the foundation, and now he is a believer!!

Thanks to Anne and Raymond.. Ya'll rock..

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

[rbarbour]

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

Figured as much, Anne and I are working on it! Something is preventing the mobile-detect-code from firing, just a matter of hunting down what. Anne will post the corrective action as soon as we do and all should be good!