Hallo Andreas,
ich verwende 2 Icons, die ich in der linken oberen Ecke im Bild nach jedem Click immer mittels JS austausche. Welcher Button geklickt wurde (oder auch das ganze Bild), ergibt sich daraus, welches Icon grad "aktiv" ist. Im Grunde ist das + bzw. - Icon mehr dazu da, um den User zu informieren, was er schon in den Warenkorb gelegt hat.
Ich bin kein JS Programmierer, verwende normalerweise Windows Entwicklungsumgebungen und PHP fürs www. Bin gespannt, ob ich das hinbekomme!
AndreasB eine Frage hätte ich noch:
Wie würde eine Funktion "animateItemFromCart" in deinem Code aussehen, bei der sich das Bild aus dem Warenkorb größer werdend wieder zurückbewegt, wenn ich einen Schalter habe, mit dem er das Produkt wieder aus dem Warenkorb entfernen kann?
Ich habe dem Bild namlich zusätzlich ein Font Awesome Icon spendiert, welches ich mit jedem Click zwischen fa-plus-circle und fa-minus-circle wechsle. Wird beim Status Plus geclickt, landet das Produkt im Warenkorb, wird bei Minus geklickt, kommt es aus dem Warenkorb wieder heraus. Den Warenkorb verwalte ich per Ajax serverseitig in PHP.
Stimmt tk1234, da ist mir der . dazwischen abhanden gekommen, es handelt sich um die Version 3.4.1, was aber durch die Erklärung zu Vanilla somit hinfällig ist.
Hallo Leute,
danke für eure Antworten, besonderen Dank an AndreasB! Ich hab mir das Beispiel kurz angesehen und muß sagen, dass es genau das ist, was ich mir vorgestellt hatte! Ich war nur die 2 Tage etwas gestresst, sodaß ich nicht in die Usergroup kam, werde das Beispiel übers Wochenende versuchen in meine Page einzubauen.
Frage an AndreasB: Ich kenne Vanilla JS nicht, verwende aber jQuery 3.x auf der gleichen Seite. Gibt es Probleme wenn beide verwendet werden, oder sollte man es mit jQuery lösen?
LG
Wenn ich ein Produkt in einen Warenkorb lege, möchte ich eine Animation, wo ein kleines Image sich von der Position des Mausclicks zur Position des Warenkorbs bewegt. Ich hab das schon mal in irgendeinem Shop gesehen. Weiß jemand, wie man das verwirklichen könnte?
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
Ok, danke für den Link, schau ich mir an!
Ich habe im Netz verschiedene Lösungen gefunden
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?
Wie kann ich einen hover Effekt zum Aufklappen eines Menüpunktes auf einem Touchdevice ersetzen?
LG
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:
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!
var date = Date.now(); // Kein Mehrfachaufruf innerhalb einer Sekunde da User ev. weiterscrollt
var cnt = 0; // Anzahl Aufrufe
// Anzeige beim Nachladen mittels Ajax
$(document).ajaxStart(function() {
document.getElementById('loading').style.display = "block";
// $('body').pleaseWait(); // Icon fehlt ohne Angabe eines png
$('body').pleaseWait({ // Icon fehlt auch mit Angabe eines png
crazy: false,
speed: 8,
increment: 2,
image: 'localhost/wwwapps/test/Visage-white/images/loading.png',
imageType: 'encoded',
height: 65,
width: 65
});
});
// Anzeige beim Nachladen beenden
$(document).ajaxStop(function() {
document.getElementById('loading').style.display = "none";
sleep(1000); // 1 sec warten damit man beim Test was sieht
$('body').pleaseWait('stop');
});
// Scroll Funktion (gekürzt)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
// Fotos Nachladen (
var faktor = 300; // Je höher desto früher
if ($(window).scrollTop() >= ($(document).height() - $(window).height() - faktor)) {
if (Date.now() - date > 1000) { // Nicht innerhalb 1 sec mehrmals
if (cnt < 2) { // max. 3 Aufrufe
getMore();
date = Date.now();
cnt += 1;
} // cnt
} // date
} // scrollTop
// weitere Scroll Funktionen ...
} // scrollFunction
// Mehr anzeigen, Fotos nachladen
function getMore() {
$.get('getMore4.php', function(data) {
document.getElementById('more').outerHTML = data;
})
}
// Sleep ms
function sleep(ms) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < ms);
}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:
<button onclick="$('#test').pleaseWait();">start</button> // funktioniert
<button onclick="startFunction();">start</button> // funktioniert nicht!!!
startFunction() {
$('#test').pleaseWait();
}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:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var faktor = 300;
if ($(window).scrollTop() >= ($(document).height() - $(window).height() - faktor)) {
$('body').pleaseWait();
getMore();
$('body').pleaseWait('stop');
}
}
function getMore() {
$.get('getMore4.php', function(data) {
document.getElementById('more').outerHTML = data;
})
}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