Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Mar 2008
    Posts
    235
    Thanks
    6
    Thanked 21 Times in 20 Posts

    jQuery - not quite doing what I want :p

    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!
    Andrew Sharman
    Web designer, developer and programmer.

    If you found my post helpful, why not give thanks! :)

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    235
    Thanks
    6
    Thanked 21 Times in 20 Posts

    Figured..

    Code:
    winX { position:absolute; }
    fixed the jumping

    however, I now have the problem with the minimise function, any ideas?
    Andrew Sharman
    Web designer, developer and programmer.

    If you found my post helpful, why not give thanks! :)

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Posts
    235
    Thanks
    6
    Thanked 21 Times in 20 Posts
    All fixed now!

    Thanks for your help anyway guys!
    Andrew Sharman
    Web designer, developer and programmer.

    If you found my post helpful, why not give thanks! :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •