Beiträge von lagraf

    Danke für die Infos, caniuse ist interessant, da kann ich mal ausprobieren, welche Versionen unterstützt werden (flex, css animation, ...). Ich denke, dass die Zielgruppe ziemlich aktuell sein sollte, da es sich bei der Page um eine Modelagentur handelt.

    Fallback ist ja schön und gut, aber wie weit zurück sollte man dann die Browser unterstützen (alte IE Versionen, Netscape Browser, :))? Wo zieht man sinnvoll einen Strich und sagt dem User dann "so leider nicht mehr"?


    Eine Feature Abfrage habe ich inzwischen eingebaut für eine Slideshow, da frage ich ab, ob der Browser "animation" kann und falls nicht, biete ich eine statische Seite an.

    Feature detection: Muss man dazu nicht jedes einzelne verwendete Feature abfragen, ob der Browser das unterstützt? Ist es da nicht einfacher die verwendeten Browser auf HTML5 einzuschränken? Wie kann ich abfragen, ob eine Browserversion HTML5 kann?


    Auf der Fehlerseite soll dann einfach sowas stehen: "Sie verwenden eine alte Browserversion, die von unserer Site nicht mehr unterstützt wird. Führen Sie ein Upgrade auf die neueste Version durch und versuchen Sie es nochmals."


    Gibt es irgendwo eine Testmöglichkeit, wo man eine Seite testen kann und als Ergebnis dann einen Vorschlag bekommt, was man wie abfragen muss? Für Code-Validierung gibt es ja anscheinend so was, wenn ich mich richtig entsinne.

    Wenn ich auf meinen Seiten diverse Techniken verwende, die von älteren Browsern nicht mehr unterstützt werden, wie kann ich diese Browser abfragen und auf eine Fehlerseite umleiten? Und wie finde ich am Besten heraus, welche Browserversionen auf meinen Seiten nicht unterstützt werden?

    LG

    Ich habe im Netz verschiedene Lösungen gefunden

    • JS Lösungen
    • den iOS Hover Fix
    • CSS mit Element:hover, Element:active und Element:focus
    • und den Hinweis dass man das zu hovernde Element mit cursor: pointer versehen soll

    Letzteres habe ich ausprobiert und es funktioniert auf einem Apple iPad durch Anklicken, andere Touch Geräte habe ich nicht zur Verfügung. Hat jemand von euch Erfahrung damit auf diversen Touchgeräten?

    Hallo Basti,

    danke für deine Hilfe!

    Das manuelle Einblenden eines Images bzw. Textes habe ich sowieso schon realisiert, weil das Icon bei pleaseWait nicht angezeigt wurde. Dann lasse ich pleaseWait einfach weg und erspare mir damit auch die alte jQuery Version!

    LG

    Hallo Basti,

    danke erstmal für deine Mühe, ich schau mir gleich mal deine Änderungen an! Folgende Infos bzw. Fragen hätte ich an dich:

    • Dass die neuere jQuery Version pleaseWait nicht unterstützt, ist mir auch aufgefallen, die habe ich in dem Projekt aus anderen Gründen eingebunden. Was macht man in so einem Fall, wo 2 unterschiedliche Versionen notwendig sind, weil eine nicht beide Fälle abdeckt?
    • Gibt es ein besseres Script anstelle von pleaseWait, man sieht die Technik ja inzwischen öfter?
    • Die Seite https://www.jqueryscript.net/l…th-jQuery-pleaseWait.html ist nicht von mir, habe ich nur gefunden wegen dem pleaseWait Script.

    Hallo Basti,

    normalerweise müßte mit der Funktion pleaseWait() nicht nur der Bildschirm gegraut dargestellt sondern auch ein beliebiges Image anzeigbar sein. Der Bildschirm wird zwar grau aber das Image erscheint nicht (weder das integrierte noch ein man. angegebenes). Deshalb habe ich testweise zusätzlich einen Button mit Text angezeigt, das könnte man klarerweise auch mit einem Image machen. Ich möchte mir nur meine eigene Anzeige ersparen, wenn es in der Funktion pleaseWait() sowieso schon eine gibt!


    Zum besseren Verständnis, das Script ist von: https://www.jqueryscript.net/l…th-jQuery-pleaseWait.html

    Ich habe es inzwischen soweit mittels der Funktionen ajaxStart und ajaxStop, dass pleaseWait aufgerufen wird, der Bildschirm wird auch grau dargestellt, nur das animierte Icon wird nicht angezeigt! Ich habe deshalb eine zusätzliche Anzeige über einen roten Button "Daten werden nachgeladen" eingebaut, den ich ein- und ausblende, außerdem eine künstliche Pause von 1 sec, damit man auf jeden Fall was sieht!

    Eine Testversion steht unter http://rachbauer.org/test/Visage-white/model4.html, bitte keine Kommentare oder Vorschläge zum HTML- oder CSS-Code, dies ist nur eine quick and dirty Seite, damit der Kunde die Funktion sieht, geht so nicht in Produktion!

    Inzwischen habe ich herausgefunden, wann pleaseWait() funktioniert und wann nicht:

    Code
    1. <button onclick="$('#test').pleaseWait();">start</button> // funktioniert
    2. <button onclick="startFunction();">start</button> // funktioniert nicht!!!
    3. startFunction() {
    4. $('#test').pleaseWait();
    5. }

    Hat jemand eine Idee warum es nicht funktioniert wenn es in einer Funktion steht? Wenn ich es fürs Nachladen per Ajax verwende, geht es leider nur in einer Funktion.

    Das autom. Nachladen habe ich inzwischen hinbekommen mit JS:

    Jetzt bräuchte ich noch während dem Nachladezeitraum eine "Bitte warten" Anzeige, die möglichst auch die Seite blockiert. Dazu habe ich die Funktion pleaseWait() im Netz gefunden, bringe sie aber nicht zum Laufen, es passiert einfach nichts. Hat jemand eine Idee, woran das liegt?

    Noch eine Variante zum Thema blättern fällt mir ein:

    Wenn der User die angezeigten Fotos runterscrollt könnte man statt mit dem Button "mehr laden" AUTOMATISCH den nächsten Block nachladen. Hat jemand eine Ahnung wie man dies verwirklichen kann?

    Hallo Leute,

    einer meiner Kunden (Modelagentur) hat eine alte Homepage (Frames, starres tabellarisches Design) und möchte diese neu gestalten (responsive, flex), sodass sich die Anzeige autom. an die Monitorgröße anpasst, vom PC Monitor bis zum Handy. Die Models werden derzeit nach Gruppen aufgelistet (Women, Women Sport, Women Best Agers, etc), wobei die Fotos am PC Monitor in 6 Cols und 10 Rows dargestellt werden, insgesamt sind es derzeit bei Women etwa 240 Models also 4 Seiten. Die Modeldaten werden dabei per PHP aus einer Datenbank ausgelesen, die Fotos dazu vom Filesystem.


    Wenn ich dies nun flex gestalte und die Anzeige erfolgt auf einem schmäleren Monitor (Tablet, Handy), wird die Spaltenanzahl reduziert, wodurch die Rows aber mehr werden und mit jeder Reduzierung der User weiter nach unten scrollen muß, da die PHP Routine ja immer 6x10 Fotos bringt und nichts vom schmäleren Monitor weiß. Am Handy mit einer Spalte finde ich seitenweises Blättern dann überhaupt unschön, da Handydesign eigentlich nicht auf Seitendarstellung ausgelegt ist. Andererseits ist ein runterscrollen über 240 Fotos auch nicht grad amüsant.


    Alternativ dazu könnte man das mit einem Button "Mehr anzeigen" nach jeweils x Fotos lösen, der per Ajax immer wieder die nächsten x Fotos nachlädt. Das ist aber wiederum für den User unschön, da er nicht weiß, wie oft er "Mehr anzeigen" klicken muß, bis er zum letzten Foto kommt und ev. die Geduld verliert.


    Erschwerend kommt dann noch dazu, dass der User nach Models suchen kann, dann werden nicht nur Models aus einer Gruppe aufgelistet (Women), sondern über alle Gruppen (Women, Women Sport, Women Best Agers), sodaß die Models auch gruppiert werden müssen und das sollte man dem User auch beim Seitendesign mittels neuer Seite und einer entsprechenden Gruppenüberschrift kundtun. Dadurch entsteht aber das Problem, dass im voraus nicht mehr die korrekte Seitenanzahl fürs Blättern ermittelt werden kann, weil durch die Gruppierung mehrfach Seiten nicht mehr ganz befüllt werden.


    Hat jemand von euch schon mal mit solchen Überlegungen zu tun gehabt und hat für mich ev. ein paar Gedanken, wie man das sinnvoll abwickeln kann?


    LG

    Hallo Sempervivum,

    danke für das Beispiel, habe ich mir angesehen! Sollte es zum Auftrag kommen werde ich es berücksichtigen.


    Frage zu flex: Ich habe gelesen dass IE 10 und davor dieses Modell nicht unterstützen, dass es aber Möglichkeiten gibt, die Darstellung mehr oder weniger auch darauf hinzubekommen. Soll man diese älteren Browser überhaupt noch unterstützen?

    Hallo tk1234, hallo Sempervivum,

    die Seite ist nur als Layout gedacht, damit der Kunde sieht wie die Oberfläche aussehen kann. Daher ist alles HTML, CSS, etc nur dazu da, dass das Layout dargestellt wird, mehr nicht. Die Darstellung wurde inzwischen schon zig-Mal geändert, begonnen hat alles mal mit einer schwarzen Page. Daher ist irgendwo im CSS File auch noch der schwarze Hintergrund beim Aufklappen übrig geblieben, habe ich inzwischen schon korrigiert. Sollte sich der Kunde doch mal entscheiden dass er eine neue Page haben will, dann beginnt ein Aufbau von Null komplett neu, nur die Optik wird übernommen!


    Und um der nächsten Frage vorzubeugen: Warum tue ich mir den Aufwand an, das Layout solange umzubauen, bis es dem Kunden vielleicht gefällt: Ich muß nicht davon leben, beziehe mein Geld von woanders und nehme das zum Lernen und Üben her.


    Trotzdem danke für die Einwände, sollte es was werden, werde ich sie berücksichtigen, auch wenn ich die meisten davon sowieso von selber vorgehabt hätte oder sich manche bei einer Echt- statt einer Dummyseite gar nicht stellen würden.:)

    Ich hab was gefunden, weiß aber nicht, ob das die beste Lösung ist:)

    Ich ändere beim Auf- und Zuklappen des Aufklappbereiches per Javascript die Eigenschaft von .site-footer, funktionieren tut's auf jeden Fall!

    Code
    1. // Beim Aufklappen
    2. document.querySelector(".site-footer").style.position = "relative"
    3. // Beim Zuklappen
    4. document.querySelector(".site-footer").style.position = "absolute"

    Ich habe eine ziemlich kurze Suchseite, wo defaultmäßig nur nach einem Wert gesucht werden soll. Deshalb fixiere ich den Footer ganz unten am Bildschirmrand:

    Code
    1. * { margin: 0; padding: 0; }
    2. html, body { height: 100vh; }
    3. #site-content { position: relative; min-height: 100%; }
    4. .site-footer { position: absolute; bottom: 0; width: 100%; }

    Allerdings gibt es auf der Seite einen JS+jQuery Ausklappbereich, der detailiertere Suchmöglichkeiten aufklappt und dadurch die Seite vergrößert. Dadurch rutscht der untere Teil der Seite aber unter den Footer hinein. Was kann man machen, damit der Footer beim Ausklappen nach unten rutscht, sodaß die volle Seite gesehen wird?