HTML5 Zone is brought to you in partnership with:

Seasoned technology professional with strong experience in developing desktop applications, web applications, mobile web applications, web services platform based on multi-tiered distributed architecture, legacy modernization, and SOA. Senthamizh Chelvi has posted 8 posts at DZone. You can read more from them at their website. View Full User Profile

How to make jQuery UI Spinner-Map Example Responsive

04.24.2013
| 2318 views |
  • submit to reddit

What is responsive web design?

A responsive web design, built with HTML5 and CSS3, allows a website to 'just work' across multiple devices and screens.


Wikipedia definition

"Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)"

Elements of responsive web design

  • Media queries
  • Fluid grid concept
  • Flexible images/video

Why responsive web design?

Mobile internet is predicted to overtake desktop internet usage by 2014 and a responsive web site can provide great user-experience across many devices and screen sizes.

How to make the example responsive ?

This article extends the jQuery UI Spinner-Map example, which is about Google Maps integration, using spinners to change latitude and longitude.


Example reference link : http://jqueryui.com/spinner/#latlong. This example is a very simple one which uses Google Maps JavaScript API, jQuery UI Spinner  widgets to change latitude and longitude to get the Google Map corresponding to these co-ordinates.

Replace the existing in-lined CSS code with this:

  <style>
    #map {
      width:1200px;
      height:800px;
    }

    @media handheld, only screen and max-width:1100px {
      /*Small Desktop / Large Tablet View */
      #map {
        width:900px;
        height:900px;
      }
      label {
        font-size:12px;
      }
    }

    @media handheld, only screen and (min-width:651px ) and (max-width:979px) {
      /*Small Desktop / Large Tablet View */
      #map {
        width:640px;
        height:800px;
      }
      label {
        font-size:12px;
      }
    }

    @media handheld, only screen and (min-width:481px ) and (max-width:960px) {
      /* Small Tablet View */
      #map {
        width:480px;
        height:600px;
      }
      label {
        font-size:10px;
      }
    }

    @media handheld, only screen and (max-width:480px) {
      /* Smartphone view*/
      #map {
        width:320px;
        height:400px;
      }
      label {
        font-size:9px;
      }
    }

    body {
      font-size: 62.5%;
      font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
    }
  </style>

Test it on browser

 Resize the browser and test your code. 




Conclusion

It is very easy to make a simple page responsive by using media queries for various mobile devices. Remember that the real implementation need to be methodological considering content, ideal width for various devices, prototype and test etc.

Two different styles need to  be created to support portrait and landscape modes of devices.

References

Published at DZone with permission of its author, Senthamizh Chelvi Kaliyaperumal.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)