Kalender-Modul "springt"

[anton_meier]

Ich verwende Contao 2.10.1

Mein Kalender-Modul befindet sich rechts in der Sidebar.
Insgesamt liegen 740px zwischen Kopfzeile und Anfang des Kalender-Moduls.

Sobald ein Monat mit den Navigations-Pfeilen ausgewählt wird, übergibt das Modul folgende URL ?month=.
Somit wird die Seite neu geladen und das Modul rutscht (springt) samt Inhalt wieder nach oben.

Ist jemandem dieses Problem bekannt?
Gibt es eine Möglichkeit dies zu beheben?

[marcos]

was meinst du mit "rutscht nach oben"? Der Abstand von 740px ist nicht mehr vorhanden?

Kannst du mal einen Link zur Seite posten...

[Russe]

Willkommen im Forum,

gibt es einen Link zu der Seite bei der man dieses Verhalten sehen kann?

[anton_meier]

Link: http://fjn.typografix-design.de/

Rechts in der Sidebar ist das Kalender-Modul.
Mit "springt" meine ich, dass die Seite durch die Übergabe der URL neugeladen wird.

[Russe]

Das ist ein ganz normales Verhalten und du kannst das nur umgehen in dem du die neuen Daten per Ajax nachlädst, was aber nicht trivial ist. Musst mal hier im Forum nach Ajax suchen.

[anton_meier]

Ok - Danke dir.
Eventuell erzeuge ich eine Liste statt Mini-Kalender.

[lomex]

Ich dachte schon, ich wäre der Einzige, den das stört :-)

Versuche es mal hiermit. Habe mein 2.9er Script gerade mal umgeschrieben für 2.10/2.11. Ist aber ungetestet (bin gerade unterwegs).
Lege ein neues Template von cal_default an und hänge das hinten dran. Dann könnte das Nachladen via Ajax klappen.
Viel Glück :-)

<code>
<script type="text/javascript">
window.addEvent('domready', function() {
document.getElements('.mod_calendar .head a').addEvent('click', function(event)
{
var month = event.target.get('href').match('month=[0-9]{6}');
new Request.JSON({
method:'get',
data:'g=1&action=cte&id=<?php echo $this->id; ?>&' + month,
url:'ajax.php',
onComplete: function(responseText){
event.target.getParent('.mod_calendar').set('html' , responseText.content);
}).send();
return false;
});
</script>
</code>

[anton_meier]

Nope. Leider funzt das nicht. Aber du hast mich da auf eine Idee gebracht.

[xchs]

Hast Du denn auch die [ajax] Erweiterung installiert? Die Extension legt im Contao Hauptverzeichnis das Hilfsskript "ajax.php" ab.

[lomex]

Ok, das hätte ich noch erwähnen können :-)

[lomex]

Damit läuft es so halb. Der AJAX-Request klappt. ABER: Das umschließende DIV wird bei jedem Aufruf dupliziert. Man müsste den responseText.content so filtern, dass das umschließende DIV entfernt wird.

Jemand eine Idee?

<script type="text/javascript">
function ajaxCalendar() {
  document.getElements('.mod_calendar .head a').addEvent('click', function(event)
  {
     var month = event.target.get('href').match('month=[0-9]{6}');
     new Request.JSON({
       method:'get',
       data:'g=1&action=cte&id=53&' + month,
       url:'ajax.php',
       onComplete: function(responseText){
         event.target.getParent('.mod_calendar').set('html' , responseText.content);
         ajaxCalendar();
       }
     }).send();
     return false;
  });
}
window.addEvent('domready', function() {
   ajaxCalendar();
});
</script>

[RoGer]

Hallo,

das ist auch mein Problem. Sobald ein Kalender-Modul nur durch Scrollen vollständig sichtbar wird, springt die Seite bei jeder Kalender-Aktualierung zurück zum oberen Seitenrand.
Lässt sich der Kalender nicht aktualisieren, ohne das die ganze Seite neu geladen wird ? Echt

Hat schon jemand eine Lösung ?

Roland

[dillscher]

Habe mich gerade auch einmal an der von Iomex genannten Lösung versucht, aber so recht funktionieren will es nicht. Ich rufe aktuell das Javascript mit Verweis auf fmd auf, da es sich bei dem Archiv-Newsmenü ja entsprechend um ein Modul handelt. Dadurch entsteht aber das wohl schon bekannte Problem, dass immer das komplette Modul aufgerufen wird, also auch die umschließenden Elemente. Wahrscheinlich lässt sich das alles per JavaScript lösen, aber insgeheim stellt sich mir die Frage, ob nicht auf eine Möglichkeit besteht, das Ganze per echtem Datepicker wie im Backend oder einem Formular zu lösen? Hat sich daran schon mal jemand versucht bzw. die oben genannte Lösung vollständig implementiert?

Schöne Grüße,

dillscher

[toto]

Moin zusammen, ich habe mein Kalender-Template verändert und einen Anker mit integriert. Da ich kein Programmierer bin und mir das runterscrollen auch immer auf den Senkel ging, fand ich die Lösung für mich am praktikabelsten.

Hier zu sehen

Gruß toto

[lomex]

Das Problem mit dem umschließenden Div habe ich per JS gelöst. Wäre in meinen Augen in der ajax.php zwar besser aufgehoben (bei g=1 nur Kind-Elemente senden), aber es erfüllt seinen Zweck. So läuft es bei mir jetzt.

<script type="text/javascript">
function ajaxCalendar() {
  document.getElements('.mod_calendar .head a').addEvent('click', function(event)
  {
     var month = event.target.get('href').match('month=[0-9]{6}');
     new Request.JSON({
       method:'get',
       data:'g=1&action=fmd&id=18&' + month,
       url:'ajax.php',
       onComplete: function(responseText){
         var outer = event.target.getParent('.mod_calendar');
         /* erst nach dem Einfügen des responseText kann dieser per DOM manipuliert werden, gebraucht werden nur die Kind-Elemente */
         outer.set('html', responseText.content);
         /* das eingefügte Div bestimmen */
         var inner = outer.getElement('div');
         /* die Kind-Elemente vom responseText dem Kalender-Div einfügen */
         outer.adopt(inner.getChildren());
         /* jetzt kann das eingefügte Div (responseText) wieder entfernt werden */
         inner.dispose();
         /* notwendig, um das Event neu zu registrieren */
         ajaxCalendar();
       }
     }).send();
     return false;
  });
}
window.addEvent('domready', function() {
   ajaxCalendar();
});
</script>

[zonky]

Hallo Iomax,

funzt super!

... die Segway-Seite habe ich mir gleich mal als Bookmark für meine "Schulungen" gesetzt: Rubrik: "no-go" ;-)

zonky

[jabo]

Hallo Iomax,

ich habe leider deinen Verbesserungsvorschlag nicht so ganz verstanden
Kannst du mal bitte kurz erläutern, wie und wo ich es einbinden muß ?

DANKE !

jabo

[zonky]

Hallo Jabo,

viele Wege führen nach Rom - meiner:

* irgendein (HTML5) Template erzeugen und Namen ändern z.B. "mod_calendar_ajax"
* in das Template das JS einfügen
* in den Text vor den Kalender Insert-Tag {{file::mod_calendar_ajax.html5}}

das wars...

ggf. mit den Templateendungen aufpassen - bei xhtml wäre es dann mod_calendar_ajax.xhtml

zonky

[jabo]

Hi Zonky,

ich werde es also wie von dir beschrieben versuchen.
Besten DANK !