HATA 生事屋

ie下的自适应垂直居中

2009-04-20T15:54:00.006+08:00

long time no see，前几天写页面ui时总结的小心得。把需要显示的内容进行自适应的垂直居中。希望对大家在写widget的时候有一丁点帮助。众所周知，水平居中用margin:0 auto;width:xxxpx;的方法就可以轻松实现。垂直居中的方法又是怎样呢？hata简单的post一下css部分：#wrapper{#position:relative;}#mid{#overflow:visible;#position:absolute;#top:50%;}#content{#position:relative;#top:-50%;}花括号内#号是ie hack的方法，也就是上面几句对ff完全不起作用。应对div的结构为

假如浏览器是女人

2009-04-13T12:37:00.026+08:00

藉借对女性的遐想，投射到浏览器的特性上。（感觉是一种很好的形象塑造的方法）原创图片地址“IE真的有这么糟糕吗？”最想说一下IE。老实地交代下，个人使用ie的经验不太好，经常生病什么的。HATA觉得IE是被形容得最为精辟和传神的，虽然从市场份额来看，很大程度是因为树大招风的原因。PS：如果要写一篇《假如操作系统是女人》的话，我想windows也绝对是首当其冲须要套用IE那句话的产品。“自我评价”，下面送上各个浏览器特色的官方中文页面链接：fire fox：http://www.mozillaonline.com/products/firefox/features/opera：http://cn.opera.com/products/desktop/safari：http://www.apple.com.cn/safari/whats-new.htmlchrome：http://

google的mp3搜索--巨鲸音乐widget--动手制作flash开关

2009-04-08T10:49:00.014+08:00

最近听朋友说google在中国大陆出了一个音乐搜索的功能，HATA昨天click上google看了一下，觉得做的挺好的。对比很早就提供了同类服务的百度，google这次添加了两个特色功能： 1，在播放音乐时会通过浏览器的cookie记录下播放的音乐在播放器列表里，那样我们就可以在下次打开google提供的播放器上看到以前播放过的歌。同样，可以通过试听一大堆歌后才选择喜欢的歌曲下载。 2，用泡泡挑歌，这个大概就是google的"手气不错"音乐版。HATA也同样觉得"手气不错"这个功能更适合在试听MP3上。nice try： by the way，这个功能令我想起一个flash制作的音乐网站http://musicovery.com/ google合作伙伴巨鲸音乐网在google的音乐播放器上面，会看到Top100.cn的商标，同时留意地址的话，也会发现http://

我头发长唔代表我係飞仔黎加 -益力多40周年广告系列

2009-04-04T19:03:00.014+08:00

40周年广告系列拍得好有新鲜感啊。我头发长唔代表我係飞仔黎加～为左你地，就算要我出卖灵魂。。甚至肉体，都值得加～匪A：卖益力多犯法咩～警：有菌波。匪B：误会姐～误会姐～

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

2009-03-31T19:32:00.016+08:00

手滑，标题还没有写完就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，

Blogcastone & post两首喜欢的音乐

2009-03-26T14:30:00.004+08:00

HATA最近在做一个订单系统，这几天都逼不得已和access频繁打交道，烦死了。今天抽个时间来写post。HATA之前在DY Feng兄的blog里看了篇介绍Blogcastone这个flash 在线mp3播放器的post，觉得这个小flash挺精致的，一直想拿来玩下。正好，现在就趁这个机会拿这个轻巧的Blogcastone来post两首歌。一首是"trust you"，00里面的ed，很美的旋律。这首是"肥仔个头",可爱的广东出产，挺有风味的歌曲，大家有机会一定要买张cd听听。edited byHATA菜谱

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

2009-03-22T09:26:00.008+08:00

HATA最近把blogger上面的那条"横梁"给隐藏了。原因大家差不多，主要是觉得它把blog整体拉低了30px是件很不爽的事，其次是风格的问题，虽然css可以随意对navbar进行修改，不过横梁始终是横梁，整体感觉是不会变的。所以，要将其去除之。下面一个是传统的硬方法：#navbar-iframe {height: 0px;visibility:hidden;//方法1display:none;//方法2}不知道为什么这两个方法会在网上流传为合2为1的方法，HATA用其中一个已经可以见效了。可能是为了保险吧。。。出来的页面效果一样，navbar完完全全不见了，整体博客拉上30px。但是，没有了横梁其实对于blog主来说是件很不方便的事情，虽然navbar为我们提供的只是紧紧的几个超链接，但是已经给我们的登录，post，修改布局带来了很多的捷便，还有"下一个博客"链接，HATA

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

2009-03-19T15:47:00.014+08:00

看看上面画风~ 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/shadox64edited by HATA菜谱

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

2009-03-18T16:57:00.022+08:00

今天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;}#

标签--一列改成两列

2009-03-15T21:26:00.004+08:00

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的快餐 >,<

2009-03-12T15:54:00.010+08:00

今天HATA吃了一个javascript的快餐，前几天HATA尝试写一个翻译的js代码（还在修整中。。）结果累得要死。今天HATA本来想在网上找一些相关的pdf看看。于是顺藤摸瓜，HATA找到一本名为《精通Javascript+jQuery》的书。这里有个第10章(jQuery) 的试看版本。书一共分了19章，前十章是基础部分，后九章是实例应用部分。目录搞错了搞错了，HATA不是想介绍这本书如何如何，HATA只是想介绍快餐给js的初学者而已。看到这个的视频目录链接吗？里面有齐了19章的视频内容，第九章Ajax视频: 值得欢呼的是每段视频好像都只有10几分钟的长度（HATA只看到第九章，就连忙写这篇blog了），不明原因的某群众:"什么意思，这么短好吗？" HATA觉得不错啊，虽然他朗读的时候语调有点囧。。不过作者说话干净，不会让人有昏昏入睡的感觉。话的内容也是纲要部分，不会说得太细，

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

2009-03-11T15:37:00.008+08:00

第一次写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 +=

生命的活力

2009-03-07T00:18:00.007+08:00

"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在此对您表示无限的敬意。

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

2009-03-06T23:21:00.007+08:00

看來很多人都對空氣某日收到的型男教學非常有興趣，既然這樣，空氣當然要放出來，和各位強者分享。基本上空氣收到的資料，是這本「型男講座」的片段而已。這本經典的書籍（還有出第二冊「人氣男之道」），不論男女都務必要收來詳讀。這本書分析的實在太精闢了，空氣才看了節錄的幾段，就已經受到當頭棒喝啊！。。。。今天HATA快要睡觉的时候发现了这么一篇传说的文章。宅宅的HATA终于找到人生的曙光了～～HATA已经学会了传说的交叉手和抛电话了～明天HATA就去演练。转载至：http://blog.yam.com/airsama/article/18503510还有篇《人氣男之道─型男講座第2彈》http://blog.yam.com/vicky70825/trackback/18733456

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

2009-03-06T18:47:00.011+08:00

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