• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] [GELÖST] Frage zum UI .dialog() wegen Parameter position

mikdoe

mikdoe

Moderator
Wie kann ich erreichen, das ein Dialog Element in der Nähe der Maus aufgeht und weitere Folgeelemente leicht verschoben sind, sodass man erkennt, dass mehrere auf sind ungefähr wie bei einem Stapel Spielkarten wenn man seitlich drauf schaut? Update von jQuery und UI kann ich im Moment nicht machen, daher sollte es mit jQuery 1.7.1 und UI Version 1.8.11 funktionieren. Hab mal mit dem position Schalter experimentiert aber bei allen vier Werten ("flip", "fit", "fit flip", "fit none") ändert sich garnichts. Folgende Dialoge gehen alle übereinander auf. Und die Position nah der Maus beim ersten Dialog weiss ich garnicht, wie ich das machen könnte.
Jemand eine Idee?
 
Zuletzt bearbeitet:
AW: Frage zum UI .dialog() wegen Parameter position

mikdoe schrieb:
Und die Position nah der Maus beim ersten Dialog weiss ich garnicht, wie ich das machen könnte.
Zum Vergrößern anklicken....

pageX bzw. pageY liefern dir die Werte.

Habe mal etwas gesucht und folgenden Code gefunden:

HTML: 
<div id="c">Hover me!</div>
<div id="d">Dialog Content</div>

Code: 
$(function () {
    $("#d").dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });
    $("#c").hover(function () {
        $("#d").dialog('open');
    }, function () {
        $("#d").dialog('close');
    }).mousemove(function (e) {
        $("#d").dialog("option", { position: [e.pageX+5, e.pageY+5] });
    });
});

siehe auch SO jQuery Fiddle - JSFiddle

Auch dieses hier sollte passen:

Code: 
$("#d").dialog("option", { position: [e.pageX+5, (e.pageY+5)-$(document).scrollTop()] });

und berücksichtigt sogar den ScrollTop.

- - - Aktualisiert - - -

mikdoe schrieb:
aber bei allen vier Werten ("flip", "fit", "fit flip", "fit none") ändert sich garnichts.
Zum Vergrößern anklicken....

schau mal hier: http://jqueryui.com/position/
 
Zuletzt bearbeitet:
AW: Frage zum UI .dialog() wegen Parameter position

Danke für deine Hilfe!

dbarthel schrieb:
}).mousemove(function (e) {
Zum Vergrößern anklicken....
Paßt nicht, es soll nicht an der Maus kleben bleiben sondern nur in der Nähe der Maus aufgehen.

dbarthel schrieb:
$("#d").dialog("option", { position: [e.pageX+5, (e.pageY+5)-$(document).scrollTop()] });
Zum Vergrößern anklicken....
Da kommt Fehlermeldung: "e" ist undefiniert

dbarthel schrieb:
schau mal hier: Position | jQuery UI
Zum Vergrößern anklicken....
OK, hab ich geschaut aber was muss ich denn machen, um bei Änderung des Feldes collision einen Effekt zu sehen?
 
AW: Frage zum UI .dialog() wegen Parameter position

Danke euch aber ich bekomme es nicht implementiert.
Hier mal Code für meine Situation:
Code: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Terminblöcke</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
</head>
<body>
	<style type="text/css" scoped>
	body {
		margin:				0px;
		padding:			0px;
		color:				#000000;
		font-family:		"Arial";
		font-size:			12px;
		background-color:	#FFFFFF;
		overflow-y:			scroll;
	}
	#taganzeige {
		padding-top:		10px;
	}
	.tagtabelle_aussen {
		border:				3px solid black;
		visibility:			hidden;
	}
	.tagtabelle_ueberschrift {
		font-weight:		bold;
		white-space:		nowrap;
		text-align:			center;
		padding:			5px;
		border-bottom:		2px solid black;
	}
	.tagtabelle_zelle_maname {
		text-align:			center;
		font-weight:		bold;
		border-left:		1px solid black;
		border-bottom:		2px solid black;
	}
	.tagtabelle_ueberschrift_zeit {
		padding-left:		5px;
		padding-right:		5px;
		border-bottom:		2px solid black;
	}
	.tagtabelle_zelle_zeit {
	}
	.tagtabelle_zelle_zeit_abwechslung {
		background-color:	#EEEEEE;
	}
	.tagtabelle_zelle_anzeige {
		border-left:		1px solid black;
		cursor:				pointer;
	}
	.tagtabelle_zelle_anzeige_abwechslung {
		border-left:		1px solid #005482;
		cursor:				pointer;
		background-color:	#EEEEEE;
	}
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; background:#EEEEEE; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; background:#D0D0D0; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
	</style>

	<div style="position:absolute;top:155px;left:8px;right:8px;width:auto;height:auto;z-index:1;" id="aeusseres_template_div">
		<h1 style="padding-top:100px;padding-bottom:100px;">Test Terminblöcke</h1>
		<div id="taganzeige">
			<table class="tagtabelle_aussen" cellspacing="0" cellpadding="0"><tr><td class="tagtabelle_ueberschrift" colspan="4">Mittwoch, der 15.10.2014</td></tr><tr><td class="tagtabelle_ueberschrift_zeit">Zeit</td><td class="tagtabelle_zelle_maname" data-maid="1">User 1</td><td class="tagtabelle_zelle_maname" data-maid="3">User 2</td><td class="tagtabelle_zelle_maname" data-maid="2">User 3</td></tr><tr style="line-height: 30px;" data-zeit="420"><td class="tagtabelle_zelle_zeit">07:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="435"><td class="tagtabelle_zelle_zeit_abwechslung">07:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="450"><td class="tagtabelle_zelle_zeit">07:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="465"><td class="tagtabelle_zelle_zeit_abwechslung">07:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="480"><td class="tagtabelle_zelle_zeit">08:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="495"><td class="tagtabelle_zelle_zeit_abwechslung">08:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="510"><td class="tagtabelle_zelle_zeit">08:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="525"><td class="tagtabelle_zelle_zeit_abwechslung">08:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="540"><td class="tagtabelle_zelle_zeit">09:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="555"><td class="tagtabelle_zelle_zeit_abwechslung">09:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="570"><td class="tagtabelle_zelle_zeit">09:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="585"><td class="tagtabelle_zelle_zeit_abwechslung">09:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="600"><td class="tagtabelle_zelle_zeit">10:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="615"><td class="tagtabelle_zelle_zeit_abwechslung">10:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="630"><td class="tagtabelle_zelle_zeit">10:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="645"><td class="tagtabelle_zelle_zeit_abwechslung">10:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="660"><td class="tagtabelle_zelle_zeit">11:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="675"><td class="tagtabelle_zelle_zeit_abwechslung">11:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="690"><td class="tagtabelle_zelle_zeit">11:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="705"><td class="tagtabelle_zelle_zeit_abwechslung">11:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="720"><td class="tagtabelle_zelle_zeit">12:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="735"><td class="tagtabelle_zelle_zeit_abwechslung">12:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="750"><td class="tagtabelle_zelle_zeit">12:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="765"><td class="tagtabelle_zelle_zeit_abwechslung">12:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="780"><td class="tagtabelle_zelle_zeit">13:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="795"><td class="tagtabelle_zelle_zeit_abwechslung">13:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="810"><td class="tagtabelle_zelle_zeit">13:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="825"><td class="tagtabelle_zelle_zeit_abwechslung">13:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="840"><td class="tagtabelle_zelle_zeit">14:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="855"><td class="tagtabelle_zelle_zeit_abwechslung">14:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="870"><td class="tagtabelle_zelle_zeit">14:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="885"><td class="tagtabelle_zelle_zeit_abwechslung">14:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="900"><td class="tagtabelle_zelle_zeit">15:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="915"><td class="tagtabelle_zelle_zeit_abwechslung">15:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr></table>
		</div>
	</div>

	<script>
		"use strict";
		var data = {
			image_pfad		: 'http://mikdoe.host-ed.me/images',
			akt_tag_tab_obj	: document.getElementsByTagName('table')[0],
			raster_schritt	: 15,
			termine			: {
				1:				{			// User
					1:				{		// Termin
						start:		540,	// 9:00
						ende:		600		// 10:00
					},
					2:				{		// Termin
						start:		640,	// 10:40
						ende:		680		// 11:20
					},
					3:				{		// Termin
						start:		735,	// 12:15
						ende:		825		// 13:45
					}
				},
				2:				{
					1:				{		// Termin
						start:		855,	// 14:15
						ende:		915		// 15:15
					}
				}
			}
		};

		function baue_zeitbloecke() {
			if (data['termine']) {
				jQuery.each(data['termine'],function(userid) {
					jQuery.each(data['termine'][userid],function(termid) {
						var startzeit = Math.floor(data['termine'][userid][termid]['start']/data['raster_schritt'])*data['raster_schritt'];
						var endzeit = Math.floor(data['termine'][userid][termid]['ende']/data['raster_schritt'])*data['raster_schritt'];
						var startZeileOffsetTop = jQuery(data['akt_tag_tab_obj']).find('tr[data-zeit="'+startzeit+'"]').position().top;
						var startZeileHoehe = jQuery(data['akt_tag_tab_obj']).find('tr[data-zeit="'+startzeit+'"]').height();
						var endZeileOffsetTop = jQuery(data['akt_tag_tab_obj']).find('tr[data-zeit="'+endzeit+'"]').position().top;
						var endZeileHoehe = jQuery(data['akt_tag_tab_obj']).find('tr[data-zeit="'+endzeit+'"]').height();
						var imageOffsetLeft = jQuery(data['akt_tag_tab_obj']).find('td[data-maid="'+userid+'"]').position().left;
						var imageOffsetTop = startZeileOffsetTop+(startZeileHoehe/data['raster_schritt']*(data['termine'][userid][termid]['start']-startzeit));
						var imageHoehe = (endZeileOffsetTop+(endZeileHoehe/data['raster_schritt']*(data['termine'][userid][termid]['ende']-endzeit)))-imageOffsetTop;

						var balken_img = document.createElement('img');
						balken_img.src = data['image_pfad']+'/trans.gif';
						balken_img.style.width = '20px';
						balken_img.style.height = imageHoehe+'px';
						balken_img.style.backgroundColor = 'red';
						balken_img.style.top = imageOffsetTop+'px';
						balken_img.style.left = imageOffsetLeft+'px';
						balken_img.style.position = 'absolute';
						balken_img.onclick = function(e) {
							var dieser = this;
							// UI Dialog aufbauen
							var dialog = document.createElement('div');
							var tab = document.createElement('table');
							var zeile = document.createElement('tr');
							var zelle = document.createElement('td');
							zelle.innerHTML = 'Hallo!';
							zeile.appendChild(zelle);
							tab.appendChild(zeile);
							dialog.appendChild(tab);
							jQuery('body').append(dialog);
							jQuery(dialog).dialog({
								show		: { duration: 'fast' },
								position	: [Math.floor(e.pageX + 5),Math.floor(e.pageY - jQuery('#taganzeige').position().top + 5)],
//								position	: { my:'right',at:'top',of:dieser },
								title		: 'Title Hallo'
							})
						};

						var balken_div = document.createElement('div');
						balken_div.appendChild(balken_img);

						data['akt_tag_tab_obj'].appendChild(balken_div);
					});
				});
			}
		}
		jQuery(data['akt_tag_tab_obj']).css('visibility','visible').fadeTo('fast',1,function(){
			baue_zeitbloecke();
		});
	</script>
</body>
</html>
(Bitte nicht am Layout stören, das ist eine reduzierte Version die auch nicht die Vorschläge von miniA4kuser aus http://forum.jswelt.de/javascript/60093-terminbl-cke-tabelle.html enthält)

Wenn ihr bitte mal runter scrollt bis zum roten Balken, der bei 10:30 anfängt und da drauf klickt. Wieso geht der Dialog am unteren Fensterrand anstatt in der Nähe der Maus auf? Was hab ich da falsch gemacht?
 
AW: Frage zum UI .dialog() wegen Parameter position

Wenn du denn jetzt den Dialog relatuv zur Maus willst probiere doch mal statt das Element position: {my: 'right', at: 'top', of: dieser }, das event zu triggernposition: { my:'right',at:'top',of:e },

Wenn du den Dialog jedoch relativ zum roten Balken haben möchtest dann nimm dessen absolute (.offset()) Position, da der Dialog ja auch absolut positioniert wird position: [$(balken_img).offset().left-$(window).scrollLeft(), $(balken_img).offset().top-$(window).scrollTop()],

PS: Deine Dialoge werden mittels "Close" nur ausgeblendet und nicht wieder aus dem DOM entfernt.
 
AW: Frage zum UI .dialog() wegen Parameter position

mikdoe schrieb:
Klappt! Danke dir. Wäre ich nicht drauf gekommen.
Zum Vergrößern anklicken....
Gern geschehn.

Dir ist aber klar, das bei dieser Methode der collision-Modus aktiv ist, heißt wenn du z.B. deinen 10:30 Balken bis zum unteren Fensterrand legst, dann wird der Dialog so weit nach oben zurück versetzt, bis er komplett in den viewport passt.


PS: Das mit dem stapeln aus Beitrag #1 hatte ich nicht wirklich verstanden. Sollen wirklich mehrere Dialoge vür ein und den selben Terminblock geöffnet werden können?
 
AW: Frage zum UI .dialog() wegen Parameter position

miniA4kuser schrieb:
heißt wenn du z.B. deinen 10:30 Balken bis zum unteren Fensterrand legst, dann wird der Dialog so weit nach oben zurück versetzt, bis er komplett in den viewport passt.
Zum Vergrößern anklicken....
Genau so möchte ich es haben bzw. passt es zur Anwendung.
Hab jetzt noch verfeinert mit der Methode moveToTop, heißt, wenn man einen Balken anklickt der schon offen ist hole ich den Dialog ganz nach oben und lass einen Rand um .dialog( "widget" ) herum blinken. Sieht cool aus.

miniA4kuser schrieb:
PS: Das mit dem stapeln aus Beitrag #1 hatte ich nicht wirklich verstanden. Sollen wirklich mehrere Dialoge vür ein und den selben Terminblock geöffnet werden können?
Zum Vergrößern anklicken....
Das war ein Vergleich mit einem Stapel Spielkarten. Wenn du die schräg von oben anschaust siehst du, dass es nicht nur eine Karte sondern viele sein müssen. So ist es aktuell auch genau umgesetzt dank deiner Hilfe!
 
Hierzu noch eine kleine Frage: Mein Dialog wird so positioniert:
HTML: 
position	: {
	my	: 'left',
	at	: 'top',
	of	: e
},
Klappt wunderbar, wenn ich selbst mit der Maus das übergeordnete div anklicke, kommt ja dann über e die richtige Position.

Wenn ich nun schon beim Bildaufbau einen solchen Dialog mit jQuery(data['grosse_tabelle']).find('div[data-terminid="'+bla+blub+'"]').trigger('click') öffnen will ohne manuell zu klicken scrolle ich im Script das Bild erstmal zu obj.scrollIntoView(true) (obj ist jQuery(data['grosse_tabelle']).find('tr[data-zeit="495"]')[0]) damit man den Balken überhaupt sieht.
Nun möchte ich den Dialog rechts daneben obenbündig haben. Dafür hab ich das hier versucht:
HTML: 
position	: {
	my	: 'left',
	at	: 'top',
	of	: jQuery(data['grosse_tabelle']).find('tr[data-zeit="495"]')[0]
},
Ergebnis: Dialog ist vertikal mittig zum oberen Balkenrand und horizontal mittig zur Browserbreite. Hab da mal mit verschiedenen Werten rumgespielt, brachte aber alles Fehlermeldungen.
Welche Angaben sind erforderlich für vertikal obenbündig zum oberen Balkenrand und horizontal rechts direkt neben den Balken?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben