CMSimple_XH–Forum

Welcome to the CMSimple_XH–Community!
https://cmsimpleforum.com/

OP_Accordion Template - Links zu den einzelnen Punkten

https://cmsimpleforum.com/viewtopic.php?f=16&t=16838

Page 2 of 2

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Posted: Tue Nov 17, 2020 8:42 pm
by Dölli
Hat funktioniert!
Danke für den wirklich tollen :!: Support :!:

Re: OP_Accordion Template - Links zu den einzelnen Punkten

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

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Posted: Sat Nov 21, 2020 1:53 pm
by cmb
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.

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Posted: Sat Nov 21, 2020 6:45 pm
by lck
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 ;) .

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Posted: Sat Nov 21, 2020 9:54 pm
by cmb
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. :)

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Posted: Mon Dec 07, 2020 9:11 pm
by Dölli
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

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Posted: Mon Dec 07, 2020 9:34 pm
by lck
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.

Re: OP_Accordion Template - Links zu den einzelnen Punkten

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

Re: OP_Accordion Template - Links zu den einzelnen Punkten

Posted: Tue Dec 08, 2020 12:05 pm
by lck
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 :) .
All times are UTC
Page 2 of 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/