小编zer*_*0ne的帖子

HTML和JS:默认情况下如何在移动设备(iOS)上使用小视口打开带有视口的网站？

默认在我的应用程序中我有两个分辨率(宽度):

1024px+ & 520px

我有这样的视口:

<meta name="viewport" content="width=520, initial-scale=0.5" id="vwPrt">
<script>
  window.onload = function () {
    if(screen.width > 521) {
        var vpEl = document.getElementById('vwPrt');
        vpEl.setAttribute('content','width=520, initial-scale=1');
    }
    if(screen.width > 970) {
        var vpEl = document.getElementById('vwPrt');
        vpEl.setAttribute('content','width=1024, initial-scale=1');
    }
  }
</script>

Run Code Online (Sandbox Code Playgroud)

和css:

...

@media all and (min-width:0px) and (max-width:520px){...}
...

Run Code Online (Sandbox Code Playgroud)

有时在iOS设备上,我首先看到css样式的大分辨率(1024px +),并且只有在缩放或重新加载页面之后,才能获得适用于iPad和iPhone的520px(在纵向模式下).

我究竟做错了什么？

在桌面模式下,如何在不使用闪烁屏幕的情况下直接检测宽度并直接应用？

html javascript css jquery ios

bra*_*r19

2016 02-22

14
推荐指数

2
解决办法

536
查看次数

自定义选择功能与复制到剪贴板纯JS

当前代码附加一个按钮,可以快速选择<pre>标记中的某些代码.我想要添加的是能够将该内容复制到剪贴板并将按钮文本更改为"复制".

如何通过修改下面的当前工作代码来实现它？我不介意使用clipboard.js,jQuery位或者只是原生的JS支持,因为它是从Chrome 43开始引入的.我只是不知道如何继续添加我需要的东西.

function selectPre(e) {
    if (window.getSelection) {
        var s = window.getSelection();
        if (s.setBaseAndExtent) {
            s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
        }
        else {
            var r = document.createRange();
            r.setStart(e.firstChild, 0);
            r.setEnd(e.lastChild, e.lastChild.textContent.length);
            s.removeAllRanges();
            s.addRange(r);
        }
    }
    else if (document.getSelection) {
        var s = document.getSelection();
        var r = document.createRange();
        r.selectNodeContents(e);
        s.removeAllRanges();
        s.addRange(r);
    }
    else if (document.selection) {
        var r = document.body.createTextRange();
        r.moveToElementText(e);
        r.select();
    }
}
var diff = document.getElementById('diff_table').getElementsByTagName('tr');
var difflen = diff.length;
for(i=0; i<difflen; i++) {
    var …

Run Code Online (Sandbox Code Playgroud)

javascript jquery html5 clipboard.js

use*_*846

2015 12-27

10
推荐指数

1
解决办法

802
查看次数

如何使用jQuery更改含有Font-Awesome内容的占位符？

我想改变尝试attr()使用它的占位符属性:

$(this).attr("placeholder", "&#xf0a4; Mandatory field");

Run Code Online (Sandbox Code Playgroud)

但结果不是Font-Awesome图标,它看起来像这样:

"&#xf0a4; Mandatory field"

Run Code Online (Sandbox Code Playgroud)

不过,如果我放

<input type="text" class="mandatory_field form-control" id="affiliation" placeholder="&#xf0a4; Mandatory field"/>

Run Code Online (Sandbox Code Playgroud)

用CSS

.mandatory_field {  
   font-family: FontAwesome,"Helvetica Neue",Helvetica,Arial,sans-serif; 
}

Run Code Online (Sandbox Code Playgroud)

它有效,但我需要知道如何使用jQuery动态获取这些结果.

提前致谢.

javascript css jquery font-awesome

bLu*_*dDy

2017 05-26

6
推荐指数

1
解决办法

866
查看次数

桌身不如桌子宽

我有一个表，其中第一列保持固定。我希望表格可以垂直滚动。我想我已经很接近了，下面的内容几乎达到了我想要的效果，唯一的问题是表行没有列那么宽，我不确定为什么？

.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background-color: #ad6c80;
  color: #373737;
}

table {
  height: 300px;
}

tbody {
  overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
}

Run Code Online (Sandbox Code Playgroud)

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
    <table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
      <thead>
        <tr>
          <th scope='col' data-sortable="true">Column 1</th>
          <th scope='col'>Column 2</th>
          <th scope='col'>Column 3</th>
          <th scope='col'>Column 4</th>
          <th scope='col'>Column 5</th>
          <th scope='col'>Column 6</th>
          <th scope='col'>Column 7</th>
          <th scope='col'>Column 8</th>
          <th …

Run Code Online (Sandbox Code Playgroud)

html javascript css

mHe*_*pMe

2022 11-14

6
推荐指数

1
解决办法

554
查看次数

如何从加载了 AJAX 的文档中附加 HTML？

我正在尝试将 .html 文件的内容附加到我的主页的正文中。基本上，我正在尝试制作一个可重用的 html 块，我可以使用简单的 JavaScript 函数将其加载到任何页面中。

这是我的导航栏的内容，我想重用的内容：

<div id = "navbar">
  <div class = "Tab">
    <h1>Home</h1>
  </div>
  <div class = "Tab">
    <h1>Contact</h1>
  </div
</div>

Run Code Online (Sandbox Code Playgroud)

那是在一个名为 navbar.html 的文件中

现在在我的主 index.html 中，我想通过执行以下操作来导入它：

<head>
  <script src = "importHTML.js" type = "text/javascript"></script>
</head>

<body>
  <script type = "text/javascript">
    importHTML("navbar.html");
  </script>
</body>

Run Code Online (Sandbox Code Playgroud)

这应该负责在 navbar.html 中导入 html。

importHTML.js 的内容是这样的：

function importHTML(url_) {
  var request = new XMLHttpRequest();

  request.addEventListener("load", function(event_) {
    //This is the problem line of code
    //How do I get the contents of my …

Run Code Online (Sandbox Code Playgroud)

html javascript ajax

Fra*_*ank

2016 04-06

4
推荐指数

1
解决办法

8749
查看次数

在Google饼图甜甜圈中间添加标签

我正在使用Google图表库创建甜甜圈图。我想知道是否可以在甜甜圈图的中间添加标签，如下所示：

我检查了google的选项说明，但找不到任何内容。这是我生成图表的方式。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load("visualization", "1", {packages:["corechart"]});
    google.charts.setOnLoadCallback(init);    
    function drawChart(myID,titler,known,unknown) {
        var data = google.visualization.arrayToDataTable([
          ['Knowledge', 'Out of 10'],
          ['Known',     known],
          ['Unknown',      unknown]
        ]);
        var options = {
          title: titler,
          pieHole: 0.7,
          colors: ['#000000', '#cdcdcd'],
          pieSliceText: 'none',
          legend:{position: 'none'},
          tooltip:{text:'percentage'},
          tooltip:{textStyle:{fontSize: 12}}
        };

        var chart = new google.visualization.PieChart(document.getElementById(myID));
        chart.draw(data, options);      
      } 
      function init(){
          drawChart('donutchart1','VB.NET',8,2);
          drawChart('donutchart2','Javascript',4,6);
      }
</script>

Run Code Online (Sandbox Code Playgroud)

还有我的HTML以设置输出样式：

    <table class="Charts">
        <tr>
            <td><div id="donutchart1" style="width: 256px; height: 256px;"></div></td>
            <td><div id="donutchart2" style="width: 256px; height: 256px;"></div></td>
        </tr>
    </table>

Run Code Online (Sandbox Code Playgroud)

javascript charts google-visualization

Cri*_*Med

2018 01-17

4
推荐指数

1
解决办法

3747
查看次数

Google 可视化 - vAxis maxValue 属性不起作用

出于一个我完全无法理解的原因，我无法获得工作的maxValue属性vAxis：

var options = { vAxis: { maxValue: .85 } }

这vAxis是一个范围为 0 到 100% 的百分比，我想通过将最大值设置为 85% 来节省一些空间。我认为这与这个项目在 7DataSources和 4之间切换有关，ChartTypes因为我在制作单个图表时从未遇到过这个问题。

以下代码段是简化案例，具有可能与该问题相关的最少功能。感谢您的时间和精力。

片段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>G04B32</title>
  <link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    *,
    *:before,
    *:after {
      font-style: normal !important;
    }
    body {
      position: relative;
    }
    form {
      background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png);
      background-color: #333;
    }
    #ii {
      margin-top: 80px
    }
    .panel {
      display: flex;
      flex-wrap: wrap; …

Run Code Online (Sandbox Code Playgroud)

javascript jquery charts options google-visualization

zer*_*0ne

2020 06-20

3
推荐指数

1
解决办法

1130
查看次数

如何在Angualar的jqLite元素对象中按id查找元素

我正在使用这个:

$vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

然后在以后的时间点我想找到#pselectID元素.我$vehicleTypeDropdown看起来像这是jqLite对象: -

<select class="vehicleTypeDropdown" id="vehicleType">
<option id="#pselect" value="">Please Select</option>
<option ng-repeat="types in selectedType" value="Vt3" class="ng-scope ng-binding">vt3</option>
<option ng-repeat="types in selectedType" value="Vt4" class="ng-scope ng-binding">vt4</option>
</select>

Run Code Online (Sandbox Code Playgroud)

有两个问题 -

它是在jqLite文档中编写的,该.find()方法只查找标记,而不是类或id.那我怎么得到

$vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

作为jqLite内容的对象？
我怎样才能找到该选项#pselect？我想手动删除它,请记住它可以在选项中以任何顺序.

javascript angularjs jqlite

nav*_*ngh

2016 01-24

2
推荐指数

1
解决办法

5776
查看次数

五星评级组件:如何摆脱所有JavaScript代码并仅用CSS替换它？

我建立了一个五星级的简单组件(用于排名).该组件工作正常.我使用JavaScript来保存结果(当用户点击星形时(这里没有显示)).

我遇到的问题是我没有找到一种正确的方法来模拟mouseover事件(当你将鼠标移过星星并点击之前).所以我用JavaScript做到了.

有没有一种方法只使用CSS来实现这一点(而不是所有那些JS线)？

我正在分享我已经做过的事情.

document.getElementById('star1').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
});
document.getElementById('star1').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
});

document.getElementById('star2').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
	document.getElementById('star1').classList.remove("fa-star-o");
	document.getElementById('star1').classList.add("fa-star");
});
document.getElementById('star2').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
	document.getElementById('star1').classList.remove("fa-star");
	document.getElementById('star1').classList.add("fa-star-o");
});

document.getElementById('star3').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
	document.getElementById('star1').classList.remove("fa-star-o");
	document.getElementById('star1').classList.add("fa-star");
	document.getElementById('star2').classList.remove("fa-star-o");
	document.getElementById('star2').classList.add("fa-star");
});
document.getElementById('star3').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
	document.getElementById('star1').classList.remove("fa-star");
	document.getElementById('star1').classList.add("fa-star-o");
	document.getElementById('star2').classList.remove("fa-star");
	document.getElementById('star2').classList.add("fa-star-o");
});

document.getElementById('star4').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
	document.getElementById('star1').classList.remove("fa-star-o");
	document.getElementById('star1').classList.add("fa-star");
	document.getElementById('star2').classList.remove("fa-star-o");
	document.getElementById('star2').classList.add("fa-star");
	document.getElementById('star3').classList.remove("fa-star-o");
	document.getElementById('star3').classList.add("fa-star");
});
document.getElementById('star4').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
	document.getElementById('star1').classList.remove("fa-star");
	document.getElementById('star1').classList.add("fa-star-o");
	document.getElementById('star2').classList.remove("fa-star");
	document.getElementById('star2').classList.add("fa-star-o");
	document.getElementById('star3').classList.remove("fa-star");
	document.getElementById('star3').classList.add("fa-star-o");
});

document.getElementById('star5').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
	document.getElementById('star1').classList.remove("fa-star-o");
	document.getElementById('star1').classList.add("fa-star"); …

Run Code Online (Sandbox Code Playgroud)

css font-awesome

Ala*_*ALI

2017 07-08

2
推荐指数

1
解决办法

274
查看次数

删除HTML表格中的外边框

我正在用HTML开发报告。那里我有一张桌子。在每个TD中，我都有另一个表。我想将td中的每个表分开。因此，我启用了主表的边框。但是很少有内部表需要显示单元格边框。但是我不希望显示该特定内部表的外部边界。

例如

<table ID="main" >
    <tr>
        <td>
            <table ID="INTER1">
                <tr>
                    <td>Table1 without internal border</td>
                <tr>
            </table>
        </td>
        <td>
            <table ID="INTER2">
                <tr>
                    <td>Table with internal border</td>
                <tr>
            </table>
        </td>
    </tr>
<table>

Run Code Online (Sandbox Code Playgroud)

我想使用CSS类来做到这一点。我已经用谷歌搜索了，但是我找到了适用于所有标签的解决方案，但这意味着它将删除所有表格的外边界。

我可以为上述问题找到解决方案吗？

html css

Kas*_*ash

2016 02-23

1
推荐指数

1
解决办法

7372
查看次数

如何使用 Flexbox 将项目居中？

我想用 Flexbox 将代码中的某些内容居中。它适用于所有其他元素，只有这里似乎出了问题。有人有想法吗？

.answer {
  text-shadow: 0 0 2px gr;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 20px;
  border: 5px solid black;
  border-radius: 5px;
  width: 50%;
}

Run Code Online (Sandbox Code Playgroud)

<section class="answer">
  <p>Answer</p>
</section>

Run Code Online (Sandbox Code Playgroud)

这就是它在我的实时服务器中显示的方式

html css flexbox

mot*_*ric

2022 08-30

-1
推荐指数

1
解决办法

134
查看次数

为什么`a`在下面的函数中未定义？

 a = 10;

function abc() {
 console.log(" a is " + a);
var  a =5;
console.log("after a is " + a);
}

abc();

Run Code Online (Sandbox Code Playgroud)

在上面的代码中,我的第一个console.log显示a为undefined,而第二个console.log显示a为5 的结果.

我仍然试图理解为什么我的第一个控制台显示a为未定义.我已经将变量定义a为全局变量.

javascript

dip*_*dip

2016 01-04

-4
推荐指数

1
解决办法

92
查看次数

标签统计

javascript ×9

css ×6

html ×5

jquery ×4

charts ×2

font-awesome ×2

google-visualization ×2

ajax ×1

angularjs ×1

clipboard.js ×1

flexbox ×1

html5 ×1

ios ×1

jqlite ×1

options ×1

片段

标签 统计

小编zer_0ne的帖子

标签统计