- 博客(90)
- 收藏
- 关注
RSS订阅原创 Javascript waterfall layout (pinterest) 瀑布流布局
Here is a summary of how to make a waterfall photo gallery like pinterestReference: http://www.impony.com/?p=516First: If we turn javascript off, all images will be float:left and position:sta
2014-07-07 21:16:23
274
原创 vim 小计
vim 小计现在经常要用到vim，感觉它和一般的编辑器很不同，的确是非常难却又非常强大的东西，我之前掌握的皮毛显然是不能再提高生产力了，想着如果能学好应该是收益颇丰，现在记下我这周学的东西：Navigate:之前一直只知道jkhl，0^$，ctrl+F, ctrl+B，现在知道w e b 和H M L ，方便多了。还有%来查看括号，对编程很有帮助。Insert:
2014-07-07 21:14:26
275
原创 vim设置新文件扩展
vim - Set filetype for a new file extensionI thought this would be quite difficult, but it turned out to be simple, you just need one line in your .vimrcau BufNewFile,BufRead *.new_file_exte
2014-07-07 21:13:21
201
原创 Understanding Safari Reader
Interesting enough to find out the Reader function in Safari is actually Javascript and there are many interesting stuff from the 2000 line code:* 5 main parts in the file:* 1. define const* 2
2014-07-07 21:11:47
335
原创 如何获取中文输入/拼音
之所以要了解这个问题是因为在autocomplete中我们希望提前捕获用户输入的拼音，这样的话就可以尽早提供常用选项，从而让用户尽量少的输入，尽量快的找到对应选项。首先想到的就是keyup, keydown, keypress, input事件，看看哪个事件可以在用户输入拼音的时候就捕获。在网上搜了一下，最终解决方案是：捕获keyup事件参考：使用中文输入法时对键盘事件
2014-07-07 21:10:16
456
原创 vim中显示git grep内容
show git grep results in vimIf you want to show a git grep results into vim tabs, here is how to do so://-p to open tabs, -O to open in split windows, -n No swap file, use memory only, $ or
2014-07-07 21:08:36
149
原创 在vim中显示git commit的文件
show git show in Vim//show files for a commit in vim tabsvim -pn $(git show --pretty="format:" --name-only SHAxxxx )
2014-07-07 21:08:28
548
原创 谷歌地图 如何获得一组位置的中心和最佳zoom level
you can use google maps api: bounds to group points togetherexample: http://jsfiddle.net/john_s/BHHs8/6/
2014-07-06 21:10:49
784
原创 how to add borders for a google map marker 谷歌地图 自定义图钉
If you are not satisfied with default Google map Marker (Default google marker can only be a icon, image or shape), for example adding a border, then you should use richmarker!http://google-maps
2014-07-06 21:06:36
450
原创 jquery trigger函数和triggerHandler函数的对比
一句话的区别就是：trigger will bubbling jQuery events (not default DOM events) and triggerHnadler will not do that!
2014-07-06 21:05:06
290
原创 Google map Marker cluster 谷歌地图图标聚合
Have you wonder how do some map app provide functions to cluster icons/markers?Here is one solution:http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.2/docs
2014-07-06 21:02:08
361
原创 CSS3 3D transform创建立方体
首先建立html结构 1 2 3 4 5 6 然后定义css，关键是透视和style.container { width: 200px; height: 200px; position: relative; perspective: 1000px;}#cube { width: 100%;
2012-06-26 04:22:30
1042
原创 HTML5 web worker简介
HTML5 web worker就像在java中新建一个thread一样，创建一个独立的环境运行计算量比较大的程序，于目前来说还是没有太大的用武之地，但是估计以后可能用途比较大。基本的代码很简单:var worker = new Worker('doWork.js');worker.addEventListener('message', function(e) { console.
2012-06-25 18:05:58
572
原创 font-face小抄
font-face已经有很多浏览器支持了，这里简单介绍一下如何使用：1. 使用工具定义你想要的图片和编码：use a tool (http://keyamoon.com/icomoon/app/) to create font file: select a image and a utf8 code for it2. 定义font-face in css@font-fa
2012-06-25 17:53:50
343
原创 firefox bookmarklet小细节
如果你要在firefox bookmarklet中给元素赋值，记住要把程序包封在这里面： javascript:(function(){ var mycode = 1;})();不然的话他们是不会被执行的。
2012-06-25 17:48:29
379
原创 lightbox在IE6中的bug
lightbox或者叫modal window是比较常用的UI，在IE6中我们会通常遇到这样的bug：select元素不会隐藏在overley中，相反它会显示出来，一般的做法是在overlay中添加iframe，但是如果你给overlay添加了eventhandler，比如点击overlay关闭lightbox或者用户按esc键关闭lightbox，这时iframe会覆盖在overlay之上，所有
2012-06-25 17:45:14
532
原创 gmail附件上传javascript研究
gmail附件上传已经摆脱超级传统的文件上传方式：用户既不知道进度，也只能看到文件的名字。它使用了两个新技术：html5的file API和HTML5的drag and drop这里借鉴http://www.nczonline.net/blog/2012/05/31/working-with-files-in-javascript-part-4-object-urls/里介绍的功能做了一个de
2012-06-02 22:32:29
489
原创 parallax视差网页制造3d效果
前几天看到parallax视差网页的例子：http://f6design.com/projects/parallax-scrolling/感觉非常有意思，就了解了一下，发现实现起来还是很简单的, 原文解释在这个链接里http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jqu
2012-05-27 02:31:48
934
1
转载 CSS3中对Animations和Transitions的比较
http://www.kirupa.com/html5/css3_animations_vs_transitions.htmCSS3中的Animations和Transitions有些类似，但有点区别，举例如下：SimilaritiesFrom a distance, both animations and transitions are very si
2012-05-26 22:26:37
359
原创 CSS3知识实战网站
想了解CSS3吗？ 那就去看http://css3please.com/吧，上面的例子是可以动态修改的！以下讨论一下这个网站是怎么实现的，其主要的逻辑在javascript.js里面：window.cssMath 这里定义的是一些辅助计算函数，包括从colorpicker中取得色彩的rgb值，hex值等等window.generator 修改例子，grabAndSet -》applyS
2012-05-26 22:14:16
314
原创 CSS3 transform matrix 矩阵研究
在重新审视CSS3的时候发现一个优秀的专门介绍transform里matrix的demo：http://peterned.home.xs4all.nl/matrices/整体分为几个部分：帮助函数play：添加事件监听函数Play.prototype：处理drag and drop，根据转换属性调用不同的matrix函数，display和current轮流切换来
2012-05-26 21:33:15
832
原创 IE8 HTTPS warning
If you have a form which will sent action to http in a https page, FF will show alert for security warning that you are sending data to a unsecured connection. Safari will show non-secure form. IE and
2012-04-02 16:02:47
922
原创 hashchange 前端页面跳转
现在有许多网站支持SPI（single page interface）,和传统的MPI（multi page interface）比起来，它无需载入新的网页，速度会快很多，用户体验也会好很多。唯一的问题是如果你的页面改动很大，比如切换tab，页面大部分内容由ajax载入。用户会以为跳转到另一个页面，这时如果他们点击后退按钮，SPI就会出问题了，因为我们只有一个页面。解决办法就是使用ha
2012-03-14 23:13:22
1139
原创 javascript生成网页快照
google feedback有一个非常酷的功能，能够让你在线对网页进行快照，而起还可以隐藏隐私信息。例子：http://www.google.com/tools/feedback/intl/en/index.html有人猜了一下，估计是使用canvas把页面重新构建，神奇的是他能把页面重构的一模一样。详细信息参看：http://html2canvas.hertzen.com/docu
2012-03-14 22:52:42
2239
原创 javascript onerror event 打造js error错误日志
如果你想track网站js error的数据，可以使用onerror事件来捕捉，见例子如下：window.onerror=function(msg, url, linenumber){ alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber) return true}document.wr
2012-03-14 22:41:33
576
原创 JavaScript Array vs HTML Collections
如果你习惯使用Jquery，千万要小心$()函数（以及其他travse函数）的返回值可不是简单的array，他们是HTMLCollection。换句话说我们是不能使用array的函数来处理的，比如slice，concat，pop，push等等。HTMLCollection本身只有两个函数：PropertieslengthThe number of items in the coll
2012-03-14 22:35:00
352
原创 javascript清除表单缓存- disable form caching
表单缓存是指当用户在表单输入之后再次回到该表单的时候，浏览器会直接显示用户之前的输入。在大多数情况下这正是我们想要的，但也有些情况我们希望表单能够刷新，特别是根据后台刷新。我现在就遇到了这种问题：某网站有两个select box选择日期进行搜索，搜索结果还是返回相同页面。比如你先选择1月1号到1月2号，然后再选择2月3号到2月4号，这是如果用户点击后退，select还是会保持在2月3号到2月4号，
2012-01-11 05:24:56
1441
原创 customize scrollbar-自定义滚动条
在google的一些应用中已经出现了自定义的scrollbar，比如google wave和google mail。和传统的滚动条相比，优势在于体积很小，从而提供更多空间给内容动态显示和隐藏自定义的风格，可以配合整个网页的风格下面列出一个简单的jquery插件的例子。其主要思想是对三个事件的捕捉：鼠标滚动事件捕捉，鼠标点击滚动条，鼠标拖动滚动条。通过对这三个事件的捕捉，确定
2012-01-06 18:50:42
604
原创 Preload image 网页图片预载入
如果你的网站包含比较多重复的大尺寸图片，不妨预先载入他们，这样用户的浏览同个网站中其他页面的时候这些图片就不用再远程载入了。参看：http://perishablepress.com/press/tag/preload-images/方法1:CSS#preload-01 { background: url(http://domain.tld/image-01.png) no-r
2011-12-30 19:19:21
835
原创 javascript载入研究
为啥要研究javascript的载入呢，原因很简单，因为他影响页面载入速度，特别是第一次的载入速度。（如果考虑同域的其他页面可以使用预先载入的方法：几种Preload javascript,CSS, image的方法）。一个页面载入除了html，剩下的就是javascript，css和image了。css可以使用sprite。image在以后会讨论(Preload image 网页图片
2011-12-29 23:42:18
741
原创 几种延迟运行javascript的方法
javascript在网页中一般的情况就是加载之后直接运行，即使是延迟加载的javascript也是这样（参看我之前的文章：7种延迟加载javascript方法），问题是运行javascript对于浏览器来说也是很耗时的，而且运行的时候会block其他资源的下载。所以就有了延迟运行的概念。steve也谈到这个问题：http://stevesouders.com/controljs/解决办法是：
2011-12-29 19:33:43
703
原创 几种Preload javascript,CSS, image的方法
原文：http://www.phpied.com/preload-cssjavascript-without-execution/preload javascript可以提升页面的速度，原因是preload之后网站的其他页面的许多资源都是已经加载过了，也就是说都在缓存里。普通的页面也可以preload资源，但是对已第一次的加载就会很耗时。为了提高速度，可以使用以下的方法在不影响第一个网页加
2011-12-28 00:37:21
2007
原创 几种preload javascript方法
原文：http://www.phpied.com/preload-cssjavascript-without-execution/preload javascript可以提升页面的速度，因为普通的javascript只能同步下载，一次只能下载一个script文件（一些新的浏览器已经支持异步了，但是IE还没有），而对于其他资源可以同时下载多个。我们可以利用这个优势来预下载javascript
2011-12-28 00:24:44
1401
原创 7种延迟加载javascript方法
延迟加载javascript，也就是页面加载完成之后再加载javascript，也叫on demand（按需）加载，一般有一下几个方法：1. DOMhead append script tagwindow.onload = function() { setTimeout(function(){ // reference to var he
2011-12-28 00:23:35
4970
原创 CSS3 modernizer 检测浏览器是否支持CSS3
前几天在看headjs的时候偶尔发现这段代码，可以用来检测浏览器是否支持CSS3的属性，用纯Javascript写成，不依赖任何framework，感觉挺有用的。源代码：https://github.com/headjs/headjs/blob/master/src/css3.js/** Head JS The only script in your
2011-12-27 21:49:25
939
原创 javascript弹出窗口小结
弹出窗口已经被小广告弄得声名狼藉，虽然如此，但是有的时候还是需要用弹出窗口和原来的窗口分开来，比如说显示一个问卷调查。最基本的就是使用window.open函数，搭配对于弹出窗口的属性作为输入参数。第一个问题是许多浏览器都有popup blocker，从脚本直接运行window.open会被拦截，大部分用户会看不见你做的窗口。而且safari根本不允许脚本直接执行window.open，一
2011-12-13 06:07:01
744
原创 javascript库中mixin和extend函数终极pk
很多javascript库中都提供了mixin/extend函数，方便用户将多个object合并或者生成新的object。这个函数会在OO中用到，但是不仅仅局限于OO的继承。基本思想：function mixin(old,my,bOverwrite) { var my = my || {}, key,bOverwrite = bOverwrite
2011-12-11 22:57:38
994
原创 跨浏览器输入框提示探讨
随着用户体验的深入，很多网站中输入框都开始添加提示语，由于html4没有提供这个功能，大家想出了很多方法，比较简单是写一个函数修改input的内容，初始设为提示，foucs时间就清空，当blur的时候再看内容是否为空，若为空就设为提示。这个方法有个问题，就是表单提交的时候提示也会被提交。于是有人就在表单submit的时候加上检查input是否为提示。这还有个问题，就是用户的输入绝对不能
2011-12-11 22:28:31
426
翻译 开放网络应用安全项目
开放网络应用安全项目(http://en.wikipedia.org/wiki/OWASP)总结了网站中常遇到的十大安全隐患：A1: Injection常见的sql注入攻击：代码String query = "SELECT * FROM accounts WHERE custID='" + request.getParameter("id") +
2011-12-11 22:05:19
394
转载 跨浏览器的多点触控与鼠标事件处理
[译]跨浏览器的多点触控与鼠标事件处理Posted by luoqingming on 2011年11月28号Leave a commentGo to comments原文地址：http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.as
2011-12-11 21:18:00
401
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人