20120109

CSS – 浮動廣告

說明

最近客戶要求網頁上有浮動廣告,這個理論上是小問題,因為以前早就寫過一支。但是沒想到臨時卻找不到Code,於是先上網找找。

找到了Code,但是掛在單頁HTML下可以跑,改成ASPX卻不能跑了。我正納悶是怎麼一回事,原來是因為Visual 2005之後ASPX最上面的聲明是遵循XHTML 1.0 Transitional。

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

而不是舊有Visual 2003的 HTML 4.0。

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

所以不支援語法中的「onscroll」事件等等。

 

解決方法

解決方式如下→

1. 改聲明

2. 改用CSS

3. 改Code

用CSS來處理,比JavaScript簡單得多,唯一一個小小的缺點就是,沒有動態移動廣告的Feel。不過瑕不掩瑜,直接看要移動的圖層html碼如下

  1: <div id="divFadR" style="position:fixed;top:100px;left:1000px;visibility:visible;">
  2:   <table>
  3:     <tr>
  4:       <td valign="top">
  5: <a href="http://www.zakfong.com/" target="_blank"><img border="0" src="http://www.zakfong.com/test.png" alt="Test" width="100" height="100" vspace="5" /></a>
  6:       </td>
  7:     </tr>
  8:   </table>
  9: </div>
 10: 

簡單來說,重點就是在於「position:fixed」,加了這行,一切搞定。

 

參考

JavaScript浮動廣告小視窗

頁面內的超酷浮動視窗(可折疊拖動)

VBScript的浮動視窗

隨著捲軸浮動的視窗DIV

浮動廣告視窗

如何取得IE瀏覽器捲軸的捲動距離

document.body.scrollTop都是0

DHTML的onScroll事件

在IE、FF、Chrome下滚动条的onscroll事件

高手请进,那种DIV随滚动条移动怎么弄的,不是用onscroll事件 因为那样会出现抖动

position:fixed的时刻已到来

window.onscroll和document.body.onscroll的区别

[JavaScript] window.onresize 連續觸發的問題

JavaScript – 浮動廣告

JavaScript – 浮動廣告

說明

最近客戶要求網頁上有浮動廣告,這個理論上是小問題,因為以前早就寫過一支。但是沒想到臨時卻找不到Code,於是先上網找找。

找到了Code,但是掛在單頁HTML下可以跑,改成ASPX卻不能跑了。我正納悶是怎麼一回事,原來是因為Visual 2005之後ASPX最上面的聲明是遵循XHTML 1.0 Transitional。

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

而不是舊有Visual 2003的 HTML 4.0。

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

所以不支援語法中的「onscroll」事件等等。

 

解決方法

解決方式如下→

1. 改聲明

2. 改用CSS

3. 改Code

那就來改Code吧,有幾個地方要注意

1. 首先網路上用的Code,其實可以不用註冊「onscroll」事件,把它改成自有迴圈 (也就是開始後就一直檢查目前的位置),就可以避過事件處理的問題。

2. 之前可以直接指定div中top, left屬性為數字,但是換了聲明之後,不能只是用數字,還須加上單位 (如: px)。

3. document.body.scrollTop的問題。若頁面指定或未指定DOCTYPE時,瀏覽器的解釋方式不同。所以有使用聲明指定DOCTYPE時,就要用document.documentElement.scrollTop (W3C標準);未指定時,就要用document.body.scrollTop;或是利用一個變數來處理差異:

  1: var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

網路上還有用加起來的方式判定:

  1: var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;

4. 廢說少說,直接看Code

  1: <script>
  2:     // 右側浮動廣告寬度
  3:     var fadrWidth = 100;
  4: 
  5:     // 廣告預設位置
  6:     var fadrInitX = 0;
  7:     var fadrInitY = 0;
  8: 
  9:     // 廣告位置
 10:     var fadrX = 0; 
 11:     var fadrY = 0;
 12: 
 13:     // 主要區塊大小 (廣告會置於主要區塊之右)
 14:     var mainBlockWidth = 900;
 15: 
 16:     // FloatADRightInitial: 右側浮動廣告初始
 17:     function FADR_Initial() 
 18:     {
 19:         // 計算廣告之位置
 20:         var pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
 21: 
 22:         // 計算右側寬度, 若右側寬度大於廣告寬度, 則廣告接在主要區塊之右
 23:         var edgeRight = (pageWidth - mainBlockWidth) / 2;
 24: 
 25:         if (edgeRight > fadrWidth) 
 26:         {
 27:             fadrInitX = edgeRight + mainBlockWidth;
 28:         }
 29:         else 
 30:         {
 31:             fadrInitX = pageWidth - fadrWidth;
 32:         }
 33: 
 34:         // 設定位置Y
 35:         fadrInitY = 100;
 36:     }
 37: 
 38:     // FloatAdRightRefresh: 更新視窗位置
 39:     function FADR_Refresh() 
 40:     {
 41:         // 預防定義不同之設定
 42:         var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
 43:         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 44: 
 45:         // 計算每次更新之位移
 46:         fadrX += (fadrInitX + scrollLeft - fadrX) / 5;
 47:         fadrY += (fadrInitY + scrollTop - fadrY) / 5;
 48: 
 49:         // 更新指定圖層之位置
 50:         var fadrStyle = document.getElementById('divFadR').style; 
 51:         // 須加上'px'
 52:         fadrStyle.left = fadrX + 'px';
 53:         fadrStyle.top = fadrY + 'px';
 54: 
 55:         // 每次更新時間,預設為50微秒
 56:         setTimeout('FADR_Refresh()', 50);
 57:     }
 58: 
 59:     // FloatAdRightStart: 啟動
 60:     function FADR_Start() 
 61:     {
 62:         FADR_Initial();
 63:         FADR_Refresh();
 64:     }
 65: 
 66:     FADR_Start();
 67: </script>
 68: 

要移動的圖層html碼如下

  1: <div id="divFadR" style="position:absolute;top:100px;left:1000px;visibility:visible;">
  2:   <table>
  3:     <tr>
  4:       <td valign="top">
  5: <a href="http://www.zakfong.com/" target="_blank"><img border="0" src="http://www.zakfong.com/test.png" alt="Test" width="100" height="100" vspace="5" /></a>
  6:       </td>
  7:     </tr>
  8:   </table>
  9: </div>
 10: 

好吧,說一下結果,其實這段Code改了又改,終於在Chrome, IE9, Firefox上都可以用了,但是我還是要說,JavaScript真的是讓人很討厭,因為每家瀏覽器對於標準的解讀不同,害我們這些程式設計師,常常搞了半天,都是在處理相容性的問題,而不是Focus在真正需要投入的地方。我應該來發明一套新的瀏覽器標準,不但可以準確地顯示要顯示的文件,還可以用來排版,更重要的是底層的Framework要能很輕易地上手,而且重點是「不用擔心到別的地方,外觀就變調了」。

 

參考

JavaScript浮動廣告小視窗

頁面內的超酷浮動視窗(可折疊拖動)

VBScript的浮動視窗

隨著捲軸浮動的視窗DIV

浮動廣告視窗

如何取得IE瀏覽器捲軸的捲動距離

document.body.scrollTop都是0

DHTML的onScroll事件

在IE、FF、Chrome下滚动条的onscroll事件

高手请进,那种DIV随滚动条移动怎么弄的,不是用onscroll事件 因为那样会出现抖动

position:fixed的时刻已到来

window.onscroll和document.body.onscroll的区别

[JavaScript] window.onresize 連續觸發的問題