✔ Ausgabe in ein Fenster mit Drag & Drop

J

Joe

Erfahrenes Mitglied
Hallo alle.

Ich suche nach einem Fenster welches ich frei verschieben kann und schliessen. Jedoch kein Popupfenster da sich dieses jedesmal in den Hintergrund verschiebt sobald man etwas anderes klickt.

Folgender Code ruft meinen Chat auf:
Code: 
	<script type="text/javascript">
		// <![CDATA[
			function openWindow(url,width,height,options,name) {
				width = width ? width : 800;
				height = height ? height : 600;
				options = options ? options : 'resizable=yes';
				name = name ? name : 'openWindow';
				window.open(
					url,
					name,
					'screenX='+(screen.width-width)/2+',screenY='+(screen.height-height)/2+',width='+width+',height='+height+','+options'
				)
			}
				
		// ]]>
	</script>
Dann noch die Navigation:
HTML: 
<a href="http://www.end-time.de/Backend/chat/index.php" onclick="openWindow(this.href);this.blur();return false;"><font color="gold">Chat</font>

Das öffnet ein Popup-Fenster mit den angegebenen Maßen und funktioniert tadellos. Ich suche jedoch ein eingebettes Fenster welches sich verschieben oder resizen lässt.

Ist so was möglich? Würde mich freuen wenn ihr mir zeigen könnte wie das zu machen ist.

Danke Joe.
 
Stimmt das geht genau in die Richtung.
http://www.toitl.com/public/helpdesk/index.html?path=p/toitl.com/dv/dialog_fix_position
So in etwa könnte sich ein Fenster öffnen was dann eben den Chat beinhaltet. Nun muss ich nur noch schauen wie ichs integrieren kann und ob das überhaupt rein logisch funktioniert wenn ich ein anderen Link aus der Navigation klicke. Der Chat (wenn einmal aktiviert soll solange offen bleiben bis der User ausloggt.
Bei dem Popupfenster klappt das. Aber danke dir für den Tip :)
 
Ok also mir ist es gelungen ein jQuery Dialog-Fenster zu öffnen :D
HTML: 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
          rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
 
<script>
	$(function() {
		$( "#dialog" ).dialog();
	});
	</script>

<div id="dialog" title="Chat-fenster- TEST" style="position: top;" >
	<p>Das ist eine Standart Dialog-Box. Das Dialog-Fenster kann bewegt, resized und mit dem 'x' icon geschlossen werden. Hier soll dann das Chatfenster rein^^</p>
</div>

Aber wie bekomme ich nun meinen Chat OnClick ins Dialog-Fenster?

Ich müsste irgendwie obrigen Code mit diesen verknüpfen.. da steh ich Wald und kann nur ewig wild probieren. Leider bin ich noch Javascript, jquery Laie.
Würde mich wirklich freuen wenn mir jemand weiterhelfen kann.

Grüße Joe.
 
Javascript: 
<script>
	$("#deinButton").onclick(function() {
		$("#dialog").dialog();
	});
</script>
 
Zuletzt bearbeitet von einem Moderator:
  • Gefällt mir
Reaktionen: Joe
Ok ist nen Ansatz nur habe ich keinen Button sondern einen Link:
HTML: 
<a href="http://www.end-time.de/Backend/chat/index.php" onclick="Dialog bitte öffnen"><font color="gold">Chat</font>

Muss ich umdenken oder geht es auch mit Hyperlinks?
 
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
          rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#popoutUsers').click(function () {
                var url = this.href;
                var dialog = $('<iframe src="' + url + '" frameborder="0"></iframe>').appendTo('body');
                dialog.dialog({ modal: false, open: function (type, data) { $(this).parent().appendTo("form"); } });
                return false;
            });
        }); 
    
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
        <a id="popoutUsers" href="chat/index.php">Chat</a>
    </form> 
</body>
</html>

Mit diesem Code funktioniert der Chat in einem jQuery Dialogfenster nach dem man auf den Link Chat klickt.

Allerdings hat die Sache 2 Haken:
1. Es lädt nun deutlich langsamer. Anscheinend wird die Chatbox immer im Hintergrund automatisch mitgeladen ob sie nun angeklickt wurde oder nicht.
2. Schliesst sich das Fenster sobald ich einen anderen Link anklicke. Beabsichtigt ist aber ein permanentes Fenster. Es soll sich erst nach einen Logout schliessen nicht bei einen anderen internen Link.

Insgesamt alles eher unbefriedigend. Ich frage mich wie es andere schaffen permanent einen Chat laufen zu lassen und den Usern gleichzeitig zu ermöglichen alle anderen internen Weiterleitungen ihrer Seite zu nutzen.
Es benutzt doch wohl kaum jemand nen Popupfenster die laufen doch meist nebenher.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück