Divs verschieben mit jQuery - Framesetnachahmung

D

deluxeondecks

Mitglied
Hallo liebe jQuery-Fans :)

gesundes neues Jahr wünsch ich euch erstmal.

Ich möchte mit zwei Divs die Funktionalitäten eines Framesets nachahmen.
Um genau zu sein, das verschieben der "Fenstergrößen" - in dem Falle der Divs.

Hab das ganze auch schon umgesetzt mit jQuery soweit ich das konnte. Nun zu meinem Problem. Wenn man jetzt das linke Div (gelb) nach rechts verschiebt, wird das rechte Div (grün) zunächst nach unten verschoben, da der Platz nicht ausreicht. Das sieht etwas verzerrt aus und ist auch nicht sehr schön. Wenn man das rechte Div nach links verschiebt der gleiche Effekt.

Kann mir jemand helfen, das die Divs feiner verschoben werden wie man das bei einem Frameset hat?

Hier mein Code:

Code: 
<html>
<head>	
	<script type="text/javascript">
		
	$(document).ready(function(){
		var height;
		var width; 
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		var folderWidth =  $('#folder').width();
		var folderContentWidth =  $('#folderContent').width();
				
		$(function() {
	        var resizeOpts = {
	          stop: reportNewSize  
	        };
	        function reportNewSize() {
	       		height = $(this).height();
				width =  $(this).width();

		        if (width  < folderWidth ) {
					var resize = folderWidth - width;
					var newFolderContentWidth = folderContentWidth + resize;
					$('#folderContent').width(newFolderContentWidth);
				} else if (width > folderWidth) {
	
					var resize = width - folderWidth;
					var newFolderContentWidth = folderContentWidth - resize;
					$('#folderContent').width(newFolderContentWidth);
				} 
    
	        }
	        $('#folder').resizable(resizeOpts);
	    });
	}); 
	</script>
</head>
<body>
	<div id="head"></div>
	<div id="folder"></div>
	<div id="folderContent"></div>
	<div id="contentDetails"></div>
</body>
</html>

Danke für eure Hilfe!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück