jQuery + OpenLayers

by erichbschulz

HTML

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<body>
     <h1>Test</h1>

    <div id="agc">
        <div id="top">the top</div>
        <div id="container">
            <div id="left">
                <div id="map"></div>
            </div>
            <div id="right">
                <ul>
                    <li>The columns are in the right order semantically</li>
                    <li>You don't have to float both columns</li>
                    <li>You don't have to float both columns</li>
                </ul>
            </div>
        </div>
        <div id="bottom"> <span id="agcStatus">status: good</span>

<span id="agcStatus">status: good</span>

            <button id="bigger">bigger</button>
        </div>
    </div>
     <h6>the real end</h6>

</body>

CSS

#agc {
    background-color: grey;
}
#left {
    background-color: grey;
    float: left;
    width: 60%;
    resize: both;
    padding: 10px;
    overflow: auto;
}
#map {
    height: 150px;
}
#right {
    background-color: Aqua;
    margin-left: 40%;
}
#bottom, #top {
    clear: both;
    background-color: green;
}

JavaScript

var map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
map.zoomToExtent();

function describe(el) {
    console.log(el + ": " + $(el).width());
    console.log(el + "x: " + $(el).css("width"));
}


$("#bigger").click(function () {
    console.log('hello');
    describe('#left');
    describe('#top');
    describe('#right');
    $("#agcStatus").html("heelllllllllllllllllllo");
});

$('#left').resize(function() {
    console.log('yp');
    
});
alert('i am started');