Beiträge von lagraf

lagraf · 7. Februar 2021

Scheibenkleister, daran habe ich nicht gedacht!

Genau das wars!

Danke!

lagraf · 7. Februar 2021

Ich teste gerade ein responsive flex-box Beispiel von O'Reilly (mobile first) und möchte darin einbauen, dass per media query die unterschiedlichen Bildschirmgrößen auch unterschiedliche font-size bekommen. Ich bekomme trotz media query aber immer nur 1 font-size! Ich habe die beiden CSS Einträge direkt vor dem </style> gesetzt:

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Complex Page</title>
<style>
  head {display: block;}
  head * {display: none;}
</style>
<style contenteditable>
html {
  background-color: #eeeee8;
  font-family: trebuchet, geneva, sans-serif;
} 
body { 
  background-color: #deded8;
  margin: 0;
} 

article, aside, footer, header { 
  padding: 0.5rem; 
  box-sizing: border-box; 
} 
header { 
  background-color: #333; 
  color: #ccc; 
  text-align: center; 
  border-bottom: 1px solid; 
} 
aside { 
  background: linear-gradient(to top, white 50%, #deded8 80%);
} 
article { 
  background: linear-gradient(to top, white 50%, #eeeee8 80%);
} 

body { 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh;
}
header, footer {
  flex: 0 0 content;
}
main {
  flex: 1;
}

/* default navigation values */ 
nav { 
    display: flex;  
} 
nav a { 
  text-align: center; 
  background: #ccc; 
  color: black;
  
} 
nav a:hover { 
  outline: 1px solid #bbb; 
  color: red; 
  text-decoration: underline; 
}

header nav a {
  margin: 0 5px; 
  padding: 5px 0; 
  text-decoration: none;
  flex: auto; 
}
 
footer {
  color: white;
  background-color: #333;
}
footer p {
  text-align: center;
}

footer p a {
  color: #aaa;
}

/* larger screen */ 
@media screen and (min-width: 30rem) { 
  body { 
    max-width: 75rem; 
    margin: auto;
  } 
  main { 
    display: flex; 
    flex-wrap: wrap; 
    box-sizing: border-box; 
  }  
  article { 
    flex: 80%; 
  } 
  aside { 
    flex: 20%; 
  } 
}

/* funktioniert nur entweder - oder */
body { font-size: calc(16px + 1.5vw); }                               /* Kleine Viewports 1.5% der Viewportwidth */
@media screen and (min-width: 30rem) { body { font-size: 1rem; } }    /* Große Viewports fix damit es nicht ins Unendliche wächst */

</style>
</head>
    <body>
      <header>
        <h1>Site Wide Header</h1>
          <nav>
            <a href="#1">Home</a>
            <a href="#2">About</a>
            <a href="#3">Blog</a>
            <a href="#4">Careers</a>
            <a href="#5">Contact Us</a>
          </nav>
      </header>
      <main>
        <article>
          <h2>This is the heading of the article</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet. Curabitur a felis at sapien ullamcorper fermentum. Mauris molestie arcu et lectus iaculis sit amet eleifend eros posuere. Fusce nec porta orci.</p>
        </article>
        <aside>
          <h3>Aside Heading</h3>
          <p>Mauris molestie arcu et lectus iaculis sit amet eleifend eros posuere. Fusce nec porta orci.</p>
        </aside>
      </main>
      <footer>
          <p>Copyright &copy; 2017 <a href="#6">My Site</a></p>
      </footer>
    </body>
</html>

Alles anzeigen

Im Beispiel paßt die font-size auf großen Viewports, schrumpft aber bei kleinen Viewports bis ins Unleserliche. Wenn ich die media query wegnehme, paßt es auf kleinen Viewports, wird auf großen aber riesig.

Warum funktioniert das nicht?

lagraf · 31. Januar 2021

Ich habe es jetzt so gelöst:

im Anfrageformular die Variablen wegsichern wenn es den Focus verliert
beim neuerlichen Aufruf mit dem gleichen Tabnamen werden die Variablen zwar gelöscht
aber ich stelle sie aus dem sessionStorage wieder her wenn das Anfrageformular den Focus bekommt
wird das Anfrageformular geschlossen, lösche ich den sessionStorage

Code

// Vars wegspeichern wenn Tab Focus verliert
window.onblur = function() {
    sessionStorage.setItem("name", $('input[name=name]').val());
    }
// Vars wiederherstellen wenn Tab Focus bekommt
window.onfocus = function() {
    document.getElementById("name").value = sessionStorage.getItem("name");
    }
// Session Variablen löschen wenn Tab geschlossen wird
window.onclose = function() {
    sessionStorage.clear();
    }

Alles anzeigen

Damit scheint es zu funktionieren!

lagraf · 31. Januar 2021

Ich öffne einen neuen Tab und speichere seinen Handle in den Session Storage

Code

var myTab = window.open("anfrage.html", "basket");
sessionStorage.setItem("basket", myTab);

Später hole ich den Handle wieder heraus und möchte den Tab in den Vordergrund bringen

Code

var myTab = sessionStorage.getItem("basket");
myTab.focus();

Dabei bekomme ich die Fehlermeldung dass focus() keine Funktion ist!

Sollte focus() in diesem Fall nicht eine Methode laut https://www.w3schools.com/jsref/met_win_focus.asp sein?

lagraf · 29. Januar 2021

Hallo AndreasB,

genau das war es! Ich habe jetzt den Pseudo-Hover-Effekt mit Media Query am Touch Screen ausgeschaltet und damit kann ich den Button mit dem ersten Klick ausfahren und mit dem zweiten Klick wieder einfahren.

Code

@media(hover: hover) and (pointer: fine) { #anfrage:hover { right: -10px; } }
#anfrage.move { right: -10px; }

Der restliche Code bleibt gleich.

Danke und LG

lagraf · 26. Januar 2021

Keine Änderung am iPad, Button fährt heraus aber nicht mehr hinein beim 2. Klick

Bei Firefox/Web-Entwickler/Bildschirmgrößen testen fährt bei deinen beiden Varianten der Button nicht mal mehr heraus, sobald ich den Event mitgebe, während der Button ohne Event sowohl heraus- alsauch hineinfährt

lagraf · 26. Januar 2021

Hat leider nichts geändert!

Gibt es ev. andere Möglichkeiten, wie man am Touchbildschirm den hover Vorgang simulieren könnte?

lagraf · 25. Januar 2021

Ich habe auf guggis-shoes.at/galerie.html einen Button am rechten Rand für eine Anfrage, der bei Desktopbildschirmen per hover hereinfährt.

Auf Touchscreens gibt es ja kein hover, daher mache ich das per JS indem ich per Klick auf den Warenkorb die Klasse "move" dazufüge, welche sich wie hover verhält.

Code

<div id="anfrage">
        <i class="fa fa-shopping-basket fa-2x" onclick="doLink()"></i>
        <a href="anfrage.html" target="Anfrage">
            <p>Sende eine Anfrage, wir beraten dich gerne pers&ouml;nlich!</p>
        </a>
</div>

<script>
function doLink() {
    document.getElementById("anfrage").classList.toggle("move");
    }
</script>

<style>
#anfrage { display: flex; position: fixed; right: -120px; top: 330px; height: 100px;  width: 166px; z-index: 999;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

#anfrage:hover, #anfrage.move { right: -10px; }
#anfrage i { margin-left: 5px; }
#anfrage p { flex-grow: 1; flex-shrink: 1; flex-basis: auto; margin: 5px 10px 5px 5px; font-size: 13px;
    border-left: 1px solid #193e63; padding-left: 5px; }
#anfrage a { color: #193e63; text-decoration: none; }
#anfrage a:hover { color: #7fb4e8; }
</style>

Alles anzeigen

Im Browser unter Web-Entwickler / Bildschirmgrößen testen funktioniert es problemlos bei den diversen Geräten: 1x klicken und der Button fährt heraus, nochmal klicken und der Button fährt durch toggle() wieder hinein. Auf echten Geräten (iPad, Samsung Galaxy, ...) fährt er zwar heraus, aber beim 2. Klick nicht mehr hinein.

Hat jemand eine Ahnung, wo das Problem liegt?

lagraf · 25. Januar 2021

Ich skizziere das mal kurz:

mit onclick JS Funktion aufrufen
Variable "Zustand" abfragen ob offen
-> wenn ja, Tab in Vordergrund bringen
-> wenn nein, Tab öffnen, Variable "Zustand" setzen

Da muss ich mal schauen wie ich die einzelnen Schritte lösen kann!

lagraf · 25. Januar 2021

Ich kann mit einem Link

Code

href="anfrage.html" target="Anfrage"

dafür sorgen dass bei mehrmaligem Klicken des Links der Tab "Anfrage" nicht mehrmals geöffnet wird, allerdings werden dabei bereits eingegebene Formulardaten wieder gelöscht. Gibt es eine Möglichkeit, dass eingegebene Formulardaten erhalten bleiben? Oder kann ich per JS abfragen ob der Tab "Anfrage" schon geöffnet ist und ihn in den Vordergrund holen anstatt ihn nochmals aufzurufen?

lagraf · 24. Januar 2021

Hallo Sempervivum,

damit funktioniert es jetzt, vielen Dank für deine Hilfe!

LG

lagraf · 24. Januar 2021

Ich habe den CSS Eintrag jetzt ganz nach oben gelegt, damit sieht es nun besser aus

LG und Danke

lagraf · 22. Januar 2021

Hallo Sempervivum:

Das funktioniert leider nicht, denn wenn ich im CSS für den Slider

Code

.cycle-main { flex: 1; min-height: 0; margin: 5px 5%; margin-top: 105px; }

div.cycle-slideshow, div.cycle-slideshow div { width: 100%; height: 100%; }
div.cycle-slideshow img { width: 100%; height: 100%; object-fit: contain; }
div.cycle-slideshow div.slide { width: 100%; height: 100%; }

.cycle-pager { text-align: center; width: 100%; z-index: 500; position: absolute; top: calc(100% - 100px); overflow: hidden; }
.cycle-pager span { font-family: arial; font-size: 50px; width: 30px; height: 30px; display: inline-block; color: #BF926B; cursor: pointer; }
.cycle-pager span.cycle-pager-active { color: #193e63;}
.cycle-pager > * { cursor: pointer;}

das height: 100% weglasse

Code

div.cycle-slideshow, div.cycle-slideshow div { width: 100%; }

rutscht das Bild bei breiten Monitoren nach unten über den Fußblock aus dem sichtbaren Bereich heraus. Dabei hilft es auch nicht, dem Pager bottom statt top zu geben.

lagraf · 22. Januar 2021

Hallo domeetr:

Damit die flexslider.css unverändert bleibt, habe ich in der index.html den Style

.flexslider .slides img { width: auto; }

gesetzt, damit funktioniert es jetzt auch!

Danke!

lagraf · 22. Januar 2021

Hallo Sempervivum,

eine Unschönheit habe ich noch beim Cycle2 Slider auf meiner Startseite

http://www.rachbauer.org/guggis/index.html

Wieso kann man über den Fusstext in einen freien Raum hinunterscrollen und wie kann man das beheben?

lagraf · 21. Januar 2021

Hallo Sempervivum,

die Pager Punkte habe ich eingebaut und damit erfüllt der Slider die Anforderungen des Users, danke für deine Hilfe!

LG

lagraf · 21. Januar 2021

domeetr: Ich habe in die index.html folgendes nach dem Include von flexslider.css eingebaut:

Code

.flexslider .slides img {
    max-width: 100% !Important;
    display block !Important;
}
.flexslider .slides img {
    height: auto !Important;
    -moz-user-select: none !Important;
    margin-left: auto !Important;
    margin-right: auto !Important;
}

Sollte das nicht auch reichen und die Einstellungen in flexslider.css überschreiben?

Bewirkt aber nicht den gewünschten Effekt, bei breiten Bildschirmen wird der Fußblock nach unten weggedrückt.

Wenn ich hingegen folgendes einfüge:

Code

.flexslider { display: flex; justify-content: center; align-items: center; }
.flexslider .slides, .flexslider .slides img { max-height: calc(100vh - 230px); }

bleibt der Fussblock schön stehen, aber das Foto wird in der Breite gestretcht.

Ich beschäftige mich ausserdem grad mit dem Cycle Slider, das schaut ganz gut aus und sollte damit funktionieren!

lagraf · 21. Januar 2021

Das Ausschalten der add-ons bewirkt nichts, flackert trotzdem kurz auf.

Meinst du mit dem Flackern vielleicht eh das Gleiche wie ich? Manchmal flackert am linken Rand kurz der reine HTML Code auf. Wenn ich die CSS Datei umtaufe, sodaß er sie nicht findet, dann sieht die Anzeige genauso aus nur bleibt sie halt so stehen!

lagraf · 20. Januar 2021

An AddOns habe ich nur den Adblock Plus und NewTab Homepage installiert, kann ich mir deshalb nicht vorstellen.

Kann es daran liegen, dass der Browser den HTML Teil früher hat als die Bilder, für die er zum Laden länger braucht und ihn deshalb schon mal anzeigt? Am Besten ist es ja bei Shift+Reload reproduzierbar? Meine Internetverbindung ist sicher nicht die schnellste, ich bringe es auf etwa 7,3 mbit/s.

Ich habe schon in einem anderen Thread gesagt, dass mich die übergeordnete Page http://www.rachbauer.org nichts mehr angeht, das waren die Zeit mit meinen früheren Kollegen. Ich nutze nur den Webspace für Testseiten.

Das Umspringen in den Hamburger Modus mit einer Liste kann ich nicht nachvollziehen.

lagraf · 19. Januar 2021

Das schaut ja schon mal ganz gut aus, aber ich hätte noch die eine oder andere Frage dazu:

Wie kann man unter die Images oder in die Images hinein solche Seitenpunkte machen, die man zum man. Blättern verwendet?
Ab welcher jQuery Version funktioniert das?
Was bewirkt data-cycle-slides="> div">?

Beiträge von lagraf

Unterschiedliche font-size bei unterschiedlichen Bildschirmgrößen

Unterschiedliche font-size bei unterschiedlichen Bildschirmgrößen

Erkennen ob Seite bereits in einem Tab geöffnet ist

Erkennen ob Seite bereits in einem Tab geöffnet ist

Klasse toggeln mit classList.toggle() funktioniert am Touchsreen nicht

Klasse toggeln mit classList.toggle() funktioniert am Touchsreen nicht

Klasse toggeln mit classList.toggle() funktioniert am Touchsreen nicht

Klasse toggeln mit classList.toggle() funktioniert am Touchsreen nicht

Erkennen ob Seite bereits in einem Tab geöffnet ist

Erkennen ob Seite bereits in einem Tab geöffnet ist

Flexslider2 mit max. Imagebreite

Bei Seitenwechseln blitzt kurz HTML Code auf

Flexslider2 mit max. Imagebreite

Flexslider2 mit max. Imagebreite

Flexslider2 mit max. Imagebreite

Flexslider2 mit max. Imagebreite

Flexslider2 mit max. Imagebreite

Bei Seitenwechseln blitzt kurz HTML Code auf

Bei Seitenwechseln blitzt kurz HTML Code auf

Flexslider2 mit max. Imagebreite