Announcement

Collapse
No announcement yet.

How to detect screen size?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    How to detect screen size?

    Hi folks,

    I'm working on a custom project that will run on the Suivant theme, and needs to work in both large and small formats. How can my code tell which format is in use? I suppose that question has three answers: for Miva Script code, template code, and JavaScript in the browser. Are there some variables to check?

    Thanks --
    Kent Multer
    Magic Metal Productions
    http://TheMagicM.com
    * Web developer/designer
    * E-commerce and Miva
    * Author, The Official Miva Web Scripting Book -- available on-line:
    http://www.amazon.com/exec/obidos/IS...icmetalproducA

    #2
    Re: How to detect screen size?

    Hi Kent,

    Besides checking for a cookie we are currently using, RESS_width, there isn't a programmatic way of checking the clients screen dimensions. That being said, we are performing in internal beta test of a new component to allow for a more adaptive or server-side approach to to site layouts. If all goes well, it should be released in the next update or two.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Re: How to detect screen size?

      For this project, all I really need is a way to detect in the browser when the screen is in "small" mode, in order to disable a rather large custom navigation menu that's intended only for larger screens. If there's an "onresize" handler that I can hook into, I could write some JS code to check the screen size and change the CSS "display" setting for the menu. But I wouldn't want to break any event handling that's already being done by jQuery, Bootstrap, Suivant, etc. Can anyone point me in the right direction for that?

      Thanks again --
      Kent Multer
      Magic Metal Productions
      http://TheMagicM.com
      * Web developer/designer
      * E-commerce and Miva
      * Author, The Official Miva Web Scripting Book -- available on-line:
      http://www.amazon.com/exec/obidos/IS...icmetalproducA

      Comment


        #4
        Re: How to detect screen size?

        Hi Kent,

        When you say you want to disable the menu, do you mean not push compile the code to the page or do you just want to hide it from any screen larger than "small"? If it is the later, you can add the class of "medium-all-hidden" to the navigation element and it will be hidden whenever the screen hits 768px or larger.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          Re: How to detect screen size?

          I set a cookie on the user's browser with javascript then read it on the global html profile tab. You cannot know the user's screen size without a cookie first being set unless you are using something like WURFL database. ( I set a best guess screen size based on my analytics if the ui cookie ISNULL.)

          Code:
          <mvt:do file="g.module_library_utilities" name="g.ui_features" value="ParseCookies( g.ui_features )" />
          <mvt:assign name="g.ui_features" value="decodeattribute(g.request_cookies:ui_features)" />
          <mvt:assign name="g.ui_j_decode" value="miva_json_decode( g.ui_features, g.ui_features )" />
          <mvt:if expr="(ISNULL g.ui_features)" >
              <mvt:assign name="g.ui_breakpoint:screen" value="'screen-md-min'" />
              <mvt:assign name="g.ui_breakpoint:value" value="'4'" />
          <mvt:else>
              <mvt:if expr="g.ui_features:width LT 480">
                  <mvt:assign name="g.ui_breakpoint:screen" value="'screen-xs-min'" />
                  <mvt:assign name="g.ui_breakpoint:value" value="'1'" />
              <mvt:elseif expr="(g.ui_features:width GT 479) AND (g.ui_features:width LT 768)">
                  <mvt:assign name="g.ui_breakpoint:screen" value="'screen-hs-min'" />
                  <mvt:assign name="g.ui_breakpoint:value" value="'2'" />
              <mvt:elseif expr="(g.ui_features:width GT 767) AND (g.ui_features:width LT 992)">
                  <mvt:assign name="g.ui_breakpoint:screen" value="'screen-sm-min'" />
                  <mvt:assign name="g.ui_breakpoint:value" value="'3'" />
              <mvt:elseif expr="(g.ui_features:width GT 991) AND (g.ui_features:width LT 1200)">
                  <mvt:assign name="g.ui_breakpoint:screen" value="'screen-md-min'" />
                  <mvt:assign name="g.ui_breakpoint:value" value="'4'" />
              <mvt:else>
                  <mvt:assign name="g.ui_breakpoint:screen" value="'screen-lg-min'" />
                  <mvt:assign name="g.ui_breakpoint:value" value="'5'" />
              </mvt:if>
          </mvt:if>
          <!DOCTYPE html>
          I can then use the ui_breakpoints to adapt what content to serve in a RESS like manner (adaptive design).

          Code:
          <mvt:if expr="g.ui_breakpoint:value EQ 1">
              <img src="images/alphabetlogo-320.png" alt="alphabet signs" itemprop="image" class="img-responsive">
          <mvt:elseif expr="g.ui_breakpoint:value EQ 2">
              <img src="images/alphabetlogo-480.png" alt="alphabet signs" itemprop="image" class="img-responsive">
          <mvt:elseif expr="g.ui_breakpoint:value EQ 3">
              <img src="images/alphabetlogo-600.png" alt="alphabet signs" itemprop="image" class="img-responsive">
          <mvt:elseif expr="g.ui_breakpoint:value EQ 4">
              <img src="images/alphabetlogo-800.png" alt="alphabet signs" itemprop="image" class="img-responsive">
          <mvt:else>
              <img src="images/alphabetlogo-960.png" alt="alphabet signs" itemprop="image" class="img-responsive">
          </mvt:if>
          http://www.alphabetsigns.com/

          Comment


            #6
            Re: How to detect screen size?

            To make it easier, there is already a cookie being set which stores the screen width, it is "RESS_width".
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              Re: How to detect screen size?

              When I first came across this post title in my email inbox, "media queries" came to mind. But after having read the thread I can't help feeling I'm missing something. If MIVA's Suivant ReadyTheme page templates are based on Bootstrap frameworks already responsive web design, why would anyone including MIVA's working on alternate solution? It seems I missing something here, can you please clarify what the issue is for me?
              Thank you, Bill Davis

              Comment


                #8
                Re: How to detect screen size?

                Hi Bill,

                Only the Base and Retro ReadyThemes are based on Bootstrap. All the others are based on the cornerstoneUX framework. Like Bootstrap, cornerstoneUX contains all the media queries calls. The one drawback to media queries is they can only be performed client-side. This is where the question of visibility hidden versus not compiling the code comes into play; not compiling requires a server-side aspect to be implemented.
                Matt Zimmermann

                Miva Web Developer
                Alchemy Web Development
                https://www.alchemywebdev.com
                Site Development - Maintenance - Consultation

                Miva Certified Developer
                Miva Professional Developer

                https://www.dev4web.net | Twitter

                Comment


                  #9
                  Re: How to detect screen size?

                  Thanks Matt. Is the RESS_width cookie only available in the Suivant theme? I'm using the bootstrap framework and couldn't find it.

                  One difference with responsive versus adaptive design is that responsive design will download all the assets then use css to show/hide what to display. This could slow page speed. Adaptive design is compiled server side so it has lighter page weight.

                  I was going to use the ui_breakpoint to adapt user content (mobile first strategy) as well as assets. For example, display a features list on a mobile device but a full product description on tablet and desktop. I found in practice that I used responsive design more than adaptive.
                  http://www.alphabetsigns.com/

                  Comment


                    #10
                    Re: How to detect screen size?

                    The RESS_width cookie is only available on the Optics, Suivant, and Iron & Wool ReadyThemes. You are correct about adaptive versus responsive. One of our goals is to make them work better together. The primary design focus will still be responsive, however you will be able to use information about the clients device to decide what code you would like to compile.
                    Matt Zimmermann

                    Miva Web Developer
                    Alchemy Web Development
                    https://www.alchemywebdev.com
                    Site Development - Maintenance - Consultation

                    Miva Certified Developer
                    Miva Professional Developer

                    https://www.dev4web.net | Twitter

                    Comment


                      #11
                      Re: How to detect screen size?

                      Originally posted by Matt Zimmermann View Post
                      When you say you want to disable the menu, do you mean not push compile the code to the page or do you just want to hide it from any screen larger than "small"? If it is the later, you can add the class of "medium-all-hidden" to the navigation element and it will be hidden whenever the screen hits 768px or larger.
                      Hi Matt -- this would work for me, except that it's the exact opposite of what I need. My custom menu is only for larger screens; I need a way to make it disappear when the screen is small. Is there a CSS class for that? If not, can you show me how to write one? Sorry, I'm not real expert on CSS, especially the newer features.

                      Although my original question was about all three environments, I guess I really need a browser-side solution in this case. That way, if the customer resizes their screen, the code can always adapt.

                      Thanks --
                      Last edited by Kent Multer; 05-04-15, 09:45 AM.
                      Kent Multer
                      Magic Metal Productions
                      http://TheMagicM.com
                      * Web developer/designer
                      * E-commerce and Miva
                      * Author, The Official Miva Web Scripting Book -- available on-line:
                      http://www.amazon.com/exec/obidos/IS...icmetalproducA

                      Comment


                        #12
                        Re: How to detect screen size?

                        Hi Kent,

                        In that case, you can add the classes of "all-hidden" and "medium-all-shown" to hide it on smaller than 768px screens.
                        Matt Zimmermann

                        Miva Web Developer
                        Alchemy Web Development
                        https://www.alchemywebdev.com
                        Site Development - Maintenance - Consultation

                        Miva Certified Developer
                        Miva Professional Developer

                        https://www.dev4web.net | Twitter

                        Comment


                          #13
                          Re: How to detect screen size?

                          What happens if the customer resizes the screen/window?

                          Unless there is a page refresh, the server can not always know what resolution the page is. I can see where it usefull for the server to know the initial display size, but some aspects of the display layout would still have to be handled client side.
                          Ray Yates
                          "If I have seen further, it is by standing on the shoulders of giants."
                          --- Sir Isaac Newton

                          Comment


                            #14
                            Re: How to detect screen size?

                            Hi Ray,

                            I use twitter bootstrap framework that seems to be closely integrated with jquery. I suppose there is a .resize() event handler but the grid and classes do collapse and hide.

                            I'm not that familiar with Foundation or Conerstone but I will probably go with a lighter framework next time I do a redesign. Or if I wait long enough use Flexbox.
                            http://www.alphabetsigns.com/

                            Comment


                              #15
                              Re: How to detect screen size?

                              Yes, Ray makes a good point: in many cases, having Miva Script or template code that's page-size-dependent won't work. --Uunless the page is automatically refreshed in some cases, which might be happening; I haven't studied these responsive frameworks. I asked my question very broadly, to cover all the bases.

                              Matt, those CSS classes did just what I need. Thanks!
                              Kent Multer
                              Magic Metal Productions
                              http://TheMagicM.com
                              * Web developer/designer
                              * E-commerce and Miva
                              * Author, The Official Miva Web Scripting Book -- available on-line:
                              http://www.amazon.com/exec/obidos/IS...icmetalproducA

                              Comment

                              Working...
                              X