Anker Link auf div box

[MartinK]

Hallo!

Unsere Website ist mit Typo3 aufgebaut.

Ich habe eine SVG Karte erstellt und jeden Bezirk die "Visitenkarte" vom zuständigen Außendienst zugeordnet.

Mein Problem am Smartphone ist, dass sich beim Klick auf dem Bezirk der Fensterausschnitt immer nach unten verschiebt und somit muss man immer wieder nach oben scrollen.

Am IPhone öffnet sich beim "Klick" auf den Bezirk keine "Visitenkarte", diese öffnet sich erst dann, wenn man am IPhone den Link „In neuem Tab öffnen“ anklickt. (kann man das bei den Einstellung am Mobiltelefon ändern?)

Danke für eure Info.

Auschnitt:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 731.55 378.03">
    <g id="KPader">
        <a id="B417" href="#openModalPader" >
            <polygon id="Voecklabruck" class="cls-1" points="...."/>
            <title class="tit">Vöcklabruck</title>
        </a>  
    </g>
</svg>

<div id="openModalPader" class="modalDialog">
      <div class="container">
        <a href="#close" title="Schließen" class="closetp">X</a>
        <div class="HeadAD">..</div>
        <hr class="linietp">
        <div class="TelAD"><a href="tel:[phone]">000000</a></div>
        <hr class="linietp">
        <div class="MailAD"><a href="mailto:...">....</a></div>
        <hr class="linietp">
        <div class="LocationAD">....</div>
</div>

[Martin]

Website Karte

[Rolf B]

Hallo MartinK,

zum iPhone-Problem kann ich nichts sagen.

Um dein anderes Problem nachzuvollziehen, musste ich erstmal dein Dokument manipulieren. Warum hast Du <meta name="viewport" content="width=1020"> da drin? Und wieso zeigen deine Screenshots ein Layout, das dieser Viewport-Angabe nicht entspricht? Eine responsive Seite braucht

<meta name="viewport" content="width=device-width, initial-scale=1" >

Das habe ich eingesetzt, und dann hatte ich auch das Layout, dass Du zeigst.

Die Anzeige scrollt, weil du die entsprechenden divs per Link anspringst, um sie dann mittels :target Pseudoklasse von opacity:0 auf opacity:1 umzuschalten. Wie Du siehst, ist das nicht die beste Idee, wenn das Dokument nicht vollständig auf den Bildschirm passt.

Wenn Du eine ID per URL-Hash ansprichst, wird die Seite so positioniert, dass diese ID oben steht. Ganz oben. Egal was da noch so positioniert ist. Zum Beispiel eine fixed navigation. Deine modalDialog divs sind Kinder von .eternit-map und befinden sich alle an deren oberem Rand. Darum wird dieser obere Rand durch das Verlinken auf y=0 im Viewport positioniert, und man sieht nichts mehr.

Dieses Positionieren wird nur dann begrenzt oder verhindert, wenn das Dokument nicht lang genug ist, um die id an den oberen Rand zu bringen. Das ist in der Desktop-Ansicht der Fall.

Was tun?

Die ganz einfache Lösung: Hänge deine .modalDialog Boxen höher. Was etwas Brachialgewalt braucht, denn Typo3 pflanzt etliche Elemente mit position:relative in den Elternpfad, so dass ein Umhängen der .modalDialog divs in ein besser geeignetes Elternelement nicht so simpel ist.

Der am wenigsten komplizierte Weg wäre, wenn Du .modalDialog die CSS Eigenschaften position:absolute und top:-500px gibst. Dadurch sind diese divs ziemlich sicher oberhalb des Dokumentanfangs, mit der Folge, dass das Dokument zum Anfang scrollt, wenn ein Popup ausgewählt wird. Die .container divs platzierst Du dann mit top:450px wieder in die Karte.

Eine bessere Lösung würde die Popups aber nicht mit der :target Eigenschaft öffnen, sondern JavaScript verwenden. Dadurch entfällt der Versuch des Browsers, beim Anklicken eines Bezirks das Dokument zu scrollen.

Rolf

[Martin]

Hallo Rolf, danke für deine ausführliche Hilfe. Wie würde der Aufbau mit Javascript sein damit die Popups eingeblendet werden?

[Rolf B]

Hallo Martin,

ugh. Mühsam. Wieviel JS kannst Du? Was ich nicht weiß, ist, ob es Besonderheiten gibt, wenn man JavaScript zu einer in Typo3 Seite hinzufügt.

Ich sehe nur dass Du im template-Ordner unter redakteur und scripts jeweils ein functions.js stehen hast, sind die von Dir?

Problematisch daran scheint zu sein, dass die auf jeder Seite geladen werden. Du bräuchtest was, das nur auf dieser Seite geladen wird.

Das gilt auch für die Produktgalerie, denn deren Code läuft auch auf der "Über uns" Seite und bringt Fehlermeldungen in der Konsole.

Rolf

[MartinK]

Hallo Rolf,

die Agentur hat uns einen Template Redakteur für CSS und JavaScript eingerichtet.

Bei JS kenne ich mich nicht aus. Ja, die functions.js sind von mir. Hatte die Karte zuvor anders aufgebaut. Die "Visitenkarten" sind mit den JS functions.js angezeigt worden.

Da hatte ich nicht die Möglichkeit im popup Fenster auf die E-Mail Adressen zu verlinken. Daher habe ich es aktuell mit :target gelöst.

Danke dass du dir für mein Anliegen Zeit genommen hast. Lg. Martin