作global結帳時發生IE8不能選信用卡到期日，
因為 IE8 只吃 evt.cancelBubble = true 才不會把click事件往上層傳
所以以下是終極不會有問題的寫法

                if (evt.stopPropagation) { evt.stopPropagation() }
                if (evt.preventDefault) { evt.preventDefault() }
                try { evt.cancelBubble = true } catch (e) { }
                try { evt.returnValue = false } catch (e) { }

evt就是傳進來的event

(補充一下) 這個適合用 window.addEventListener 方式綁事件才需使用，如果用jQuery綁事件直接return false;就有一樣的效果


範例:

       // 經由bike提示，發現這範例不好 jQuery 可以直接 return false;
       $("#gc-exp-month-select a").click(function (evt) {
            $("#gc-exp-month").val($(this).text());
            $("#span-gc-exp-month").text($(this).text());
            $(this).parent().hide();
            if (evt.stopPropagation) { evt.stopPropagation() }
            if (evt.preventDefault) { evt.preventDefault() }
            try { evt.cancelBubble = true } catch (e) { }
            try { evt.returnValue = false } catch (e) { }
           // 在 jQuery 裡上面四行 可以用一行 return false; 就可
        });

 

一般正常來說 如果要網頁的表單(Form) 做資料清除的動作
只要下 reset() 指令就可

document.getElementById("form1").reset();

但是對於 hidden field

<input type='hidden' name='txtId' value='xxx' />

這個方法是沒有作用的 資料還是在

兩個方法解決:
1. reset 之後再各自去清掉 hidden field 的 value (有點笨)
2. 不要用 hidden field 改用 display:none 的 DIV 去包要隱藏的 field
 

一般在崁入youtube影片時，影片的寬高是固定的

隨著螢幕大小自動調整寬高的方式：


CSS：
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


HTML：
<div class="video-container">
    <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

calc()是CSS3的一個計算長度單位的新功能，能使用數學四則運算方式。

1. 使用“+”“-”“*”“/”四則運算；

2. 可以使用百分比、px、em、rem等單位；

3. 可以混合使用各種單位進行計算。

例：
.thing {
  width: 90%; /* fallback if needed */
  width: calc(100% - 10px);
  width: calc((100% - 12px) / 2);
  width: calc(100%/3 - 2*1em - 2*1px);
}

4. 使用時，"+" & "-" 兩邊需加空格(一定要加)， "*" & "/"兩邊是不用加空格(要加也是可以)

5. 瀏覽器的支援：IE9+ , Firefox4.0+ , Chrome , Safari , iOS Safari6.0+ , Android Browser 4.4+
   寫法： width: -moz-calc((100% - 12px) / 2);
              width: -webkit-calc((100% - 12px) / 2);
              width: calc((100% - 12px) / 2);
 

在PC版網站上，由於記憶體很大，background-image的圖，沒有甚麼大小限制，但在手機網站上，由於各家手機記憶體不一，
以iPhone 3GS為例，記憶體只有256mb，所以apple有限制背景圖的大小，以下是原文出處連結
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

大致上來說，iPhone記憶體若是低於256mb 圖片最大不能超過3百萬畫素(長x寬的總像素)，但實際上測試iPhone 3GS在ios6系統上，若是超過2百萬畫素，就會無法正常顯示，這是iPhone的bug。

 .mobile-share_fb{ display:block; background:url("http://www.shopunt.com/css/mobile/images/mobile-s9398562778.png") no-repeat; background-position: 0 -1648px; height: 80px; width: 80px;} 

 .shrink-attr{ background-size: 152px 2104px; width: 40px; height: 40px; background-position: 0 -824px;} 

 .fb-test{ display:block; background:url("http://www.shopunt.com/images/logo_welcome.jpg") no-repeat; background-size:50% 50%; width: 105px; height: 105px;} 

 

IE8 和 IE9 預設沒有 console 物件，若是在 javascript 中有加入 console.log 時，會卡住，解決辨法是做個假的出來。如下:

       //避免 console.log 發生錯誤.
        if (typeof console == "undefined") var console = { log: function () { } };
        else if (typeof console.log == "undefined") console.log = function () { };

這個活動頁左邊 menu 要固定位置 但是不能跑出框框外面
http://www.shopunt.com/tch/event/2014-naked-truth-cc-cream/

所以需要處理scroll物件

<div id="menuContainer">
  <div id="menu">
    <ul>
      <li>menu1</li>
      <li>menu2</li>
    </ul>
  </div>
  <div> ...長內容.... </div>
</div>

js

        var __ContainerHeight = 5000;
        var __ContainerTop = 160;
        var __MenuHeight = 550;
        var __FixedTop = 20;

        $(window).load(function () {

            __ContainerHeight = $("#menuContainer").height();
            __ContainerTop = $("#menuContainer").offset().top;
            __MenuHeight = $("#menu").height();

            $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });
            $(window).scroll(function () {
                var scrolls = $(this).scrollTop();
                //console.log(scrolls);
                if (scrolls < __ContainerTop) {
                    $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });
                }
                else if ((scrolls + __MenuHeight + __FixedTop) > (__ContainerHeight + __ContainerTop)) {
                    $("#menu").css({ "top": (__ContainerHeight - __MenuHeight) + "px", "position": "absolute" });
                }
                else {
                    $("#menu").css({ "top": __FixedTop + "px", "position": "fixed" });
                }
            });

        });

 

由於偶爾會有需要在 <body> 最上方塞入一些 html
例如塞入一個要置頂的 div 區塊
目前這個區塊只有 {DebugMessage}

所以在 master.html 增加一個新的項目 叫做 <!--BodyTop--> 

<body>
    <!--BodyTop-->
    {DebugMessage}
    <a id="anchorGoTop" href="#gotop" class="gotop" style="display: none;"><span><em></em></span></a>

UW.TBase 增加一個 Public 變數  strBodyTop

如此一般網頁使用時 就可以置入置頂的內容 注意:是塞入html
使用上 於 PreRender 時

        '購物button區塊置於 <body> 正下方
        Me.strBodyTop = Me.otContent.SubTemplate("BuyButtonArea").Result

就可以了
 

這是一篇加密文章，需輸入密碼才可閱讀