Menü-Seite mit "divs" (2024)

D

DaRohbi

Grünschnabel
  • 31. Dezember 2018
  • #1

Hallo allerseits,
ich möchte für meinen Webserver auf dem Raspberry Pi eine Webseite bauen wo verschiedene Daten in Graphen angezeigt werden.
Leider komme ich mit dem styling der "divs" nicht ganz zurecht
Hier mal ein bild wie ich es mir vorgestellt habe:

Die Menüleiste oben ist schon fertig, aber mein Problem ist das ich mit dem Styling von den "divs" nicht zurechtkomme(die divs sollen die schwarzen Rechtecke sein).
Weiters soll es möglich sein die "divs" anzuklicken(hoffe das geht), danach soll ein pop-up aufgehen was genauere infos gibt.
Hier ist dazu das Bild:

Jetzt ist meine frage, weiß jemand wie das geht, beziehungsweise hat das jemand schon gemacht?
Bitte um Hilfe
LG

Sempervivum

Erfahrenes Mitglied
  • 31. Dezember 2018
  • #2

Wenn Du die Menüleiste schon fertig hast, hast Du ja bestimmt schon etwas Erfahrung mit HTML und CSS. Dann empfehle ich, einen Blick auf Flexlayout zu werfen:
A Complete Guide to Flexbox | CSS-Tricks
Damit kannst Du zwei Zeilen anlegen mit Divs und untereinander anordnen (flex-direction: column;) und in jeden dieser beiden Divs je drei weiter nebeneinander (flex-direction: row; was Default ist).

Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
  • 31. Dezember 2018
  • #3

Y

yxyx

Grünschnabel
  • 31. Dezember 2018
  • #4

Ich empfehle dir, das Popup ohne Javascript zu machen, z.B. so:

Code:

<!doctype html><html> <head> <title>Popup ohne Javascript</title> <style type="text/css"> p {height: 2000px; border: 1px solid #000000;} div#no_popup {position: fixed; display: none;} div.window {width: 600px; height: 400px; margin: -200px 0 0 -300px; position: fixed; top: 50%; left: 50%; background-color: #ffffff; box-shadow: 0 0 10px #000000;} div.window_header {width: 100%; height: 30px; background-color: #ffcc7f; position: absolute; top: 0; left: 0; list-style-type: none; margin: 0; padding: 0;} div.window_content {position: relative; top: 30px; left: 0; height: 350px; padding: 10px; overflow: auto;} @media (max-width: 600px) { div.window {width: 100%; margin-left: 0; left: 0;} } @media (max-height: 400px) { div.window {height: 100%; margin-top: 0; top: 0;} } a.window_close {text-decoration: none; text-align: center; font-size: 28px; position: absolute; top: 0; right: 0; height: 30px; width: 30px; border: none; background: none; box-shadow: none;} a.window_close:hover, button.window_close:focus {border: none; background: #ff8a7f; box-shadow: none;} div#popup {display: none;} div#popup:target {display: block;} </style> </head> <body> <div id="no_popup"></div> <p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><a href="#popup">Hier geht es zum Popup</a></p> <div id="popup" class="window"> <div class="window_header"> <a href="#no_popup" class="window_close">X</a> </div> <div class="window_content"> Popupinhalt. </div> </div> </body></html>

Durch die Pseudoklasse target wird das Popupfenster nur sichtbar, wenn die div selektiert wird. Mit Hilfe der unsichtbaren div mit position: fixed; wird vermieden, dass die Seite beim schließen des Popups wegscrollt. Um das zu testen, habe ich vor dem Link einige Zeilenumbrüche eingefügt.

Wenn man mehrere Popups benötigt, kann man einfach die id der div.window ändern.

basti1012

Erfahrenes Mitglied
  • 1. Januar 2019
  • #5

Ich habe auch mal etwas gebastelt
**Link entfernt, weil Seite nicht mehr erreichbar **

Doch da habe ich mal nee Frage zu. Das Balkendiagramm Script habe ich damals schon für meinen Besucherzähler genommen. Da habe ich die Zahlen aus der Datenbank geholt ,im Php Script zusammen gebaut was dann so aus sah ungefähr.

Code:

$monate = $monate.='["'.$a.' - '.$b.'",'.$c.']';data: [<?php echo $monate; ?> ],

aufjedenfall kamen so die Zahlen ins Diagramm Script rein bei data. Das geht auch ganz gut und hatte nie probleme.
Das gleiche wollte ich jetzt mit JS machen
Die Zahlen aus den Html holen ,aus den data-wert , und denn dann so ungefähr auch da einbinden.
Ich habe jetzt alle Varianten durch probiert und bekomme es nur so hin wie es jetzt ist .Also das mit spliten und co.

Meine Frage ist jetzt dazu, wie bekommt man die Werte aus den data attribute in das Balken-Diagramm Script rein ?
Also drinne habe ich es ja ,aber das muss doch einfacher gehen und nicht so kompliziert wie ich es gemacht habe oder ?
Hier nochmal als Codepen aPVQOJ

Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
  • 1. Januar 2019
  • #6

Denke schon, dass das einfacher geht:

Code:

 $('#popup').css('display','block'); g=$(this).data('wert').split(','); d = g.map(function(item) {return parseInt(item)});

Dieses Array kannst Du dann direkt an Highcharts übergeben:

Code:

 data: d, dataLabels: { enabled: true,

Edit: Mit JSON geht es auch; jQuery parst ein data-Attribut automatisch:

When a string starts with '{' or '[', then jQuery.parseJSON is used to parse it

https://api.jquery.com/data/

HTML:

<div data-wert="[13,3,1,65,3,4,18,15]" class="box">1</div>

Javascript:

$('.box').click(function(){ $('#popup').css('display','block'); d = $(this).data('wert'); console.log(d);

Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
  • 1. Januar 2019
  • #7

Sempervivum hat gesagt.:

Denke schon, dass das einfacher geht:

Code:

 $('#popup').css('display','block'); g=$(this).data('wert').split(','); d = g.map(function(item) {return parseInt(item)});

Dieses Array kannst Du dann direkt an Highcharts übergeben:

Code:

 data: d, dataLabels: { enabled: true,

Jo das funktioniert super.
Nach jetzigen Googeln bin ich der meinung das " map()" hier eine wichtige function übernimmt die ich mir meinen komischen spliten gemacht habe ? Doof erklärt aber ihr kennt mich ja.

Zumindest wollte ich das so heute Nacht auch haben aber bin nicht drauf gekommen.
Vielen Dank und ein Frohes neues Jahr dir uns an allen die mit lesen

Sempervivum

Erfahrenes Mitglied
  • 1. Januar 2019
  • #8

Nach jetzigen Googeln bin ich der meinung das " map()" hier eine wichtige function übernimmt die ich mir meinen komischen spliten gemacht habe ?

Nein, das map() führt nur das Umwandeln mit parseInt durch. Das split() findest Du in der Zeile darüber rechts.

Sieh dir auch das mit JSON in meinem Edit an, das ist unschlagbar einfach und kompakt.

Um antworten zu können musst du eingeloggt sein.

Menü-Seite mit "divs" (2024)
Top Articles
Latest Posts
Article information

Author: Francesca Jacobs Ret

Last Updated:

Views: 5851

Rating: 4.8 / 5 (48 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Francesca Jacobs Ret

Birthday: 1996-12-09

Address: Apt. 141 1406 Mitch Summit, New Teganshire, UT 82655-0699

Phone: +2296092334654

Job: Technology Architect

Hobby: Snowboarding, Scouting, Foreign language learning, Dowsing, Baton twirling, Sculpting, Cabaret

Introduction: My name is Francesca Jacobs Ret, I am a innocent, super, beautiful, charming, lucky, gentle, clever person who loves writing and wants to share my knowledge and understanding with you.