BBC的改版方式 »
« 今天参加了W3C 中国办事处成立大会
在xhtml1.0标准下的浮动广告

Posted on 2006-4-28 星期五

由于xhtml1.0
将原来的文档对象
document.body
从新定义成了document.documentElement
所以之前通常的脚本的用法document.body.scrollTop就失去了意义
附通过验证的浮动脚本,支持firefox：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <title>floater XHTML compatible </title>
  5. <meta http-equiv=“Content-type” content=“text/html; charset=gb2312″ />
  6. <style type=“text/css”>
  7. <!–
  8. body{background-color: #fff;margin:5px;}
  9. #rightFloat{position: absolute;width:80px;height:80px;line-height:80px;top:0px;left:578px;visibility: visible;z-index: 1;background:#f0f;}
  10. –>
  11. </style>
  12.  
  13. </head>
  14. <body onload=“myload()”>
  15. <center>
  16. <div id=“rightFloat”>floater</div>
  17. <script language=“javascript” type=“text/javascript”>
  18. //<![CDATA[
  19. /*
  20. browser detection lite,for full version please visit http://www.fscommand.com.cn/blog/index.php/archives/54/
  21. */
  22. var ua = navigator.userAgent.toLowerCase();
  23. var isGecko = (ua.indexOf(‘gecko’) != -1 && ua.indexOf(’safari’) == -1);
  24. var isOpera = (ua.indexOf(‘opera’) != -1);
  25. var isSafari = (ua.indexOf(’safari’) != - 1);
  26. var isIE = (ua.indexOf(‘msie’) != -1 && !isOpera && (ua.indexOf(‘webtv’) == -1) );
  27. var isMozilla = (this.isGecko && ua.indexOf(‘gecko/’) + 14 == ua.length);
  28. var isNS = ( (isGecko) ? (ua.indexOf(‘netscape’) != -1) : ( (ua.indexOf(‘mozilla’) != -1) && !isOpera && !isSafari && (ua.indexOf(’spoofer’) == -1) && (ua.indexOf(‘compatible’) == -1) && (ua.indexOf(‘webtv’) == -1) && (ua.indexOf(‘hotjava’) == -1) ) );
  29.  
  30. var floatobj = document.getElementById(“rightFloat”);
  31.  
  32. /* get the correct position */
  33. var Ypos;
  34. var Xpos;
  35. var Offwidth;
  36. var Offheight;
  37. var standardCompat = document.compatMode.toLowerCase();
  38. //alert(standardCompat);
  39. function getpos(){
  40.         if (standardCompat == “css1compat”)
  41.         {
  42.                 Ypos = document.documentElement.scrollTop;
  43.                 Xpos = document.documentElement.scrollLeft;
  44.                 Offwidth = document.documentElement.offsetWidth;
  45.                 Offheight = document.documentElement.offsetHeight;
  46.         }
  47.         else if (standardCompat == “backcompat” || standardCompat == “quirksmode” )
  48.         {
  49.                 Ypos = document.body.scrollTop;
  50.                 Xpos = document.body.scrollLeft;
  51.                 Offwidth = document.body.offsetWidth;
  52.                 Offheight = document.body.offsetHeight;
  53.         }
  54. }
  55.  
  56. /* initialization  */
  57. function myload()
  58. {
  59.         if(isIE){
  60.         mymoveIE();
  61.         }
  62.         else{
  63.         mymoveGecko();
  64.         }
  65. }
  66.  
  67. /* move the floater  */
  68. function mymoveGecko()
  69. {
  70. getpos();
  71. floatobj.style.top = (Ypos+self.innerHeight-80)+“px”;
  72. floatobj.style.left = (self.innerWidth-120)+“px”;
  73. setTimeout(“mymoveGecko();”,50);
  74. }
  75. function mymoveIE()
  76. {
  77. getpos();
  78. floatobj.style.top = (Ypos+Offheight-80)+“px”;
  79. floatobj.style.left = (Offwidth-120)+“px”;
  80. setTimeout(“mymoveIE();”,50);
  81. window.status = Ypos;
  82. }
  83. //]]>
  84. </script>
  85. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
  86. <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
  87. <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
  88. <p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus lectus tellus vitae urna. Curabitur a turpis at ligula lobortis cursus.</p>
  89. <p>Donec convallis est id augue. Integer elit. Cras mi. Nulla ac tellus eget wisi facilisis egestas. Pellentesque ac lacus a quam pulvinar ornare. In congue fermentum risus. Pellentesque vitae ligula quis justo vehicula varius. Donec feugiat mi eu urna. Donec erat massa, posuere ac, adipiscing in, lobortis ac, nisl. Donec malesuada turpis sed arcu. Curabitur lacus. Donec eu elit.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
  90. <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
  91. <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
  92. <p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus lectus tellus vitae urna. Curabitur a turpis at ligula lobortis cursus.</p>
  93. <p>Donec convallis est id augue. Integer elit. Cras mi. Nulla ac tellus eget wisi facilisis egestas. Pellentesque ac lacus a quam pulvinar ornare. In congue fermentum risus. Pellentesque vitae ligula quis justo vehicula varius. Donec feugiat mi eu urna. Donec erat massa, posuere ac, adipiscing in, lobortis ac, nisl. Donec malesuada turpis sed arcu. Curabitur lacus. Donec eu elit.</p>
  94.  
  95. </center>
  96. </body></html>

No comments have been added to this post yet.

留下评论

(必需)

(必需)


Information for comment users
Line and paragraph breaks are implemented automatically. Your e-mail address is never displayed. Please consider what you're posting.

Use the buttons below to customise your comment.


RSS feed for comments on this post | TrackBack URI