小编meo*_*meo的帖子

我尝试编写一个小插件,以更有机的方式打开模态框,因此我决定为clip-path属性设置动画.

现在这段代码仅适用于chrome:http://codepen.io/meodai/pen/GgGzYo？ edit = 011

看起来firefox不支持 polygon() clip-path属性.Safari和Mobile Safari也很难与之抗争.

有没有一种类似的简单方法可以在Firefox,Safari和Mobile Safari中使用它？知道我怎么能解决这个问题吗？

这是一个工作示例:

var $ov = $('.overlay');

$(document).on('click touchstart', '.inner', function(){
  var coords, coordArray, coordsString;

  coords = this.getBoundingClientRect();

  coordArray = [
    Math.floor(parseInt(coords.left)) + 'px ' + Math.floor(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil(parseInt(coords.top)) + 'px',
    Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height) )) + 'px',
    Math.ceil(parseInt(coords.left)) + 'px ' + Math.floor((parseInt(coords.top) + parseInt(coords.height) )) + 'px'
  ];


  coordsString = 'polygon(' …

我必须管理一个主要显示视频的网站.该网站将有一个带有<video>标签的移动版本,因此该视频也可以在他们的浏览器中在ipod,iphone,ipad和其他移动设备上播放.

我现在的问题是:哪种格式/编解码器选择转换视频,以获得最佳工作流程？

完美的解决方案是找到可以在flash和<video>播放器中播放的格式,这样我的客户端就不会将视频导出到多个文件中.

对于Flash,我会使用带有h264编解码器的.flv文件.但是那个格式/编解码器不能用<video>播放,不是吗？

如果没有,是否有可以同时适用的格式/编解码器组合？

如果不是,我该怎么办？有一个用于Web版本的.flv/h264文件,以及一个用于移动版本的.ogg/webM文件吗？

提前感谢您的宝贵建议!

对于HTML5网络存储和应用程序缓存,我很慢但肯定会疯狂.

这是我的例子:http: //daviddarx.com/stuffs/work/custom/54/

缓存清单在http://manifest-validator.com/上有效并经过测试:http://daviddarx.com/stuffs/work/custom/54/cache.manifest

由于它不起作用,我采用了一个非常简单的工作示例,然后尝试逐步添加我的部分代码和数据,添加少量,然后我再次测试它.

当我从简单的例子开始,一切都很好.如果我将我的iPhone置于平面模式,我在启动网站时会收到一条离线消息,但随后我可以查看结果.

当我添加一些我的资产(页面中的HTML代码,1-2个图像等)时,它仍然有效.

如果我然后添加更多的资源(例如,css和所有关联的图像),问题就开始了...如果我进入平面模式然后打开页面,我会得到正常的消息(我得到的是正确的消息)工作),然后另一条消息,要求我重试或取消.如果我取消,该网站只是不显示和应用程序关闭,如果我按下重试按钮,我会一次又一次得到相同的消息....

我真的不知道该怎么做.每次我都会在测试之前验证我的缓存清单,每次我更改URL以确保所有内容都重置.

这是否与缓存文件的重量有关？是否有大小或文件的限制？

另一句话:在测试之前,我总是在计算机的控制台中检查我的页面,以确保它不是一个明显的问题.实际上,每次尝试都会在桌面浏览器上获得成功,并加载所有资产.

你知道那可能来自哪里吗？

编辑:我再次做了很多测试,仍然无法让它工作.

以下是情况的摘要:

1. 这是我正在测试的版本:http://daviddarx.com/stuffs/work/custom/61/

2.这是我的缓存清单:http://daviddarx.com/stuffs/work/custom/61/manifest.appcache 根据http://manifest-validator.com/完全有效.

3.当我在chrome(桌面)上加载页面并在控制台显示时,一切正常.所有元素都被缓存,如果我刷新,缓存就可以了.

4.当我在桌面chrome上加载页面并查看网络面板时,我可以看到所有内容都是从缓存中加载的.没有丢失的文件.

5.当我从任何互联网断开我的台式电脑时,它正在工作!如果我在没有任何连接的情况下使用chrome浏览网站,我可以显示页面,一切都很好,我希望它可以在我的Iphone上.

6.当我第一次使用我的iPhone并访问网站时,一切正常.移动safari控制台中没有任何错误.如果我打开"平面模式"并返回safari,我可以显示我所在的页面(我之前无法实现).但是,如果我尝试更改页面,它只是警告我"无法打开页面",然后取消请求.我只能留在当前页面上.

在我的台式电脑上,一切都很完美,但它只是在我的Iphone上工作.

你有什么主意吗？你能在桌面和iPhone浏览器上试试吗？

使用this或声明变量之间有什么区别var？

var foo = 'bar'

要么

this.foo = 'bar'

你this何时使用var？何时使用？

编辑:有一个简单的问题作出决定时,我可以问我自己,如果我想使用var或this

我有一个流体网格(高度和宽度).LI总是矩形的,并使它们适应屏幕尺寸.

现在我需要填写列表,所以它们都具有相同的高度.如果所有列都具有一个LI元素,则这将很容易.但是有双倍大小的列,其中一些可以包含大尺寸的LI.在某些情况下,在列的中间甚至有空的空间,因为有一个很小的Li,一个小的,然后又是一个大的.

在某些内容页面上,所有li都在一列中.

在每种情况下,li都是向左浮动的.我已经制作了一些图片来解释这个问题:

首先,我想计算孩子的数量并进行比较.但是当所有LI都在一个列中或者在列的中间缺少LI时,它变得复杂.

这是我尝试过的:

var longest = 0

$("ul.grid-col").each(function(){
    var liCount, $that = $(this);
    liCount = $that.find("> li").length;

    if ($that.is(".double")){
       if( $that.find("li.big").length ){
          var bigCount = $that.find("li.big").length
          liCount = (liCount - bigCount) + (bigCount * 4) //because one big has the size of 4 small one 
       }
     liCount = liCount / 2

    }

    if ( longest < liCount ){
       longest = liCount
    }
})

现在我知道有多少李需要填充空白空间,它很容易填满它们.但我怎么知道李的中间是否有空的空间？你会如何处理单列的特殊情况？

我仍然在CSS中使用EM来指定模板中元素的大小.

今天,大多数浏览器都能够正确地扩展PX中给出大小的网站.

我使用EM的理由是:如果一个人有视力障碍并且在浏览器中改变了基本字体大小,那么设计仍然适合.

我问,因为对我而言,使用EM的错误仍然存​​在.当我指定一个不同的字体大小然后指定一个元素的基本字体大小时,我经常忘记调整我的EM计算的子元素.

现在我有两个问题:

1. 视力障碍人士如何配置浏览器(他们使用浏览器缩放还是更改基本字体大小)？

2. 现在使用EM作为元素大小是否仍然有意义？

每当我创建一个HTML5页面时,我都会在哪里放置主页面标题.每个人都接缝处理这个问题......

情况如下:

假设我有一个名为"Meo's frontend adventures"的网站.在这个网站上有一个名为"Abracadabra Semantics"的页面,其副标题并不重要,例如"lorem ipsum delor"

网站顶部还有一个导航,一个页脚和一些内容.

在HTML 4.0中我会这样做:

- div.header
   + div.nav
   + a.siteName:  "Meo's frontend adventures"
- div.contents
   + h1.pageTitle: "Abracadabra Semantics"
   + strong.lead: "lorem ipsum delor"
   - div.cn
     + h2
     + p
     + etc..
+ div.footer 
     +ul.footerNav

现在,在HTML5中基本上每个结构元素都有一个H1.我应该在哪里放置实际页面的标题？

我会这样:

- header
   + h1.siteName:  "Meo's frontend adventures"
   + nav
- section.contents
   - header
      -hgroup
        + h1: "Abracadabra Semantics"
        + h2: "lorem ipsum delor"
   - article
     - header
       +h1.ArcticleTitle
     + p
     + etc..
- footer …

以clear: both我的内容我用这个:

CSS:

.clr {
  clear: both;
  height: 0; /* i have tried 0.001em to */
  line-height: .001em;
  overflow: hidden;
}

HTML:

<div class="clr">&nbsp;</div>

它适用于每个导航仪.但是在IE 7和8中,div仍然具有几个像素的高度.我怎么能避免这个？

我正在编写一个CSS3 animate插件,它使用CSS3 Transitions动画元素,而jQuery native则无法使用它 .animate()

现在一切都很好,但我想整合.stop()到插件中.因此用户能够像在原生jQuery中一样使用我的插件.

到目前为止这是我的代码 http://jsfiddle.net/meo/r4Ppw/

知道如何在使用jQuery时调用插件的stop方法.stop()吗？(并且当然传递其论点)

我试图阅读jQuery源代码,了解它是如何工作的,但它对我来说很高尚,我需要一些解释.

我得到一些HTML作为ajax响应,我需要得到正文内容.所以我做了这个正则表达式:

/(<body>|<\/body>)/ig

在所有浏览器中运行良好,但出于某种原因,当我使用split时,IE给了我另一个数组:

data.split(/(<body>|<\/body>)/ig)

在所有普通浏览器中,正文的内容split(/(<body>|<\/body>)/ig)[2]只是在其中split(/(<body>|<\/body>)/ig)[1].(在IE7和8中测试)

为什么是这样？我怎么能修改它,以便在所有浏览器中获得相同的数组？

编辑只是为了澄清.我alrady有tobyodavies提到的解决方案.我想理解,为什么它表现不同.

这是响应中的HTML :(数据中的字符串)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de"  lang="de" dir="ltr">
<head>
blablabla...
</head>
<body>
<div class="iframe">
   <div id="block-menu-menu-primary-links-user" class="block-menu">
 <h3>Primary Links - User</h3>  <div class="content"><ul class="menu"><li class="leaf first"><a target="content" href="#someurl" title="">Login</a></li>
<li class="leaf last"><a target="content" href="#someurl" title="">Register</a></li>
</ul></div>
</div>
</div>
</body>
</html>

PS:我知道用正则表达式解析HTML很糟糕,但它不是我的代码,我只需要修复它.