Javascript – 箱猫日和

某项目总结

年纪大了，不写项目总结总有一天会忘记的。

这次的项目似乎不能暴露是谁做的，暂时称作某项目吧。

最初是做个展示百人一首的网页，要相关数据，然后找到了这份json文件：
https://gist.github.com/wakaba/8363dc27f4c54f76b4a7/
json 里的图片 url 是没有规律可以遵循的，没法用下载工具批量下载，
所以最后想到了用node写个脚本扒json然后下载到本地。
Continue reading “download images with node.js”

[snippet] Default browser scrollbar width

Stackoverflow: Getting scroll bar width using JavaScript

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");

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自动取消支付宝登录控件勾选

源代码在这里。

支付宝登录的安全控件默认是勾选的，如果想要取消默认勾选，可以使用greasemonkey模拟点击安全控件。但是支付宝首页的登录页面实际上是一个异步加载的iframe，稍微有点麻烦。带注释的源代码如下：

// 绑定事件
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;
}

// 绑定事件

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没加载完毕的话就不会再尝试。

從vanilla-js開始

那天從ruby china的一個帖子里了解到一個非常強大的js庫──vanilla-js。
於是我推薦給了另外一個前端看，不過可惜我的幽默神經和他的略有差別，他沒能體會到vanilla-js的強大。

那讓我們來剖析下他到底有多強大吧。

Facebook, Twitter, Apple, Microsoft, Amazon, etc.都在用vanilla-js。
整個庫只有25bytes。
對html5全支持，對所有瀏覽器都支持，性能高於一切js庫

這就是vanilla-js。
Continue reading “從vanilla-js開始”

nodeJs note 1

#######################################################
2013.7.17 UPDATED
慎用此方法！
依舊推薦用sudo安裝npm！
修改prefix后bin沒法正確添加到全局變量的bin里去。
會導致npm里的bin方法不能用，得手動添加bin目錄，非常麻煩。
所以最後我也還是把自定義的prefix刪掉了。
#######################################################

是的，終於開始學node了。
Continue reading “nodeJs note 1”

jQuery slideDown snap back issue

这个问题得用视频才能演示出来……视频之后更新。

标题用的是stackoverflow上的。

我碰到的情况是，div.to-slide里有float元素。
div.to-slide在触发slideDown()动画后，会先down到超过div本身应该的高度，再反跳回原来的高度。
排查了很久都没找到原因。终于最后在stackoverflow上找到了一篇解释这问题的。
原来这个问题并不限定于内部有float的slidedown元素。float只是其中一种情况。
在div.to-slide没有展开情况下，jquery算出的高度有误，所以才会出现高度差反跳。

触发这个bug的原因很多，比如：无宽度，自适应或继承父元素宽度（我的问题就是这个）。

详见 slidedown animation jump revisited