程式筆記

[Drupal]解決表單#ajax失效及出現 Undefined index: #ajax 錯誤的問題

碰到這個問題，主要是在利用#ajax實作 dependt field時，原本一切正常，然後突然莫名其妙功能失效，因為過程中多做了一堆js程式，還以為是後來寫的造成衝突，結果浪費了半天生命，突然心血來潮查syslog才發現，原來問題不在js，而是在php啊...T_T

Google了好久，終於找到問題出在image_button，因為我照著Form API 利用image_button取代了原本的submit，

而因為#ajax 還是利用submit來觸發取回form item的作業，所以改回原本的submit就恢復正常了。

但總覺得如果這樣的話，image_button也太雞肋了，繼續Google，試了老半天，最後在這裡看到一個-2分的答案，把image_button的 #value 移除，因為沒招了死馬當活馬醫，結果竟然成功了!!

雖然解決問題了，但實在莫名其妙啊!!

資料分組

以下示範把所有 class=myitems 的div做分組，兩兩為一組

javascript

var lis = $(".myitem");
for(var i = 0; i <= lis.length; i+=2) {
   if( i == lis.length){
     lis.slice(i).wrapAll("
 

"); }else{ lis.slice(i, i+2).wrapAll("

 

"); } }

解決CSS的:hover語法於ipad中失效問題

CSS的:hover語法，再Android手機中，可以自動轉為touch效果。但這在iOS的觸控行動裝置(ipad,iphone)中會失效，此時只能依靠javascript註冊event來處理。語法如下：

$('selector').bind('touchstart touchend', function(e) {
    e.preventDefault(); //如果是連結的話，需要先移除連結的預設功能，避免一touch就轉頁了
    $(this).toggleClass('ishover');//為被touch的物件增減一個ishover的class
});

[CSS小技巧]讓google map嵌入的iframe支援RWD

本文參考自這裡

原理是在iframe外面增加一個container，利用這個container來偵測區域尺寸

HTML內容如下：

<div class="iframe-rwd">
    <iframe ...></iframe>
</div>

CSS內容如下：

.iframe-rwd  {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

純CSS的Div置中

利用inline-block的等高特性，搭配:before 或 :after 來取得container的高度

可適用於未知高度的內容div

HTML：

<div class="container">
  <div class="content">內容</div>
</div>

CSS：

 .container{
  width:400px;
  height:400px;
  text-align:center;
  border:1px solid  #000;
}
.container:before{
  height:100%;
  display:inline-block;
  vertical-align:middle;
  content:'';
}
.content{
  display:inline-block;
  vertical-align:middle;
  padding:10px;
  background-color:#aaa;
}

[jQuery] 停用<a>的作用

有時候我們會以<a>作為按鈕來觸發一些動作，但因為在沒有設定href的狀況下，會將頁面帶向頁首(page top)，要避免這個情況，就可以利用以下的語法來把這個瀏覽器預設動作取消掉：

 
$('a').click(function(e){
      e.preventDefault();
    });