[CON-396] GELÖST: CMS_TEASER: Keine Konfiguration bei CSS...
Verfasst: 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
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.
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. 
Vielleicht kann sich ja da mal ein begnadeter JS- und jQuery-Junkie ran machen
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.
Gruß aus Franken
Ortwin
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);
});
}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);
});
}Vielleicht kann sich ja da mal ein begnadeter JS- und jQuery-Junkie ran machen
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;
}Ortwin