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