Elemente ausblenden und mit Popup ersetzen möglich?

mogulig schrieb am 14.10.2013 um 22:00 Uhr

Hallo!

Hab mir schon den Kopf zerbrochen, wie es gehen könnte, aber ich bekomme es einfach nicht hin, ohne für jeden Unterpunkt eine eigene Seite zu basteln... die Aufgabe mit Magix Web Designer 9 Premium ist folgende:

links im grauen ist das Hauptmenü, rechts im schwarzen das Untermenü. Wenn man auf z.b. "sin&nail" geht, soll rechts das Bild sein, das man gerade sieht. wenn man einen der unterpunkte anwählt (z. b. manicure&pedicure) soll das bild verschwinden und statt dessen text erscheinen:

sämtliche punkte des untermenüs sind mit popup-ebenen umgesetzt, das würde ich auch nach möglichkeit so lassen wollen. versuchsweise hatte ich ein schwarzes rechteck im hintergrund des poups, welches das bild abgedeckt hat, aber das ist natürlich pfusch und z. b. tablets finden das gar nicht lustig.

jetzt die frage: wie bekomme ich das bild ausgeblendet sobald ich eine der popup-ebenen öffne? irgendeine idee? 
oder anders gefragt: kann ich auf einer website standardmäßig ein popup anzeigen, welches "ausgetauscht wird", sobald ich iorgendwo draufklicke?

besten dank & viele grüße!

*to

____________________________________________________

Hallo nochmal,

also... ich kriegs nicht hin. Ich hab von HTML/JS/CSS etc auch keine Ahnung, deswegen benutze ich ja diese Software. Ich kann also nur experimentieren mit dem, was du mir vorgegeben hast. Leider kommt nichts brauchbares heraus. Folgendermaßen ist der Aufbau:

Das Bild befindet sich in der Ebene "Bild". Wenn ich deine Befehlszeile auf "manicure&pedicure" lege, und ich gehe dann auf die skin&nail, dann ist da kein bild. das popup geht auf, wenn ich manicure&pedicure auswähle. blöder weise geht es aber auch nicht mehr zu, wenn ich z.b. nails auswähle. versteh schon, diese befehlsketten muss man dann überall machen. nicht sdesto trotz: kein bild!

nochmal zum verständnis: skin&nail ist das übergeordnete menü. wenn ich das auswähle, komme ich nur auf die seite, auf der das menü (siehe bild) ist und das rote bild. dann will ich aus dem untergeordneten menü wählen können. was auch immer ich wähle - zuerst muss das bild verschwinden und dann soll der jeweilige menüinhalt angezeigt werden...

Ich hoffe, Du hast eine Idee, die auch ich umsetzen kann? Mein einziger Ansatz wären eigene Seiten für jeden einzelnen Menüpunkt, aber das ist a) sauviel Arbeit und b) geht es bestimmt auch einfacher und schöner! ...irgendwie...

Viele Grüße!

*to

Kommentare

BeRo schrieb am 14.10.2013 um 22:53 Uhr

[...] kann ich auf einer website standardmäßig ein popup anzeigen, welches "ausgetauscht wird", sobald ich iorgendwo draufklicke? [...]

Das geht.

Dazu kannst Du eine Befehlssequenz in die Webeigenschaften -> Links eines Objekts eintragen, die bewirkt, dass eine (oder mehrere) darin definierte popup Ebene(n) geschlossen wird/werden und danach eine- oder mehrere andere popup Ebene(n) geöffnet wird/werden.

Die Befehlssequenz kann z. B. so aussehen:

-------------------
popup:open "Bild3" popup:close "Bild1" popup:close "Bild2"
-------------------

Damit wird die popup Ebene "Bild3" geöffnet und die Ebenen "Bild1" und "Bild2" geschlossen.

Im WD Editor kann das so aussehen:


Du weist also einem beliebigen Objekt (Text, Grafik, NavButton, Bild) einen Link zu, wie oben gezeigt. Das war's dann schon...

Probier's mal.

Viel Erfolg

Zuletzt geändert von BeRo am 14.10.2013, 22:53, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

mogulig schrieb am 15.10.2013 um 08:41 Uhr

Guten Morgen!

 

Erst einmal vielen dank für die schnelle Antwort! Diese Funktion kannte Ich bisher nicht. Ich hab von magix Das dazugehörige Buch, auf 370 Seiten habe ich diese befehlsketten bisher nicht entdeckt. Sicherlich kann man damit noch viel mehr anstellen... Gibt es vielleicht irgendwo eine Erklärung zu dieser Funktion? / was alles wie möglich ist?

Dein Lösungsansätze sieht gut aus, kann ihn aber erst heute Abend testen. Ich schreib einfach, wie es geklappt hat. Besten dank nochmal! 

*to

BeRo schrieb am 15.10.2013 um 12:12 Uhr

[...] Gibt es vielleicht irgendwo eine Erklärung zu dieser Funktion? / was alles wie möglich ist? [...]

AFAIK nein

Es gibt sicher noch andere (versteckte) Optionen, die mitunter zufällig an die Oberfläche kommen oder durch Antizipieren bekannter Befehle aus HTML/JS/CSS/PHP "eingebaut" werden können.

Dabei kannst Du Deiner Fantasie freien Lauf lassen...

Positive Erkenntnisse aus solchen Experimenten darfst Du natürlich gerne im Forum posten.

Viel Erfolg und viel Spaß beim weiteren Website Design

Zuletzt geändert von BeRo am 15.10.2013, 12:12, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

BeRo schrieb am 15.10.2013 um 23:29 Uhr

[...] was auch immer ich wähle - zuerst muss das bild verschwinden und dann soll der jeweilige menüinhalt angezeigt werden. [...]

Ich muss zugeben, dass mir das Problem nicht so ganz klar geworden ist.

Auf Deinem Screenshot kann ich keine Menüebenen erkennen. Aber unabhängig davon, sollte die vorgeschlagene Prozedur funktionieren.

Vielleicht kommt mehr Licht ins Dunkel, wenn Du Dir hier mal die online Demo anschaust (s. a. Screenshot). Die Vorlage entspricht zwar nicht Deiner Site, hier habe ich aber genau die Technik eingesetzt, die bei Dir (warum auch immer) nicht funktionieren will...


Lade Dir auch mal hier die zugehörige Projektdatei herunter, mit der Du das o. a. Szenario leicht selbst nachstellen- und untersuchen kannst.

Vielleicht kommen wir so zum Ziel

Viel Erfolg

BTW

Du kannst die Lesbarkeit Deines Threads deutlich verbessern, wenn Du für Deine Antworten auf die erhaltenen Tipps ebenfalls die Antwort Funktion benutzt.

Wenn Du stattdessen Deine Threaderöffnung editierst, geht die zeitliche Abfolge von Frage - Antwort - neuer Frage - neuer Antwort - etc. verloren. Jeder der dem Thema folgen will (ich gehöre auch dazu), muss dann ständig auf- und abwärts scrollen um die passenden Antworten zu einem Edit zu finden...

-----------------------

Edit: 16.10  -  19:03h

Download Link repariert

Zuletzt geändert von BeRo am 16.10.2013, 19:03, insgesamt 3-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

marboe schrieb am 16.10.2013 um 12:57 Uhr

Hi in die Runde,

BeRo: dein Dateidownload geht leider nicht.

Ich wollte nachgucken, ob nicht die Ebene "Bild" zwingend den Namen popup als Vorspann braucht. Muss aber auch gestehen, es ist sehr schwierig zu verstehen wo genau das Problem liegt. Gruß Martina

mogulig schrieb am 16.10.2013 um 13:55 Uhr

Hallo zusammen,

schön: jetzt sind wir schon zu dritt! Wär super, wenn ich euch noch ein bisschen nerven dürfte, um eine Lösung zu finden. Ich versuche es nochmal ganz anders, den geplanten Ablauf zu erklären:

1) ich starte auf der Home-Seite. Von dort aus habe ich Zugriff auf die Seiten 1-4
2) ich klicke auf Seite 1. Links bleibt das Menü zum Zugriff auf Seite 1-4. Rechts kommt jetzt aber ein Menü dazu, für die Seiten 1a-1d. Außederm wird auf der Seite ein Bild angezeigt.
3) Ich klicke auf seite 1a. Das Bild wird ausgeblendet. Dafür wird der Text für die Seite 1a angezeigt.
4) Bei Klick auf z. B. seite 1b wird der text von 1a ausgeblendet und der Text von 1b eingeblendet.

... ich hoffe, das ist jetzt verständlicher...?

Der Link für die Projektdatei ist tatsächlich fehlerhaft. Vielleicht hat sich Dein Ansatz durch meine neue (und hoffentlich verständliche) Erklärung oben sowieso erledigt?

Besten Dank!
*to

 

 

BeRo schrieb am 17.10.2013 um 00:33 Uhr

[...] ich hoffe, das ist jetzt verständlicher. [...]

Eindeutig ja... 

[...] Der Link für die Projektdatei ist tatsächlich fehlerhaft. [...]

Sorry, ich habe ihn schon repariert. 

Aber zum Thema:

Deine Beschreibung lässt, denke ich, klar erkennen, dass das Problem einfach zu lösen ist.

Im Grunde musst Du nichts anderes tun, als die Inhalte der popup Ebenen "Seite 1a ... 1d" so zu positionieren, dass sie sich bei der Anzeige überdecken.

Bei Bildinhalten ist das ohne zusätzliche Maßnahmen möglich. Bei Texteinblendungen musst Du jeweils unter den Text ein Rechteck in gleicher Größe legen, das farbig gefüllt ist. Damit wird darunter liegender Inhalt unsichtbar.
Du kommst also ohne weitere Tricks zu dem gewünschten Ergebnis.

So kann das im Editor aussehen:


Wenn Du in der Vorschau- oder online auf den Link "Seite 1a" klickst, wird der vorbereitete Text über das Bilds gelegt. Durch das unterlegte, farbige Rechteck, wird das Bild komplett unsichtbar (s. Screenshot)


Mit der Methode, die ohne doppelten Boden auskommt, solltest Du Dein Problem lösen können.

Auch zu dieser Lösung kannst Du Dir gerne die Projektdatei hier herunterladen, um das Gesagte auf dem eigenen PC zu testen...

Viel Erfolg

Zuletzt geändert von BeRo am 17.10.2013, 00:33, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

mogulig schrieb am 17.10.2013 um 11:13 Uhr

Hm, die Idee ist gut: immerhin hatte ich die selbst schon  (siehe meine ursprüngliche Frage "versuchsweise hatte ich ein schwarzes rechteck im hintergrund des poups, welches das bild abgedeckt hat, aber das ist natürlich pfusch und z. b. tablets finden das gar nicht lustig.")

Das blöde ist: das Bild ist nicht einfach ein Bild sondern eine "Diashow" oder wie auch immer das bei Magix heißt. Ich vermute dass es dadurch zu kleinen Ladezeiten kommt, beim Wechsel zwischen den Popups blitzt immer wieder der Hintergrund durch, was nicht schön aussieht.

-> Ich suche also nach wie vor eine Lösung, ein Element aus- und ein anderes einzublenden. Ich sehe schon, es gibt wohl doch keine andere Möglichkeit, als pro Unterpunkt eine eigene Seite zu erstellen... oder?

BeRo schrieb am 18.10.2013 um 22:00 Uhr

[...] das Bild ist nicht einfach ein Bild sondern eine "Diashow" [...]

Das verändert zwar die Ausgangslage, aber nicht die ursprüngliche Lösung...

[...] es gibt wohl doch keine andere Möglichkeit, als pro Unterpunkt eine eigene Seite zu erstellen... oder? [...]

Doch, schon. Die ursprünglich vorgeschlagene Lösung, ist damit wieder aktuell, wenn auch leicht abgewandelt.

Die Änderung besteht in 1. Linie darin, dass Du für das Standardbild (jetzt die Slideshow), eine zusätzliche Ebene anlegen musst, die Du ebenfalls zur popup Ebene machst, indem Du über einen Dummylink darauf zugreifst (mehr dazu weiter unten).

Der Dummylink sorgt dafür, dass eine JavaScript Funktion bereitgestellt wird (hier "xr_cpu(8)"), mit der die Ebene über einen JS-Aufruf angezeigt werden kann.
Diese Funktion muss in den HTML Body Bereich der Seite eingebunden werden und beim Öffnen der Seite automatisch aufgerufen werden. Damit wird die Slideshow auf der Seite (z. B. Seite1) geöffnet.

So sieht das Script aus, das die Funktion startet:

------------------------
<script type="text/javascript">
window.onload=(
xr_cpu(8));
</script>

-----------------------

Die anderen Ebenen (Seite 1a...1d) bleiben erhalten, benötigen aber kein farbiges Rechteck mehr als Hintergrund.
Wird über das Untermenü eine der Seiten 1a...1d aufgerufen, wird immer zuerst eine JS-Funktion gestartet, die alle offenen popup Ebenen schließt (z. B. die Slideshow), anschließend wird die gewählte Ebene (1a...1d) eingeblendet.

Die Funktion "my_CloseAll()" schließt alle angezeigten/geöffneten Ebenen (das zugehörige Skript findest Du weiter unten).
Die Funktion "xr_cpu(4)" öffnet in unserm Beispiel die Ebene "Seite 1a".

So sieht ein entsprechender Link aus:

-----------------------
javascript:my_CloseAll(), xr_cpu(4)
-----------------------

Damit die eingeblendeten Ebenen nicht durch einen zufälligen Klick, versehentlich geschlossen werden, sollten sie eine "Lock" Funktion bekommen, indem der Name der Ebene um den Zusatz "(lock)" erweitert wird. Die Ebene "Seite 1a" sollte dann "Seite 1a (lock)" heißen etc.
Außerdem muss außerhalb der Seite eine Pseudo NavBar angelegt werden, die je einen Button mit einem passenden Link für eine zu öffnende popup Ebene enthält. Nur dann werden die JavaScript Funktionen automatisch bereitgestellt, mit denen Du das Öffnen- und Schließen der popup Ebenen steuern kannst (s. a. oben zum Thema "Dummylink")

So kann das im Editor aussehen:


Die Links für das Untermenü sehen dann so aus:


Das Script, mit dem die Funktion "my_CloseAll()" zum Schließen aller offenen Ebenen definiert wird, gehört in den HTML Head der Seite.

So sieht es aus:

------------------------
<script type="text/javascript">
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>

------------------------

Die Namen der Funktionen, mit denen Du die einzelnen popup Ebenen öffnen kannst, findest Du ganz einfach heraus, wenn Du den Mauszeiger auf einen Link Button positionierst und damit in der Fußzeile den Namen anzeigst.
Dazu ist es in unserem Beispiel erforderlich, dass Du die Pseudo NavBar vorübergehend in den sichtbaren Bereich der Seite verschiebst (s. Screenshot)


Das war's im Wesentlichen.

Wie das in der Praxis aussieht und wie Du das am einfach nachbauen kannst, das studierst du am besten mit Hilfe der Demo und der Projektdatei.

Viel Erfolg

Zuletzt geändert von BeRo am 18.10.2013, 22:00, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

mogulig schrieb am 21.10.2013 um 10:12 Uhr

Also zuerst mal: vielen dank für die viele Arbeit, die du in die Beantwortung meiner Frage steckst!

Ich bin grad im Urlaub und kann deine Tipps leider nicht jetzt nicht umsetzen. Das werde Ich aber nächste Woche nachholen und berichten. In der Zwischenzeit habe Ich Das Problem mit jeweils eigenen Seiten erschlagen, gefallen tut mir diese aber nicht so gut.

Ihr könnt euch den aktuellen Status anschauen unter penleaze-thesalon.co.uk

DieSeite ist noch nicht fertig, es fehlen Fotos, favicon, beschreibungen etc.

Viele grüße und bis bald!

*to