OP_Accordion Template - Links zu den einzelnen Punkten

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Dölli
Posts: 6
Joined: Mon Nov 16, 2020 1:15 pm

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by Dölli » Tue Nov 17, 2020 8:42 pm

Hat funktioniert!
Danke für den wirklich tollen :!: Support :!:

lck
Posts: 2143
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by lck » Sat Nov 21, 2020 12:49 pm

lck wrote:
Mon Nov 16, 2020 8:42 pm
Bliebe eine Anpassung per Javascript, aber dafür habe ich momentan keine Lösung. Es gibt hier viele schlaue und erfahrene Köpfe, warten wir mal ab ;) .
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
});
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

// 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

cmb
Posts: 13423
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by cmb » Sat Nov 21, 2020 1:53 pm

lck wrote:
Sat Nov 21, 2020 12:49 pm
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

// 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
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.
Christoph M. Becker – Plugins for CMSimple_XH

lck
Posts: 2143
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by lck » Sat Nov 21, 2020 6:45 pm

cmb wrote:
Sat Nov 21, 2020 1:53 pm
Interessante Lösung! Allerdings sollte man den Timeout vielleicht besser möglichst kurz halten (wenn überhaupt ein Timeout nötig ist).
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.
cmb wrote:
Sat Nov 21, 2020 1:53 pm
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.
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

cmb
Posts: 13423
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by cmb » Sat Nov 21, 2020 9:54 pm

lck wrote:
Sat Nov 21, 2020 6:45 pm
cmb wrote:
Sat Nov 21, 2020 1:53 pm
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.
Hm, verstehe jetzt nicht ganz genau du damit meinst, das soll ja auch verschwinden. […]
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.
lck wrote:
Sat Nov 21, 2020 6:45 pm
Das ganze ist bestimmt nicht optimal, erfüllt aber seinen Zweck :) . Verbesserungen werden gerne angenommen ;) .
Ich finde es, so wie es jetzt ist, gut. :)
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply