Menü-Seite mit "divs"

D

DaRohbi

Grünschnabel
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:
main_menü.png

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:
detail_menü.png

Jetzt ist meine frage, weiß jemand wie das geht, beziehungsweise hat das jemand schon gemacht?
Bitte um Hilfe
LG
 
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:
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.
 
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:
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
Zum Vergrößern anklicken....
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:
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,
Zum Vergrößern anklicken....
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
 
Nach jetzigen Googeln bin ich der meinung das " map()" hier eine wichtige function übernimmt die ich mir meinen komischen spliten gemacht habe ?
Zum Vergrößern anklicken....
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.

Neue Beiträge

Zurück