jQuery Flot dans jQuery Steps

**kiwil** · 05/01/2017, 13h31

Bonjour à tous,

Voila tâtonne dans le développement web car je suis plutôt développeur C/C++, j'ai pour un produit compiler un serveur http simple nommé Mongoose, qui me permettrai d'avoir une interface simple et efficace avec le périphérique.

Des exemples sont fournis avec Mongoose, j'y ai rajouté la librairie JQuery Steps pour avoir un système d'onglet. Les onglets marche correctement mais je ne vois pas mon graphe introduit dans l'onglet, alors que en déplacement le graphe en dehors de l'onglet cela fonctionne. Sûrement d'après ce que j'ai compris une erreur dans les CSS.

Pour être plus claire voici la page HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Connected device demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
  <link rel="stylesheet" type="text/css" href="CSS/style.css">
  <link rel="stylesheet" href="CSS/jquery.steps.css">
  <link rel="stylesheet" href="CSS/main.css">
  <link rel="stylesheet" href="CSS/normalize.css">
 
  <script type="text/javascript" src="JS/jquery-1.11.3.min.js"></script>
  <script src="JS/jquery.flot.min.js"></script>
  <script src="JS/jquery.flot.time.js"></script>
  <script src="JS/modernizr-2.6.2.min.js"></script>
  <script src="JS/jquery.cookie-1.3.1.js"></script>
  <script src="JS/jquery.steps.js"></script>
  <script type="text/javascript" src="JS/main.js"></script>
  <script src="JS/jquery.steps.js"></script>
 
</head>
 
<body>
  <div class="content">
    <img src="logo.png" style="float:right; height: 50px; border-radius: 3px;">
    <h1>Connected device demo - Websocket push</h1>
 
    <p>
      This page is one of the series of examples that show how to make
      devices connected with Mongoose. Here we add a real-time Websocket
      server push, and update dashboard graph as data arrives.
    </p>
 
    <h1>Settings section</h1>
 
	<script>
                $(function ()
                {
                    $("#example-basic").steps({
                        headerTag: "h3",
                        bodyTag: "section",
                        transitionEffect: "slideLeft",
                                                enableFinishButton: false, 
                                                enablePagination: false,
                                                enableAllSteps: true, 
                                                titleTemplate: "#title#" 
                    });
                });
            </script>
 
 
    <div id="example-basic">
	  <h3>CPU usage</h3>
 	    <section>
		  <h1>Dashboard section</h1>
    	  <label>CPU usage:</label> <span id="cpu_usage">&nbsp;</span>
    	  <div id="graphs"></div>  
	    </section>
	  <h3>Settings</h3>
	    <section>
			<form method="POST" action="/save">
      	     <fieldset>
        	  <legend>Device settings</legend>
        	  <label>Setting 1:</label> <input type="text"
          		name="setting1" value="<!--#call setting1 -->" >
              <label>Setting 2:</label> <input type="text"
          		name="setting2" value="<!--#call setting2 -->" >
 
        	  <div>
          		<button type="submit">Save Settings</button>
        	  </div>
      		</fieldset>
    		</form>
		</section>
	</div>
</div>
</body>
</html>

Voila déjà dans un premier temps peu être, si vous pouviez peu-être m'indiquer ou chercher ou voir même si cela est possible.

Merci par avance.

William

**NoSmoking** · 07/01/2017, 09h30

Bonjour,
il est possible que si ton graphe est construit dans un élément n'ayant pas de « dimension », because il est en display:none, celui ci hérite des « dimensions » de son parent ce qui expliquerait que placé ailleurs il soit visible.

jQuery Flot dans jQuery Steps

jQuery

Discussions similaires

Partager

Partager