jquery - 在不增加 div 元素大小的情况下移动文本

标签 jquery html css

我是网络开发的新手，我想弄清楚如何在不增加 div 大小的情况下移动 div 元素中的文本。我尝试使用填充，但其他文本因此而错位(事件日志向下移动)。

我试图在当前状态下集中对齐文本，并且只将文本“当前状态”和“事件日志”设为粗体，而不是它们下面的文本。

$(function updat() {
  var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var humid = [],
    date = [],
    high=[],
    day=[],
    chanceOfRain=[],
    humid_final = [],
    day_final=[],
    high_final=[],
    chanceOfRain_final=[],
    Itemss=[],
    SortedItems=[]
    var htmlText='';

  $.getJSON(url, function (json) {

    $(json['Items']).each(function(i, data) {
      //Store indicator name
      
      // fill the date array
      humid.push(data.humidity);
      // fill the string data array 
      date.push(data.Date);

      high.push(data.high);
      day.push(data.Day);
      chanceOfRain.push(data.chanceOfRain);

    });

   	//unsorted array
    Itemss=$(json['Items']);
    //console.log("ITEMS",Itemss);

    //sorted array- date
     date.sort(function(a,b) { return a - b;});

    // Itemss.sort(function(a,b){return  date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});

     console.log("Sorted Days", date);
    Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
     console.log(" Sorted ITEMS",Itemss);
    ////////

    // query send string that we need to convert into numbers
    for (var i = 0; i < humid.length; i++) {
      if (humid[i] != null) {
        humid_final.push(parseFloat(humid[i]));
        high_final.push(parseFloat(high[i]));
        day_final.push(parseFloat(day[i]));
        chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
      } else {
       humid_final.push(null)
      };
    }

    //sorting the arrays
    day_final.sort(function(a,b) { return a - b;});
   // console.log("Sorted day_final", day_final);

    humid_final.sort(function(a,b) { return a - b;});


    //ACTIVITY LOG
    var h1 = [10, 20, 30, 40,50,60];
    var t1 = [50, 60, 70, 80, 90, 100];
    var activ= document.querySelector('.activ');
    for(var i=0; i<h1.length;i++){
      activ.innerHTML += `<p>Temperature was ${t1[i]} degrees and humidity was ${h1[i]} % `;
    }

    var chart = new Highcharts.chart({

       credits: {
      enabled: false
        },
      chart: {
        height: 200,
        type: 'spline',
        renderTo: 'light',
        marginBottom: 100
      },
      title: {
        text: ' Ambient Light'
      },
      tooltip: {
        valueDecimals: 2,
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      subtitle: {
        text: ''
      },
      xAxis: {
        categories: day_final //.reverse() to have the min year on the left 
      },
      series: [{
        name: 'light level',
        data: high_final, //
        color: '#9b0000' 
      }]
    });


var chart1 = new Highcharts.chart({
       credits: {
        enabled: false
        },
      chart: {
        height: 200,
        type: 'spline',
        renderTo: 'temp&humid',
        marginBottom: 100
      },
      title: {
        text: 'Temperature and Humidity'
      },
      tooltip: {
        valueDecimals: 2,
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      subtitle: {
        text: ''
      },
      xAxis: {
        categories: day_final //.reverse() to have the min year on the left 
      },
      series: [{
       name: 'Temperature',
        data: chanceOfRain_final,
        color:'#646569' //
      },
      {
        type:'line',
        name:'Humidity',
        data: day_final,
        color:'#c5050c' 
      }]
    });

var chart2=  Highcharts.chart('stacked', {

    credits: {
      enabled: false
    },
    chart: {
      height: 250,
      width: 400,
        type: 'column'
    },
    title: {
        text: "Today's Light and Water Sources"
    },
    xAxis: {
        categories: ['Water', 'Light']
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'Natural',
        data: [7 , 6],
        color:'#c5050c'
    }, {
        name: 'Automatic',
        data: [ 3, 4],
        color: '#646569'
    }]
});


  }); //getJSON method
  //setTimeout(updat, 3000);

});


$(function dat() {
 // console.log("here");
  var url="https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var htmlText='';

$.getJSON(url, function (json) {


});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>

<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="stacked"> </div>

<div id="parentContainer" style="margin-left:400px; width: 200px; margin-top: -20%" >

	<div id="currentSatus"><center><b>Current Status<b><center></div>
	<br>
	<div id="temp" style=" background: #72D923;height: 50px"><font face='verdana'><center>Temperature<center></font> </div>
	<div id="hum" style="background: red; height: 50px"><font face='verdana'><center>Humidity<center></font></div>
	<div id="water" style="background:#72D923; height: 50px "><font face='verdana'><center>Water</center></font></div>
	<div id="ligh" style="background: red; height: 50px"><font face='verdana'><center>Light</center></font></div>
 </div>

<div class=" activ" id="log" style="margin-left: 600px; text-align: center; margin-top: -18.5%"><center>Activity Log</center> </div>

最佳答案

我想我明白了。在编写 html/css 代码时，您可能需要考虑一些编辑器(我最喜欢的编辑器之一是 sublime)。我注意到的是这个答案唯一真正的收获应该是标签在打开时没有关闭。我用 <b> 注意到了它标记和 <center>第二部分中的标签。

$(function updat() {
  var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var humid = [],
    date = [],
    high=[],
    day=[],
    chanceOfRain=[],
    humid_final = [],
    day_final=[],
    high_final=[],
    chanceOfRain_final=[],
    Itemss=[],
    SortedItems=[]
    var htmlText='';

  $.getJSON(url, function (json) {

    $(json['Items']).each(function(i, data) {
      //Store indicator name
      
      // fill the date array
      humid.push(data.humidity);
      // fill the string data array 
      date.push(data.Date);

      high.push(data.high);
      day.push(data.Day);
      chanceOfRain.push(data.chanceOfRain);

    });

   	//unsorted array
    Itemss=$(json['Items']);
    //console.log("ITEMS",Itemss);

    //sorted array- date
     date.sort(function(a,b) { return a - b;});

    // Itemss.sort(function(a,b){return  date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});

     console.log("Sorted Days", date);
    Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
     console.log(" Sorted ITEMS",Itemss);
    ////////

    // query send string that we need to convert into numbers
    for (var i = 0; i < humid.length; i++) {
      if (humid[i] != null) {
        humid_final.push(parseFloat(humid[i]));
        high_final.push(parseFloat(high[i]));
        day_final.push(parseFloat(day[i]));
        chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
      } else {
       humid_final.push(null)
      };
    }

    //sorting the arrays
    day_final.sort(function(a,b) { return a - b;});
   // console.log("Sorted day_final", day_final);

    humid_final.sort(function(a,b) { return a - b;});


    //ACTIVITY LOG
    var h1 = [10, 20, 30, 40,50,60];
    var t1 = [50, 60, 70, 80, 90, 100];
    var activ= document.querySelector('.activ');
    for(var i=0; i<h1.length;i++){
      activ.innerHTML += `<p>Temperature was ${t1[i]} degrees and humidity was ${h1[i]} % `;
    }

    var chart = new Highcharts.chart({

       credits: {
      enabled: false
        },
      chart: {
        height: 200,
        type: 'spline',
        renderTo: 'light',
        marginBottom: 100
      },
      title: {
        text: ' Ambient Light'
      },
      tooltip: {
        valueDecimals: 2,
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      subtitle: {
        text: ''
      },
      xAxis: {
        categories: day_final //.reverse() to have the min year on the left 
      },
      series: [{
        name: 'light level',
        data: high_final, //
        color: '#9b0000' 
      }]
    });


var chart1 = new Highcharts.chart({
       credits: {
        enabled: false
        },
      chart: {
        height: 200,
        type: 'spline',
        renderTo: 'temp&humid',
        marginBottom: 100
      },
      title: {
        text: 'Temperature and Humidity'
      },
      tooltip: {
        valueDecimals: 2,
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      subtitle: {
        text: ''
      },
      xAxis: {
        categories: day_final //.reverse() to have the min year on the left 
      },
      series: [{
       name: 'Temperature',
        data: chanceOfRain_final,
        color:'#646569' //
      },
      {
        type:'line',
        name:'Humidity',
        data: day_final,
        color:'#c5050c' 
      }]
    });

var chart2=  Highcharts.chart('stacked', {

    credits: {
      enabled: false
    },
    chart: {
      height: 250,
      width: 400,
        type: 'column'
    },
    title: {
        text: "Today's Light and Water Sources"
    },
    xAxis: {
        categories: ['Water', 'Light']
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'Natural',
        data: [7 , 6],
        color:'#c5050c'
    }, {
        name: 'Automatic',
        data: [ 3, 4],
        color: '#646569'
    }]
});


  }); //getJSON method
  //setTimeout(updat, 3000);

});


$(function dat() {
 // console.log("here");
  var url="https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var htmlText='';

$.getJSON(url, function (json) {


});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>

<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="stacked"> </div>

<div id="parentContainer" style="margin-left:400px; width: 200px; margin-top: -20%" >

	<div id="currentSatus"><center><b>Current Status</b></center></div>
	<br>
	<div id="temp" style=" background: #72D923;height: 50px "><font face='verdana'><center>Temperature</center></font> </div>
	<div id="hum" style="background: red; height: 50px"><font face='verdana'><center>Humidity</center></font></div>
	<div id="water" style="background:#72D923; height: 50px "><font face='verdana'><center>Water</center></font></div>
	<div id="ligh" style="background: red; height: 50px"><font face='verdana'><center>Light</center></font></div>
 </div>

<div class=" activ" id="log" style="margin-left: 600px; text-align: center; margin-top: -18.5%"><center>Activity Log</center> </div>

关于jquery - 在不增加 div 元素大小的情况下移动文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45944976/

上一篇：html - AngularJS 指令导致页面布局出现问题

下一篇：javascript - 如何使用 transform scale 属性在不改变边框的情况下分解盒子的内容？

相关文章：

javascript - highcharts , 隐藏图表

Javascript "Syntax error"/"Object Expected"/'' style.cssText' 为 null 或不是对象”

javascript - 使用 Javascript/CSS 自定义 View 的带有用户过滤器选项的静态表？

使用悬停+单击图像 Sprite 的 JQuery 导航菜单

jquery - 文本中的全日历去年和明年按钮

javascript - keydown 上的 jQuery 下拉 ajax 搜索是 'one step behind'

javascript - 如何从水平方向设置 html 的 Tab 键顺序？

JQuery 仅适用于 Firefox

html - 在 A4 页面上打印版本并另存为 PDF

css - 求助css，让div默认为页面长度

©2024 IT工具网  联系我们