listenpro

探讨音乐 · 前端技术 · 玩

此页已经停止更新，请访问：http://blog.360.yahoo.com/listenpro

06.8.29

Javascript interaction with flash

注意方法名的大小写

以前习惯了setVariable,在FF下不认必须SetVariable。

06.8.26

Get the rendered style of an element

http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

06.8.25

IE5.0对float属性支持的极其糟糕。大量用float的页面，要在ie5下仔细看看，不成只能用inline了。

06.8.17

页面中控制声音：test-sound.html

06.8.15

光标在input间切换时，FF下获得焦点时光标在最后，IE则在第一个，只能用javascript将光标移到最后。参考：http://www.faqts.com/knowledge_base/view.phtml/aid/17749

function toend (el) {
if (el.createTextRange) {
var v = el.value;
var r = el.createTextRange();
r.moveStart('character', v.length);
r.select();
}
}

06.8.9

Using javascript with Flash Player:

http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_04160

Scripting with Flash Player and ActiveX:

http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12059

06.8.8

发表在雅虎日志上的文章：http://ysearchblog.cn/2006/08/htmlxhtmlweb_1.html

再搞透明的时候忽略了一个问题，，filter:alpha(opacity=n)也无效。

06.8.5

新首页做完了，如果要说细节的话，还有像额外的http请求。避免这个只能在设计结构时，就要考虑到。个人中心那块，是首次正式使用ajax，效果怎么样还有待观察。这算是国内大网站中，第一个敢在首页这么玩的。像新浪这种网站，打死也不敢这么干。

http://cn.yahoo.com/preview.html，新首页细节：

1.避免无意中打扰用户

新首页右侧的个人中心和内容上的tab，都是鼠标浮上就会展开内容。如果用户鼠标是无意中划过，应该是不会展开的。

2.避免重复访问

右侧的个人中心是使ajax实时获取数据的，鼠标浮上就会触发请求。所以要避免请求频繁被触发。

3.个人中心的展开效果

展开效果应该是平滑的不能过快也不能过快，交替时收起和展开同时发生要自然。这样用户用起来才感觉舒服。

4.用户鼠标离开个人中心时展开的面板延时2秒后自动收起。

5.个人中心里的“天气”按钮上的小图标也是实时变的

6.个人中心里的“邮件”和“天气”按钮上会显示提示信息

7.个人中心里除了“天气”和“财经”其他只有登录才能发出请求，避免对服务器造成过大的压力。

8.所有内容都是可以折叠的。以tab的形式展示内容。

9.记忆功能。记忆当前看的栏目和折叠的状态

javascript兼容性总结：http://www.quirksmode.org/index.html?/viewport/compatibility.html

06.7.27

在考虑兼容IE5.0的时候，注意在ie5.0下，undefined不是内置类型。所以不能这么判断typeof o.conn.status !== undefined 要 typeof o.conn.status != 'undefined'。

今年年尾，微软计划将XP的浏览器自动升级到ie7，http://news.com.com/Microsoft+tags+IE+7+high+priority+update/2100-7350_3-6098500.html?tag=nefd.lede工作要忙了，早点淘汰IE5吧

06.7.25

不错的Web IDE

http://aptana.com

setTimeout传参数

http://www.hedgerwow.com/360/dhtml/setTimeout2.html

06.7.16

走遍美国:http://xibu.tjfsu.edu.cn/det/learning/usa.htm

06.7.6

mouseover和mouseout活动规律研究。尤其在处理parent-child交叉时，要保持一个清醒的头脑。

06.6.28

图片在层中垂直居中，找到一种很巧的方法，在要显示的图前加一个宽为0高为100%的空图，在父层设图片的vertical-align:middle。这样图片就垂直居中了。DEMO。

06.6.22

实现inline-block:

display:-moz-inline-box; /* Gecko proprietary*/

display:inline-block; /* Opera and other proprietary*/

zoom:1; /* IE */

06.6.11

http://www.teemojo.co.uk/ssdesigner.asp

http://www.corpseclothing.com/

http://www.smartpunk.com/

06.6.9

0~n的随机整数：Math.floor(Math.random()*n)

06.6.8

ie和firefox对document.body和document.documentElement都有自己的理解

梁志林@专栏讲了不少窦唯鲜为人知的事。“生活的压力和生命尊严哪个更重要？” 中国的商业都是只追求表面的利益，那帮商人恨不得马上就发。中国的音乐也是，大众对音乐的认知在媒体误导下早已扭曲。从小就完了，哈韩哈日哈超女，恨不得一夜成名。所有和创意相当的产业，都变成几个有钱人的枯燥的金钱游戏。如果贱人更能适应现在的社会环境，全身说明社会已经够变态了。

06.6.7

原来ie5.5/ie5.0识别document.documentElement为当前窗体。

  if(document.body && document.body.scrollTop){
   sH += document.body.scrollTop;
   sW += document.body.scrollLeft;
  }else if(document.documentElement && document.documentElement.scrollTop){
   sH += document.documentElement.scrollTop;
   sW += document.documentElement.scrollLeft;
  }else if(window.pageYOffset){
   sH += window.pageYOffset;
   sW += window.pageXOffset;
  }else if(window.scrollY){
   sH += window.scrollY;
   sW += window.scrollX;
  }

06.6.3

滑块DEMO

06.5.30

runtimeStyle和currentStyle
currentStyle获得元素实际表现出来的CSS属性，就是说除了inline-style、import-style外，还包括了HTML元素属性的设置和HTML元素默认属性的累加。extft.currentStyle.display
通过把元素的runtimeStyle=''可以恢复元素修改前的值。
style只能反映出inline-style和使用脚本设置的样式值。

06.5.26

不用expression的min-width in IE解决方案：

http://www.webreference.com/programming/min-width/2.html

http://www.cssplay.co.uk/boxes/minwidth.html

06.5.23

#scrollbarBlock
{
   _background:transparent;
   zoom:1;
   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="imgs/silblock.gif", sizingMethod='crop');
}这样可以起到将图片缓存的作用，避免额外的HTTP请求。

06.5.17

如果我有幸活到78岁，那么今天已经到了1/3。对自己的努力打80分，对现状打40分。自己感觉还没找到最佳状态，还有1/3的梦想，有梦想路就在脚下。收到久违的老同学和老同事的祝福很高兴。

为了省事，在CSS中用了expression改变button状态，结果IE崩了，所以还是用javascript比较稳妥。

.slideNumber li{h:expression(onmouseover=new Function("this.className='slideLiOver';"),onmouseout=new Function("this.className='';"));}

06.5.12

IE6 Margin BUG

Contra Live!!!

06.5.11

IE的文本BUG

06.5.04

今天白天的几只乐队都挺牛逼的。

摩天楼算国内比较好的英式乐队，但我觉得还不够到位。

青年的最后机会非常凶狠，相当尖锐，喜欢。

接下来的英国乐队wombats让我领略到了什么是纯正的英式。

http://www.myspace.com/thewombatsuk 可以听到他们的歌。他们的音乐很容易感染现场的人。演出一半的时候，开始下起小雨（这样的音乐节才完美）。不得不停下来，工作人员开始保护设备，他们并没有让这段时间变得枯燥，在台上不停的喊"hi...you~~~~"台下的人也一起喊，国外乐队台上的幽默也是国内乐队很缺的。雨并没有让人的情绪冷却反而越来越high，当他们再次开始时，台下的人已经完全high起来了，所有人都随着节奏跳动起来了。尽情享受雨，音乐...结束后，开始发他们的CD，鼓手把鼓锤扔给了观众，可能看到观众太high了，主唱居然把键盘也给出去了，后悔没挤到前面看。

糖果枪太傻了。

山人这只民族乐队简直太逗，很想再看他们一唱一合的现场。

o6.5.01

去看midi音乐节了。人比去年多了，老外更多了。

小舞台的DJ把下面一群人搞的很high。

中舞台也有不错的，克尔曼乐队弗拉门戈感觉不错，中间还夹进一段解放军进行曲，呵呵！

主舞台今天给我印象最深的是一支西班牙乐队UrbanCastleMagic，主唱拿着把jaga一唱我就觉得这是一支像极了Nirvana的乐队，主唱的声音也很像Kurt。演出期间有人把一支鞋飞上去了（我不理解为什么扔鞋）但是主唱很风趣的捡起鞋吻了一下，扔下舞台。这样去年midi AK47演出时有人扔瓶子，主唱声称再扔就杀了他。这就是对音乐理解的差距。

所以我一直对这支乐队有好感。当他们唱最后一首时全场沸腾了，因为他们翻唱了Nirvana的那首You know you're right,副歌部分全场哼唱太牛逼了。最后主唱摔碎了琴，算是向kurt致敬了。

这支乐队的video: Mustapha live! Creajoven 2004 [ you tube ]

myspace:http://www.myspace.com/urbancastlemagic

今年midi的墙上多了涂鸦，不错，应该再多点。

o6.4.30

五一！劳动人民的节日，我就一个朴素的劳动人民。忙忙碌碌，碌碌无为。

o6.4.24

cross-browser display:inline-block

display:-moz-inline-block;

display:-moz-inline-box;

display:inline-block;

帅！解决大问题了。

Internet Explorer 5.0 (Standalone)
Internet Explorer 5.5 (Standalone)
Internet Explorer 6.0
Firefox 1.07( Portable Beta)
Firefox 1.5
Opera 8.54
Opera 9.0 Beta2
Mozilla 1.7.11

关注AFLAX - The AJAX library for the Flash Platform

o6.4.18

Firefox下控制向上翻滚的动画时，用style.top控制性能极低无比（尤其在数据比较多的情况下），IE没问题。所以，在firefox下还得用scrollTop控制向上动作。

一直推荐用em做单位，今天终于发现它的好处了，用em为单位设置行高比较准确。用%，Firefox和IE会有明显的不同，em就没问题。

06.4.16

真的真的不应该浪费时间。现在看似稳定的环境，也许说变就变。

鄙视垃圾产品!

06.4.11

垃圾的html代码，垃圾的javascript代码，不合理的设计，流程的混乱。我们在这上面浪费了多少时间，浪费多少资源，为什么还无所谓。

06.4.10

<a href="" onclick="trace('onclick')" onmousedown="trace('onmousedown')" onmouseup="trace('onmouseup')">event order</a>

在IE下执行的顺序：onmousedown --> onmouseup --> onclick

在FF下执行的顺序：onmousedown --> onmouseup --> onclick，有时会onmousedown --> onmouseup

06.4.5

不间断向上滚动用到scrollTop,scrollHeight,offsetWidth,offsetHeight。 IE5.0会有一些不同。后来发用这种方法性能上不太好。

<style>

body{text-align:center;}

a{font-size:12px;line-height:20px;}

#scrMsg{position:relative;width:200px;height:60px;border:1px solid #333;overflow:hidden;text-align:left;margin:0 auto;}
</style><script>
window.onload = function(){
var s_area = document.getElementById('scrMsg');
var c_s_msg = document.getElementById('curScrMsg');
var n_s_msg = document.getElementById('nxtScrMsg');
var speed = 30;
n_s_msg.innerHTML = c_s_msg.innerHTML;
var anim_scroll = function(){
    if(n_s_msg.offsetTop - s_area.scrollTop <=0){
        s_area.scrollTop -= c_s_msg.offsetHeight;
    }else{
        s_area.scrollTop++;
    }
    s_timer = setTimeout(anim_scroll,speed);
}
var s_timer = setTimeout(anim_scroll,speed);
}
</script>
<div id="other">scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离</div>
<div id="scrMsg">
<div id="curScrMsg">
<a href="">金庸笔下7大美女是哪几位？</a><br>
<a href="">与漂亮明星结婚会怎样？</a><br>
<a href="">动作片和武打片有什么区别？</a><br>
<a href="">张雨生是怎么死的？</a><br>
<a href="">周杰伦赚了多少钱啦？</a><br>
</div>
<div id="nxtScrMsg">
</div>
</div>

06.4.2

原来一直懒的用createElement觉得用innerHTML更方便，昨天在做一个项目的时候，碰到一个用innerHTML无法解决的问题，在button上加click事件，无法把object做为参数调用function。还得根据ID单加一下。而且有时间还得仔细研究一下事件发生次序和元素的层次。

干净的XHTML Code是开发复杂javascript交互效果的基础，这句话写给那些因为不懂而忽视html的人。就如同做好衣服就用好布料，否则做的再花哨也是处理品。

周五很不爽，加了一宿班，结果在表扬加班的人里根本没我，倒不是为了表扬，觉得有些不平衡吧。早晚有一天他们会意识到前端开发和后台开发一样重要，而且难度也很大。国内的网站都很垃圾，没办法，这是大环境所致。只有闷头做一些牛逼的东西出来，慢慢改变这个网站，积累到一定程度时一定会发生革命性的转变。甭管怎么说自己觉得有意思，加不加班，表不表扬也就无所谓了。

昨天晚上看采访万科的王石，他说20多年了，仍然怀着梦想。是的，有梦想，坚持，路就会在脚下延伸。

06.3.30

目前在国内使用XHTML 1.0 transitional标准写页面，还是有些早。因为IE5/IE5.5的用户还是相当的多。而XHTML的标准还是比较严格的，像IE这种本身就不太支持标准的浏览器。写XHTML页面就会出现很多quirks。其中有一些技巧，可以避免出现一些问题：

FF/IE6 对width的计算，不包括padding/margin/border的宽度。IE5/IE5.5则包括。
IE5/IE5.5对空DIV不识别所以要插进一个"  "
设置子层相对父层的空白，要设父层的padding。不能设子层的margin。
同样，设置子层距底边的距离，也是通过设父层的padding-bottom实现。
如果想设置子层的margin-top,会有带动父层也margin-top的现象。所以用padding-top实现。
<div style="float:right">更多...</div><a ...>........</a>这样写IE5下，link也会居右。所以不能用不能block性质的标签，应该用inline的。

06.3.25

重新思考一下定位属性：relative和absolute。relative层相当是框架中的一个个物理单元，其中的absolute层又是relative层的活动的元素。平行的relative层之间后者z-index比前者高，自然前面relative层中的absolute层无论怎么设z-index它也不会盖住后者relative层中的元素。这是很合理的，但做的时候常容易忽视。

早上尘土让这个城市变的昏黄。从家到公司的枯燥的过程，让人很没有感觉。所以到了公司迫不急待的订了两张CD,痛仰的最新EP-NO和脑浊的巡演DVD。点燃一个麻烦问题的往往是前一个问题。所以做一件事前，不要把问题需求搞复杂，但是在做的过程中，要为最最复杂的需求留出余地。

加班不烦，烦的是加班的时候有一群人在装修。

百度的搜索结果页中发现一处CSS的低级错误, 这问题我发现很久了，还没改过来：

code clip 1:

if(typeof(window.innerHeight) == 'number'){

var wH = window.innerHeight;

var wW = window.innerWidth;

}else if(document.documentElement && document.documentElement.clientHeight){

var wH = document.documentElement.clientHeight;

var wW = document.documentElement.clientWidth;

}else{

var wH = document.body.clientHeight;

var wW = document.body.clientWidth;

}

var sY = 0;

if(document.documentElement && document.documentElement.scrollTop){

sY = document.documentElement.scrollTop;

}else if(document.body && document.body.scrollTop){

sY = document.body.scrollTop;

}else if(window.pageYOffset){

sY = window.pageYoffset;

}else if(window.scrollY){

sY = window.scrollY;

}

06.3.23

ViewPort

HTML / CSS JavaScript

viewport window

| |

| document

| |

HTML tag document.documentElement

| |

BODY tag document.body

| |

DIV tag document.[div element]

转成UTF-8编码的数据

$utf = iconv("GB2312","UTF-8",$result);

echo $utf

06.3.20

JSON数据解析

var json='{"Result":{"TITLE" : "天气","DESC" : "温度xx度，风力二三级，风向北风"}}';

var d = eval("("+json+")");

06.3.19

结婚，总是一件高兴的事。今天一个很好的朋友结了。再看看自己好像还没有完全长大。结了婚就进入到人生的另一个阶段。负担肯定大了，钱更重要了，仅存的一点理想也会化为乌有，人会变的极度现实。但还是期待那天。现在有些女人现实,虚荣,贪婪的让人想“杀了她喂猪”。

06.3.18

尽管在CSS中加一些行为不太好，但有时候确实很方便。

IE:

.slideNumber li{

h:expression(onmouseover=new Function("this.style.backgroundColor='#ff8600';"),

onmouseout=new Function("this.style.backgroundColor='#f95100';"));}

Moz:

.slideNumber li:hover{background:#ff8600;}

这两天有些燥，想砸烂电脑，工作不能放松，玩也玩不爽快，不知是怎么了。身边又老见到一些拿无知当个性的傻逼，日子过的有些累了。就像离不开物质生活的婊子，只好心甘情愿的让有钱人玩。被玩的人又想玩别人，以此递归。每天从早上睁开眼，看到的都是相互玩。

06.3.17

div负液态布局：例子

td有一个非常好的性质，如果td设了一个宽度，table没设，table受挤压变窄时，td就会像海绵一样随着变形。div布局，可以使用display:table-cell达到这种效果，不过只有firxfox支持这个属性。

06.3.16

萌萌生日快乐，天天快乐！:)

06.3.15

memory leak, 今天在做一个项目的时候, 被我遇到了。

dEl[i].onmouseover = function (e){

..........................

}

窗口多了，CUP风扇狂转。一定要加一行dEl[i] = null 。

javascript取IP地址：

这个IE不认，靠

localhost = java.net.InetAddress.getLocalHost();

hostaddress = localhost.getHostAddress();

hostname = localhost.getHostName();

使用 是通用的，还要求服务器支持SSI,加到.shtml的文件中var ip = '';

06.3.14

Everything inside a CDATA section is ignored by the parser.

If your text contains a lot of "<" or "&" characters - as program code often does - the XML element can be defined as a CDATA section.

A CDATA section starts with "<![CDATA[" and ends with "]]>"

06.3.13

这首牛B的歌来竟然出自高晓松之手，我开始期待他的新专辑了。

http://music3.mop.com/mu....../1129626710384.wma

06.3.12

今天猛看一些国外网站的关于javascript的资料。分析的很细，解释了很多我原来迷惑的东西。所以很兴奋，所以觉得很多事，不能只看表面。很多事情也不是偶然，所谓莫名其妙后面，是有原因的。www.quirksmode.org这网站太牛B了。把事搞的这么通透，太牛了。

我鄙视那些没什么本事，赚得比谁还都多的那帮人。平时还事逼似的，好像多牛B。如果公司里这样的人多了，就说明这是一个很浮澡的公司，也不会有什么前途了。

06.3.10

做的拖拽效果，在maxthon中会莫名其妙的消失。在网上搜相关资料，有人说是a的bug造成的，其实不是。

这是maxthon的广告过滤造成的。如果关掉 "选项--广告猎手" 中的 "过滤浮动广告" 就没问题。

maxthon判断是否是浮动广告的标准是：

- div的position属性是absolute;

- div有明确的width和height

- div中存在link.

06.3.9

IE5.0不支持apply(). 操!

在XML parse时, 一定要从根 var obj = o.responseXML, 再使用obj.getElementsByTagName(_tag_name_)，否则FF没问题，SB IE就不成。

IE7就会好很多。2年后，我估好，IE6/-的用户降到10%以下，就不用这么费劲了。

06.3.8

突然发现在IE5和FF下，用liquid layou的页面，左栏链接被覆盖。解决办法，把自适应层放到前面。

例如：左浮，200px 右栏 width=100%, 在code中要把右栏放前面。（示例）

06.3.7

今天同事问我一个控制iframe中form的问题，有点意思：

06.3.2

position fixed：

http://www.cssplay.co.uk/layouts/fixed.html

06.3.1

祝妈妈生日快乐，身体健康！:)

SqlParameter[] parameters = {
            new SqlParameter("@opicid",SqlDbType.Int),
            new SqlParameter("@itemid",SqlDbType.Int),
            new SqlParameter("@order",SqlDbType.Int)
            };
    connection.Open();
    SqlCommand command = new SqlCommand("dbo.sp_SetTopicSeq",connection);
    command.CommandType = CommandType.StoredProcedure;
    foreach(SqlParameter parameter in parameters){
              command.Parameters.Add(parameter);
    }
    SqlParameter returnvalue = new SqlParameter("ReturnValue",
              SqlDbType.Int,
                4,
              ParameterDirection.ReturnValue,
                false,
            0,
            0,
            string.Empty,
            DataRowVersion.Default,
            null);
    command.Parameters.Add(returnvalue);
    int rowsaffected = command.ExecuteNonQuery();
    int result = (int)command.Parameters["ReturnValue"].Value;
    connection.Close();
    return result;

06.2.28

在firefox不能用script控制media player控件！想一下也有道理，FF以安全著称，哪能让你轻易执行组件

如果用事件捕捉页面链接的方法，在onclick时，如果发现是.mp3或.wma等的媒体文件，会蹦出下载框

不爽，不得以在扩展名后加一个"?"，如：......opensesame.mp3?

"我尊重那些坚持一贯风格的人"

那帮SB老师不懂装懂，误人子弟。总有一些既不懂装懂，又爱发言的人。

我不容认一些错误堂而皇之的戳在那儿。

06.2.27

Google pages 终于批我了。今天看新闻说现在停止注册了，弄不好我是最后一批，哈哈~~~~。

home