年纪大了,不写项目总结总有一天会忘记的。
这次的项目似乎不能暴露是谁做的,暂时称作某项目吧。
Javascript, jQuery, CoffeScript
最初是做个展示百人一首的网页,要相关数据,然后找到了这份json文件:
https://gist.github.com/wakaba/8363dc27f4c54f76b4a7/
json 里的图片 url 是没有规律可以遵循的,没法用下载工具批量下载,
所以最后想到了用node写个脚本扒json然后下载到本地。
Read More
Stackoverflow: Getting scroll bar width using JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function getScrollbarWidth() { var outer = document.createElement("div"); outer.style.visibility = "hidden"; outer.style.width = "100px"; document.body.appendChild(outer); var widthNoScroll = outer.offsetWidth; // force scrollbars outer.style.overflow = "scroll"; // add innerdiv var inner = document.createElement("div"); inner.style.width = "100%"; outer.appendChild(inner); var widthWithScroll = inner.offsetWidth; // remove divs outer.parentNode.removeChild(outer); return widthNoScroll - widthWithScroll; } document.write("Scrollbar width is: "+getScrollbarWidth()+"px"); |
Result:
WinXP: 16px;
Win7: 17px;
Win8: 17px;
Mac: 15px;
源代码在这里。
支付宝登录的安全控件默认是勾选的,如果想要取消默认勾选,可以使用greasemonkey模拟点击安全控件。但是支付宝首页的登录页面实际上是一个异步加载的iframe,稍微有点麻烦。带注释的源代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// 绑定事件 window.onload = function() { var counter = 0; var waitForOption = setInterval(function(){ // 如果取消勾选成功或者连续5次失败,不再尝试 if(uncheckSafeLoginOption() || counter++ > 5) { clearInterval(waitForOption); } }, 1000); } function uncheckSafeLoginOption() { var id = 'safeSignCheck'; // 单独的登录页面直接查找元素 // 首页需要查找iframe后再查找元素 var safeLoginOption = document.getElementById(id) || getFrameDocument('loginIframe').getElementById(id); if(safeLoginOption) { if(safeLoginOption.checked) safeLoginOption.click(); return true; } return false; } function getFrameDocument(frameId) { var frame = document.getElementById(frameId); return frame.contentDocument || frame.contentWindow.document; } |
在greasemonkey中针对支付宝首页和单独的登录页面新建一个user script,复制上面的代码,即可实现异步取消勾选。默认最多尝试5次,即5秒内IFRAME没加载完毕的话就不会再尝试。
那天從ruby china的一個帖子里了解到一個非常強大的js庫──vanilla-js。
於是我推薦給了另外一個前端看,不過可惜我的幽默神經和他的略有差別,他沒能體會到vanilla-js的強大。
那讓我們來剖析下他到底有多強大吧。
這就是vanilla-js。
Read More
#######################################################
2013.7.17 UPDATED
慎用此方法!
依舊推薦用sudo安裝npm!
修改prefix后bin沒法正確添加到全局變量的bin里去。
會導致npm里的bin方法不能用,得手動添加bin目錄,非常麻煩。
所以最後我也還是把自定義的prefix刪掉了。
#######################################################
是的,終於開始學node了。
Read More
这个问题得用视频才能演示出来……视频之后更新。
标题用的是stackoverflow上的。
我碰到的情况是,div.to-slide里有float元素。
div.to-slide在触发slideDown()动画后,会先down到超过div本身应该的高度,再反跳回原来的高度。
排查了很久都没找到原因。终于最后在stackoverflow上找到了一篇解释这问题的。
原来这个问题并不限定于内部有float的slidedown元素。float只是其中一种情况。
在div.to-slide没有展开情况下,jquery算出的高度有误,所以才会出现高度差反跳。
触发这个bug的原因很多,比如:无宽度,自适应或继承父元素宽度(我的问题就是这个)。