Winchester Responsive

**rbarbour** · 13 May 2014, 06:58 PM

Originally Posted by DivaVocals

The default responsive css..

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

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!

**yaritai** · 14 May 2014, 05:25 AM

Originally Posted by rbarbour

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!

Hi rbarbour,

I will give my input as I looked into your code for 2.1 a while back to do a small task for a friend. From what I did, the issue is not with the call to mobile detect as it is working. What his site is doing was to revert back to your older code without the session switch display and it does call the correct css responsive files. This is what I did to his:

PHP Code:


if ($detect->isMobile() && !$detect->isTablet()) {



    echo mobile.css;

} else if ($detect->isTablet()){

    echo tablet.css;

} else {

    echo default.css;

  }

When taking away the session display it works fine. It was a workaround as the switch was not important to him. So I guess for now, this may be the best alternative for those who want to use the winchester template and still have the capabilities of calling certain specific files.

I was looking at the session switch to see if that was causing the issue but didn't go further since it was not important to him.

**yaritai** · 14 May 2014, 06:33 AM

Just did a quick check and it seems the session for display mode is not set upon entering the site. I did a quick test by installing your 2.1 sql file to allow for the switches in all 3 header files. Once those switches are clicked the session is then set. So use the above code changes in I think 3 files to add another condition to the if statements. Taking the code above, add it to the beginning such as:

PHP Code:


if ([COLOR="#FF0000"]$detect->isMobile() && !$detect->isTablet() or[/COLOR] .... 2.1 code .... ) {

    echo $responsive_mobile;
} else if ([COLOR="#FF0000"]$detect->isTablet() or [/COLOR] .... 2.1 code .... ){
    echo $responsive_tablet;
} else {
    echo $responsive_default;
  }

This will now pull the correct js, css, php files needed for devices, tablets and desktop.

Originally Posted by yaritai

Hi rbarbour,

I will give my input as I looked into your code for 2.1 a while back to do a small task for a friend. From what I did, the issue is not with the call to mobile detect as it is working. What his site is doing was to revert back to your older code without the session switch display and it does call the correct css responsive files. This is what I did to his:

PHP Code:


if ($detect->isMobile() && !$detect->isTablet()) {

    echo mobile.css;
} else if ($detect->isTablet()){
    echo tablet.css;
} else {
    echo default.css;
  }

When taking away the session display it works fine. It was a workaround as the switch was not important to him. So I guess for now, this may be the best alternative for those who want to use the winchester template and still have the capabilities of calling certain specific files.

I was looking at the session switch to see if that was causing the issue but didn't go further since it was not important to him.

**rbarbour** · 14 May 2014, 03:37 PM

Originally Posted by yaritai

Hi rbarbour,

I will give my input as I looked into your code for 2.1 a while back to do a small task for a friend. From what I did, the issue is not with the call to mobile detect as it is working. What his site is doing was to revert back to your older code without the session switch display and it does call the correct css responsive files. This is what I did to his:

PHP Code:


if ($detect->isMobile() && !$detect->isTablet()) {



    echo mobile.css;

} else if ($detect->isTablet()){

    echo tablet.css;

} else {

    echo default.css;

  }

When taking away the session display it works fine. It was a workaround as the switch was not important to him. So I guess for now, this may be the best alternative for those who want to use the winchester template and still have the capabilities of calling certain specific files.

I was looking at the session switch to see if that was causing the issue but didn't go further since it was not important to him.

Yes, you are correct! The above code from 2.0 will suffice for those not looking to use the template display_mode switch.

For those of you that want to use or was expecting to use the core template display_mode switch functions included in my 2.1 framework that I forgot to copy over before submitting, Anne is now and always accepting donations to RESTORE this function. LOL, just kidding, no really. (Made me laugh!

, my own personal inside joke)

In: \includes\templates\winchester_responsive\common\html_header.php

find:

Code:

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

    echo $responsive_mobile;

} else if ($detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

    echo $responsive_tablet;

} else if ($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $_SESSION['display_mode']=='isNonResponsive'){

    echo '';

} else {

    echo $responsive_default;

  }
}

and replace with:

Code:

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

    echo $responsive_mobile;

} else if ($detect->isTablet() or $detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

    echo $responsive_tablet;

} else if ($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $_SESSION['display_mode']=='isNonResponsive'){

    echo '';

} else {

    echo $responsive_default;

  }  
}

I am sure Anne will update promptly!

@DivaVocals, Crystal

The above should work now with the scroller as well.

Code:

<?php if ($detect->isMobile() && !$detect->isTablet() or $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, <!--SHOW 1 ON PHONES-->
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });
      --></script>

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

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

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

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

<?php }  ?>

**picaflor-azul** · 14 May 2014, 03:47 PM

Originally Posted by rbarbour

Yes, you are correct! The above code from 2.0 will suffice for those not looking to use the template display_mode switch.

For those of you that want to use or was expecting to use the core template display_mode switch functions included in my 2.1 framework that I forgot to copy over before submitting, Anne is now and always accepting donations to RESTORE this function. LOL, just kidding, no really. (Made me laugh!

, my own personal inside joke)

In: \includes\templates\winchester_responsive\common\html_header.php

find:

Code:

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

    echo $responsive_mobile;

} else if ($detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

    echo $responsive_tablet;

} else if ($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $_SESSION['display_mode']=='isNonResponsive'){

    echo '';

} else {

    echo $responsive_default;

  }
}

and replace with:

Code:

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

    echo $responsive_mobile;

} else if ($detect->isTablet() or $detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

    echo $responsive_tablet;

} else if ($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $_SESSION['display_mode']=='isNonResponsive'){

    echo '';

} else {

    echo $responsive_default;

  }  
}

I am sure Anne will update promptly!

@DivaVocals, Crystal

The above should work now with the scroller as well.

Code:

<?php if ($detect->isMobile() && !$detect->isTablet() or $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, <!--SHOW 1 ON PHONES-->
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });
      --></script>

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

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

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

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

<?php }  ?>

I can not thank you enough for working on the fix and posting it

I am working on all of the fixes included so far in this thread and will be submitting an update asap!

Thanks,

Anne

**rbarbour** · 14 May 2014, 03:48 PM

The Demo Site was updated with new php-mobile-detect code as well, please report any errors or findings. Remember not 100% of all devices will be detected and most tablets are now using mobile browsers.

**DivaVocals** · 14 May 2014, 08:10 PM

Yep this did the trick.. Thanks! The right stylesheet is being pulled, the scroll works as I expect..

but I have another issue

.. (more on that when I get home and can speak coherently

)

Originally Posted by rbarbour

@DivaVocals, Crystal

The above should work now with the scroller as well.

Code:

<?php if ($detect->isMobile() && !$detect->isTablet() or $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, <!--SHOW 1 ON PHONES-->
                prev    : {
              button  : "#foo1_prev",
                  },
                next    : {
              button  : "#foo1_next",
                  }
            });
        });
      --></script>

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

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

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

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

<?php }  ?>

**yaritai** · 16 May 2014, 04:21 AM

Originally Posted by rbarbour

In: \includes\templates\winchester_responsive\common\html_header.php

find:

Code:

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

    echo $responsive_mobile;

} else if ($detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

    echo $responsive_tablet;

} else if ($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $_SESSION['display_mode']=='isNonResponsive'){

    echo '';

} else {

    echo $responsive_default;

  }
}

and replace with:

Code:

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

    echo $responsive_mobile;

} else if ($detect->isTablet() or $detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

    echo $responsive_tablet;

} else if ($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $_SESSION['display_mode']=='isNonResponsive'){

    echo '';

} else {

    echo $responsive_default;

  }  
}

Just wanted to add that since the session display mode is not set unless clicking the switches, I think the if statements should be changed to:

Code:

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

    echo $responsive_mobile;

} else if ($detect->isTablet() && $_SESSION['display_mode']=='' or $detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

    echo $responsive_tablet;

} else if ($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $_SESSION['display_mode']=='isNonResponsive'){

    echo '';

} else {

    echo $responsive_default;

  }

Basically I just added $_SESSION['display_mode']==''. This would now allow the view to change for those who are using the switches. These changes should also be used in places where the mobile detect is using this same if statement structure. I have not looked at what files are affected but do recall other files that use it to call specific files/code.

Without the changes above, the switches would not do anything as the addition of the 2.0 code workaround would always override the switch.

**rbarbour** · 16 May 2014, 11:57 AM

Originally Posted by yaritai

Just wanted to add that since the session display mode is not set unless clicking the switches, I think the if statements should be changed to:

Basically I just added $_SESSION['display_mode']==''. This would now allow the view to change for those who are using the switches. These changes should also be used in places where the mobile detect is using this same if statement structure. I have not looked at what files are affected but do recall other files that use it to call specific files/code.

Without the changes above, the switches would not do anything as the addition of the 2.0 code workaround would always override the switch.

The reason it was not working is because it was looking for a $_SESSION on page load which did not exist, I fixed that!

Now the php-detect class renders the proper responsive files on page load and YES, sets the $_SESSION after a link is clicked.

My fix will be added to the update of the DIY Responsive Template Default for v1.5.x package, Anne may use or choose to go your route or any other as she sees fit. Just looking at what you provided, I'm sure it works but have not tested.

**picaflor-azul** · 16 May 2014, 04:01 PM

Originally Posted by rbarbour

The reason it was not working is because it was looking for a $_SESSION on page load which did not exist, I fixed that!

Now the php-detect class renders the proper responsive files on page load and YES, sets the $_SESSION after a link is clicked.

My fix will be added to the update of the DIY Responsive Template Default for v1.5.x package, Anne may use or choose to go your route or any other as she sees fit. Just looking at what you provided, I'm sure it works but have not tested.

I did implement your fix and all is working well now with the php mobile detect script :)

Thanks,

Anne

Thread: Winchester Responsive

Thread Tools

Search Thread

Display

Hybrid View

Re: Winchester Responsive

Re: Winchester Responsive

Re: Winchester Responsive

Re: Winchester Responsive

Re: Winchester Responsive

Re: Winchester Responsive

Re: Winchester Responsive

Re: Winchester Responsive

Re: Winchester Responsive

Re: Winchester Responsive

Similar Threads

v154 Winchester Black Responsive Template

v155 Winchester Black responsive - looking for Social media icon flexible footer fix

v155 Responsive Classic vs Responsive Sheffield Blue vs ?

v154 Where do I find the images for sliders, using Winchester Responsive Black

v153 Winchester Responsive - Trouble resizing carousel size?

Posting Permissions