Over a million developers have joined DZone.

How to make jQuery UI Spinner-Map Example Responsive

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}