[CON-396] GELÖST: CMS_TEASER: Keine Konfiguration bei CSS...

Gesperrt
Oldperl
Beiträge: 3984
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Franken, Bayern
Kontaktdaten:

[CON-396] GELÖST: CMS_TEASER: Keine Konfiguration bei CSS...

Beitrag von Oldperl » Mi 2. Feb 2011, 20:17

Ich habe hier gerade einen ganz "doofen" Bug beim CMS_TEASER gefunden.
Folgende Ausgangssituation:
Der Aufruf des CMS_TEASER ist in einen absolut positionierten DIV im unteren Bereich der fertigen Seite eingebunden. Dabei habe ich einen Wert für top (des DIV) von > 400px.
Versuche ich nun im BE-Edit des Artikels durch Klick auf den Bildbutton meine CMS_TEASER Konfiguration aufzurufen, wird diese nicht angezeigt.
Ohne absolute positioniertes DIV funktioniert es.

Fehlerdiagnose:
Für den Bildbutton ist ein jQuery-Event gesetzt, welcher den per Inlinestyle unsichtbar gesetzten Konfig-Div des CMS_TEASER sichtbar macht, und jeweils den top- und left-Wert, ebenfalls als Inlinestyle, auf die, mit der jQuery-Funktion .offset(), ermittelten Werte setzt. Hierbei wird für den left-Wert ein Offset zugegeben. Bezugspunkt ist hierbei normalerweise der body der Seite, jedoch nicht, wenn der Bildbutton in einem absolut positioniertem Bereich liegt. Dann nämlich ist der Bezug der linke obere Punkt des absoluten DIV, was natürlich zur Folge hat, das der Konfig-DIV nun von da aus mit dem ermittelten top-offset() weiter nach unten positioniert wird. In meinem Fall auserhalb des im Browser sichtbaren Bereiches, und da Absolut auch ohne ein Autoscroll, sprich ohne Scrollbalken im Browser.

Bugfix:
Die Positionierung wird in der Datei contenido/scripts/cmsTeaser.js in der Funktion addFrameShowEvent() erledigt. Diese sieht wie folgt aus

Code: Alles auswählen

function addFrameShowEvent(sFrameId, sImageId) {
	$(sImageId).css('cursor', 'pointer');
	$(sImageId).click(function () {
		$(sFrameId).fadeIn("normal");
		$(sFrameId).css('top', $(sImageId).offset().top);
		$(sFrameId).css('left', $(sImageId).offset().left+$(sImageId).width()+3);
	});
}
Wird nun ein Elternelement des Bildbutton ($sImageId) absolut positioniert, so reicht der Browser das CSS-Attribut position normalerweise einfach an alle Kindelemente weiter, so das man es einfach beim Bildbutton abfragen kann. Ist es nun auf "absolute" gesetzt, so wird einfach der top-Wert nicht gesetzt und unser Konfig-DIV erscheint direkt links vom Button.

Code: Alles auswählen

function addFrameShowEvent(sFrameId, sImageId) {
	$(sImageId).css('cursor', 'pointer');
	$(sImageId).click(function () {
		$(sFrameId).fadeIn("normal");
  if($(sImageId).css('position') != 'absolute') $(sFrameId).css('top', $(sImageId).offset().top);
		$(sFrameId).css('left', $(sImageId).offset().left+$(sImageId).width()+3);
	});
}
Dieses behebt zumindest den Bug bei absolut positioniertem Elternelement. Trotzdem sollte die JS-Funktion nochmal überarbeitet werden, damit auch die Fenster-/Framegrenzen mit in die Berechnung einbezogen werden. Je nachdem wo gerade das DIV eingeblendet wird kann es doch recht schwierig werden, es mit Hilfe der draggable-Funktion noch komplett in den sichtbaren Bereich zu ziehen. Auserdem ist es ein wenig benutzerunfreundlich. :roll:

Vielleicht kann sich ja da mal ein begnadeter JS- und jQuery-Junkie ran machen 8)

Btw. im zugehörigen CSS sollte in Zeile 12 der height:-Wert auf 360px erhöht werden, sonst hängen die Buttons für Submit und Cancel beim 1. Tab etwas freischwebend am unteren Rand des Konfigbereiches je nach verwendetem Browser. Evtl. könnte man den Wert sogar ganz weglassen, wobei das erst in allen modernen Browsern zu testen wäre.

Code: Alles auswählen

.cms_teaser {
	padding: 3px;
	position:absolute; 
	width:322px; 
	height:360px;
	background-color:#F1F1F1; 
	border:1px solid #B3B3B3; 
	display:none;
	top: 40px;
	left: 40px;
    margin: 0;
    z-index: 20000;
}
Gruß aus Franken

Ortwin
*NEU* PHP 7.x Community Draft von CONTENIDO 4.9 auf github
CONTENIDO 4.9 Entwickler-Handbuch - Publikation auf medium.com zu meinem angedachten Entwickler-Buch zu CONTENIDO 4.9
ConLite 2.0, alternatives und stabiles Update von Contenido 4.8.x
phpBO Search Advanced - das neue Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

xmurrix
Beiträge: 2617
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: CMS_TEASER: Keine Konfiguration bei CSS position absolut

Beitrag von xmurrix » Mi 9. Feb 2011, 01:32

Hallo Ortwin,

das Problem ist behoben (commited), der Popuplayer bei CMS_TEASER wird nun korrekt positioniert dargestellt, auch wenn CMS_TEASER in einem ansolut positionierten Element vorkommt.

Deinen Vorschlag zur Berechnung von Fenstergrenzen, also das Anpassen an den aktuellen Viewport habe ich jetzt nicht gemacht. Das kann man später auch einbauen, zumindest mat man vorerst die Möglichkeit, den Popuplayer mit der Maus zu verschieben.

Gruß
Murat
CONTENIDO downloads: CONTENIDO 4.9.12
CONTENIDO links: Documentation, API documentation

Gesperrt