HATA 菜谱

ie下的自适应垂直居中

Mon, 27 Apr 2009 11:46:24 +0800

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的结构为

假如浏览器是女人

Mon, 13 Apr 2009 14:45:15 +0800

藉借对女性的遐想，投射到浏览器的特性上。（感觉是一种很好的形象塑造的方法）原创图片地址“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开关

Wed, 08 Apr 2009 15:21:49 +0800

最近听朋友说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://

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

Wed, 08 Apr 2009 13:01:45 +0800

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

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

Tue, 07 Apr 2009 12:39:58 +0800

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

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

Sat, 04 Apr 2009 20:39:03 +0800

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

Blogcastone & post两首喜欢的音乐

Thu, 26 Mar 2009 15:03:12 +0800

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

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

Thu, 26 Mar 2009 14:59:16 +0800

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

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

Sun, 22 Mar 2009 12:17:11 +0800

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

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

Sat, 21 Mar 2009 19:11:43 +0800

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