libs/js/jquery-geo-1.0a4/docs/html/index.html

   1 <!doctype html>
   2
   3 <html lang="en" class="no-js">
   4 <head>
   5   <meta charset="utf-8">
   6
   7   <title>html | jQuery Geo</title>
   8   <meta name="description" content="jQuery Geo html requirements">
   9   <meta name="author" content="Ryan Westphal">
  10
  11   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12
  13   <link rel="stylesheet" href="../css/style.css?v=2">
  14   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  15 </head>
  16
  17 <body>
  18
  19   <div id="html" data-role="page">
  20     <div data-role="header" data-theme="b">
  21       <h1>html</h1>
  22     </div>
  23
  24     <div data-role="content">
  25       <p>Our geospatial plugin's only widget is a geographic map that you can create on any div with a computable width and height.</p>
  26       <pre><code>&lt;div style=&quot;width: 640px; height: 480px;&quot;&gt;&lt;/div&gt;</code></pre>
  27       <p>If the div is not already in relative, absolute or fixed position, the widget will force relative positioning.</p>
  28       <h2>fullscreen</h2>
  29       <p>The div size does not have to be so specific.</p>
  30       <pre><code>&lt;div style=&quot;position: fixed; top: 0; right: 0; bottom: 0; left: 0;&quot;&gt;&lt;/div&gt;</code></pre>
  31       <p>As in the above example, you can have the map fill the window by setting position to either absolute or fixed and the top, right, bottom and left properties to all zero. The map will follow the size of the window and recenter when the size of the window changes.</p>
  32       <p>Fixed position is preferred because it will not create scroll bars when making the window smaller. However, keep in mind that fixed position is not supported by IE6 and can be odd on some mobile browsers. If you do use absolute position, you can set the overflow style property on the body element to hidden and avoid scroll bars.</p>
  33       <pre><code>&lt;body style=&quot;overflow: hidden;&quot;&gt;
  34   &lt;div style=&quot;position: absolute; top: 0; right: 0; bottom: 0; left: 0;&quot;&gt;&lt;/div&gt;
  35 &lt;/body&gt;</code></pre>
  36       <h2>box model</h2>
  37       <p>The map supports divs that have padding, borders and margins. The plugin will create the map where text would normally go in such a situation, i.e., the map content will be inset from the border by the padding amount.</p>
  38       <pre><code>&lt;style&gt;
  39   #map {
  40     width: 90%;
  41     max-width: 640px;
  42     height: 480px;
  43     padding: 8px;
  44     border: solid 3px #444;
  45     margin: .5em;
  46     background: #ddf;
  47   }
  48 &lt;/style&gt;
  49 &lt;div id=&quot;map&quot;&gt;O HAI&lt;/div&gt;</code></pre>
  50       <div style="width: 90%; max-width: 640px; height: 128px; padding: 8px; border: solid 3px #444; margin: .5em; background: #ddf;">O HAI</div>
  51       <h2>inner elements</h2>
  52       <p>Any elements inside the map div can be absolutely positioned and will not interfere with map operation. Map images will appear beneath them. This is useful if you want to layout a scale bar for example.</p>
  53       <pre><code>&lt;style&gt;
  54   #bar {
  55     position: absolute;
  56     top: 10px;
  57     right: 10px;
  58     padding: 16px;
  59     background: #ccc;
  60     opacity: .8;
  61     border-radius: 8px;
  62     text-align: center;
  63     font-size: 10px;
  64   }
  65   #bar div {
  66     width: 96px;
  67     height: 2px;
  68     margin-bottom: 8px;
  69     background: #444;
  70     color: #444;
  71   }
  72 &lt;/style&gt;
  73 &lt;div id=&quot;map&quot;&gt;&lt;div id=&quot;bar&quot;&gt;&lt;div&gt;&lt;/div&gt;&lt;span&gt;1134 meters&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  74       <div style="position: relative; width: 90%; max-width: 640px; height: 128px; padding: 8px; border: solid 3px #444; margin: .5em; background: #ddf;"><div style="position: absolute; top: 10px; right: 10px; padding: 16px; background: #ccc; opacity: .8; border-radius: 8px; text-align: center; font-size: 10px;"><div style="width: 96px; height: 2px; margin-bottom: 8px; background: #444; color: #444;"></div><span>1134 meters</span></div></div>
  75       <p>This rather large scale bar will not interfere with a user trying to pan the map.</p>
  76       <h2>mobile</h2>
  77       <p>The geomap widget works on modern mobile browsers without any additional JavaScript development. However, some web design is necessary. For starters, as with any mobile development you should add a viewport meta tag into your head element. This should appear above most other tags so the mobile browser can get ready for a mobile page before doing any other work.</p>
  78       <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, minimum-scale=1, maximum-scale=1&quot;&gt;</code></pre>
  79       <p>If you have done any other mobile web developement, you're probably frowning at my decision to disable the default zoom capability of the device's web browser. If you haven't done much with mobile, I am disabling double-tap to zoom into a page by setting the min and max scale to 1.</p>
  80       <p>In almost all other cases, I would agree that disabling browser zoom is a bad user experience, however for this example I am considering a full-screen mapping application. With that in mind, double-tap has a whole new meaning and users expect it to zoom the map itself, not the page. It is in this case only that I suggest you disable browser page zoom. If you are targeting modern mobile browsers such as iOS, Android, Windows Phone 7 or Opera Mobile, you can used fixed positioning and the HTML for the full screen mobile app would look like the first fullscreen example:</p>
  81       <pre><code>&lt;div style=&quot;position: fixed; top: 0; right: 0; bottom: 0; left: 0;&quot;&gt;&lt;/div&gt;</code></pre>
  82       <p>Other mobile browsers are currently untested.</p>
  83     </div>
  84   </div> <!-- end of #container -->
  85
  86   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  87   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  88   <script src="../js/script.js"></script>
  89   <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  90 </body>
  91 </html>
  92