Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Openlayers fluid/fixed layout demo

By: a guest on Aug 24th, 2010  |  syntax: HTML  |  size: 1.95 KB  |  hits: 232  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <OCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.         <head>
  5.                 <title> </title>
  6.                 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
  7.                 <style>
  8.                 #container{
  9.                         height: 100%;
  10.                         width: 100%;
  11.                         background: #666;
  12.                         position: relative;
  13.                 }
  14.                 #text{
  15.                         background: #D66;
  16.                 }
  17.                 #map{
  18.                         position: absolute;
  19.                         width: 100%;
  20.                         bottom: 0;
  21.                         z-index: 2;
  22.                 }
  23.                 </style>
  24.         </head>
  25.         <body>
  26.                 <div id='container'>
  27.                         <div id='text'>
  28.                                 <p>Here are a few sentences.</p>
  29.                                 <p>They aren't very large...</p>
  30.                                 <p>Or particularily helpful...</p>
  31.                                 <p>oh well.</p>
  32.                         </div>
  33.                         <div id="map">
  34.                         </div>                 
  35.                 </div>
  36.                 <script src="http://openlayers.org/api/OpenLayers.js" language="javascript" type="text/javascript"></script>
  37.                 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  38.                
  39.                 <script language="javascript" type="text/javascript">
  40.                 var map = null;
  41.         var extent = new OpenLayers.Bounds(-180, -90, 180, 90);
  42.  
  43.         function init() {
  44.             var options = {
  45.                 restrictedExtent: extent
  46.             }
  47.             map = new OpenLayers.Map('map', options);
  48.  
  49.             var wms = new OpenLayers.Layer.WMS(
  50.                 "OpenLayers WMS",
  51.                 "http://labs.metacarta.com/wms/vmap0?",
  52.                 {layers: 'basic'}
  53.             );
  54.  
  55.             map.addLayers([wms]);
  56.             map.setCenter(extent, 1);
  57.         }
  58.        
  59.         function toggleRestrictedExtent() {
  60.             if(map.restrictedExtent == null) {
  61.                 map.setOptions({restrictedExtent: extent});
  62.             } else {
  63.                 map.setOptions({restrictedExtent: null});
  64.             }
  65.         }
  66.                
  67.                 function resizeMap(){
  68.                         $('#map').css('top',$('#text').height()+'px');
  69.                 }
  70.                 $(document).ready(function(){
  71.                         resizeMap();
  72.                         init();
  73.                 });
  74.                 </script>
  75.         </body>
  76. </html>
create a new version of this paste RAW Paste Data