So, ich fass das mit Bildern mal kur zusammen ;)

Ich habe (hier eingekreist) eine kleine Schaltfläche... mit der möchte ich ein kleines Menü ausklappen, wenn man darauf klick.

klappt auch prima (auch mit MouseOver und dem ganzen Schnickschnack)... Jetzt möchte ich mit den Menüpunkten zu unterschiedlichen Ankern auf der selben Seite springen. Dies klappt auch - allerdings:

bleibt das Menü geöffnet. Und hier hätte ich es gerne, wenn ich zum Anker auf der sellben Seite springe, sich das Menü automatisch schließt. Habe es erstmal so eingerichtet, dass man das Menü schließt, wenn man noch mal auf den kleinen Hundekopf klickt... aber automatisch wäre mir schon lieber

[...] hier hätte ich es gerne, wenn ich zum Anker auf der sellben Seite springe, sich das Menü automatisch schließt. [...]

Das geht recht einfach, wenn Du ein paar Zeilen JavaScript investierst. 😉

Genau genommen benötigst Du 2 JS Funktionen.

• Eine Funktion, die wir der Einfachheit halber "anchor()" nennen, sorgt dafür, dass der definierte Anker angesprungen wird, wenn die Funktion aufgerufen wird.
  Gleichzeitig ruft diese Funktion die 2. Funktion auf (s. u.)
• Die 2. Funktion „my_CloseAll()“ schließt alle geöffneten popup Ebenen.

So kann das JavaScript "in echt" aussehen:

<script type="text/javascript">
function anchor() {
window.location= '#Anker';
my_CloseAll();
}

function my_CloseAll(){
var ll=document.getElementsByTagName('div');
for(var i=ll.length-1;i>=0;i--)
{
if(ll[i].id.indexOf("xr_xp")==0){
xr_v0(ll[i]);};};};
</script>

Der Anker heißt in Deinem Fall "#Bacardi-allgemein". Der Ankername müsste also im o. a. Script anstelle von "#Anker" eingetragen werden.

Das JScript speicherst Du am besten im HTML Head der Website

Auf der Seite änderst Du den Link auf den Anker in einen "Link auf Internet oder E-Mail-Adresse"

So sollte der Link aussehen:

javascript: anchor();

Benötigst Du mehrere Anker/popup Ebenen, legst Du für jeden Anker eine eigene JScript Funktion an.
Aktuell haben wir die "function anchor()".
Die zweite Funktion könnte jetzt z. B. "function anchor2()" genannt werden. Natürlich kannst Du auch sinnvollere Namen benutzen, wie "function anchorVideo()", "function anchorGalerie()", "function anchorErgebnisse()" etc...

Die "function my_CloseAll()" kann in allen Fällen weiter benutzt werden. Sie kann also von allen Funktionen aufgerufen werden, ohne dass Du sie neu anlegen müsstest.

Probier's mal.

Viel Erfolg 👍

Ich widerspreche BeRo nur ungern, aber so umständlich muss das nicht sein.

Du kannst hier ein Feature des WD nutzen.

Ich habe hier dein Grundbild mit MouseOvereffekt angelegt als Gruppe in Mouse Off. (übrigens mit süßem Effekt, indem ich einfach dein Hundebild gespiegelt habe ... das sieht so aus als würde er nicken 😁)
In der PopUp-Ebene sind diverse Bilder mit Links zu Ankern. Diese werden in der MouseOff-Ebene angelegt wie gehabt. Ein Beispiel habe ich dir markiert.

Die Besonderheit ist hier nur das "lock" in der PopUp-Ebene.
Als Einstellung bekommt diese Ebene:

In meinem Beispiel wird also das Eis aufgerufen indem man den Hund klickt.
Hat man auf das Eis geklickt, scrollt man zum Anker und die PopUp-Ebene schliesst sich automatisch.

Die PopUp-Ebene ist im oberen Bereich geschlossen worden.

Vielleicht habe ich die Aufgabenstellung nicht richtig verstanden? Gruß Marboe

@marboe

Ich widerspreche BeRo nur ungern, [...]

Damit habe ich kein Problem, das übt "meine bessere Hälfte" permanent mit mir... 😜

[...] Vielleicht habe ich die Aufgabenstellung nicht richtig verstanden? [...]

Doch schon, aber Du hattest nicht alle Infos zum Layout. 😍

Du hast nicht gesehen, dass @christin-kapitza das popup Menü fixiert hat. Mit dem Attribut sieht die "Anker Welt" gleich ganz anders aus.🤓

Wirf mal einen Blick auf die originale Website (klick).
Da siehst Du, dass das fixierte und mit der "locked" Option versehene popup Menü permanent sichtbar bleibt. Es sei denn... (klick). 😇

Hier stehen beide (nachgebauten) Projektdateien zum Download bereit. 1x popup Menü ohne JScript und 1x mit.
Da lässt sich recht gut erkennen, wie das Problem entstanden ist.
Natürlich kann aus der modifizierten Projektdatei auch gleich das passende Skript kopiert werden, für die eigene Website... 😉

Ja, das tut mir leid, das ist mir auch jetzt erst beim Lesen der Antworten und vergleichen wie ich das habe aufgefallen, dass ich vergessen habe zu sagen, das das ganze auch noch fixiert bleiben soll 🙈

 

Benötigst Du mehrere Anker/popup Ebenen, legst Du für jeden Anker eine eigene JScript Funktion an.
Aktuell haben wir die "function anchor()".

Hallo BeRo,

ich habe nun ein paar Stunden mal Zeit gehabt rum zu probieren. Irgendwie stehe ich aber auf dem Schlauch, wie ich das mit mehreren Ankerpunkten mache 🙈 wäre es dir möglich, mir da auch ein paar Screenshots zu machen?

[...] Irgendwie stehe ich aber auf dem Schlauch, wie ich das mit mehreren Ankerpunkten mache [...]

Das ist kein Hexenwerk, wenn Du es einmal "geschnallt" hast... 😍

Vorausgesetzt, Deine Website ist eine "one page" Site, sie enthält also alle Seitenbereiche in einer einzigen HTML Datei, dann kannst Du die vorgeschlagene Anker Lösung so umsetzen:

• Zunächst gibst Du je einem Objekt (Text, Grafik, Dummyobjekt) im Kopfbereich der Rubriken "Videos, Galerie, Allgemein, Ergebnisse" einen passenden Ankernamen. Sinnvollerweise nimmst Du gleich den Klarnamen, also "Videos", "Ergebnisse", usw.
• Dann legst Du die passenden JS Funktionen im HTML Head der Website an:
  Hier ein Beispiel für drei verschiedene Anker:

  <script>
  function videos() {
  window.location= '#Videos';
  my_CloseAll();
  }
  function results() {
  window.location= '#Ergebnisse';
  my_CloseAll();
  }
  function gallery() {
  window.location= '#Galerie';
  my_CloseAll();
  }
  </script>
  

• Jetzt kannst Du den Link Buttons die Links zu den JS Funktionen "videos(), results(), gallery()" zuweisen.
  
• Fertig 😊

Wie gesagt, das wird nur funktionieren, wenn Du eine "one page" Seite machst. Aktuell ist Deine Website noch auf mehrere HTML Seiten aufgeteilt. Wenn das so bleiben soll, kannst Du eine andere (einfachere) Lösung für Dein Problem benutzen...

Hallo ihr Lieben,

leider hatte ich lange nicht viel Zeit... zurück zu kommen zu meinem Problemchen ;)

... Wenn das so bleiben soll, kannst Du eine andere (einfachere) Lösung für Dein Problem benutzen...

wie mache ich denn das, wenn die Seite auf mehrere HTML Seiten aufgeteilt bleiben soll, ich aber mehrere Anker einbinden möchte, das Pop up sich aber dann immer wieder schließen soll?

Liebe Grüße

[...] ich aber mehrere Anker einbinden möchte, das Pop up sich aber dann immer wieder schließen soll? [...]

Damit kein Missverständnis aufkommt...

Anker sind Sprungpositionen (keine popup Ebenen). Das heißt, dass Du mit verschiedenen Ankern auf einer Seite lediglich die Seite soweit scrollst, dass eine andere, meist vertikal versetzte Position auf der Seite sichtbar wird.

Im o.a Beispiel (Screenshot) wird über einen Ankerlink zur Personenbeschreibung der Mitarbeiterinnen gescrollt. Mit einem weiteren Klick auf ein an dieser Position abgelegtes (unkenntlich gemachtes) Passbild, öffnet sich dann die zugehörige popup Ebene mit einem detaillierten Passbild.
Auch auf dieser Seite können unterschiedliche popup Ebenen geöffnet- und andere automatisch geschlossen werden, wie im nächsten Satz erklärt...

Sollen auf einer aktuell angezeigten Seite, die mehrere popup Ebenen hat, einzelne Ebenen angezeigt- und dabei andere Ebenen geschlossen werden, geht das recht einfach mit einer kleinen Befehlssequenz, wie z. B. diese:

popup: open "Doggy (lock)" close "Kitten (lock)"

Damit wird bei einem Klick auf den Link die Ebene "Doggy (lock)" geöffnet und gleichzeitig die Ebene "Kitten (lock)" geschlossen.

Möchtest Du auf einer Seite Links anbringen, die nach einem Klick eine andere Seite öffnen und gleichzeitig dort eine bestimmte popup Ebene öffnen, wird's ein bisschen komplizierter, dann kommst Du um ein paar Zeilen JavaScript nicht herum...

Beschreibe doch mal genau, was Du geplant hast... 🤓

Also... das Anker, keine Popup ebenen sind, ist mir klar.

Ich versuche mein Vorhaben noch mal zu erklären:

Also, ich habe eine fixierte Schaltfläche. Wenn ich auf diese klicke, öffnet sich ein Menü (das Menü ist auf eine extra Ebene angelegt). In dem Menü sind mehrere Menüpunkte angelegt. Jeder Menüpunkt soll an einen extra Ankerpunkt derselben Seite springen. Dies klappt. Nur möchte ich, wenn ich zu einem Anker springe, dass das Menü wieder einklappt bzw die Ebene mit dem Menü geschlossen wird. Und das bei einer Seite die mehrere HTML Seiten beinhaltet 😅 ist denn das überhaupt möglich?

[...] Nur möchte ich, wenn ich zu einem Anker springe, dass das Menü wieder einklappt bzw die Ebene mit dem Menü geschlossen wird [...]

Das ist kein Problem. 😉
Alles, was Du dazu brauchst. sind ein paar Zeilen JavaScript.
Abweichend von der hier, am 20. Jan. schon erklärten Lösung, geht es noch ein bisschen einfacher...

Kopier Dir zunächst die JS Funktion "closeAll()" in den HTML Head der Website (nicht Seite)

<script>
function closeAll(){  //schließt alle offenen popup Ebenen
var ll=document.getElementsByTagName('div');
for(var i=ll.length-1;i>=0;i--)
{
if(ll[i].id.indexOf("xr_xp")==0){
xr_v0(ll[i]);};};};
</script>

Dann legst Du auf der Seite die Sprungziele (Anker) fest, indem Du den dafür vorgesehen Objekten die entsprechenden Namen verpasst.

Wenn Du einen fixierten Header auf der Seite haben solltest, unter dem die Sprungziele (Anker) verschwinden, kann es nötig sein Objekte als Sprungziel zu definieren, die oberhalb der eigentlichen Sprungziele liegen.
Dazu legst Du am besten transparente Rechtecke als Dummy Anker an, wie oben im Screenshot gezeigt. Natürlich dürfen die Dummies keinen Text- und keinen Hintergrund enthalten, damit sie auf der Seite unsichtbar bleiben...

Nun kopierst Du in den HTML Head der Seite (nicht Website) die u. a. JS Funktion "jump(anchor)", die dafür sorgt, dass die Seite zu dem jeweils verlinkten Anker scrollt und gleichzeitig das popup Menü schließt:

<script>
function jump(anchor) {
    window.open('./index.htm#' + anchor,'_self');
    closeAll();
}
</script>

Mit dem o. a. Script wird die Seite "index.htm" geöffnet. Den Namen musst Du auf den Namen der Seite ändern, die Du verwenden willst.

Jetzt musst Du nur noch die Links im popup Menü anlegen, z. B. so:

javascript: jump('Galerie');

Die Links zeigen nur indirekt auf den gewünschten Anker, weil sie zunächst "nur" die JScript Funktion "jump()" aufrufen. Die Funktion sorgt dann dafür, dass die Seite bis zu dem als Argument übergebenen Ankerpunkt (hier "Galerie") gescrollt wird und sie schließt gleichzeitig alle offenen popup Ebenen.

Fertig. 😊

Hallo Ihr Lieben

Ich habe dieselbe oder eine sehr ähnliche Frage - und habe die obige Lösung mit dem Javascript probiert, alles so gemacht wie BeRo das exzellent beschrieben hat, aber es funktioniert nicht.

Ich habe eine Popup-Ebene, die beim Klicken auf ein Steuerelement (das nicht auf der Popup-Ebene liegt) (Die Popup-Ebene wird eben nicht automatisch geschlossen, weil das bei einem eher langen Popup, das Scrollen erforderlich macht, für die Smartphone-Variante ja nicht so praktisch ist) geschlossen werden soll - und gleichzeitig soll zum Anker ("Seitenanfang") gesprungen werden.

Irgendwie klappt das nicht. Ich habe die JS-Funktion in den Head der Website (nicht der Seite) kopiert, meinen Ankerpunkt eingefügt ("Seitenanfang") - und den Link bei dem Steuerelement wie von BeRo (im Post vom 20.01. um 22:43) Uhr beschrieben formuliert: javascript: anchor();

Probiere ich das nun auf, sehe ich folgendes:

Was mache ich falsch?

Der Anker "Seitenanfang" funktioniert prinzipiell, das habe ich ausprobiert. Ich bin auch einigermassen sicher, dass ich keine Schreibfehler gemacht habe, lediglich

'#Anker'

habe ich durch

'Seitenanfang'

ersetzt.

So sieht das aus:

und

Leider funktioniert auch die Version, die BeRo am 20.03. um 16:40 beschrieben hat, nicht. Ich habe in den Head der Seite (nicht der Website) die JS-Funktion (mit "jump") eingebaut und den Link entsprechend angepasst. Wenn ich das dann teste, passiert einfach gar nichts - es erscheint also auch nicht der obige Fehlerbildschirm.

Ich verwende die Version MAGIX Web Designer Premium 15.1.0.

Danke für die Hilfe.

@Kroetlein

[...] lediglich '#Anker' habe ich durch 'Seitenanfang' ersetzt. [...]
Probiere ich das nun auf, sehe ich folgendes: [...]

Klar, dass das nicht funktioniert. Du hast der "window.location" Anweisung kein korrektes Attribut mitgegeben. 😋

Wenn Du das Ankerobjekt mit dem Namen "Seitenanfang" ausgestattet hast, dann übernimmt der WD den Namen als ID des Objekts und IDs (hier Sprungmarken) müssen in Anweisungen mit einem führenden Hashtag (#) übergeben werden (klick).

Probier's also mal mit

window.location= '#Seitenanfang';

Dann sollte es klappen... 🤓

Viel Erfolg

Das wäre ja ein Ding...

Ich werde wieder berichten. Ich war mit diesen #- und '-Zeichen ein bisschen ratlos, dachte auch, dass ich vielleicht das falsche '-Zeichen verwende. Beim # wusste ich nicht, wann und wo muss das eingefügt werden, wo nicht...

We will see. Danke schon mal bis hierher.

Hm. Wäre ja irgendwie auch zu schön gewesen. Habe den Anker umbenannt in #Seitenanfang

Die JS-Funktion im Head der Website habe ich entsprechend angepasst, wie Du geschrieben hast.

Das hat nicht geklappt. Jetzt bekomme ich keine Fehlermeldung mehr, aber es tut sich gar nichts. Der Anker selbst funktioniert, das habe ich ausprobiert.

Dann habe ich den Anker wieder umbenannt in Seitenanfang, also ohne #, die JS-Funktion aber so wie von Dir beschrieben mit # bezeichnet. Wieder passiert leider nichts.😢

Folgende Überlegungen:

1) Könnte es sein, dass es in der Vorschau einfach nicht funktioniert?

2) Könnte man statt eines Ankers allenfalls einen anderen Code einfügen, der dazu führt, dass an den Seitenanfang gesprungen wird? Also so einen mit <a href=""> oder so?

@Kroetlein

[...] Könnte es sein, dass es in der Vorschau einfach nicht funktioniert? [...]

Die Sprunganweisung funktioniert auch in der Vorschau des WD.

[...] Könnte man statt eines Ankers allenfalls einen anderen Code einfügen [...]

Auch das geht. Du könntest z. B. eine Scrollanweisung einfügen, die ganz ohne Anker auskommt.
Nachteil: Du musst in dem Fall die Pixelanzahl z. B. vom oberen Seitenrand ermitteln, damit das funktioniert. Bei verschiedenen Varianten (Desktop, Tablet, Smartphone) kommen dann unterschiedliche Werte heraus, die Du in speziellen Codes "abfangen" musst.
Wie das geht, das habe ich hier detailliert beschrieben. Da findest Du auch eine online Demo und die zum Projekt gehörende "*.web" Datei

Aber Du musst keine Alternativen suchen, der ursprüngliche Code funktioniert, solange Du auf einer Seite bleibst.
Sprünge zu Ankerpunkten auf Unterseiten erfordern zusätzlichen Programmieraufwand (s. oben)... 😣

Lade Dir doch einfach mal das Demoprojekt herunter, das ich hier zum Download angeboten habe.

Die darin enthaltene Datei "Bacardi mod.web" ist mit der beschriebenen Ankertechnik lauffähig. Die enthaltenen Codes kannst Du natürlich auch für Dein Projekt benutzen, wenn Du die Ankernamen anpasst...

Probier's mal.

Vielen lieben Dank.

Habe alles haarklein nachgebildet, habe kopiert, mit Blank, ohne Blank, die Anführungszeichen einfach, doppelt, Hashtags genommen, wieder rausgenommen - und vor allem exakt das übernommen, was im Demoprojekt im Head der Website eingetragen ist (nur natürlich mit meinem Ankernamen "Seitenanfang") - es funktioniert nicht. Die Seite wird nicht nach oben gerollt.

Bemerkenswerterweise wird die Javascript-Funktion durchaus abgearbeitet: Die geöffneten Popups schliessen ordnungsgemäss. Nur springt die Seite nicht nach oben, obwohl ich wirklich alles 1:1 übernommen habe.

Könnte es denn damit zu tun haben, dass ich Anker habe, die Blanks enthalten? Neben "Seitenanfang" sind es eine ganze Reihe von Elementen, die Namen mit Blanks haben. Könnte das stören?

Spielt es eine Rolle, auf welcher Ebene der Anker ist? Ich habe alle möglichen Ebenen ausprobiert, aber vielleicht nicht alle. Der Ankerpunkt ist innerhalb der Seitengrenzen, das habe ich sichergestellt.

Ach, ich glaube, ich gebe es auf. Falls Du noch einen anderen Ratschlag hast, bin ich froh. Das hier wird wohl nichts.

Übrigens: Bist Du sicher, dass es im Demoprojekt ordnungsgemäss läuft? Spannend, dass der Klick auf "Ergebnisse" eigentlich nicht den Anker "Ergebnisse" ganz nach oben rollt, sondern den Ergebnisse-Anker (der ja in der Textbox "Ergebnisse" liegt) in die Mitte der Seite bringt. Gehört das so?

Ich danke Dir sehr für Deine Geduld und die tolle Unterstützung. Was wäre das Forum hier ohne Dich???

@Kroetlein

[...] Könnte es denn damit zu tun haben, dass ich Anker habe, die Blanks enthalten? [...]

Aber ja!
Umlaute, Sonderzeichen, Leerzeichen haben i. d. R. in Programmiersprachen (auch Scriptlets) nichts zu suchen, es sei denn, sie haben einen Sonderstatus, wie z. B. das Hashtag Zeichen "#".
Wenn Du die Leerzeichen durch Unterstriche "_" ersetzt, sollte es klappen. Aber selbst damit kannst Du u. U. Probleme bekommen. Am besten benutzt Du keinerlei Zeichen außerhalb des normalen (ASCII) Alphabets.

[...] Spielt es eine Rolle, auf welcher Ebene der Anker ist? [...]

Nein, Anker sollten auf allen "normalen" Ebenen funktionieren, solange die sichtbar sind und nicht gesperrt wurden.

[...] Spannend, dass der Klick auf "Ergebnisse" eigentlich nicht den Anker "Ergebnisse" ganz nach oben rollt, [...]

Das liegt daran, dass die Seite zu kurz ist... 😇

[...] Falls Du noch einen anderen Ratschlag hast, bin ich froh. [...]

Probier's zunächst mal mit den oben vorgeschlagenen Änderungen. Da ist noch "Luft nach oben" 😊

Ich werde das versuchen. Der Teufel steckt im Detail. Ich werde wieder berichten. Danke für Deine Geduld. 😌

Umlaute entfernt, Blanks durch _ ersetzt, keine Sonderzeichen mehr. Aber: 😟

Weiterhin werden die Popups geschlossen, aber die Seite rollt nicht zum Anker.

Ich werde weiter versuchen. (Habe z. B. mal in der Demodatei das selbe nachgebaut - komischerweise rollt es dann auch nicht zum Anker, den ich "Seitenanfang" genannt habe - aber wenn ich direkt darauf verlinke (also ohne Javascript-Funktion), dann geht es zum Anker. Mache ich das aber mit dem Javascript-Befehl:

"javascript: seitenanfang();"

dann rollt es ein bisschen hoch, aber nicht bis zum Anker, scheint mir.)

Ich melde mich wieder. Thanks for support.

[...] Mache ich das aber mit dem Javascript-Befehl: "javascript: seitenanfang();" dann rollt es ein bisschen hoch, aber nicht bis zum Anker, [...]

Hast Du denn auch die JS Funktion "seitenanfang" eingerichtet?

function seitenanfang() {
window.location= '#seitenanfang';
my_CloseAll();
}

Wenn nein, dann kann es nicht funktionieren. 😎

Edit 13:12 h
Achte auch auf die Groß-/Kleinschreibung. "Seitenanfang" ist nicht gleich "seitenanfang". Für den Script Interpreter sind das zwei verschiedene Begriffe!