Link zum Anker und gleichzeitig Popup schließen?!

christin-kapitza schrieb am 20.01.2019 um 11:31 Uhr

Hallo ihr Lieben,

ich habe folgende Version vom Web Designer: MAGIX Web Designer Premium 16.0.0.55162 M DL x64 Oct  9 2018

Also ich habe folgende Idee: ich habe eine Popup-Ebene auf der eine Schaltfläche ist. Nun möchte ich mit dem Klick auf die Schaltfläche auf einen Ankerpunkt derselben Seite springen, aber gleichzeitig die Popup-Ebene schließen. Ist das möglich?

Kommentare

marboe schrieb am 20.01.2019 um 13:46 Uhr

Meiner Vermutung nach müsste das gehen.

Die neueren Versionen des WD rufen die Ankerpunkte wie gewollt auf. Sogar seitenübergreifend. Das müsste auch mit dem Ausgangspunkt eines PopUps gehen.
Im Zweifel nimmst du halt den absoluten Link des Ankers. Dieser lautet bspw:
https://www.deineDomain.de/deineseite.htm#xl_Anker:32Name (hier müsstest du die Domain, die Seite und den Ankernamen einsetzen)

Die PopUp-Ebene müsste sich bei Aufruf des Links selbst schließen. Oder nicht?

Probiere das mal aus.
Andernfalls wären mehr Infos hilfreich 😉VG Marboe

christin-kapitza schrieb am 20.01.2019 um 20:27 Uhr

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

BeRo schrieb am 20.01.2019 um 22:43 Uhr

[...] 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 👍

Zuletzt geändert von BeRo am 20.01.2019, 22:49, insgesamt 2-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

marboe schrieb am 21.01.2019 um 07:49 Uhr

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

BeRo schrieb am 21.01.2019 um 14:25 Uhr

@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... 😉

Zuletzt geändert von BeRo am 21.01.2019, 14:37, insgesamt 1-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christin-kapitza schrieb am 21.01.2019 um 14:39 Uhr

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 🙈

christin-kapitza schrieb am 30.01.2019 um 09:07 Uhr
 

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?

 

BeRo schrieb am 30.01.2019 um 13:18 Uhr

[...] 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...

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christin-kapitza schrieb am 19.03.2019 um 15:55 Uhr

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

BeRo schrieb am 19.03.2019 um 21:38 Uhr

[...] 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... 🤓

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

christin-kapitza schrieb am 20.03.2019 um 14:57 Uhr

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?

BeRo schrieb am 20.03.2019 um 16:40 Uhr

[...] 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. 😊

Zuletzt geändert von BeRo am 20.03.2019, 16:46, insgesamt 1-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.