I'm trying to make an optional draggable div, which shows up at some condition. This does work for me. The Initial location is fine, but the new div pushes the panel below further below. Now I want the draggable panel to be displayed on top of the rest of the panels (without reshuffling the existing panels). The code is below, and I put an example with js libraries, and css on my website: link text (not sure what the stackoverflow policy is on this, as I'll probably won't leave it there forever).
<html>
<head>
<title>Desgin Mayor</title>
<style type="text/css">
#draggable { width: 120px; padding: 0.5em; border: 3px solid red; }
</style>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="css/designmayor.css" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
$("#draggable").hide();
});
function test() {
for (i=0;i<10;i++) {
$('<div class="inputline">Line ' + i + '</div>').appendTo('#draggable');
}
$('#draggable').show();
}
</script>
</head>
<body>
<div id="header"><div class="headertext">Design Mayor</div><div id="draggable" class="ui-widget-content inputpanel">
<p>Input Controls</p>
</div></div>
<div class="designmenu">
<ul class="menu">
<li><a href="javascript:test()">Press me</a></li>
</ul>
</div>
<div id="contentscontainer">
<div id="designpanel">
</div>
</div>
</body>
</html>
The relevant css I'm currently using:
element.style {
display:block;
position:relative;
}
#draggable {
border:3px solid red;
padding:0.5em;
width:120px;
}
drag.html (line 5)
.ui-widget-content {
background:url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
border:1px solid #AAAAAA;
color:#222222;
}
designmayor.css (line 62)
.inputpanel {
border:1px solid #FF0000;
display:inline;
float:right;
font-size:65%;
left:10px;
width:7%;
z-index:5;
}
Any help is greatly appreciated