Noch was:
Die jetzige Lösung mit flex column funktioniert einwandfrei. Nur stört MICH daran, dass der Aufbau der Seite Spalte für Spalte erfolgt. Für mich ist es logischer, dass dies zeilenweise geschieht. Wenn ich daran also etwas ändere, dann bekomme ich dafür genau € 0,-
Ich wollte damit nur verhindern dass ich mich in eine Richtung verrenne, wo ich viel Zeit investiere, wo es aber schlussendlich dann in einer Sackgasse endet. Ein Tip in die richtige Richtung würde da schon eine Menge Zeit ersparen. Oder ein "geht so" oder "geht so nicht".
Bezahlen kann ich schon etwas für die Arbeit aber dann erwarte ich auch ein funktionierendes Grundgerüst, auf das ich dann aufbauen kann. Wer Lust hat kann ja ein Angebot stellen, ich gebs dann an den Kunden (= Schwager) weiter, nur in dem Fall ist es mit dem vierstelligen Betrag ein wenig zu hoch gegriffen.
Ich denke dass ich den Kunden dazu überreden kann, dass er nicht auf das Maximum von 6 Spalten besteht.
Läßt sich das Minimum von 2 Spalten mit Flex realisieren?
Können die anderen Anforderungen erfüllt werden?
Sempervivum: Ich habe den flex Ansatz jetzt weiter reduziert und alles Überflüssige mal rausgenommen (gallery-column, div), die Styles sind jetzt auch ausschließlich intern. Das Ergebnis schaut dann so aus:
http://www.rachbauer.org/visage/neu/tstrow1.html
Folgendes funktioniert jedoch nicht wenn der Monitor schmäler wird:
Wie kann man diese Forderungen am Besten realisieren?
Welche Darstellungsart (Grid / Flex) würde sich dafür besser eignen?
Hallo Leute,
ich habe für eine Modelagentur eine Page erstellt, wo 200-300 Modelfotos in einer Flexbox Darstellung vertikal in 6 Spalten angezeigt werden. Wenn der Monitor schmäler ist, springt die Anzeige per Media Query von 6 auf 3 und dann auf 2 Spalten um, damit die Fotos nicht zu klein werden. Ich habe eine simple Variante davon als Testfile hinterlegt unter
http://www.rachbauer.org/visage/neu/tstcol.html
Das Problem dabei ist, dass der Seitenaufbau spaltenweise durchgeführt wird, d.h. erst sieht man die erste Spalte füllen, dann die 2. Spalte, usw. Der Kunde möchte aber, dass die Darstellung zeilenweise aufgebaut wird. Dafür habe ich Flexbox auf horizontal umgestellt und dies in einer simplen Variante als Testfile hinterlegt
http://www.rachbauer.org/visage/neu/tstrow.html
Dabei habe ich die neuen FlexBox Styles zur Vereinfachung ins HTML-File geschrieben. Der Aufbau der Seite läuft auch schön zeilenweise durch (Shift/Reload). Kann ich die Spalten nun trotzdem noch von 6 auf 3 und auf 2 reduzieren, ohne die Seite nochmal neu aufbauen zu müssen. Wie läßt sich sowas lösen? Es sollte dann so ablaufen wie unter
http://www.20management.co.za/portfolio/women/mainboard oder
https://www.metromodels.com/main/
Dort werden die Fotos auch zeilenweise angezeigt und die Spalten reduzieren sich je nach Monitorbreite.
Wenn ich remove einfüge, dann verschwindet das Popup nach 1.9 sec blitzschnell, es soll aber langsam ausblenden. Deinen Code habe ich als Basis genommen, der transform ist von dir, ich kann ihn aber auch abändern, sodaß das Popup langsam durchsichtig wird.
Das Problem dabei ist aber, dass das Popup bei deinem Code von Anfang an angezeigt wird, es soll aber zuerst versteckt sein und erst bei einem Click aufscheinen, 2 sec stehenbleiben und dann wegblenden.
Mein Code vom Freiteag 7.5. funktioniert ja, wollte nur wissen ob es noch eleganter geht.
Wenn ich das Popup per Click einblende soll es 2sec stehenbleiben und dann langsam verschwinden:
CSS
.popup {
display: none;
border:1px solid black;
border-radius:10px;
padding:10px;
box-shadow:10px 10px 10px white;
height:200px;
width:50vw;
line-height:200px;
background:white;
color:black;
font-size:40px;
text-align:center;
}
.weg {
transition:1500ms all;
transform: translate(-50%,-100vh);
}
.show {
display: block;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
JS
function showPopup() {
document.querySelectorAll(".popup")[0].classList.add('show');
setTimeout(function(){
document.querySelectorAll(".popup")[0].classList.add('weg');
}, 1900);
}Eingeblendet wird es durch die Änderung von display: block, aber es bleibt dann stehen und verschwindet nicht.
Woran liegt das?
basti: Kann man ein JS alert schliessen, wenn es einen Click auf Ok verlangt?
Ich habs jetzt so gelöst, damit das Popup auch animiert verschwindet:
HTML
<div id="popup">gespeichert</div>
CSS
#popup {
display: none;
animation: fadeOut ease 1s;
-webkit-animation: fadeOut ease 1s;
-moz-animation: fadeOut ease 1s;
-o-animation: fadeOut ease 1s;
-ms-animation: fadeOut ease 1s;
animation-delay: 1s;
}
@keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } }
@-moz-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } }
@-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } }
@-o-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } }
@-ms-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } }
JS
elem = document.getElementById("popup");
elem.style.display = "block";
setTimeout(function(){ elem.style.display = "none"; }, 1900);Beim #popup hab ich noch diverse Gestaltungen (border, shadow, color, position, etc).
Beim setTimeout sind die sec nicht 2000 sondern 1900 damit das div nicht nochmals kurz angezeigt wird, bevor es dann mit display: none unsichtbar wird.
Ich weiß nicht ob das elegant ist oder noch besser geht, aber es funktioniert.
Hallo Leute,
wenn ein User einen Artikel durch Anklicken in den Warenkorb legt, soll ein kleines Popup Fenster mit einer Meldung "vorgemerkt" aufgehen, das nach etwa 2 Sek automatisch geschlossen wird, am Besten wäre ein Ausblenden. Wie kann man sowas realisieren?
LG
Ich habe jetzt folgendes JS eingebaut, damit die geöffneten Submenus offen bleiben:
<style>
.mobile-navigation > ul > li.open > ul
{ display: block; position: absolute; background-color: #FF1203;
border: 0px solid #c0c0c0; margin: 0em; margin-left: 40px; padding: 0 10px 0 10px; z-index: 9999; }
</style>
<script>
var last = null;
$(document).ready(function() {
// Erst bei allen Elementen .open löschen damit offene Submenüs geschlossen werden
// Funktioniert nicht, daher Variante geklicktes Element merken
// $('.mobile-navigation .menu-item').each(function() {
// $(this).remove("open");
// });
// Dann .open beim geklickten Element setzen damit Submenü geöffnet wird
$('.mobile-navigation .menu-item').click(function(evt) {
if (last !== null) {
last.classList.remove("open"); // Geöffnetes Submenü schliessen
}
evt.target.classList.add("open"); // Mittels Event
last = evt.target;
// $(this)[0].classList.add("open"); // Mittels jQuery Array der Elemente
// last = $(this)[0];
});
});
</script>Dabei öffne ich bei einem Click Event das Submenü durch Setzen der Klasse .open und merke mir das geöffnete Submenu, damit ich es beim nächsten Click wieder schliessen kann. Ursprünglich wollte ich anstelle des Merkens alle Submenus einfach schließen indem ich ihnen die Klasse .open über die .each Funktion nehme, aber das funktioniert nicht, keine Ahnung warum. Vielleicht hat da jemand einen Tipp dazu.
Ich halt es nicht mehr aus: Den Button habe ich noch gar nie bemerkt!
Gibt es den schon länger?
Ich werde mir mal, sobald mehr Zeit ist, ein Cross-Plattform Menü überlegen. Für jetzt muss es dem Kunden auch so reichen, denn auf Touch Geräten (Handy, etc) funktioniert es ja mit dem :active und diese Funktion im FF ist ja nicht für den Produktiv Betrieb gedacht.
Danke jedenfalls für die Informationen!
AndreasB
Geh im Firefox auf "Web-Entwickler / Bildschirmgrößen testen" und Auswahl eines der Handys damit das Burgermenü für schmale Bildschirme erscheint, dann kannst du das Problem nachvollziehen.
Bei einem Klick auf einen Hauptmenüpunkt (women oder men) des Burgermenüs klappt das Submenü auf, sobald die Maustaste aber losgelassen wird, klappt es wieder weg (eingestelltes Handy iPhone, etc). Steht die Einstellung jedoch statt auf einem Handy auf "Benutzerdefiniert", dann funktioniert der :hover wieder!
Warum bleibt das Submenü stehen wenn es über :hover geöffnet wird und verschwindet, wenn es am Touchdevice mit Klick (:active) geöffnet wird? Beide haben die gleichen CSS einstellungen.
Hallo Leute!
Ich ärgere mich grad mit einem Mobilemenü, bei dem ich im FF unter "Web-Entwickler / Bildschirmgrößen testen" die Submenüs zwar durch Klick aufklappen kann, aber sobald ich die Maustaste loslasse, wird das Submenü wieder geschlossen, sodass ich die Submenüpunkte nicht anwählen kann. Im Mainmenü funktionierts, aber im Mobilemenü nicht.
Ich habe das Ganze auf ein Testform reduziert und unter http://rachbauer.org/neu/test.html abgestellt. Vielleicht kann mir mal jemand einen Tipp geben, wie man das Submenü im Mobilemenü dazu bringt, dass es stehenbleibt.
LG
Da habt ihr allerdings Recht, an die Unterverzeichnisse habe ich nicht gedacht, da die *.html files alle im übergeordneten Ordner liegen! Ich habs geändert, danke!
<If "%{HTTP_HOST} == 'localhost'">
ErrorDocument 404 http://localhost/wwwapps/rachbauer.org/index.html
# Kein AddType oder AddHandler sonst will Browser das *.html speichern - keine Ahnung warum!
</If>
<Else>
ErrorDocument 404 http://www.rachbauer.org/index.html
AddType application/x-httpd-php56 .php .php4 .php3 .html .htm
</Else>Das glaube ich wieder nicht:
Im .htaccess habe ich nur
ErrorDocument 404 http:404.html
AddType application/x-httpd-php php php4 php3 html htm
Ist aber egal, Hauptsache es funktioniert, habe genug Zeit mit der Suche nach dem Problem verbracht!
Danke!
Wenn ich icons auf favicons umtaufe, gehts jetzt! Ganz komisch?!?
Sogar wenn ich den Pfad relativ angebe (./favicons/ oder favicons/).
Das ist jetzt aber komisch: Alles was im Ordner icons liegt, kann ich nicht ansprechen:
In site.jpg sieht man, dass die beiden Ordner icons und images auf gleicher Ebene im root liegen! Hat da irgendwer was gegen den Namen icons? Ich versuchs mal mit einem anderen Namen.
Funktioniert auch nicht, siehe http://www.guggis-shoes.at
Hallo Leute,
gibt es eine Möglichkeit, Favicons in einem Unterordner abzulegen? Ich habe eine Anzeige von Favicons nur geschafft, wenn diese im Hauptverzeichnis liegen:
<link rel="shortcut icon" sizes="192x192" href="favicon-android-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon-apple-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="favicon-manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicon-ms-144x144.png">
<meta name="theme-color" content="#ffffff">Ergänze ich die Einträge mit einer Pfadangabe
wird das Icon nicht angezeigt (Firefox).