小编sco*_*ord的帖子

我下载了bootstrap 3.0,无法让glyphicons工作.我收到某种"E003"错误.任何想法为什么会这样？我在本地和网上尝试过,我仍然遇到同样的问题.

这是一个两部分问题:

1. 当您不知道模态的确切高度时,如何将模态垂直放置在中心？

2. 是否有可能让模态居中并且在模态体中有溢出:auto,但仅当模态超过屏幕高度时？

我试过用这个:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

当内容比垂直屏幕尺寸大得多时,这给了我所需的结果,但对于小模态内容,它几乎无法使用.

我一直试图让这项工作好几天,没有运气,所以我想我会分享信息,也许有人想出一个解决方案.

我想在软键盘启动时获得确切的视口大小.我目前在标题上使用以下代码,以便网站响应:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

我意识到当软键盘出现时,它使用设备高度作为视口高度并向上推动站点的其余部分 - 这使我认为它从width = device-width选项获得它的高度.

启动软键盘后使用以下代码:

setTimeout(function() {  
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'height=auto');
}, 300)

然后使用jquery获取高度在Android上显示CORRECT结果 - 也就是可见的视口大小,没有虚拟键盘,但在iOS上没有.我得到一个随机数,我假设源于其余的元标记不存在,所以我得到了网站的放大版本以及75或100之类的数字(在iphone 4s上)

我也尝试在键盘上升后创建一个固定元素,使其使用top:0的视口高度; 和底部:0; 属性,但我仍然得到原始的高度.

更接近这一点的是将视口元标记高度设置为固定值,可以通过jquery获取$(window).height(),这意味着元标记在启动键盘后实际上有所不同,但是对于固定的没有真正的价值高度.

我已经看到很多关于此的主题,但没有一个解决方案.有解决方案吗？

我决定为我的一个项目切换到svg符号 - 但需要它们才能响应.主要的想法是不要有多个http请求,所以我想将所有SVG合并到一个SVG中,定义符号并按如下方式使用它们:

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
    <use xlink:href="#mys"></use>
  <svg>
</div>

这是一个jsfiddle,检查IE中的不同行为(我检查了11但是读了9也有多个问题):http: //jsfiddle.net/ws472q71/

对于我的生活,我无法让它正常工作.上面的代码在Firefox和Chrome中正常运行,但在IE中失败.我读到了有关IE问题的内容,但我找不到任何可行的内容.

我究竟做错了什么？

是否有任何其他类似的解决方案可以将SVG合并到一个文件中并将它们用作响应式图像？

谢谢!

我想知道你们中是否有人有我要求准备的东西,以免我摆脱困境.我正在寻找的是一个下拉菜单,根据它在屏幕上的位置自动添加dropup类 - 当用户滚动或调整窗口大小时也会自动更改.

我正在寻找的内容已经在bootstrap-select插件中实现,但插件太"重"而无法使用.

好吧,这将是艰难的...希望大师们提出一个解决方案!

这很难解释,但是这里......

我有两个要素:

<style>
#elem1 {
position:absolute;
left:-1400px;
z-index:1000;
width:100%;
}
.anim {
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.overr {
  transform:translate(1400px,0);
  -ms-transform:translate(1400px,0); 
  -webkit-transform:translate(1400px,0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}  
</style>
<script>
$('#btn a').click(function(){
 currentPos = $(window).scrollTop();
 $('#elem1).toggleClass('overr');
 $('#elem1).attr('style', 'top:' + currentPos + 'px;');

 setTimeout(function() {
  $('#elem2').toggle(0);
  $('#elem1').attr('style', 'top:0');
  $(window).scrollTop( 0 );
  }, 500)
});
</script>

<div id="elem1" class="anim">content here</div>
<div id="elem2">content 2 here></div>

我想在这里实现的是:元素2根本没有样式,只是一个简单的元素.单击按钮,获取#elem2位置,将#elem1从左侧带入抽屉,使其顶部位于屏幕的当前位置,然后隐藏#elem2,#elem1返回顶部,屏幕向上滚动.

结果是,我在同一页面上,在底部加载了一个完全不同的内容,我可以滚动而不会过度滚动(这在iPhone上需要很多 …

过去几天我一直在努力优化D3地图的性能,特别是在移动设备上.我正在使用SVG变换进行缩放和平移,但是进行了以下观察:过度杀伤来自用于伪造国家之间间隔的路径笔划.

我上传了一对样本地图进行比较:

http://www.nicksotiriadis.gr/d3/d3-map-1.html

http://www.nicksotiriadis.gr/d3/d3-map-2.html

两张地图之间的唯一区别是沿着乡村小路的笔划路径,而且桌面设备上的性能差异甚至可以显着 - 但在移动设备上则更为明显.删除路径笔划使移动性能变得轻而易举.

我尝试了各种svg笔触形状渲染选项而没有显着的结果.

现在回答这个问题.有没有办法从每个国家删除一个薄边框来伪造国家之间的间距而不是使用中风？

如果其他人有不同的建议,我很乐意听到它!

更新:附上说明照片.

我得到的是这个.红色箭头指向国家关节.当将与背景颜色相同的笔划添加到乡村路径时(此处以深灰色显示),它会产生各个国家/地区被隔离的感觉 - 但这会在移动设备上造成严重的性能损失.我正在寻找的是以某种方式重新塑造国家的路径,使它们的边界线是蓝色箭头指向的地方,但没有中风.

更新2:人们似乎无法理解我在寻找什么,所以我正在更新这个以使问题更清楚.

我们假设原始国家路径显示在此图像的左侧.我正在寻找的是一种方式,我可以以某种方式"收缩"内部路径,以便新创建的路径显示为红色,在它们之间留下足够的空间,以"模仿"它们之间的笔划.

这样做不会有额外的笔画层,因此只使用路径而不是路径+笔画来获得性能.

更新2:再次问好,我似乎找到了解决问题的半解决方案.我设法将topojson提取到shapefile,按照我想要的方式编辑shapefile(使用名为OpenJump的程序),但转换会带走我需要的所有topojson属性 - id,国家名称,所以我无法转换回原创topojson.

有没有人有什么建议？

这次我试图创建一个带有可切换系列的堆叠条 - 基于Mike Bostock的例子(再次感谢Mike!)我已经成功地使它具有响应性和可缩放性,通过传奇的可切换系列是剩下的最后一件事.

我创建了图例项目,并使用键应用了正确的颜色:

var legendItem = d3.select(".legend")
  .selectAll("li")
  .data(keys)
  .enter()
  .append("li")
  .on('click', function(d) {
    keys.forEach(function(c) {
      if (c != d) tKeys.push(c)
    });
    fKeys = tKeys;
    tKeys = [];
    redraw();
  });

legendItem
  .append("span")
  .attr("class", "color-square")
  .style("color", function(d) {
    return colorScale5(d);
  });

legendItem
  .append("span")
  .text(function(d) {
    return (d)
  });

根据结构,为了创建可切换的项目,我得出的结论是,我必须能够从键和数据集切换它 - 或者还有另一种方法吗？我已设法从键中删除特定键,但不是从数据集中删除,我不知道如何正确映射它.

第二个问题是我无法找到切换密钥的方法,只是将其删除即可.这是原始数据集:

var data = [{
  "country": "Greece",
  "Vodafone": 57,
  "Wind": 12,
  "Cosmote": 20
}, {
  "country": "Italy",
  "Vodafone": 40,
  "Wind": 24,
  "Cosmote": 35
}, {
  "country": "France",
  "Vodafone": …

..在这个项目中,我会在某些时候烧掉我的大脑.10个小时后仍然没有任何关于此.

在浮动元素中,Android股票浏览器(目前在s3 mini,android 4.1.2上测试)没有任何平滑性.

所以,我在这里阅读这篇文章: Android版Chrome浏览器不再支持-webkit-overflow-scrolling？还有其他选择吗？

...文章说你必须在overflown元素中使用z-index:0才能在Android设备上启用"快速滚动"即原生加速滚动.

按照上面的说法,并添加translateZ:(0)和-webkit-translateZ:(0)(这花了我几个小时才实现!)我已经设法为Chrome进行原生滚动,但对于我的生活可以'让它在Android浏览器中运行.

到目前为止,Android股票浏览器已经给我带来了一百万个问题,而且它无法阻止.任何帮助表示赞赏!我打算睡觉,希望我得到一些......:/