HTML Div vraagje - Softwareontwikkeling

dinsdag 14 oktober 2014 16:21

Acties:

Topicstarter

Hallo,

Via een tutorial maakte ik een webpagina aan waarbij de temperatuur in de woonkamer uitgetekend wordt (Via Raspberry Pi). Dit werkt zoals het hoort.

In de originel tutorial zie het er als volgt uit: http://warlord.no-ip.com/index.html

Wat dien in ik mijn HTML code aan te passen zodat mijn Highchart ook naast het menu komt te staan, en niet er onder? Ik kan het maar niet vinden...
Dit is mijn originele HTML code van de pagina:

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Home Temperatures With RaspberryPi</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="refresh" content="300">

          <!-- Le styles -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="ico/favicon.ico">
    </head>

   
   <body>   
   
   
       <div class="navbar navbar-inverse navbar-fixed-top">
         <div class="navbar-inner">
           <div class="container-fluid">

             <a class="brand" href="index.html">Home Temperatures</a>
             
             <div class="nav-collapse collapse">
               <ul class="nav">
                 <!-- <li class="active"><a href="index.htm">Home</a></li> -->
               </ul>
             </div>
             
           </div>
         </div>
       </div>

       <div class="container-fluid">
         <div class="row-fluid">
           <div class="span2">
             <div class="well sidebar-nav">
               <ul class="nav nav-list">
                 <li class="nav-header">Temperature</li>
                  <li><a href="index.html?3h">Last 3h</a></li>
                  <li><a href="index.html">Last 24h</a></li>
                  <li><a href="index.html?48h">Last 2 Days</a></li>
                  <li><a href="index.html?1w">Last Week</a></li>
                  <li><a href="index.html?1m">Last Month</a></li>
                  <li><a href="index.html?3m">Last 3 Month</a></li>
                  <li><a href="index.html?1y">Last Year</a></li>
               </ul>
             </div><!--/.well -->
           </div><!--/span-->
           <div class="span10">
             <div id="content"></div>
             <hr>
             <div id="weather" style="margin-left: 20px;"></div>
           </div><!--/span-->
         </div><!--/row-->

         <hr>

       </div><!--/.fluid-container-->
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.1/highcharts.js"></script>
        <script type="text/javascript">
            $(function () {
                $(document).ready(function() {

                    $.ajax({
                        type: "GET",
                        url: "data/temps24h.xml",
                        dataType: "xml",
                        success: function(xml) {

                            Highcharts.setOptions({global:{useUTC:false}});
                            options={chart:{renderTo:"containerxxx",type:"spline"},title:{text:""},subtitle:{text:""},xAxis:{type:"datetime",dateTimeLabelFormats:{hour:"%H. %M"}},yAxis:{title:{text:"T (Â°C)"}},tooltip:{formatter:function(){return"<b>"+this.series.name+"</b><br/>"+Highcharts.dateFormat("%H:%M",this.x)+": "+this.y.toFixed(1)+"Â°C"}},plotOptions:{series:{marker:{radius:2}}},lineWidth:1,series:[]}
  
                            var series = []
                            //alert('start');

                            //define series
                            $(xml).find("entry").each(function() {
                                var seriesOptions = {
                                    name: $(this).text(),
                                    data: []
                                };
                                options.series.push(seriesOptions);
                            });
                            //alert('finish part 1');

                            //populate with data
                            $(xml).find("row").each(function() {
                                var t = parseInt($(this).find("t").text()) * 1000

                                $(this).find("v").each(function(index) {
                                    var v = parseFloat($(this).text())
                                    v = v || null
                                    if (v != null) {
                                        //alert('index = ' + index + 'time=' + t + 'v=' + v);
                                        options.series[index].data.push([t, v])
                                    };
                                });
                            });
                            //alert('finish part 2');

                            options.title.text = "Temperatures of the last 24h"
                            $.each(series, function(index) {
                                options.series.push(series[index]);
                            });
                            //alert('finish part 3');

                            chart = new Highcharts.Chart(options);
                        }
                    });
                });
            });

        </script>

        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>

        <!-- Additional files for the Highslide popup effect -->
        <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
        <script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />

    <div id="containerxxx" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
</html>

Iemand die de oplossing weet? Thx !

dinsdag 14 oktober 2014 16:25

Acties:

Tunaflish

Je code in de goede tags zetten zodat het wat leesbaarder wordt, en daarna die div#containerxxx in je div#content plaatsen, in plaats van aan het einde van je code.

So long, and thanks for all the fish!

dinsdag 14 oktober 2014 16:41

Acties:

argon007

Topicstarter

Ik plaats dus

HTML:

1	<div id="containerxxx" style="min-width: 400px; height: 400px; margin: 0 auto">

Net voor

HTML:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.1/highcharts.js"></script>
        <script type="text/javascript">
            $(function () {
                $(document).ready(function() {

                    $.ajax({
                        type: "GET",
...

En dan op het eindje

HTML:

</div>

?

Sorry, maar ik geraak er echt niet aan uit. Mijn kennis van HTML / DIVS is niet echt al dat...

[ Voor 4% gewijzigd door RobIII op 14-10-2014 16:54 ]

dinsdag 14 oktober 2014 17:01

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Als je code post, gebruik dan a.u.b. code tags en beperkt je tot relevante(!)* stukjes(!) code. Verder zijn testcases handig, maar als die overmorgen weer offline zijn is je topic overmorgen niets meer waard; uiterst frustrerend voor mensen die op je topic stuiten middels de search omdat ze (mogelijk) eenzelfde vraag hebben. Als je een testcase maakt, zorg dan dat alle relevante(!) code maar ook informatie omtrent je probleem in je topic staat en plaats desnoods een testcase op jsfiddle o.i.d. waar de testcase kan blijven 'voortleven' (tot op bepaalde hoogte natuurlijk) nadat jij je oplossing gevonden hebt en de URL die nu in je TS staat offline trekt

* Zo is heel het menu, de <head>-sectie etc. totaal niet relevant voor je probleem.

[ Voor 6% gewijzigd door RobIII op 14-10-2014 17:02 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 14 oktober 2014 17:10

Acties:

argon007

Topicstarter

Hallo,

Opmerkingen genoteerd!
Had nog nooit gehoord van jsfiddle (zoals reeds gemeld en beginneling op webscripting niveau). Ik pas dit ook nog aan.

Groeten

dinsdag 14 oktober 2014 17:18

Acties:

Morrar

Misschien handig om alle externe scripts en stylesheets even naar de header te verplaatsen. Als het goed is opent de browser deze toch in de achtergrond en gaat verder met het renderen van de pagina. Voor de laadtijd zou het dus niet uit mogen maken, maar het maakt je code wel veel overzichtelijker.

Ook de lap Javascript-code hoeft niet in de body zelf te staan, maar kan in de header / een aparte scriptfile. Ook dat maakt je HTML code overzichtelijker, waardoor je beter kunt zien wat de structuur van de DIV's is en waarom ze staan waar ze staan.

Ik vermoed dat dit je probleem op zou kunnen lossen:

code:

<div class="span10">
  <div id="content">
    <div id="containerxxx" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
  </div>
  <hr>
  <div id="weather" style="margin-left: 20px;"></div>
</div><!--/span-->

Dan komt je grafiek in de content-div en boven de div met het weer lijkt me...

[ Voor 37% gewijzigd door Morrar op 14-10-2014 17:24 ]

dinsdag 14 oktober 2014 20:19

Acties:

argon007

Topicstarter

Morrar, Thx !
Dat werkte inderdaad. Layout ziet er nu uit zoals het hoort!

zondag 26 oktober 2014 11:13

Acties:

n8n

Morrar schreef op dinsdag 14 oktober 2014 @ 17:18:
Misschien handig om alle externe scripts en stylesheets even naar de header te verplaatsen. Als het goed is opent de browser deze toch in de achtergrond en gaat verder met het renderen van de pagina. Voor de laadtijd zou het dus niet uit mogen maken, maar het maakt je code wel veel overzichtelijker.

Ook de lap Javascript-code hoeft niet in de body zelf te staan, maar kan in de header / een aparte scriptfile. Ook dat maakt je HTML code overzichtelijker, waardoor je beter kunt zien wat de structuur van de DIV's is en waarom ze staan waar ze staan.

Ik vermoed dat dit je probleem op zou kunnen lossen:
code:
64
65
66
67
68
69
70
<div class="span10">
  <div id="content">
    <div id="containerxxx" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
  </div>
  <hr>
  <div id="weather" style="margin-left: 20px;"></div>
</div>
Dan komt je grafiek in de content-div en boven de div met het weer lijkt me...

Scripts in de head worden tegenwoordig afgeraden door zowel Google ala Yahoo

maandag 27 oktober 2014 23:35

Acties:

R4gnax

n8n schreef op zondag 26 oktober 2014 @ 11:13:
[...]

Scripts in de head worden tegenwoordig afgeraden door zowel Google ala Yahoo

Als je van spul zoals Modernizr gebruik wil maken icm met de ingebouwde shim van HTML5 tags voor IE8, dan rest je weinig keus.

Overigens is het al lang niet meer zo dat het inladen van JavaScript via de document head slecht hoeft te zijn. Performance-technisch is het bijvoorbeeld best interessant om een bootstrapping script met loader in de head te hebben staan en vanaf daar non-blocking je verdere scripts in te laden. Haal je best mooie laadtijden mee.

[ Voor 3% gewijzigd door R4gnax op 27-10-2014 23:36 ]