OP_Accordion Template - Links zu den einzelnen Punkten

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Dölli
Posts: 13
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: 2963
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: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, 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: 2963
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: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, 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

Dölli
Posts: 13
Joined: Mon Nov 16, 2020 1:15 pm

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by Dölli » Mon Dec 07, 2020 9:11 pm

lck wrote:
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
Hi Ick,

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

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

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by lck » Mon Dec 07, 2020 9:34 pm

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.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Dölli
Posts: 13
Joined: Mon Nov 16, 2020 1:15 pm

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by Dölli » Tue Dec 08, 2020 9:56 am

lck wrote:
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
Hi Ick!

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

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

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Post by lck » Tue Dec 08, 2020 12:05 pm

Dölli wrote:
Tue Dec 08, 2020 9:56 am
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.
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

Post Reply