jQuery - not quite doing what I want :p

udjamaflip · 09-19-2009, 12:10 PM

The code below half works at the moment, and I seem to be hitting a stumbling block. When you currently click minimise/close that one will dissapear as planned, however the other divs all jump up by the height of the div that was closed, any ideas?

Additionally my code thats supposed to write the <a> tag to the dock isn't working either, but I can deal with that another time.

Code:

<html>
 <head>
   <title>testage</title>
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/jquery-ui.js"></script>
   <script type="text/javascript">
	$(document).ready(function($){
		$("div[id^=win]").draggable({
			containment: 'document',
			stack: {group: $("[id^=win]"), min: 1},
			handle: $(".title"),
			opacity: 0.5
		});
		
		$(".close").click(function() {
		    $(this).parents("[id^=win]").remove();
		});
		
		$(".minimise").click(function() {
		    $(this).parents("[id^=win]").css('display','none');
		    $("#dynamic-icons").append('<a href="#" id="'+[id^=win]+'">'+[id^=win]+'</a>');
		});
		
		$("a[id^=win]").click(function() {
			$("div[id^=win]").css('display','block');
			$("a[id^=win]").remove();
		});
	});
   </script>
	<style type="text/css">
	body { background-color: #c0c0c0; margin: 0px; }
	.window { border: 1px solid #000000; background-color: #ffffff; }
	.title { background-color: #ff0000; cursor:move; }
	.icons { float:right; }
	.content { color:#666666; }
	
	#win1 { width: 200px; height: 400px; position: static; left: 5px; top: 5px; clear: both; }
	#win2 { width: 400px; height: 200px; position: static; left: 220px; top: -372px; clear: both; }
	#win3 { width: 500px; height: 500px; position: static; left: 504px; top: -288px; clear: both; }
	#win4 { width: 600px; height: 200px; position: static; left: 44px; top: -652px; clear: both; }
	
	#dock { position:absolute; bottom:0; height:50px; width:80%; left:10%; background-color:#333333; opacity:0.5; padding:5px; }
	#dock #static-icons { float:left; width:70%; border-right:1px solid #CCCCCC; margin-right:10px; }
	
	.close { color:Orange; }
	.minimise { color:Yellow; }
	</style>

</head>
 <body>
 
    <div id="win1" class="window">
      <div class="title">window 1 <div class="icons"><a href="#" class="minimise">Minimise</a> - <a href="#" class="close">Close</a></div></div>
      <div class="content">click and drag a window with the red title bar</div>
    </div>
    <div id="win2" class="window">
      <div class="title">window 2 <div class="icons"><a href="#" class="minimise">Minimise</a> - <a href="#" class="close">Close</a></div></div>
      <div class="content">click and drag a window with the red title bar</div>
    </div>
    <div id="win3" class="window">
      <div class="title">window 3 <div class="icons"><a href="#" class="minimise">Minimise</a> - <a href="#" class="close">Close</a></div></div>
      <div class="content">click and drag a window with the red title bar</div>
    </div>
    <div id="win4" class="window">
      <div class="title">window 4 <div class="icons"><a href="#" class="minimise">Minimise</a> - <a href="#" class="close">Close</a></div></div>
      <div class="content">click and drag a window with the red title bar</div>
    </div>
    
    <div id="dock">
        <div id="static-icons"></div>
        <div id="dynamic-icons"></div>
    </div>
    
 </body>
</html>

The only 2 files needed are jQuery and jQuery-UI

hope someone can help!

udjamaflip · 09-19-2009, 12:49 PM

Code:

winX { position:absolute; }

fixed the jumping

however, I now have the problem with the minimise function, any ideas?

udjamaflip · 09-19-2009, 01:44 PM

All fixed now!

Thanks for your help anyway guys!