杂谈，突然其来的感觉，勾搭上了google chrome

手滑，标题还没有写完就pose了出去。。囧rz

话转回来，昨天HATA发现自己挂在beta区的悬挂式广告不动了（其实不是广告，是个会跟着滚动条走的menu，不过感觉跟广告一样丑。。），原因在于document.documentElement.scrollTop的值为0了。why，因为偶用了Google chrome。

记得以前听谁说过js上的document.documentElement.scrollTop和document.body.scrollTop的区别在于有定义docType和没有定义docType，当我们没有定义docType的时候，document.documentElement.scrollTop和document.body.scrollTop一样，反映垂直滚动条的顶部位置，当我们定义了docType后，document.body.scrollTop为0，document.documentElement.scrollTop的值仍然正常。看来Google chrome（谷歌浏览器）是不吃这一套了。

在定义了docType的情况下，document.documentElement.scrollTop不生效了，换回document.body.scrollTop，一切正常。什么原因呢？是wedkit的问题？还是V8？记得chrome出炉的时候我听过这样的介绍，chrome使用了全新的机制去实现网页的javascript，这就是v8。

下面HATA要谈谈google chrome了：

初接触google chrome 要追溯google chrome刚提供下载的时候，还是beta（0.几的未正式版本），使用它只是讨个新鲜，当时chrome摆出了好多令人诱惑的优点，不过令我印象最深刻的是它的ui，很干净，很简约，使用google chrome 看网页看到的网页范围永远是最多的。^^

无奈网站的兼容问题和chrome 的 flash player卡机问题（有linux上的adobe官方flash player影子。。），后来HATA渐渐放下了它。

因为firefox那巨人级的启动速度和身染百病的ie，HATA又勾搭上chrome了（^…^），现在的版本号是1.0.n版了，也就是正式版已经出台了，HATA使用的当前版本是dev的2.0.171版，版本编号很奇怪，正式版是1，beta版是2，这种编号的方法，HATA再次感觉到chrome并不是作为一个最终成品的软件而存在。而是一个部件。。

现在使用google chrome的感觉：

兼容：这是我觉得chrome进步最大的地方，不过也是理所当然的地方，这几天使用google chrome感觉相当平稳，没有看见什么兼容上的问题，flash也比以前走得快很多，暂时除了HATA那个悬挂式广告(orz..)外,一切正常（当然需要下载插件的网页兼容性一定是不行了）；

速度：启动速度快，挂着几个网页关闭chrome的情况下，启动google chrome跟开文件夹的速度没什么不一样，使用过程中也很流畅（偶不是每次打开10几个网页的狂人）；

javascript：v8是神物(／‵o′)／~ ╧╧），当然v8有多美，取决于你通常浏览怎样网页。

HATA想由OpenLaszle引入话题，简单介绍，OpenLaszle有点类似js框架语言，不过他是需要服务器处理的，通过使用OpenLaszle的语言lzx（类似js）写出来的东西，可以通过Dhtml或者flash的形式来实现，也就是可以把它翻译成js，或者swf。HATA想提出一个问题，用同样的语言既然可以翻译成js那为什么要翻译成swf来实现呢？（要知道swf的实现范围只能在一个矩形中，而js的实现范围是无比无界的。）

HATA觉得其中一个原因是js相当依赖浏览器的解析能力。这里有个OpenLaszle的Demo，内容是一个图片浏览平台。分别有flash方式和Dhtml方式两种，大家可以分别使用不同的浏览器体验一下dhtml方式的浏览效果。和拥有大量用户的ie对比，chrome表现相当流畅。

延伸一下，如果几乎是网页设计行业标准的ie能把自身js的解析提供一下，js可以帮我们在基本不提高下载数据量的前提下使页面变得更为丰富。

开发工具：网页开发功能在0.n版的时候我没有太多注意到，不过现在使用右键的Inspect element时发现感觉和firefox的firebug功能类似度相当高。

其他功能：不知道chrome会不会有像firefox里的附加组件功能，现在chrome里能够支持半个 greasemonkey也是拜v8的能力所赐。在dev里也增加了自动填表，全页缩放和自动滚动页面功能，据介绍有一个个人配置的功能HATA找不到（HATA最想要这个功能），不知道是不是后来去掉了。

个人觉得现在的chrome功能已经比较适合娇小的chrome了（HATA也有很多想要的功能不然HATA就白当ff饭了～）。因为关键还是性能，兼容能力和chrome能为google节省多少的运算时间。

啊～杂谈越写越杂了。

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

Blogcastone & post两首喜欢的音乐

HATA最近在做一个订单系统，这几天都逼不得已和access频繁打交道，烦死了。今天抽个时间来写post。
HATA之前在DY Feng兄的blog里看了篇介绍Blogcastone这个flash 在线mp3播放器的post，觉得这个小flash挺精致的，一直想拿来玩下。正好，现在就趁这个机会拿这个轻巧的Blogcastone来post两首歌。


一首是"trust you"，00里面的ed，很美的旋律。


这首是"肥仔个头",可爱的广东出产，挺有风味的歌曲，大家有机会一定要买张cd听听。

edited byHATA菜谱

阅读全文...

你不觉得navbar有很多优点吗？隐藏&去除blogspot的navbar的新旧方法

HATA最近把blogger上面的那条"横梁"给隐藏了。原因大家差不多，主要是觉得它把blog整体拉低了30px是件很不爽的事，其次是风格的问题，虽然css可以随意对navbar进行修改，不过横梁始终是横梁，整体感觉是不会变的。所以，要将其去除之。
下面一个是传统的硬方法：

#navbar-iframe {
height: 0px;visibility:hidden;//方法1
display:none;//方法2
}

不知道为什么这两个方法会在网上流传为合2为1的方法，HATA用其中一个已经可以见效了。可能是为了保险吧。。。出来的页面效果一样，navbar完完全全不见了，整体博客拉上30px。

但是，没有了横梁其实对于blog主来说是件很不方便的事情，虽然navbar为我们提供的只是紧紧的几个超链接，但是已经给我们的登录，post，修改布局带来了很多的捷便，还有"下一个博客"链接，HATA也是常常按的。navbar去除以后HATA就越来越怀念它了。
下面一个是普遍流传的隐藏方法，隐藏是firefox用户而说的，ie的话就同样是一去不复回：

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100)}

通过控制alpha值，达到自动隐藏的效果，在firefox下把鼠标移动上去，narbar就会回来了。这个方法其实很好，就是那个30px的位置就浪费掉了。怀旧了这么久，终于要介绍HATA的方法了～ (/^0^)/
解决方法，下面HATA把自己的css也贴上：

#navbar{position:absolute;width:800px;}
//把navbar拉出来，然后修正宽度
#navbar-iframe{
opacity:0.0;filter:alpha(Opacity=0);
border-right-color:#000000; border-right-width:2px; border-right-style:solid;
//修饰轮廓
}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100);}
* html #navbar-iframe {display:none;}
//ie7以上把navbar除掉，blog主用ff的话加上

这个要解析一下，其实是上面方法的基础上加上3条语句，修正宽度是因为我在使用position:absolute;后navbar的宽度变短了而进行修正的；而修饰轮廓就是加上右边框而已，因为HATA用的navbar样式是黑色的那个，所以边框颜色是#000000，根据情况修改；最后一句，是只对ie使用，因为在ie上隐藏后鼠标移置该处无法再次显示，干脆就把它除掉。
怀旧信息很多，也有一点点个人的方法，希望对大家有帮助～

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

力推！shadox64（兰堂血多）爆笑视频～

看看上面画风~ L(^_^L)，再看看下面视频，动画美，配音也美，HATA笑翻桌子啦~
(／^0^)／~ ╧╧）


黑暗界拍賣王(6)-搞笑漫畫血多

RTV 亂視新聞台 vol.3 鼠尸遍野
这个系列是作者发布最早出来的视频啦~


【超扯童話血多】賣火柴小女孩 第二話
最新连载有7集啦～

最后贴上作者shadox64（兰堂血多）的主页：http://www.wretch.cc/blog/Shadox，国内好像上不了，要上只能用代理啦！
貌似还有几个staff，可是HATA找不到他们的窝点~ -,-
最后的最后，还有这个shadox64的youtube地址：http://www.youtube.com/user/shadox64

edited by HATA菜谱

阅读全文...

发布一个小js，tooltip--1.66kb

今天HATA发布一个1.66kb的轻量级js，tooltip，打包后大约1.2kb，有渐变效果（fadein，fadeout）
DEMO：
举头望明月
原版DEMO地址
HATA是在Web Development Blog提供的代码进行修改的,主要修改了js的结构简化和修改css，使js不加载边框图片取而代之用边框制作出邮票效果。
基本的原理就是通过onmouseover和onmouseout触发function，通过tooltip这个function生成悬浮的div原件，设定定时器，修改透明值。从而做出fade的效果，当然啦，如果使用jquery的话，还可以省略fade的function呢，jquery果然是甜美物啊～
下面贴出css部分：

#tiptool1cont{display:block; padding:2px 7px; background:#666; color:#FFF;}
#tiptool1{position:absolute; display:block; margin-left:5px; border-width:1px;border-style:dashed;border-color:#666;}

下载：
HATA版（虚线边框）
原版（圆角有图片）
安装步骤：
1贴好上面提供的css
2找个地方安装js文件，用<script src="地址" type='text/javascript'/>引用或者用<script typetype='text/javascript'></script>括着js文件的代码直接贴上
使用：
HATA这里耍一下懒，把刚才demo的代码写出来，需要用的自行修改就行了

<span onmouseout="tooltip.hide();" onmouseover="tooltip.show('低头思故乡');">举头望明月</span>

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

标签--一列改成两列

HATA今天换了新的模板啦，一直想写一个没有图片的模板，加上今天有换3列的冲动，今天HATA就忍不住手写了一个，第一次写的模板，暂时是一个好简单好简单的模板啊，简单得颜色也没有配，不过HATA还是比较受乐的，一定要发post庆祝一下!!
ai~扯远了，HATA在写模板之际，HATA顺便把那个一列式标签也改掉了，改成两列式，哈哈。
修改的方法好简单好简单，就是css区里加一个句：

.sidebar #Label1 li {
float:left;
width:95px;
}

因为放在sidebar里(class="sidebar")，所以加上了.sidebar，可要可不要。#Label1是标签的id。一般都是这个，拍个留念照：
有问题可以留言，HATA随时候命～

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

今天吃了一个js的快餐 >,<

今天HATA吃了一个javascript的快餐，前几天HATA尝试写一个翻译的js代码（还在修整中。。）结果累得要死。今天HATA本来想在网上找一些相关的pdf看看。于是顺藤摸瓜，HATA找到一本名为《精通Javascript+jQuery》的书。
这里有个第10章(jQuery) 的试看版本。书一共分了19章，前十章是基础部分，后九章是实例应用部分。目录

搞错了搞错了，HATA不是想介绍这本书如何如何，HATA只是想介绍快餐给js的初学者而已。看到这个的视频目录链接吗？里面有齐了19章的视频内容，第九章Ajax视频:

值得欢呼的是每段视频好像都只有10几分钟的长度（HATA只看到第九章，就连忙写这篇blog了），不明原因的某群众:"什么意思，这么短好吗？" HATA觉得不错啊，虽然他朗读的时候语调有点囧。。不过作者说话干净，不会让人有昏昏入睡的感觉。话的内容也是纲要部分，不会说得太细，简明扼要，很符合了快餐的特性。当然啦，要对js进行深入的了解不看看书和使用文档是不行的。
期待日后js功力大增，万岁～

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

边学边改blog--初学者的第一次js心得，闲谈踩*过程

第一次写js，好麻烦啊~~~~
事情起因：不知道是多少天前了，HATA走去逛了一下google code，看见translation中的api很简单：

google.language.translate(text,"es","en",function(result){
if(!result.error){
translation.innerHTML=result.tarnslated;
}
});

HATA就开始打算做一个翻译post的插件，毕竟HATA用过某g和某y的翻译工具,感觉都会影响了HATA的页面的排版（因为这个问题，HATA把一些widget都撤下来了）。NND,因为这个奇怪的想法，HATA这几天被卷入困扰的漩涡(orz)。新人学习，处处碰壁啊～

墙壁1：排版乱了。
HATA开始用"。"把句子一句一句分开给google吃，然后用"translation.innerHTML += result.tarnslated"把某g拉的屎都一坨一坨的回收回来。然后test一下整合好的效果如何。某H："恩，都乱了。"后来发现，原因是这样的。例如这样一句：<div>g兄，你好吗?快给我便便去。（千年杀！）</div>因为我是用"。"句号分割句子的，所以在<div>g兄，你好吗?快给我便便去。的时候，HATA就把句子截了下来给某g吃，然后google翻译后，执行用"translation.innerHTML += result.tarnslated"的时候，程序就自动补上了</div>,（千年杀！）结果就去了下一段。。
HATA最后的解决方法是："translation.innerHTML = translation.innerHTML.substring(0,end)+result.tarnslated"
墙壁2：str.indexOf("。")什么也找不到。
str.indexOf("")就是找字符串（str）中某字符的第一个位置。例如：str.indexOf("HATA")程序就会把HATA第一次出现的位置告诉你。但是HATA输入str.indexOf("。")后返回值都是-1，是双字节的原因吗？不是，HATA输入str.indexOf("拉登")试了下，"拉登"就出来了。什么原因？HATA不知道，最好解决方法：str.indexOf("\u3002")句号就出来了。这个是什么？打开某win的"开始-》所以程序-》附件-》TrueType造字程序"，然后字符集选Unicode（HATA的meta标签里字符集是UTF-8），然后打开，窗口-》参照，在形状里面输入"。"句号，代码3002就出来了，这个就是"。"的UTF-8的字符集代码。
墙壁3：某g还是吃不下
面对一大段的代码，某g还是吃不下，只好也针对下"<",">"这些符号，分得再细一点翻译。标签部分则进行直接的搬字过纸。这样代码段就复杂了。。。HATA这里就没有理会什么节点啊，父子关系的，就把它当一段字符的看。HATA素是野蛮。
墙壁4：js的执行顺序啊～
因为复杂了，所以js的执行顺序也开始囧起来了。这个HATA终于翻到第5道墙了。相信这是最后一道墙壁了。距离beta版的代码应该不远啦（lol）。最后不会来一道叹息之墙就好了。。。虽然HATA这里好阳光～

道歉：恩，基本上这就是HATA近几天HATA在blog上做的事情。特别是这两天，加了alert的语句做测试。搞得blog经常会弹出窗口。非常麻烦。在次HATA决定再次向某g伸手拿多一个blog，以作测试用途。HATA 菜谱从此会恢复正常。

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

生命的活力

"My name is Nick Vujicic and I'm 25 years old."
今天由一个视频把我带到了这一个网站LifewithoutLimbs.
"My name is Nick Vujicic and I'm 25 years old. I was born without arms or legs and given no medical reason for this condition."
译：我的名字叫Nick Vujicic，25岁（和我年纪相约的小伙子），我生下来就无缘无故的没有了双手和双脚。
HATA最近也有感到失落的事情，不过HATA看见那个仍然充满活力的Mr.Vujicic后，我的第一感觉是，我的人生到现在还是很美好的。谢谢Nick Vujicic，HATA在此对您表示无限的敬意。

阅读全文...

力推！办公男的曙光，傳說中的型男講座

看來很多人都對空氣某日收到的型男教學非常有興趣，既然這樣，空氣當然要放出來，和各位強者分享。基本上空氣收到的資料，是這本「型男講座」的片段而已。這本經典的書籍（還有出第二冊「人氣男之道」），不論男女都務必要收來詳讀。這本書分析的實在太精闢了，空氣才看了節錄的幾段，就已經受到當頭棒喝啊！。。。。

今天HATA快要睡觉的时候发现了这么一篇传说的文章。宅宅的HATA终于找到人生的曙光了～～
HATA已经学会了传说的交叉手和抛电话了～明天HATA就去演练。

转载至：http://blog.yam.com/airsama/article/18503510

还有篇《人氣男之道─型男講座第2彈》

http://blog.yam.com/vicky70825/trackback/18733456

阅读全文...

边学边改blog--一个按钮搞定繁简（简繁）翻译（YAHOO）

这几天看了google的api，主要看了翻译的api，发现用google对网页进行局部翻译并不是一件难事。那个代码HATA还在搞，感觉也不能，估计这两天能搞好。嗯嗯，HATA跑题了，这天郁闷之制，HATA用yahoo的翻译服务做了个即时翻译网页的按钮。搞好基于google的翻译代码后，这按钮估计就会撤下了，下面是按钮：

<div id="trans">loading</div>
<script>
var temp1='<a href="http://babelfish.yahoo.com/translate_url?doit=done&tt=url&intl=1&fr=bf-home&trurl=';
var temp2='&lp=zh_zt&btnTrUrl=Translate">繁体中文</a>';
var temp=temp1+window.location.href+temp2;
document.getElementById("trans").innerHTML=temp;
</script>

直接拉到widget里就可以用了这是简体->繁体的，繁体->简体的是：

<div id="trans">loading</div>
<script>
var temp1='<a href="http://babelfish.yahoo.com/translate_url?doit=done&tt=url&intl=1&fr=bf-home&trurl=';
var temp2='&lp=zt_zh&btnTrUrl=Translate">简体中文</a>';
var temp=temp1+window.location.href+temp2;
document.getElementById("trans").innerHTML=temp;
</script>

因为代码放在文章里不能用（基于安全的问题吧），这里就不给效果了，反正点下去就就会进入babelfish的翻译页。

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

边学边改blog--修改修改修改，问题问题问题

应该有3天HATA没有更新blog了，这几天都在忙着调整blog的分布，因为处处碰壁的关系。一直都没有修改到满意的效果。这几天抱着报喜不报忧的指导思想。一直都没有去更新blog。今天就先写个开头，然后HATA就溜去睡大觉。
之前，HATA想用一个tab放置两个部落格观察贴纸。tab默认页内容是"你是本blog第 n个来宾，热烈鼓掌欢迎～"的字样，第2页是部落格观察的一个数据表。这个表格HATA大致上已经搞出了一个雏形，不过后来发现有一些不妥善的地方：

一个算是部落格观察的先天问题吧。在一个页面内如果有两个不同类型的贴纸，阅读一次会出现两次阅读的记录。
第二个问题是翻译的问题，HATA知道习惯看繁体字体的人都不太会看简体字体，HATA就想到了弄个繁体翻译。使得观看网页更为捷便。HATA在做tab时使用了jQuery提供的ui tab，ui tab用上去是很好用，不过和网页翻译系统却是很合不来。（或许和在线代理也会有冲突，HATA没有没有试过）
这里HATA吐槽一下，想不到，google的翻译系统居然对比较常用的<span class="fullpost">方法存在漏洞。。只要有<div>套着，就可以令<span>不生效。不知道是漏洞还是基于其他的目的。反而yahoo的翻译没有这方面的问题，而且可以频繁地进行翻译，不像google那样拿cookie来忽悠HATA，就是把本来的繁体搞乱码了。。。
没有精神，先睡觉了。。

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...