小编Fri*_*its的帖子

如何在cookie中保存JSON数据？

我的JSON数据看起来像这样

$("#ArticlesHolder").data('15', {name:'testname', nr:'4',price:'400'});
$("#ArticlesHolder").data('25', {name:'name2', nr:'1', price:'100'});
$("#ArticlesHolder").data('37', {name:'name3', nr:'14', price:'60'});

我想做点什么

var dataStore = $.cookie("basket-data", $("#ArticlesHolder").data());

和检索数据我想将其加载到$("#ArticlesHolder")像

$.each($.cookie("basket-data"), function(i,e){
 $("#ArticlesHolder").data(i, e);
});

有没有人知道我是在正确的轨道上还是应该以其他方式完成？简单地说,我如何从cookie中提取和提取json数据？

我们有很多选项可以使用jQuery和JavaScript来获取元素的高度.

但是我们怎样才能使用CSS获得高度？

假设,我有一个动态内容的div - 所以它没有固定的高度:

.dynamic-height {
   color: #000;
   font-size: 12px;
   height: auto;
   text-align: left;
}

<div class='dynamic-height'>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>

我想设置margin-top的.dynamic-height一个值等于(the height of the div - 10px)只使用CSS.

如果我得到高度我可以使用CSS calc()功能.

我怎么做？

我正在使用sass以模块化结构设计我的网站,我愿意以这样的方式组织样式表:我在每个模块级别(而不是组件级别)定义样式表,然后将其导入所有组件以保持标准整个模块的布局.

那么这是一个好方法吗？

如果是,是否有方法将CSS从module.ts文件导出到所有组件.以非常类似的方式,使用服务提供服务providers.这将节省我在所有组件中单独导入相同CSS文件的痛苦.

有人可以向我解释为什么标签限定是一个糟糕的CSS练习？为什么tag.class在自解释元素的情况下是坏的？例如

<section class="carousel-item">

  <header class="header of-carousel">
    <h2 class="heading of-carousel">Services</h2>
  </header>
    …
  <footer class="footer of-carousel">
    …
  </footer>

</section>

为什么它应该比带有上下文修饰符的DRY和简洁代码更好？

<section class="carousel-item">

  <header class="of-carousel">
    <h2 class="of-carousel">Services</h2>
  </header>
    …
  <footer class="of-carousel">
    …
  </footer>

</section>

.of-carousel {
  header.& {…}
  h2.& {…}
  footer.& {…}
}

甚至

section.carousel-item
  header
    h2
  footer

.carousel-item {
  header {…}
      h2 {…}
  footer {…}
}

我看到很多人沉迷于BEM,但我不明白为什么？他们的选择器是如此丑陋,特别是在HTTP-2__时间.

我在Firefox中使用SVG符号和位置时出现意外行为:绝对值与transform:translate();

这似乎只发生在Firefox中,而不是IE或Chrome.我也有理由相信我之前没有遇到这个问题,所以也许是一个新问题/错误？目前使用43.0.4(Windows)并且还在44.0.2(Linux)中进行了测试.

在这个Plunkr中,我希望地图指针,圆形和方形都位于边界框的中央.但是,在Firefox中,地图指针未正确定位.地图指针是SVG符号.

更新:只有当SVG定位为使用svg {}作为CSS选择器时,问题才会出现.如果通过.icon {}选择器设置样式,它将按预期工作.

码:

#svg-sprite{
  position: absolute;
  width: 0;
  height: 0;
}

.rect{
  position: relative;
  width: 400px;
  height: 400px;
  background: #f00;
}

svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  fill: #fff;
  opacity: 0.5;
}

.circle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: #0f0;
  border-radius: 50%;
  opacity: 0.5;
}

.square{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; …

最近,在我正在处理的网站上,我注意到Chrome控制台中出现以下错误.

无法加载资源:net :: ERR_CONNECTION_RESET http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

当我尝试在不同的选项卡中打开它时,bootstrapcdn.com URL工作.它确实减慢了页面加载时间,但它只发生在这个浏览器中,而且只发生在我的PC上.我从另一台PC上检查了Chrome,没有任何变化.

我尝试清除我的cookie,但这不起作用.知道它可能是什么？

我正在创建一个Web应用程序semantic-ui.我正在尝试创建一个具有侧边栏和主要内容区域的布局.起初,我认为使用网格是可行的方法,除了它们会导致一些问题:

1. 列和行之间将有额外的间距/排水沟
2. "移除"排水沟的唯一方法是使用类似的方式设置列颜色<div class="four wide black column">,但这会导致列与其他内容重叠

如此看来,电网不创建页面布局的最佳工具,虽然他们提供的功能,这使得他们对页面布局有用(如定义截面尺寸; four wide column,ten wide column等)

使用Semantic-UI布局Web应用程序的推荐方法是什么,例如简单的侧边栏和主要内容列？

我写过这样的CSS媒体查询 -

@media screen and (max-width: 59.9375em) {
  .left {
   display: none;
  }
}

这适用于除Safari 10.0.4及更低版本之外的所有浏览器.Safari似乎以不同方式处理媒体查询.

其他浏览器似乎将window.innerWidth作为用于触发媒体查询的视口宽度,但safari似乎将document.documentElement.clientWidth作为视口宽度并相应地触发媒体查询.

我可以看到实际断点和预期断点之间的差异为15px.我正在寻找一种跨浏览器的方式来处理这个问题.欢迎提出意见,提前谢谢.

如何设置mediaelement.js以缩小视频以适应小屏幕尺寸,但不能将它们放大到超过实际尺寸？(除了将它包装在一个正确大小的div中之外,如果我找不到更好的解决方案,这将是我会回归的.)

我已经尝试过设置style="max-width: 100%;,这可以在我自己的服务器上使用视频在Firefox中运行,但是在Chrome和Firefox和Chrome中链接到YouTube视频时,视频将按比例放大以填充容器,无论为此设置的值width=""和height=""值如何<video>标签.

我将举例说明我的HTML和输出的第一部分.下列:

<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video>

在Firefox中生成这个(这是我想要的):

<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;">
    <div class="mejs-inner">
        <div class="mejs-mediaelement">
            <video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video>

这在Chrome中(这不是我想要的):

<div id="mep_0" class="mejs-container svg mejs-video" style="width: 864px; height: 648px;">
    <div class="mejs-inner">
        <div class="mejs-mediaelement">
            <video width="864" height="648" style="max-width: 100%; width: 100%; height: 100%;" src="http://example.com/video.mp4"></video>

是否有可接受的方法来实现这一目标？

我需要在一些元素上实现"房间"三维旋转; 实现它transform: translateX(-100%) rotateY(90deg)并使用其相反的过渡.它在Chrome中运行良好,但在Firefox(最高版本为34)中,元素在转换过程中会闪烁.他们可以暂时这样做,已经走了一半,或完全消失.

我注意到的是:如果perspective父级的CSS值高于所讨论元素的计算宽度 - 过渡进展顺利.如果观点真的是罪魁祸首,那么我不理解这种行为的本质; 规范说,如果所有点的 Z轴值低于透视值,则不绘制元素.在过渡期间,至少应该至少部分可见.

应该注意的是,只有rotateY似乎有问题 - 而不是rorateX.

这是代码示例.html:

<div class="cont">
    <div id="bg-club" class="background club"></div>
    <div id="bg-cafe" class="background cafe active"></div>
    <div id="bg-fitness" class="background fitness"></div>
    <div id="bg-resto" class="background resto"></div>
    <div id="bg-lady" class="background lady"></div>
</div>

CSS(为方便起见,删除了前缀规则):

 .cont{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:1;
      overflow:hidden;

      perspective:1000px;
      transform-style:preserve-3d;
 }
 .background.active{
      visibility:visible;
      z-index:1;
 }
 .background{
      position:absolute;
      top:50px;
      right:50px;
      bottom:50px;
      left:50px;
      z-index:10;

      backface-visibility: hidden; 
      transform: translate3d(0, 0, 0);
      transform-style: preserve-3d; 

      visibility:hidden;
      overflow:hidden;

      background-repeat:no-repeat;
      background-position:center center; …