nicht angemeldet liebewinter
Rolf B
Rolf B
liebewinter
Gunnar Bittersmann
liebewinter
Rolf B
Matthias Apsel
Rolf B
liebewinter
Rolf B
Gunnar Bittersmann
Hallo, manchmal der Browser Chrome zeigt verschieden div große zwischen ihn und seine Bottom..
Hier zeigt mit der Probleme,
hier zeigt ohne die Probleme,
Das kömische ist das dieser fehler bekommt nur manchmal und in Chrome..in Firefox bekomme immer gut.
Mein html code,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="stern">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<div class="card">
<div class="card-body">
<p class="card-title">Rucksack aus Hanf Gelbe mit Zwei Riemen</p>
<p class="card-preis">Preis 40 €</p>
<div class="number-input ">
<div class="label">Stück: </div>
<div class="input-group quantity">
<div class="input-group-prepend">
<button class="btn btn-default btn-minus">
<i class="fa fa-minus"></i>
</button>
</div>
<input class="form-control quantity" min="0" name="quantity" value="1" type="number">
<div class="input-group-append">
<button class="btn btn-default btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
<button class="btn btn-primary btn-block mt-4" type="buttom" onclick='layer_show_3(event);' ><span>Zum warenkorb hinzufügen</span></button>
</div>
</div>
<!-- calls the open window -->
<div id="layerPreview-3" > </div>
<div id='layerPreviewContent-3'>
<!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
<div id="tittel-text">Erfogreich zum Warenkorb hinzugefügt <span id="closse-text" onclick="layer_close_3(event);">Schließen</span></div>
<div class="text-pruduct">
<div class="bild-text">
<img class="image-window" alt="" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" />
<div class="bild-text-anbieten">
<p>Rucksack aus Hanf Gelbe</p>
<p>Stückzahl: <b>1</b></p>
<p>Bruttopreis: <b>40 € </b></p>
</div>
</div>
<div class="verticalLine"></div>
<div class="float_text">
<p>Anzahl der Artikel im Waremkorb: 1 </p>
<p>Wert des Warenkorbs: </p>
</div>
<div class="ajax-product-block">
<a class="button_weiter_einkaufen" href="lalo.php">weiter kaufen</a>
<a class="button_zum_warenkorbs" href="lalo.php">zum warenkorb</a>
</div>
</div>
</div>
<div class="fenster-beschreibung">
<p class="beschreibung-tittel"> Beschreibung</p>
<div class="beschreibung">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
Hier kannst sehe ganze Code html, css und jquery. Um das fenster zu öffnet, klick auf Zum warenkorb hinzufügen
Rolf B
Hallo liebewinter,
Problem ist deine Art zu Positionieren. Das ganze Popup finde ich gruselig. Ohne Zeitaufwand bekomme ich es aber auch selbst nicht ordentlich hin.
Dadurch, dass die "weiter kaufen" und "zum warenkorb" Links durch ein flex wrap in eine neue Zeile gebracht werden, hängt ihre Position von der Höhe der Elemente davor ab (bild und float-text). Das musst Du auf jeden Fall neu sortieren, sonst wird das nichts.
Wie Du das dann mit der jQuery-Animation zusammen hinbekommst, weiß ich auch nicht. Das ist mir zu durcheinander.
Rolf
danke für deinen empfehlungen, Rolf!
jetzt versuche verändert diesen Stück,
Dadurch, dass die "weiter kaufen" und "zum warenkorb" Links durch ein flex wrap in eine neue Zeile gebracht werden, hängt ihre Position von der Höhe der Elemente davor ab (bild und float-text). Das musst Du auf jeden Fall neu sortieren, sonst wird das nichts.
ich habe der class float_text neu sortiert,
<div id="layerPreview-3" > </div>
<div id='layerPreviewContent-3'>
<!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
<div id="tittel-text">Erfogreich zum Warenkorb hinzugefügt <span id="closse-text" onclick="layer_close_3(event);">Schließen</span></div>
<div class="text-pruduct">
<div class="bild-text">
<img class="image-window" alt="" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" />
<div class="bild-text-anbieten">
<p>Rucksack aus Hanf Gelbe</p>
<p>Stückzahl: <b>1</b></p>
<p>Bruttopreis: <b>40 € </b></p>
</div>
</div>
<div class="float_text">
<p>Anzahl der Artikel im Waremkorb: <b>1</b> </p>
<p>Wert des Warenkorbs: </p>
</div>
<div class="verticalLine"></div>
<div class="ajax-product-block">
<a class="button_weiter_einkaufen" href="lalo.php">weiter kaufen</a>
<a class="button_zum_warenkorbs" href="lalo.php">zum warenkorb</a>
</div>
</div>
</div>
</div>
aber Chrome macht weiter das gleich....
Hallo liebewinter,
so, ich habe doch noch mal Zeit investiert. Guck dir mal dieses Fiddle an:
https://jsfiddle.net/Rolf_b/agoy7kfs/1/
Was sind die Besonderheiten?
display:fixed mit top:0; left:0; width: 100%; height: 100%; und passt sich damit automatisch an den Bildschirm an.display: flex; justify-content:center; align-items:center zentrieren und muss überhaupt nicht mehr rechnen let content = document.getElementById("layerPreview-3");
content.className = "";
let dummy = content.offsetWidth;
content.className = "visible";
Das Popup funktioniert dann so:
<div id="layerPreview-3">
<div>
<header>...</header>
<div>...</div>
<footer>...</footer>
</div>
</div>
#layerPreview-3 {
position:fixed;
z-index:1;
display:flex; justify-content: center; align-items: center;
top: 0px; left:0px; width:100%; height:0; overflow:hidden;
background-color: rgba(50, 50, 50, 0.5);
}
#layerPreview-3 > div {
background-color: #dedee0;
width: 50%; min-width: 30em;
height: 21rem;
display: flex; flex-direction: column;
}
#layerPreview-3.visible {
animation: showLayer 0.6s linear forwards;
}
#layerPreview-3.visible > div {
animation: showLayerContent 0.6s linear forwards;
}
#layerPreview-3.hidden > div {
animation: showLayerContent 0.3s linear reverse forwards;
}
#layerPreview-3.hidden {
animation: showLayer 0.3s linear reverse forwards;
}
@keyframes showLayer
{
0% { height: 0vh; background-color: rgba(50, 50, 50, 0); }
1% { height: 100vh; background-color: rgba(50, 50, 50, 0.5); }
100% { height: 100vh; background-color: rgba(50, 50, 50, 0.5); }
}
@keyframes showLayerContent
{
0% { transform: translate(0, -11em) scale(0); opacity: 0; }
100% { transform: translate(0, 0) scale(1) ; opacity: 1; }
}
In #layerPreview-3 > div ist das > ganz wichtig. Sonst gilt die Regel für alle div im Popup.
Für #layerPreview-3 und für das div darin werden Animationen geschaltet. Setzt man die visible Klasse, werden die showLayer und showLayerContent Keyframes vorwärts ausgeführt. Setzt man die hidden Klasse, werden sie rückwärts ausgeführt.
showLayer hat drei Stufen: 0% - alles unsichtbar, 1% - Hintergrund füllt den Bildschirm. Das bleibt so bis 100%. Das ist wichtig für das Ausblenden. Die Animationen dauern gleich lange. Das Popup wird klein gemacht, und wenn es ganz klein ist, verschwindet der Hintergrund.
showLayerContent verändert drei CSS Eigenschaften. translate, scale und opacity. Die Mischung von translate und scale bewirkt, dass das Popup sich genau so öffnet wie bei Dir mit jQuery. Und opacity macht es langsam sichtbar.
Das Popup habe ich mit Flexbox aufgeteilt, damit header, Inhalt und footer übereinander sind. Den Inhalt habe ich nochmal mit flexbox geteilt, in eine figure (Bild und Beschreibung) und ein aside (Warenkorb). In der figure ist das Bild und eine figcaption, auch wieder Flexbox. Das Bild musste ich in ein <div> setzen. Anders kann ich die Breite nicht kontrollieren. object-fit:cover sorgt dafür, dass das Bild so angezeigt wird, dass es die Box füllt und man möglichst viel vom Bild sieht.
Ob man dafür auch grid nehmen kann weiß ich nicht.
Im Footer habe ich mit Flexbox dafür gesorgt, dass die Buttons richtig angeordnet sind.
Guck es Dir einfach mal an.
Rolf
ich bedanke mich dir für deinen bemüht um mich zu helfen!
Ich wüsche dir eine schöne Wochenende!
@@Rolf B
https://jsfiddle.net/Rolf_b/agoy7kfs/1/
- Einblenden und Ausblenden des Popup erfolgt rein mit CSS
Das kann nicht funktionieren. Tut es auch nicht. Das modale Fenster ist initial nicht ausgeblendet – jedenfalls nicht richtig. Es ist nicht zu sehen, aber im Screenreader zu hören. Und die interaktiven Elemente sind mit der Tab-Taste fokussierbar, obwohl sie nicht sichtbar sind. Man weiß nicht, wo man sich befindet. Unbedienbar, das Zeugs.
Zum Ein- und Ausblenden genügt es nicht, CSS-Eigenschaften (andere als display und visibility) zu ändern. Man muss JavaScript dafür sorgen, dass das Element für alle Nutzer ausgeblendet wird: Setzen der hidden-Eigenschaft. (display: none und visibility: hidden blenden auch aus; siehe Codepen.)
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hm. Ich mach weniger UI, noch weniger hab ich mit Screenreadern zu schaffen. Deshalb frage ich mal, weil ich unsicher bin:
Es ist nicht zu sehen, aber im Screenreader zu hören.
...
Man muss JavaScript dafür sorgen, dass das Element für alle Nutzer ausgeblendet wird: Setzen der hidden-Eigenschaft. (display: none und visibility: hidden blenden auch aus;
Verstehe ich richtig, dass also Elemente, die im CSS oder (nachträglich) mit JS(→CSS) mit display: none oder visibility: hidden markiert wurden, im Screenreader nicht zu hören sind? (Das entspräche durchaus meiner vorherigen Annahme, aber Deine Formulierung macht mich nunmehr unsicher und die Quelltextwust ist nicht mehr leicht nachvollziehbar)
@@Raketenwissenschaftler
Verstehe ich richtig, dass also Elemente, die im CSS oder (nachträglich) mit JS(→CSS) mit
display: noneodervisibility: hiddenmarkiert wurden, im Screenreader nicht zu hören sind?
Ja, beides nimmt die Elemente aus dem accessibility tree raus.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
THX! :: Danke sehr.
@ Gunner, kannst Bitte mir sage wo display: none; und visibility: hidden: legen soll ?
Hallo liebewinter,
das sind nur zwei Stellen. Ich habe das im Fiddle ergänzt:
https://jsfiddle.net/Rolf_b/agoy7kfs/2/
Hier die Änderungen:
#layerPreview-3 {
visibility: hidden;
position:fixed;
...
}
#layerPreview-3.visible {
visibility: visible;
animation: showLayer 0.6s linear forwards;
}
Rolf
Hallo Rolf B,
Hier die Änderungen:
https://forum.selfhtml.org/self/2020/may/10/probleme-mit-div/1770385#m1770385??
Bis demnächst
Matthias
Hallo Matthias,
tja, manche Leute sind konsequent. Andere sind inkonsequent.
Und noch andere sind mal so und mal so, das sind die schlimmsten...
Rolf
Mila ezker! auf baskische Sprache viel danke!
ich habe nur einen kleinen veränderung von deinem Code gemacht...
Das Bild musste ich in ein <div> setzen. Anders kann ich die Breite nicht kontrollieren
als der Hoch vom Bild stört, ich habe veränder von
#layerPreview-3 figure img { width: 100%; height:100%; object-fit: cover; }
nach
#layerPreview-3 figure img { width: 30%; object-fit: cover; margin: 2px;}
und der div der du dort gechrieben hast, ich habe gelöst...
Dann, weil ich mit Grid Layout die webseite gestellt habe und das footer-Element habe schon, habe ihrer name verändert nach footer-window, drienen bleibt alles was du geschrieben hast..
Hier Wie jetzt habe
Hallo Gunnar,
„Nicht zusammengeschissen ist genug gelobt.“ - ich freue mich also über all die Teile, wegen denen Du mich nicht zusammenscheißt. War einiges an Bastelei, sowas hab ich nicht in der Schublade.
Hm. Ich mach weniger UI, noch weniger hab ich mit Screenreadern zu schaffen.
Ich auch nicht. Darum passiert mir sowas regelmäßig. Und da unser UI Experte, ein gewisser Herr B., sich nicht zum Thema geäußert hat, musste ein Laie 'ran.
Muss ich das hidden Attribut verwenden? Oder reicht es im CSS mit der visibility Eigenschaft?
Rolf
@@Rolf B
@keyframes showLayer { 0% { height: 0vh; background-color: rgba(50, 50, 50, 0); } 1% { height: 100vh; background-color: rgba(50, 50, 50, 0.5); } 100% { height: 100vh; background-color: rgba(50, 50, 50, 0.5); } }
Nein.
Welche Eigenschaften sollte man animieren? transform und opacity.
Welche Eigenschaften sollte man nicht animieren? Alle anderen.
Das hieße hier: nicht height animieren, sondern transform: scaleY() verwenden; background-color: rgba(50, 50, 50, 0.5) so lassen und opacity verwenden.
@keyframes showLayerContent { 0% { transform: translate(0, -11em) scale(0); opacity: 0; } 100% { transform: translate(0, 0) scale(1) ; opacity: 1; } }
Geht doch.
Wozu eigentlich zwei Animationen showLayer und showLayerContent?
Und wieso überhaupt animation, wenn man transition will?
Mir scheint, hier stimmt so ziemlich gar nichts.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!