jQuery Forum

Hi

Below application has header, content and footer sections.
http://openlayers.org/dev/examples/mobile-jq.html

I want when I zoom in/out using multi-touch then only contents i.e. actual map should zoom in/out not footer section.

How can we do it in Jquery Mobile?


Thanks!

Hi

I am using below Jquery Mobile example of Open Layers -

http://openlayers.org/dev/examples/mobile-jq.html#mappage


When I zoom the map, the buttons are also zoomed which looks very odd and it becomes impossible to navigate in the map on a mobile phone.

I checked the code for the example which has been reproduced as under -

 <div data-role="page" id="mappage">
          <div data-role="content">
            <div id="map"></div>
          </div>

          <div data-role="footer">
            <a href="#searchpage" data-icon="search" data-role="button">Search</a>
            <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
            <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
          </div>
         
        </div>


Even though footer is in separate div from Map (which is in content Div) then also footer is zooming on just zooming map.

Please let me know possible solution to this issue.

Thanks!