OP_Accordion Template - Links zu den einzelnen Punkten
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Hat funktioniert!
Danke für den wirklich tollen Support
Danke für den wirklich tollen Support
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Jetzt habe ich doch noch eine Lösung gefunden/erarbeitet. Das hätte den Vorteil, dass das Akkordeon durch das öffnen per Anker-ID nicht beeinträchtigt wird, also ganz normal funktioniert, sich alle Seiten schließen lassen usw..
Wenn du das auch mal testen willst, so entferne den eingefügten Code aus der stylesheet.css wieder und füge in der template.htm vor dem schließenden </script> Tag (am Ende der Datei), folgendes ein:
Code: Select all
// 20.11.2020 if URL contains anchor link uncheck matching checkbox (open Accordion))
$(document).ready(function() {
var url = $(location).attr('href');
// get part of url after last slash
var oppageID = url.substr(url.lastIndexOf("/")+1);
// uncheck checkbox
$(oppageID).closest('div').find(':checkbox').prop('checked',false);
// scroll to top
setTimeout(function() {
theOffset = $(oppageID).offset();
$('body,html').animate({ scrollTop: theOffset.top - 66 }); // offset from top
}, 400); // time delay before scrolling begins, in ms
});
Code: Select all
// Remove anchor link in URL after Timeout
setTimeout(()=>{
// uses HTML5 history API to manipulate the location bar
history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search);
}, 3000); // ... millisecond timeout in this case
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Interessante Lösung! Allerdings sollte man den Timeout vielleicht besser möglichst kurz halten (wenn überhaupt ein Timeout nötig ist). Ich habe nämlich gerade die Demoseite aufgerufen, und wollte dann in der Addressleiste zu Seite 3 wechseln, aber plötzlich war das URL-Fragment verschwunden.lck wrote: ↑Sat Nov 21, 2020 12:49 pmWenn dich dann noch der verbleibende Anker in der URL stört (also www.example.com/#Changelog), diesen könnte man mit dem Code entfernen. Einfach an obigen Code darunter anfügen.Code: Select all
// Remove anchor link in URL after Timeout setTimeout(()=>{ // uses HTML5 history API to manipulate the location bar history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search); }, 3000); // ... millisecond timeout in this case
Christoph M. Becker – Plugins for CMSimple_XH
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Dachte erst das muss unbedingt sein, ansonsten würde der hash in der URL gelöscht bevor die checkbox unchecked ist. Ist aber nicht so, geht auch ohne Timeout-Einstellung, siehe Demo.
Hm, verstehe jetzt nicht ganz genau du damit meinst, das soll ja auch verschwinden. Prinzipiell wird ja kein anchor Link in der URL angezeigt. Diese Anpassung dient lediglich externer Links zum direkten Anspringen eines bestimmten Akkordeonzweiges, der Inhalt sollte dabei auch sichtbar gemacht werden.
Das funktioniert natürlich nur bei einem Page reload. Wenn man nun manuell per Adressleiste einen bestimmten Akkordeonzweig aufrufen und damit auch öffnen will, geht das nur per Neuladen der Seite. Also eintippen, return und Neuladen.
Das ganze ist bestimmt nicht optimal, erfüllt aber seinen Zweck . Verbesserungen werden gerne angenommen .
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Ich hatte es aber zunächst gesehen, und wollte nur die "4" am Ende durch "3" ersetzen, und als ich Backspace drückte, war plötzlich das ganze URL-Fragment weg. War etwas seltsam für mich.
Ich finde es, so wie es jetzt ist, gut.
Christoph M. Becker – Plugins for CMSimple_XH
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Hi Ick,lck wrote: ↑Sat Nov 21, 2020 12:49 pmJetzt habe ich doch noch eine Lösung gefunden/erarbeitet. Das hätte den Vorteil, dass das Akkordeon durch das öffnen per Anker-ID nicht beeinträchtigt wird, also ganz normal funktioniert, sich alle Seiten schließen lassen usw..
Wenn du das auch mal testen willst, so entferne den eingefügten Code aus der stylesheet.css wieder und füge in der template.htm vor dem schließenden </script> Tag (am Ende der Datei), folgendes ein:Wenn dich dann noch der verbleibende Anker in der URL stört (also www.example.com/#Changelog), diesen könnte man mit dem Code entfernen. Einfach an obigen Code darunter anfügen.Code: Select all
// 20.11.2020 if URL contains anchor link uncheck matching checkbox (open Accordion)) $(document).ready(function() { var url = $(location).attr('href'); // get part of url after last slash var oppageID = url.substr(url.lastIndexOf("/")+1); // uncheck checkbox $(oppageID).closest('div').find(':checkbox').prop('checked',false); // scroll to top setTimeout(function() { theOffset = $(oppageID).offset(); $('body,html').animate({ scrollTop: theOffset.top - 66 }); // offset from top }, 400); // time delay before scrolling begins, in ms });
Code: Select all
// Remove anchor link in URL after Timeout setTimeout(()=>{ // uses HTML5 history API to manipulate the location bar history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search); }, 3000); // ... millisecond timeout in this case
vielen Dank für die Änderungsvorschläge!
Ich habe diese erfolgreich implementiert
Ist es denn auch möglich, die #-Links durch ? zu ersetzen bzw. nur einen gewissen Bereich?
Hintergrund ist: ich habe ein Programm, dessen alte Versionen noch auf meine alte Homepage die cmsimple.org nutzte, verweist, wo anstatt der # ein ? verwendet wurde. User die also eine alte Version benutzen und über ein "Update" benachrichtigt werden, werden also auf https://doelli.de/wanipchecker/?changelog verlinkt. Das führt also zu einem Error 404: FEHLER 404: NICHT GEFUNDEN
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Das sollte per Umleitung über eine .htaccess gehen. Beispiel, siehe hier.
Wir haben hier aber einen Spezialisten für solche Sachen, der Olaf (olape). Der kann bestimmt helfen.
Wir haben hier aber einen Spezialisten für solche Sachen, der Olaf (olape). Der kann bestimmt helfen.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Hi Ick!lck wrote: ↑Sat Nov 21, 2020 12:49 pmJetzt habe ich doch noch eine Lösung gefunden/erarbeitet. Das hätte den Vorteil, dass das Akkordeon durch das öffnen per Anker-ID nicht beeinträchtigt wird, also ganz normal funktioniert, sich alle Seiten schließen lassen usw..
Wenn du das auch mal testen willst, so entferne den eingefügten Code aus der stylesheet.css wieder und füge in der template.htm vor dem schließenden </script> Tag (am Ende der Datei), folgendes ein:Wenn dich dann noch der verbleibende Anker in der URL stört (also www.example.com/#Changelog), diesen könnte man mit dem Code entfernen. Einfach an obigen Code darunter anfügen.Code: Select all
// 20.11.2020 if URL contains anchor link uncheck matching checkbox (open Accordion)) $(document).ready(function() { var url = $(location).attr('href'); // get part of url after last slash var oppageID = url.substr(url.lastIndexOf("/")+1); // uncheck checkbox $(oppageID).closest('div').find(':checkbox').prop('checked',false); // scroll to top setTimeout(function() { theOffset = $(oppageID).offset(); $('body,html').animate({ scrollTop: theOffset.top - 66 }); // offset from top }, 400); // time delay before scrolling begins, in ms });
Code: Select all
// Remove anchor link in URL after Timeout setTimeout(()=>{ // uses HTML5 history API to manipulate the location bar history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search); }, 3000); // ... millisecond timeout in this case
Ich habe nun festgestellt, dass nach diesen Änderungen leider kein "Springen" mehr zwischen den einzelnen Menüpunkten möglich ist. Also wenn man von einem Menüpunkt zu einem anderen via "#" verlinkt, wird dieser nicht aufgerufen.
Bin daher wieder zurück zur vorherigen stylesheet.ccs-Lösung.
Viele Grüße
Dölli
Re: OP_Accordion Template - Links zu den einzelnen Punkten
Das war ja erst gar nicht angefragt, es ging nur um den Link #Changelog von externen Seiten. Aber wenn's dir so passt, super .
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage