2015年1月27日 星期二

[MySQL] 顯示 count 後值為 0 的資料

發表於 2015年1月27日 星期二 1月 27, 2015 /  沒有留言
標籤
最近在寫投票功能遇到的問題，一般在 count 的時候，如果沒有資料的話就不會出現在 query 的結果裡，這邊只要使用 LEFT JOIN 把所有要被統計的項目都列出來就可以了。

view plaincopy to clipboardprint
  1. SELECT a.*,  count( b.wid) AS num from a   
  2. LEFT JOIN b   
  3. ON a.sn=b.wid   
  4. group by a.sn order by num DESC  
Read more

2015年1月26日 星期一

2015年1月23日 星期五

2015年1月22日 星期四

用 css 把區域用圖片填滿: object-fit

發表於 2015年1月22日 星期四 1月 22, 2015 /  沒有留言
標籤 , ,
因為圖片大小不一致的關係，以往要做畫廊的排版都不是很方便，要不就是把圖裁切過後存到server，再不就是計算圖片的長寬後用 js 調整，現在 css 可以直接幫忙解決這個問題，只要使用 object-fit 就可以了。

使用方法是先框出一個固定的區域，然後設定圖片在裡面需要填滿的範圍，如:
img{
width:100%;
height:100%;
}

然後再用 object-fit 設定以下的值:

fill
預設的效果，也就是圖片會變得跟框框一樣大且若跟框框比例不一樣會變形。

contain
圖片完整且剛好放進去。

cover
圖片剛好填滿。

none
圖片不做縮放但還是限制在框框的範圍。

scale-down
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.

看實際效果就能一目瞭然。

See the Pen
object-fit by deathhell (@deathhell)
on CodePen.



IE 還不支援，不過也不意外，目前支援的瀏覽器版本在這邊。

使用了這個屬性後，圖片預設是對齊框框的中央，若想調整的話可以再使用 object-position 去調整，後面可以放兩個值，包含指定位置的 left, top, bottom, right，絕對值或相對值的 10% 或 20px，若是給數值的話第一個值是 x 軸的位置，第二個值為 y 軸位置，如：
selector{
object-position: left top;
}
Read more

讓 less, SASS 在 sublime 裡面易讀

發表於 1月 22, 2015 /  沒有留言
標籤 , ,
最近因為需要寫到 less 的格式，不過用 sublime 打開後發現雖然語法都是 css，但文字卻都是白的，也沒有自動提示的效果，稍微查了一下，發現只要跟 sublime 設定程式碼的格式，就可以變回在編輯 css 的樣子了。

從 sublime 去設定
View > Syntax > [Optional: Open all with current extension as...] > CSS

sublime less
Read more

2015年1月21日 星期三

[php] 將陣列, 物件以字串存進資料庫- serialize

發表於 2015年1月21日 星期三 1月 21, 2015 /  沒有留言
標籤
一般要把比較複雜的資料存到資料庫，會使用陣列或物件的格式，可是資料庫欄位沒有陣列或物件，所以會先把陣列或物件轉成字串後存入，要使用的時候再轉回陣列或物件格式。

要轉成字串要用serialize

view plaincopy to clipboardprint
  1. $object=array('0'=>'第一個','1'=>array('0'=>'第二個的第一個','1'=>'第二個的第二個'),'3'=>'第三個','4'=>'第四個');  


要轉回來用 unserialize

view plaincopy to clipboardprint
  1. $object2=array();   
  2. $object2=unserialize($row['data']);  

顯示內容

view plaincopy to clipboardprint
  1. foreach($object2 as $key=>$value){   
  2.  if( is_array($object2[$key])){   
  3.   echo '['.$key.']</br>';   
  4.   foreach($object2[$key] as $key2=>$value2){   
  5.    echo '└>['.$key2.']->'.$object2[$key][$key2].'</br>';   
  6.   }   
  7.   continue;   
  8.  }   
  9.  echo '['.$key.']->'.$object2[$key].'</br>';   
  10. }  

參考
Read more

2015年1月20日 星期二

2015年1月19日 星期一

隨版面調整的 youtube 影片

發表於 2015年1月19日 星期一 1月 19, 2015 /  沒有留言
標籤 ,
一般來說要在網頁嵌入 youtube 影片，只要到 youtube 複製他提供的 html 就可以了，可是現在網頁考慮各種載具的解析度，往往需要讓畫面可以隨解析度調整，youtube 就沒辦法直接達成這個要求，不過只要稍微調整一下 css，就可以做到這個要求了。

首先先用一個 div 把影片的 html 包起來。

view plaincopy to clipboardprint
  1. <div class="video-container">  
  2.     <iframe src="http://www.youtube.com/embed/" frameborder="0" width="560" height="315"></iframe>  
  3. </div>  


在設定 css 就可以了。

view plaincopy to clipboardprint
  1. .video-container {   
  2.     position: relative;   
  3.     padding-bottom: 56.25%;   
  4.     padding-top: 30px; height: 0; overflow: hidden;   
  5. }   
  6.     
  7. .video-container iframe,   
  8. .video-container object,   
  9. .video-container embed {   
  10.     position: absolute;   
  11.     top: 0;   
  12.     left: 0;   
  13.     width: 100%;   
  14.     height: 100%;   
  15. }  


出處: Responsive Youtube Embed
Read more

2015年1月15日 星期四

2015年1月13日 星期二

[google maps API] 關閉所有開啟的 infowindow

發表於 1月 13, 2015 /  沒有留言
標籤 ,
view plaincopy to clipboardprint
  1. var infoWindows = [];  

view plaincopy to clipboardprint
  1. //add infowindow to array   
  2. infoWindows.push(infowindow);   

再加這個就可以了。

view plaincopy to clipboardprint
  1. function closeAllInfoWindows() {   
  2.   for (var i=0;i<infoWindows.length;i++) {   
  3.      infoWindows[i].close();   
  4.   }   
  5. }  

出處: Close all info windows google maps API V3?
Read more

google maps 計算距離

發表於 1月 13, 2015 /  沒有留言
標籤 ,
方法一：

view plaincopy to clipboardprint
  1. var marker1 = new google.maps.Marker({   
  2.     position: new google.maps.LatLng("31.95678", "177.898673"),   
  3.     map: map,   
  4.     title:"old"  
  5. });   
  6. var marker2 = new google.maps.Marker({   
  7.     position: new google.maps.LatLng("31.45678", "177.098673"),   
  8.     map: map,   
  9.     title:"new"  
  10. });  

計算距離

view plaincopy to clipboardprint
  1. var meters = google.maps.geometry.spherical.computeDistanceBetween(marker1.getPosition(), marker2.getPosition());   
  2. document.getElementById("distance").innerText = meters+"公尺";   
  3.   
  4. 方法说明：computeDistanceBetween(from:LatLng, to:LatLng, radius?:number) 公尺 。  


方法二：

view plaincopy to clipboardprint
  1. var EARTH_RADIUS = 6371;//地球半徑6371km   
  2. function rad(d)   
  3. {   
  4.     return d * Math.PI/ 180.0;   
  5. }   
  6.   
  7. function getDistance(lat1, lng1, lat2, lng2)   
  8. {   
  9.     var radLat1 = rad(lat1);   
  10.     var radLat2 = rad(lat2);   
  11.     var a = radLat1 - radLat2;   
  12.     var b = rad(lng1) - rad(lng2);   
  13.     var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +   
  14.     Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));   
  15.     s = s * EARTH_RADIUS;   
  16.     s = Math.round(s * 10000) / 10000;   
  17.     return s;   
  18. }  


view plaincopy to clipboardprint
  1. var distance = getDistance(marker1.getPosition().lat(), marker1.getPosition().lng(), marker2.getPosition().lat(), marker2.getPosition().lng());  

Read more

分享連結到 facebook

發表於 1月 13, 2015 /  沒有留言
標籤
https://www.facebook.com/sharer/sharer.php?u=要分享的網址

用這個方式分享連結到 facebook 會比較好，因為可以自訂網頁的 meta data，在 fb 的演算法裡出現的機會也比較高，更重要的是非常簡單。


Read more

2015年1月12日 星期一

[扭蛋] 扭蛋戰士NEXT 22

發表於 2015年1月12日 星期一 1月 12, 2015 /  沒有留言
標籤 , ,
ガシャポン戦士NEXT 22

這彈是越南製造的，品質有夠差，比中國山寨的還差，可惜了裡面有 Z 跟 Mk-IV 幾隻喜歡的機體，還好 NEXT 23 又回到中國製造了，這彈就忍痛看一下。


Zeta GundamZeta Gundam

Zeta Gundam- 就不用多介紹了，這幾年每次出一版新的就有修過一些造型，越修越好看。
Read more

2015年1月10日 星期六

2015年1月7日 星期三

[HG] Z II

發表於 2015年1月7日 星期三 1月 07, 2015 /  沒有留言
標籤 , ,
Z II

因為 BB 戰士的鐵機武者鋼丸認識了 Z II，鋼丸因為有正常比例的型態，所以拿來對比也特別有趣，就因為這個紀念所以入手了這架。

Z IIZ II
Read more

2015年1月6日 星期二

2015年1月4日 星期日

制服地圖有趣議題 2015 年 1月

發表於 2015年1月4日 星期日 1月 04, 2015 /  沒有留言
標籤 , ,

由江舜智貼文。


由謝孟哲貼文。


Read more

2015年1月3日 星期六

許雅涵化身CANDY醬　揭華語音樂流行榜榜單

發表於 2015年1月3日 星期六 1月 03, 2015 /  沒有留言
標籤


許雅涵化身CANDY醬　揭華語音樂流行榜榜單

美少女許雅涵所屬公司台灣漂兒娛樂(PUREZMUSIC) ，日前公佈一組由知名插畫家紅色死神所繪製許雅涵可愛Q版小分身的《CANDY醬》，目前已和中國騰訊QQ洽談合作，未來將以《CANDY醬》插畫方式進軍擁有數億人口的QQ騰訊及微信表情和大家做交流。

同時許雅涵也為制服地圖和獎金獵人所共同舉辦台灣制服插畫大賽徵件活動代言，希望將台灣高校制服之美轉換成插畫圖像，讓更多人看到台灣的文創實力。(http://uniform.wingzero.tw/activity/illustration/)

Read more

DC 和 marvel 能力類似的角色

發表於 1月 03, 2015 /  沒有留言
標籤 , ,
最近有機會看完了 DC 正義聯盟和 marvel 復仇者的動畫，對角色有比較多的了解，兩邊都有些能力很像的角色，比如鷹眼和綠箭俠，閃電俠和快銀等，再看到這張圖就特別有感覺，不知道是誰抄誰，但大概天下文章一般抄，也沒看兩邊有什麼計較的消息，大概兩邊都有互抄吧，也因為這樣，之前有兩大漫畫公司合作的作品，就讓這些能力相近的角色來個夢幻對決，再交由讀者去決定勝負，感覺真的很有趣。

Read more

2015年1月2日 星期五

[超級英雄圖譜] Hulk(浩克)

發表於 2015年1月2日 星期五 1月 02, 2015 /  沒有留言
標籤 , ,
Hulk

浩克（英語：The Hulk），本名布魯斯班納（Bruce Banner），是出現在驚奇漫畫出版物中的反英雄虛構人物。浩克由史丹·李與傑克·科比所創作，首次出現於《不可思議的浩克》（The Incredible Hulk）第一部第一期（1962年二月）；從此成為驚奇漫畫旗下最受歡迎的人物之一。
Read more

2015年1月1日 星期四

[超級英雄圖譜] 火星獵人(Martian Manhunter)

發表於 2015年1月1日 星期四 1月 01, 2015 /  1 留言
標籤 , ,
Martian Manhunter

原名為喬恩·瓊茲（J'onn J'onzz）。首次亮相於《偵探漫畫》#225（1955年11月）的備用故事「The Strange Experiment of Dr. Erdel」，由Joseph Samachson撰寫和Joe Certa負責插圖。特徵是綠色皮膚，黃色的眼睛，平時穿著胸口中央有交叉束帶的藍色斗篷，身材高壯的沉穩男人。可飛行、快速移動。

是出生於火星的外星人，但和其他的火星人不同，火星獵人沒有心靈感應的能力。成年後當上了火星的警察，因為變種兄弟所發明的一種病毒的關係，使得妻子死亡，喬恩的情緒變此陷入了低潮。後來喬恩被一位地球科學家俄德博士（Dr. Erdel）利用傳輸機意外地將他帶到了現代的地球，他告訴俄德博士自己從何而來，因為到此的衝擊影響使博士和leaves J'onn死亡，失去了回去的方法，所以喬恩決定打擊犯罪，並等待火星的技術進步來使他被救回去。他自命名為喬恩·瓊斯，並居住在美國的虛構地米德爾敦（Middletown）。他的靈感被認為是來自於《蝙蝠俠》#78中的一個故事，因火星人Quork，在偷走飛船後來到了地球，使一個火星執法人來到地球和蝙蝠俠與探身份的羅賓合夥捉這位陌生人。
Read more

2014

發表於 1月 01, 2015 /  沒有留言
標籤 ,
蘋果日報報導制服票選

記錄今年做過的事情

  1. 我畫的超級英雄第三版超級英雄圖譜，希望可以多畫一些，不過要有時間 XD
  2. 制服地圖的功能持續開發，有空就寫一些，最近談了很多合作，明年會有很大的不同。
  3. 一直很想做的氣象站，搭配氣象局的 open API，我的氣象站上線，不過目前只有台灣天氣，UI 有做 RWD 的調整。
Read more
訂閱： 文章 (Atom)
Related Posts Plugin for WordPress, Blogger...