Okay
  Public Ticket #2994659
Displaying Different Views for Desktop and Mobile Devices
Closed

Comments

  •  2
    publicspace started the conversation

    Hi Zhivko

    I have used your code snippet at https://stachethemes.ticksy.com/article/13413/ 
    edited as below, to ensure that all presentations of the calendar are as Agenda on Mobile phones. It seems the best choice for small screens. 

    On larger screens, I want to choose whether the calendar is presented as Grid or Agenda, but this code snippet now over-rides that choice.  I have used the shortcodes: 

    [stachethemes_ec cat=86]
    [stachethemes_ec cat=87 view="agenda"]

    the first is to present as Grid, by default, and the second to present as Agenda. 

    But with this code snippet (below) they both present as Grid on larger screens.

    I have tried commenting out the normalView line in the code, but then the calendar doesn't appear at all.  

    Is there a way to set mobileView to Agenda, as below, but leave the shortcode to determine the view on larger screens?

    Thank you.

    /* From: https://stachethemes.ticksy.com/article/13413/ 
     * To change the mobile view just edit this line: var mobileView = 'grid';
     * And for Desktop this one: var normalView = 'agenda'; */
    add_action('wp_footer', function() {
        global $post;
        if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
            return;
        }
        ?>
        <script type="text/javascript">
            (function ($) {
                $(function () {
                    if (typeof $.stecExtend === 'undefined') {
                        return;
                    }
                    // config vars
                    var mobileView = 'agenda';
                    var normalView = 'grid';
                    $.stecExtend(function (m) {
                        m.glob.options.view = m.helper.isMobile() ? mobileView : normalView; 
                    });
                });
            })(window.jQuery);
        </script>
        <?php
    });-->
    
  •  878
    Zhivko replied

    Hi,

    Try following snippet:

    add_action('wp_footer', function() {
        global $post;
        if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
            return;
        }
        ?>
        <script type="text/javascript">
            (function ($) {
                $(function () {
                    if (typeof $.stecExtend === 'undefined') {
                        return;
                    }
                    // config vars
                    var mobileView = 'agenda';                 $.stecExtend(function (m) {                     if (m.helper.isMobile()) {
                            m.glob.options.view  = mobileView;
                        }
                    });
                });
            })(window.jQuery);
        </script>
        <?php
    });

    This will change the view to agenda only for mobile. 


    Stachethemes Developer

  •  2
    publicspace replied

    Perfect! 

    Thank you.