Brauche Hilfe bei Foundry OFF-CANVAS

[timrw (T. R.)]

Moin zusammen.

Ich bastel gerade an einer Seite rum und brauche mal Hilfe für die Verlinkung zu einem sich öffnenden “Foundry OFF-CANVAS” direkt über Text-/Grafik-Link.

Ich meine, ich hätte das schon mal gemacht (und es funktioniert), finde das “projekt” aber aktuell nicht mehr.

Ich hab also Wort/Text und/oder eine Grafik und möchte dort eine Link drauf legen, der dann eben ein “Foundry OFF-CANVAS” öffnet (von links einblendet".

Hat jemand von euch noch die passenden “Befehle”?
(hab auch bei Waybackmachine mal geschaut, aber dort sind ja nur grobe Beschreibungen auffindbar und leider nie die helfenden Filme eingebunden)

Über eure Hilfe wär ich wirklich sehr dankbar.

[Matthias]

Frage doch mal ChatGPT, die KI kennt sich mit Foundry aus…

[Pegasus]

mein tipp. frag doch mal @Fuellemann

ist ein alter foundry haudegen

[WeaverPixel (Markus Haberkern)]

Hi @timrw
Arbeitest du mit Foundry 2 oder 3. In Foundry 3 gab es ja einen Off Canvas Stack, der brachte den Link ich meine als Button gleich mit.

[timrw (T. R.)]

Moin Markus.

Danke für deine Nachfrage!

Ich habe Foundry 3.

Ich möchte (zusätzlich) auf Text oder anderer “Grafik” einen Link legen, der Off Canvas Stack öffnet.
(beim “Modal-Stack” geht es ja auch und ich meine, es geht bei Off-Canvas auch und ich hätte das irgendwo auch schon mal eingesetzt; … finde es aber nicht wieder im Moment)

[timrw (T. R.)]

Aha. Hab ich leider nicht, nutz ich bisher nicht.
(und ob mir das hier aktuell so wirklich hilft?)

[timrw (T. R.)]

Moin.

Danke für den Namen.
Falls ich in den nächsten Tagen hier keine Lösung finde, kann ich ihn ja mal anschreiben.
(obwohl ich das immer irgendwie fast etwas unangenehm bzw unhöflich finde)

[WeaverPixel (Markus Haberkern)]

Guten Morgen Tim,
Ich hab schon lange nichts anspruchsvolles in Foundry 3 mehr gemacht. Bin echt eingerostet. Aber ich würde es einmal über Anker probieren. Also einen Anker in dein Off-Canvas und dann auf den Anker im Text/Bild verlinken.

Habs nicht probiert, das wäre meine Idee dazu. Hoffe es hilft!

[timrw (T. R.)]

Hi Markus.

Danke für den Tipp.
Habs probiert. Klappt leider nicht.

Kann ein Anker überhaupt “Off-Canvas” öffnen?
(wär mir ganz neu gewesen)

Ich will/soll halt aus “Navigation–Off-Canvas” rechts (grüne Navigation") über Text/Grafik-Link/Befehl ein “Kontakt-Off-Canvas” links (grüner Bereich mit Kontaktdaten) öffnen …
(und krieg das nicht hin, da ich die evtl “class”-Befehle {wie bei Modal möglich} dafür nicht kenne)

[WeaverPixel (Markus Haberkern)]

@timrw

Kann ein Anker überhaupt “Off-Canvas” öffnen?
(wär mir ganz neu gewesen)

Ja, war nur so ne Idee . Immer wenn ich Foundry starte, merke ich, wie sehr ich mich mittlerweile an Elements gewöhnt habe.

Aber noch so eine Idee. Warum öffnest Du von Deiner Off-Canvas Navigation nicht ein Modal, platzierst das auf der anderen Seite und gestaltest es, dass es aussieht wie ein Off-Canvas?

Sorry eine konkrete Lösung zu Deinem Problem habe ich leider nicht.

[Matthias]

Habe ChatGPT gefragt, hier die Antwort:

Was ist Off-Canvas in Foundry 3?

Off-Canvas ist ein Stack, das einen ausblendbaren Seitenbereich erzeugt, der außerhalb des sichtbaren Layouts liegt und erst sichtbar wird, wenn man ihn aufklappt.

Typisch als:

• Seitenmenü (Mobile Nav)

• Sidebar, die ein- und ausfährt

• Einstellungs-Paneel / Info-Paneel

• Kontaktbereich, Warenkorb, Suchfeld etc.

Es fährt also von rechts, links, oben oder unten ins Bild — ähnlich wie ein mobiles Menü auf modernen Websites.

Wie ist Off-Canvas in Foundry aufgebaut?

Foundry 3 hat zwei zentrale Stacks:

Off-Canvas (der Container)

Hier konfigurierst du:

• Position

  • Links

  • Rechts

  • Oben

  • Unten

• Breite / Höhe des Panels

• Overlay (dunkler Hintergrund, wenn offen)

• Animation & Geschwindigkeit

• Responsive Einstellungen

• Wer den Off-Canvas auslösen darf

• Ob er beim Anklicken außerhalb wieder schließt

Der Inhalt innerhalb des Off-Canvas fügst du frei ein: Nav-Stacks, Text, Bilder, Buttons, Formulare usw.

Off-Canvas Toggle (Schalter/Knopf)

Dieser Stack öffnet oder schließt den Off-Canvas-Bereich.

Du kannst beliebig viele Toggles setzen:

• ein Menü-Icon oben rechts

• ein “Mehr Infos”-Button irgendwo

• ein Bild, das als Trigger dient

• Textlink

Der Toggle wird mit dem Container verbunden über die ID, die in beiden Stacks gleich sein muss.

[timrw (T. R.)]

Hi Matthias.

Das ist ja sehr nett, das du KI für mich gefragt hast.

Den ganzen “ersten” Teil weiss ich natürlich, da ich ja damit schon länger und vielfach arbeite.

Nur der letzte Teil hilft mir nicht weiter.
”Der Toggle wird mit dem Container verbunden über die ID, die in beiden Stacks gleich sein muss.”

Denn genau danach suche ich.
Da komm ich nicht weiter und kenn den nötigen “Code” nicht oder nicht mehr (vergleichbar wie bei meinem Modal-Screenshot z.B.) bzw. erinner mich nicht mehr an die Vorgehensweise.

Früher war das einfach.
Man hat die Dokumentation aufgerufen und den kurzen tollen Film zum jeweiligen Thema sich angeschaut.
Leider ist die Dokumentation gelöscht und über Wayback sind die Filme nicht mehr eingebunden (und in den allgemeinen Infos steht sowas leider nie konkret).

[Matthias]

Wie funktioniert: “Der Toggle wird mit dem Container verbunden über die ID, die in beiden Stacks gleich sein muss.” Wie setzt man das um genau um? Wie lautet der Code für den Link?

ChatGPT:

Ich erkläre dir genau, wie man in Foundry 3 den Off-Canvas-Toggle mit dem Off-Canvas-Container verbindet – und wie der Link / Trigger-Code aussieht, wenn du keinen Button-Stack, sondern einen eigenen Link verwenden willst.

Es ist wirklich simpel, sobald man es einmal gesehen hat.

---

1. ID vergeben (im Off-Canvas-Container)

1. Öffne das Off-Canvas–Stack (den Container).

2. In den Einstellungen findest du das Feld:

   Off-Canvas ID
   (oder „Identifier“, je nach Spracheinstellung)

3. Trage z. B. ein:

   menuPanel
   
   

Das ist der eindeutige Name, über den der Toggle dieses Panel ansteuert.

---

2. Im Off-Canvas Toggle dieselbe ID eintragen

Beim Stack Off-Canvas Toggle (der Button/Klick-Auslöser):

• Dort gibt es auch das Feld:

  Target ID

Dort genau dieselbe ID eintragen, z. B.:

menuPanel

Wenn die IDs übereinstimmen → der Toggle öffnet dieses Panel.

---

3. Wenn du statt eines Toggles einen eigenen Link verwenden willst

Das ist wahrscheinlich genau das, was du meinst:
Du willst einen Textlink, ein Bild oder ein Icon, das den Off-Canvas öffnet.

Foundry verwendet dafür einen Custom Data-Attribute-Trigger:

data-f3canvas="menuPanel"

Das heißt: Jedes Element mit diesem Attribut öffnet das Panel mit der ID menuPanel.

---

Beispiel: Textlink, der Off-Canvas öffnet

<a href="#" data-f3canvas="menuPanel">Menü öffnen</a>

---

Beispiel: Icon oder Bild als Trigger

Bild:

<img src="menu-icon.png" data-f3canvas="menuPanel">

Icon (Font Awesome o. ä.):

<i class="fa fa-bars" data-f3canvas="menuPanel"></i>

---

Beispiel: Button mit eigenem HTML

<button type="button" data-f3canvas="menuPanel">
  Öffnen
</button>

---

Panel schließen mit einem eigenen Link

Im Off-Canvas-Inhalt kannst du ebenfalls einen eigenen Link setzen:

<a href="#" data-f3canvas-close>Schließen</a>

Oder Button:

<button data-f3canvas-close>✕</button>

---

Zusammengefasst

Was?	Wo eingeben?
ID des Panels (z. B. menuPanel)	Im Off-Canvas-Container
Ziel-ID	Im Toggle-Stack
Eigener HTML-Link statt Toggle	data-f3canvas="menuPanel"
Schließen	data-f3canvas-close

[timrw (T. R.)]

Danke sehr.
Nett, dass du es weiter versuchst.

Aber es (oder ich) scheitert schon an Punkt 2.
Ich finde im Off-Canvas-Stack kein ID_Feld o.ä.

Das “kann” das Canvas-Stack:

Und ich brauch hierauf (entweder “Linkbox” oder notfalls auch “SVG”,”Column” oder “Header/Text” aus Screenshot aus vorherige Nachricht) einen Link/Befehl.

[Fuellemann (Jan Fuellemann)]

@timrw Schickst Du mir einmal Dein Projekt? Dann schaue ich mal Per swisstransfer.com an hallo@einfach-gute-seiten.de

[timrw (T. R.)]

Oh.

Moin Fuellemann.
Danke für dein Hilfe-Angebot!

Sehr gerne.
Bin nur jetzt auf dem Sprung!

Ich mach dir gleich morgen das Projekt aber in “Miniversion” so fertig, dass die Frage (hoffentlich) klar wird … und sende dir das gerne dann zu!

Schon einmal vielen Dank im voraus für die Hilfsbereitschaft!

[Matthias]

Sorry für den KI Mist, es gibt gar keine ID und auch keine Toggle Stack.

Probiere mal das und ersetze 263 mit deiner Stack Nr. (aus dem Quellcode).

[timrw (T. R.)]

Moin Jan.

Vielen Dank noch einmal für deine angebotene Hilfe!
Das ist wirklich sehr sehr nett!

Ich hab dir gerade etwas geschickt!

Grüße, Tim.

[timrw (T. R.)]

Moin Matthias.

Vielen Dank für deine weitere Info!
Sehr nett!

Deine Lösung im Screenshot scheint zu funktionieren! Super!
(auch wenn ich mich nicht erinnern kann, jemals für diesen Befehl hier den “Stack-Namen” aus dem Quellcode heraussuchen zu müssen; egal … scheint ja zu funktionieren)

zu KI:
Meist wirft KI (über Suchmaschine) mir bei einfachen Frage eher nur “Mist” aus.
In Photoshop hilft es bei Panoramabildern auszubessern sehr gut, bei anderen Sachen leider überhaupt nicht.
Ich hab eine “Code-KI” mal paar kleine Skripte testweise machen lassen … war mal super, mal eher Mist.
Ein Freund aus Finnlad arbeitet für großen Konzern als “KI-Stratege”. Der hat mir mal paar tolle kleine Sachen gezeigt, die mit KI blitzschnell gehen. Aber auch er meint, da passiert noch viel Mist und ist halt noch viel “Luft nach oben” … gehört wohl dazu.

Danke noch einmal und schönen Tag noch.
Tim