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

Gesperrt
Oldperl
Beiträge: 4250
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, 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
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

xmurrix
Beiträge: 3143
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.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.

Gesperrt