[OpenLayers-Users] jquery draggable item to go on top of my openlayers map

Wed May 23 09:06:17 PDT 2012

Thanks Jerome.  You suggestion did indeed work.

Cheers,
Derek

On 5/23/2012 8:03 AM, jrom wrote:
> Hi,
>
> Did you try to add a higher z-index to your #draggable object ?
> #draggable { width: 150px; height: 150px; padding: 0.5em;z-index:10000}
>
> Regards
>
> Jerome
> --
> http://mapshup.info
>
> 2012/5/21 jdmorgan<jdmorgan at unca.edu>:
>> Hello,
>> I am trying to get a jquery draggable item to go on top of my openlayers
>> map.  Unfortunately it always goes behind the map.  Does anyone in this
>> community have any experience with this that can point me in the right
>> direction? Here is my code:
>>
>>
>> <html xmlns="http://www.w3.org/1999/xhtml">
>> <head>
>> <title>NEMAC OpenLayers GIS Viewer Dev</title>
>> <script src="libs/ol21/lib/OpenLayers.js"></script>
>> <script type="text/javascript" src="libs/jquery18/jquery-1.7.2.js"></script>
>> <script type="text/javascript" src="test.js"></script>
>> <link rel="stylesheet" href="libs/jquery18/themes/base/jquery.ui.all.css">
>> <script src="libs/jquery18/ui/jquery.ui.core.js"></script>
>> <script src="libs/jquery18/ui/jquery.ui.widget.js"></script>
>> <script src="libs/jquery18/ui/jquery.ui.mouse.js"></script>
>> <script src="libs/jquery18/ui/jquery.ui.draggable.js"></script>
>> <link rel="stylesheet" href="../demos.css">
>> </head>
>> <style>
>>         body {
>>             margin: 0;
>>             padding: 0;
>>         }
>>         #banner {
>>             background-color: Whitesmoke;
>>             margin: 0;
>>             padding: 1px 0 0 0;
>>         }
>>         #mainMenu {
>>             width:100%;
>>             margin-bottom:.2em;
>>         }
>>         #content {
>>             width:100%;
>>         }
>>         #draggable { width: 150px; height: 150px; padding: 0.5em;}
>> </style>
>> <script>
>>         $(function() {
>>             $( "#draggable" ).draggable();
>>         });
>> </script>
>> <body onload="init();">
>> <div id="draggable" class="ui-widget-content">
>> <p>Drag me around</p>
>> </div>
>> <div id="banner">
>>         NEMAC OpenLayers Viewer
>> <div id="mainMenu" align="center">
>>          Theme:<select id="themeCombo"></select>
>> </div>
>> </div>
>> <div id="content">
>> <div id="mainMap"></div>
>> </div>
>> </body>
>> </html>
>>
>>
>> --
>> Derek @ NEMAC
>>
>> _______________________________________________
>> Users mailing list
>> Users at lists.osgeo.org
>> http://lists.osgeo.org/mailman/listinfo/openlayers-users

-- 
Derek @ NEMAC
http://nemac.unca.edu