Contao-Camp 2024
Ergebnis 1 bis 15 von 15

Thema: Top-Link funktioniert nicht auf mobilen Geräten

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard Top-Link funktioniert nicht auf mobilen Geräten

    Hallo zusammen,

    Ich habe das Link-Element Top-Link auf einer Webseite eingefügt, welches unter Windows ohne Probleme funktioniert. Ruft man die gleiche Webseite aber unter Android auf reagiert der Top-Link nicht, lediglich mein definierter Hover-Effekt davon funktioniert.
    Muss für diese Funktionalität unter mobilen Systemen noch etwas verändert werden vielleicht im Template? Bei meinen Recherchen konnte ich dazu bislang nichts finden. Für Ideen und Hinweise zur Lösung des Problems wäre ich sehr dankbar.


    Gruß
    Thomas

  2. #2
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Der Top-Link sollte eigentlich nur ein Link zu einem Anker am Anfang der Seite sein.
    Gib uns mal einen Link zu der Seite, bitte.

  3. #3
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Anbei der Link zu dieser besagten Webseite http://sub.musikverein-hirschzell.de.

  4. #4
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Also bei mir in meinem alten Android-Smartphone funktioniert der Top-Link im Android Browser und in Firefox, Chrome habe ich nicht probiert. Abgesehe davon, dass der alte Android Browser als veralteter Chrome angemeckert wird. Responsiv ist die Seite aber auch nicht unbedingt.

  5. #5
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Zitat Zitat von Thomasge Beitrag anzeigen
    Ruft man die gleiche Webseite aber unter Android auf reagiert der Top-Link nicht, lediglich mein definierter Hover-Effekt davon funktioniert.
    Hallo Thomas,
    ich kann deine Beobachtung nicht nachvollziehen. Mit einem Klick auf den "nach oben" Button springt die Seite an den Anfang. (Android tablet, Chrome, Firefox, Yandex).

    Die ganze Seite scheint aber überhaupt und gar nicht für Mobilgeräte geeignet zu sein...
    Und wie erzeugst du den Hover-Effekt auf einem Mobilgerät ohne Maus?

  6. #6
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Danke für die Antworten. Das Problem liegt am Edge, da es mit dem Chrome funktioniert.
    Den Hover-Effekt kann man daran erkennen, dass sich die Hintergrundfarbe beim Drücken vom Button verändert.
    Diese Homepage ist noch nicht für mobile Geräte optimiert worden, da ich noch am entwickeln bin. Auch ist sie nicht über unsere offizielle Webadresse erreichbar.
    Ich musste eine Änderung an den Meta Tags vornehmen, weil verschiedene Texte verkleinert dargestellt wurden auf mobilen Geräten. Wir haben Mitglieder die unsere neue Homepage auch jetzt schon mit mobilen Geräten begutachten und dabei ist dies mit den Texten aufgefallen. Das mit dem Top-Link war reiner Zufall von mir.

  7. #7
    Contao-Fan Avatar von designpilot
    Registriert seit
    16.06.2013.
    Ort
    9532 Rickenbach bei Wil
    Beiträge
    272
    Contao-Projekt unterstützen

    Support Contao

    Standard Top-Link funktioniert nicht auf mobilen Geräten

    Hallo Thomas

    Füge im fe_page.html5 folgendes vor dem abschliessenden
    Body Tag ein

    HTML-Code:
    <a href="#" class="scrollToTop"></a>
    In deinem Stylesheet fügst Du folgendes ein:
    beachte das die background-image angepass werden muss, dann
    einfach nur noch ein Icon im PNG Format erstellen.

    HTML-Code:
    .scrollToTop {
        width: 40px;
        height: 40px;
        background-image: url("/files/wo soll der button hin/arrow.png");
        position: fixed;
        right: 30px;
        bottom: 30px;
        display: none;
        z-index: 9999;
    }
    Folgendes unter "Eigenem JavaScript-Code" im Seitenlayout einfügen vergess nicht die beiden Tags zu setzen: <script> </script>

    HTML-Code:
        $(document).ready(function(){$(window).scroll(function(){if($(this).scrollTop()>100){$('.scrollToTop').fadeIn();}else{$('.scrollToTop').fadeOut();}});$('.scrollToTop').click(function(){$('html, body').animate({scrollTop:0},800);return false;});});
    Vielleicht hilft Dir das weiter (bei mir funktioniert es im Edge sehr gut)

    Ein Beispiel siehst Du auf der Seite wenn Du nach unten Scrollst www.scallen.ch

    Grüsse
    designpilot
    Geändert von designpilot (02.03.2020 um 11:10 Uhr)

  8. #8
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Hallo designpilot,

    danke für den Workaround, ist dieser für den Edge Chromium oder den alten Edge bzw. für beide Varianten vom Edge gedacht? Denn ich habe das Problem unter dem Edge Chromium festgestellt.


    Gruß
    Thomas

  9. #9
    Contao-Fan Avatar von designpilot
    Registriert seit
    16.06.2013.
    Ort
    9532 Rickenbach bei Wil
    Beiträge
    272
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Thomasge Beitrag anzeigen
    Hallo designpilot,

    danke für den Workaround, ist dieser für den Edge Chromium oder den alten Edge bzw. für beide Varianten vom Edge gedacht? Denn ich habe das Problem unter dem Edge Chromium festgestellt.


    Gruß
    Thomas
    Hallo Thomas

    Sollte eigentlich bei allen Browser funktioniere. Ich habe es beim Edge und Chromium getestet.


    Gesendet von iPhone mit Tapatalk Pro

  10. #10
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Hallo designpilot,

    ich glaube für die fe_page.html5 fehlt noch etwas, denn nach "Füge im fe_page.html5 folgendes vor dem abschliessenden Body Tag ein" gehts nicht mehr weiter.
    Kanst Du mir das bitte noch zukommen lassen?
    Danke!


    Gruß
    Thomas

  11. #11
    Contao-Fan Avatar von designpilot
    Registriert seit
    16.06.2013.
    Ort
    9532 Rickenbach bei Wil
    Beiträge
    272
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das fehlt noch:

    Code:
    <a href="#" class="scrollToTop"></a>
    Grüsse
    designpilot


    Gesendet von iPhone mit Tapatalk Pro

  12. #12
    Contao-Fan Avatar von designpilot
    Registriert seit
    16.06.2013.
    Ort
    9532 Rickenbach bei Wil
    Beiträge
    272
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Thomasge Beitrag anzeigen
    Hallo designpilot,

    ich glaube für die fe_page.html5 fehlt noch etwas, denn nach "Füge im fe_page.html5 folgendes vor dem abschliessenden Body Tag ein" gehts nicht mehr weiter.
    Kanst Du mir das bitte noch zukommen lassen?
    Danke!


    Gruß
    Thomas
    Und Thomas hat es dunktioniert ???


    Gesendet von iPhone mit Tapatalk Pro

  13. #13
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Danke für die Nachfrage, aber irgendwo muss ich noch einen Fehler haben, weil die PNG nicht angezeigt wird.


    Gruß
    Thomas

  14. #14
    Contao-Fan Avatar von designpilot
    Registriert seit
    16.06.2013.
    Ort
    9532 Rickenbach bei Wil
    Beiträge
    272
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Thomasge Beitrag anzeigen
    Danke für die Nachfrage, aber irgendwo muss ich noch einen Fehler haben, weil die PNG nicht angezeigt wird.


    Gruß
    Thomas
    Ich bin in 1/2 bis 1 h zu hause telefonieren wir


    Gesendet von iPhone mit Tapatalk Pro

  15. #15
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Können wir gerne tun. Schaue, dass ich bis 16:00 Uhr zuhause bin.


    Gruß
    Thomas

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •