Div-Container mit klickbarer Grafik anzeigen oder verstecken

[LeanderAT]

Hallo noch einmal!

Meine abschließende Frage zur Überarbeitung meiner Seiten, weil ich alleine einfach nicht weiterkomme:

1) Ich habe in der CSS-Datei Media-Angaben...z.B.

@Media only screen and (min-width: 1px) and (min-height: 1px) -> hier kommt Codewurst

@Media only screen and (min-width: 934px) and (min-height: 601px) -> hier das nächste kleinere Design mit Angaben zu verschiedenen Sachen...

Danach noch drei weitere für verschiedene Größen bis zu 1920x1080 mit Hintergrundbild 1437x880.

Danach:

@Media only screen and (min-width : 1916px) and (min-height : 1174px) -> Code für diese Auflösung
und @Media only screen and (min-width : 2874px) and (min-height : 1761px) -> Code für die finale Auflösung für 3840x2160-Screens.

Die Seite geht alles durch und schaut, wie viel Platz im Browser ist und zeigt dann dementsprechend den Code an.

2) Ich habe am Ende mancher Seiten ein Icon "Klick mich, um zu Seitenanfang des Contents zu springen".
Das macht für 1920x1080 Sinn...aber bei höheren Auflösungen ist nun genug Platz, sodass ich kein Icon zum Hochspringen mehr brauche, weil das Menü mit den übergeordneten Bereichen eh noch sichtbar ist.

Die klickbaren Links sehen so aus:

<p><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" id="toparrow" border="0"></a>

Die Toparrow-Grafik ist je nach Auflsöung unterschiedlich groß und eben in der CSS angegeben.

3) Meine Überlegung ist, dass ich die obere Zeile in einen Div stecke, also <div ID="jumptotop"<p><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" id="toparrow" border="0"></a></DIV>

Von dieser Div lege ich mehrere Versionen an...also jumptotop, jumptotop_XL und jumptotop_XXL

In der CSS würe ich bei 1920x1080 die Toparrow-Grafik normal anzeigen.
Bei jumptotop_XL würde ich die Div entweder anzeigen oder mit display:hidden verstecken, wenn für den Text genug Platz ist und man kein Jumptotop-Icon braucht.
Bei jumptotop_XXL würde ich ebenso die Div entweder anzeigen oder mit display:hidden verstecken, wenn für den Text genug Platz ist.

Und abschließend würde ich in allen PHP-Dateien des Contents einen der drei Divs, also jumptotop, jumptotop_XL oder jumptotop_XXL einbauen, sodass je nach Platzbedarf des Textes das Icon angezeigt wird oder nicht.

Ist kompliziert, aber ich hab sonst keine Idee, wie das gehen könnte.

Ein "Wenn Höhe des Content-Divs >= x, dann zeige an vs. zeige nichts an" in jeder Content-PHP wäre einfacher, aber ich hab da auch keine Ahnung, wie das geht.


Ist das aufwendig bzw. kompliziert?

 

[[ChAoZ]]

Wenn ich dich richtig verstehe dann musst du lediglich den div container bei deiner bestimmten größe ausblenden oder eben einblenden. display:none als standard und display:block im breakpoint des desktops.

oder eben display:block als standard und display:none wenn es der mobile break point ist.

 

[wilk84]

Deine "media queries" sind leider alles andere als gut. Du wurstelst dir da was hin, aber jeder hat andere Ansprüche. Alternative wäre, sich noch mal richtig mit den "media queries" zu beschäftigen und das Vorhaben vernünftig umzusetzen.

 

[User007]

Hi...

Hmm... mir fehlt grad' die Vorstellung sowas mit PHP realisieren zu können, weil das serverseitig läuft und es hier um clientseitige Funktionen geht - vermutlich reicht allerdings auch reines CSS nicht, so dass wahrscheinlich auch 'ne JavaScript-Funktion mit kombiniert werden muß.

Bspw. würd' ich mir das dann so vorstellen:
Mit CSS positioniert man das To-Top-Element absolut außerhalb des unteren Rands, so ist's nicht sichtbar, sofern der Inhalt ohne Scrollen der Seite dargestellt wird und ansonsten müßte bei diesem Ereignis eine Funktion das Element einblenden. So ist das Grundkonstrukt für die Funktionalität vorhanden und muß nur je nach Auflösung "dynamisch" angepasst werden - war das in ungefähr so gedacht?

Ich glaub' nämlich nicht, dass man dafür das Rad neu erfinden muß.
Sowas gibt's sicherlich auch schon fertig als Code-Häppchen - man denke da nur an so manches Framework oder CMS mit einem erst am unteren Rand erscheinendem "To Top"-Element, sobald der Desktop gescrollt wird.​

 

[LeanderAT]

Danke für die Antworten!

Das mit den Media Queries hab ich mal wo gelesen und es funktioniert (Desktop). Das selbe gibts für Mobile mit einem Is mobile?-Skript. Mit dem statischen Hintergrundbild geht usw. geht es leider nicht anders, zumindest nicht mit meinen Mitteln. Ich kapiere leider wenig und verwurst nur Codeschnippsel, die ich wo finde.

"Wenn ich dich richtig verstehe dann musst du lediglich den div container bei deiner bestimmten größe ausblenden oder eben einblenden. display:none als standard und display:block im breakpoint des desktops."

Ja, so wäre es geplant, aber es klappt irgendwie nicht.

Zuvor wollte ich einen Trick verwenden mit "Wenn das Springe-Hoch-Icon nicht gebraucht wird, setze ich die Grafik auf 1x1 Pixel", aber klappt auch nicht.

Vielleicht sollte ich mich auf Fiverr nach wem umsehen, der mir was bezahlt zurechtbastelt, falls er den ganzen Code durchblickt.

 

[LeanderAT]

Ist das so korrekt? Die Icons werden leider überall angezeigt. Oder wirkt sich display:none nur auf den Container an sich, aber NICHT auf darin befindliche Grafiken aus?

In der CSS habe ich:
#jumpicon
{
display:none;
}

wo es nicht angezeigt werden soll

und
#jumpicon
{
display:block;
}

wo es angezeigt werden soll.

Und in der PHP:

<p><div id="jumpicon"><a href="#gototop" title="Start of page"><img src="img/toparrow.png" border="0"></a>&nbsp;&nbsp;<a href="poesie_en.php" title="back"><img src="img/leftarrow.png" border="0"></a></div>

 

[LeanderAT]

OMG, ich hab es endlich! Hab auf einer Seite noch was anderes gefunden. Ich hab leider null Ahnung, was der Unterschied zwischen #jumpicon und img.jumpicon ist.

Habe jetzt das Zeug in der PHP so:

<p><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" class="jumpicons" border="0"></a>&nbsp;&nbsp;<a href="poesie_de.php" title="zurück"><img src="img/leftarrow.png" class="jumpicons" border="0"></a>

Habe also eine class "jumpicons"...und in der CSS steht entweder die Größe der Grafik mit

img.jumpicons {
width: 28px;
height: 28px;
}

oder

img.jumpicons {
display: none;
}

Allerdings kommt es wieder auf die Reihenfolge an...zuerst hat es gleich funktioniert, aber nur mit display: none; einzeln angegeben. Sobald ich Größenangaben wählte, wurde dann wieder was viel zu groß und falsch angezeigt...

Jedenfalls klappt es jetzt nach langem hin und her!

Danke für den Input

 

[floq0r]

Schau dir mal Beispiele für gutes responsive design an, das ist einfacher und flexibler als alle gängigen resolutions extra zu formatieren. Übrigens creept dein Foto Viewer bei sehr hohen Auflösungen (4k) von links in den Viewport:

 

[LeanderAT]

Schau dir mal Beispiele für gutes responsive design an, das ist einfacher und flexibler als alle gängigen resolutions extra zu formatieren. Übrigens creept dein Foto Viewer bei sehr hohen Auflösungen (4k) von links in den Viewport:

Anhang anzeigen 1444821

Ja, aber nur bei der Live-Version. Da ist für es nur bei -2000 versteckt, weswegen es reinschaut.

Auf https://www.seelenpuls.at/update11/index_de.php nicht mehr.

Ich habe leider keine Lösung mit Responsive Design gefunden, die ich kapiere oder die klappt...bei der ich genau einstellen kann, wo das Menü ist, wo der Inhalt, wo Sprachwahl, Version usw. und vor allem, dass die Seite über einem Hintergrundbild liegt und alles ohne Javascript.

Deswegen gibts manuelle Versionen für Desktop und zig für Mobile und ein Skript, das den Index je nach Gerät auf die Desktop- oder Mobile-Version umleitet.

Schau dir mal Beispiele für gutes responsive design an, das ist einfacher und flexibler als alle gängigen resolutions extra zu formatieren. Übrigens creept dein Foto Viewer bei sehr hohen Auflösungen (4k) von links in den Viewport:

Anhang anzeigen 1444821

Falls du wo ein gutes Template für Responsive Design kennst, das auch mit Hintergrundbildern funktioniert, bitte sagen

 

[LeanderAT]

Leider ist mein Basteln komplett sinnlos!

JA, es funktioniert, dass ich die "Scrolle nach oben"-Icons anzeigen oder verstecken kann, nur muss ich es für JEDE Datei einzeln einstellen. Ich hab aber zig zig zig Dateien...also schau ich eine Datei an, ob diese ganz auf dem Screen passt für 1920x1080 UND 2560x1440 UND 4k...und stelle dann bei class entweder jumpicons, jumpiconsXL oder jumpiconsXXL ein.

Ich hab Gedichte in der Gedichte-Sektion, aber auch bei den Albumlyrics...und hab vier versionen von jeder Datei, Desktop Deutsch, Desktop Englisch, Mobile Deutsch, Mobile Englisch...da sitz ich Stunden und frage mich, wozu, aber kenne keine andere Möglichkeit und finde es zu hässlich, wenn den 3 jährlichen Usern auf meiner Website ein "Scrolle nach oben"-Icon anzuzeigen, obwohl eh genug Platz im Content-Div ist.

Leider kenne ich keine Möglichkeit, dass der Browser automatisch schaut, ob der Text im Content-Div größer als der Content-Platz ist und ein Scrollbalken entsteht (und dann Pfeil nach oben-Icon braucht) oder nicht.

Desktop bin ich dann fertig, aber noch für Mobile und noch für die andere Homepage.

Weitere Seiten erstellen ist dann einfach, weil es zwar vier Versionen von PHP sind (2 Sprachen, 2 Geräte), aber zumindest brauch ich dann nur class schnell schauen und einstellen.

Besser wäre es wohl gewesen, ich hätte die Website vom Hintergrundbild bei 1920x1080 gelassen...weil höhere Auflösungen eh kein besseres Anzeigen ermöglichen bis auf ein größeres Hintergrundbild. ... und dafür ca. 15 Stunden Arbeit bisher.

Falls wer eine Lösung kennt eines "Wenn Text einer PHP > Height of DIV, then display Icons, ansonsten lasse sie versteckt", bitte immer her damit.

 

[User007]

Leider ist mein Basteln komplett sinnlos!

Ja, weil Du m. Mg. n. einfach das falsche Mittel zum Zweck einsetzt (und versuchst "das Rad neu zu erfinden"). 🤷‍♂️

Was spricht denn gegen den Einsatz von ein bißchen JS?

 

[[ChAoZ]]

"Wenn ich dich richtig verstehe dann musst du lediglich den div container bei deiner bestimmten größe ausblenden oder eben einblenden. display:none als standard und display:block im breakpoint des desktops."

Ja, so wäre es geplant, aber es klappt irgendwie nicht.

Step by Step.
Verstehe erstmal wie RWD funktioniert, was Break Points sind und wie Media Queries zum Einsatz kommen.
Dann experementieren.

Einfach ne Seite bastelt die 2 Divs beeinhaltet, mit unterschiedlichem Inhalt.
Blende jeweils im Dekstop Mode (Media Query mit 1920 pixel Breite) ein Div ein, das andere aus und umgekehrt. Das sind paar Zeilen CSS und paar HTML.

Wenn das klappt, dann hast du verstanden wie es funktioniert und du kannst es 1:1 in deinen Code übernehmen. Verstehen ist wichtiger als Code Schnipsel im Internet zu suchen und diese irgendwie zusammenzukloppen damit es funktioniert.

 

[LeanderAT]

Es spricht eh nichts gegen JS. Bin es halt so gewohnt, dass es an der Uni früher 2000, 2003, 2005 Uraltcomputer gab und Bildschirme und einige Leute JS deaktivert hatten, weil gefährlich...sowas prägt.

 

[LeanderAT]

Hab jetzt eine Lösung gefunden, juhu Wenn man scrollen muss, wird ein Div eingeblendet, ansonsten nicht, wobei der Default ohne JS anzeigen ist.

 

[User007]

Das ist schön, dass Du 'ne Lösung gefunden hast - noch schöner wär', wenn Du auch andere an der Lösung teilhaben lassen würdest, bspw. mit entsprechender Verlinkung oder Code-Schnipsel.​

Danke.

 

[LeanderAT]

Kann ich gern machen, bin davon ausgegangen, dass sich die Leser hier ohnehin auskennen.

Jemand hat bei Stack Overflow den Code gepostet. Man fügt einen DIV hinzu:

<div id="gototopmark"><p><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" class="icons" border="0"></a>

und ruft unten stehenden Code auf. Das klappt auf dem Handy gut, im Desktop gut, aber mit Ausnahmen. Da muss ich auf Antwort warten oder es weiß hier von euch jemand? Es wird standardmäßig der DIV mit dem "back to top"-Icon angezeigt. Scrollt der User, passiert nichts und es bleibt angezeigt. Scrollt der User nicht, weil eh genug Platz auf dem Screen vorhanden ist, wird der DIV versteckt.

Allerdings klappt das manchmal nicht, wenn ein Scrollbalken angezeigt wird, der Screen nur weniger Pixel scrollen muss...und bei den Fotos https://www.seelenpuls.at/update11/fotografie_de.php (mit Desktop und 1920x1080 aufrufen) wird der DIV versteckt, obwohl man scrollen muss. Da weiß ich nicht, warum das so ist. Die Fotos werden mit include eingebaut...und sind mit Lightbox gemacht.

<script>
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

</script>
<script>

const box = document.querySelector('#gototopmark');

if (isInViewport(box)){
box.style.display='none';
}else{
box.style.display='block';
}

</script>

 

[LeanderAT]

Es liegt wahrscheinlich daran, dass der Code mit Viewport arbeitet, aber Bilder mit Lightbox eingebunden sind...und das Overlay dafür braucht einen negativen margin-left-Wert, um zu funktionieren. Die beiden kommen sich dann in die Quere.