2013年8月30日 星期五

再見了無名小站 再見了青春

無名人氣
開頭就以無名累積的人氣當個紀念吧。

【重要公告】Yahoo!奇摩無名小站將於2013年12月26日終止服務
從年初就一直有無名要關的消息,雖然雅虎一直否認,可是我還是會擔心。今天雅虎正式證實這個消息,也沒什麼特別衝擊的了,畢竟該搬的都搬了,沒辦法搬的留言只是覺得很傷心,只能感嘆一個時代就這樣結束了。

我在無名還有bbs的時代就跟著他了,後來他公司化後,我也是第一批的白金會員,那時候覺得很熱血,加上我大學畢業那年硬碟壞軌,無名幫我保存了大部分大學到剛出社會的作品,就一直很感恩而繼續續約,後來即使無名越來越差,也一直捨不得白金徽章。

後來是開始寫程式後,因為無名沒辦法掛javascript,就把重心移到blogger,後來又因為圖床的需求,用了可以外連的flickr,再flickr開始繳錢後,直到去年年中才不再續約無名的vip,也放棄了掛了好久的白金會員。

雖然大部分的內容都轉移了,不過在無名正式關站前,應該還是會繼續看有沒有什麼東西可以搬的或再傳到flickr,至少再正式跟無名告別後,不會去後悔有什麼東西沒備份到的... 再見了,無名小站。
Read more

2013年8月29日 星期四

Facebook 各區圖片尺寸

很有用,紀錄一下。
Facebook Photos Size Guide: Dimensions & Types (2013 Edition)

封面相片:長 851 像素,高 315 像素

大頭貼照 (封面):長 160 像素,高 160 像素

大頭貼照 (動態時報上的貼文):長 32 像素,高 32 像素

分享連結圖片:長 155 像素,高 114 像素

時間軸上的上傳相片:長 403 像素,高 403 像素

影片預覽:長 403 像素,高 226 像素
Read more

jQuery 實作類似 gmail 的 auto complete 效果

Auto Complete

最近想要弄一個類似gmail的auto complete效果,因為找了一堆plugin都沒有我想要的效果,所以就自己實作了,功能寫出來了,不知道有沒有bug就是了。

首先準備一個類似下面的html
  1. <label for="select_usr">Select User: </label>  
  2. <div class="auto_com_block">  
  3.     <input type="text" id="select_usr" >  
  4.     <ul class="auto_com_result_list">  
  5.     </ul>  
  6. </div>  
Read more

2013年8月28日 星期三

2013年8月27日 星期二

電腦戰機Virtual ON- TEMJIN(鐵木真)

電脳戦機バーチャロン「テムジン」

這個是Composite Ver.Ka比較早的套件,雖然這套整體來說還算不錯,但有出的套件並不多,這隻是經過地下街看到特價入手的,不然以本來的價位並不會想入手,大概也是這套沒有一直出新套件的原因。

電脳戦機バーチャロン「テムジン」電脳戦機バーチャロン「テムジン」
正面背面
Read more

2013年8月26日 星期一

自己變形的魔動王



網路上看到的,這個人真的很厲害,經過了一個學期摸硬體的東西,才知道做機器人也是很高深的學問,想玩的話還是得多投入一點時間進去。
Read more

2013年8月23日 星期五

jQuery 固定表格標頭

fix-table-head

Plugin 網址
Fixed Header Table

最近在寫 UI 的時候有一個需求是希望表格太長時,往下捲動可以讓標頭固定在上方,可是 html 的 table 元素很特別,沒辦法很簡單的固定在上方,再找怎麼寫css的時候,就找到了這支 plugin ,因為太好用了,所以就直接拿來用了。

  1. <table class="fancyTable" id="myTable" cellpadding="0" cellspacing="0">  
  2.                     <thead>  
  3.                         <tr>  
  4.                             <th>Browser</th>  
  5.                             <th>Visits</th>  
  6.                             <th>Pages/Visit</th>  
  7.                             <th>Avg. Time on Site</th>  
  8.                             <th>% New Visits</th>  
  9.                             <th>Bounce Rate</th>  
  10.                         </tr>  
  11.                     </thead>  
  12.                     <tbody>  
  13.                         <tr>  
  14.                             <td>Firefox</td>  
  15.                             <td>1,990</td>  
  16.                             <td>3.11</td>  
  17.                             <td>00:04:22</td>  
  18.                             <td>70.00%</td>  
  19.                             <td>32.61%</td>  
  20.                         </tr>  
  21.                     </tbody>  
  22. </table>  

準備類似這樣的 html ,注意使用 thead 跟 tbody 的標籤,這個是要讓 plugin 判斷哪邊是標頭哪邊是內容的。

然後開開心心用 plugin。
  1. $('#myTable').fixedHeaderTable({    
  2.     footer: true,    
  3.     cloneHeadToFoot: true,    
  4.     altClass: 'odd'  
  5. });  

Demo
更多用法,也可以參考官方的文件。

記得要用他的CSS,不然就GG了。
Read more

2013年8月22日 星期四

Facebook 推出嵌入貼文功能

這篇有介紹:
Facebook 推出「嵌入貼文」功能(Embedded Posts)
總之就是把那段貼文貼到你想要放的地方,就可以在FB以外的地方看到FB的內容了。




本篇是來自制服地圖,歡迎加入我們的粉絲團喔。

Read more

facebook app 重設 Canvas 高度

最近在做 FB app 的時候遇到怪問題,嵌在FB內的網頁超過畫面的高度,就會出現卷軸,推測是我的頁面是用ajax產生,所以FB進入頁面讀取的時候抓到的高度比較小,但當內容丟到裡面時,裡面的高度變長,就產生卷軸了。

FB大概也不少人遇到過這個問題,有提供解決的方法,重新再給FB頁面內容的高度就好了。
  1. $pageHeight=$("body").height();   
  2.   
  3. FB.Canvas.setSize({ width: 810, height: $pageHeight });   
  4. FB.Canvas.setDoneLoading( function(response) {   
  5.     FB.Canvas.setAutoGrow();   
  6. });  
Read more

2013年8月21日 星期三

Uniform Map 制服地圖部落格

Uniform Map Blog

在制服地圖弄了部落格,攝影師史旺基大大會在上面新增他的攝影作品,看這些青春洋溢的制服攝影作品會讓人心情很好呢。

這次部落格是用Wordpress架的,之前就常聽人家在講Wordpress很棒,架起來後玩了幾天,果然感受到擁護者喜歡他的心情,之後有看到什麼好玩的功能再加到部落格上面。

Uniform Map 制服地圖部落格
Read more

2013年8月20日 星期二

史旺基大大加入制服地圖的經營囉

制服地圖Facebook粉絲專頁成立囉!

昨天跟史旺基大大聊制服地圖的事,很高興他可以加入一起經營制服地圖,當然最主要是他會提供很多漂亮的制服女生的照片喔,對於想要制服外拍的女生,也可以聯絡史旺基大大,相信他一定可以把你拍的美美的,每天看美圖可是可以讓人心情很愉悅呢。

Uniform Map 制服地圖粉絲專頁

Read more

2013年8月19日 星期一

用 javascript 和 css 製作圖片截圖效果

圖片置中

做網站的時候,要做一個有很多圖片併排在一起的排版,因為每張圖片的長寬不一,所以排不好就很容易看起來不整齊,一個選擇是使用瀑布流的方式來排版,就像Pintrest的Pin。另一種則是可以讓圖片限制在一個比例內,如果超過的話就自動遮掉,像Pintrest的Board,剛好Pintrest都有做,拿來一起看就很清楚了。

要截圖很簡單,先用一個div把圖片給包起來,然後再設超過div的部分看不到就好了。
  1. <div class="img_wrap">  
  2.     <img src="img.jpg">  
  3. </div>  
Read more

2013年8月17日 星期六

javascript 回傳多個值

要在javascript 回傳多個值的方法,最簡單的是使用全域變數,不過不是很方便,這邊使用回傳json格式也是一種方法。

  1. function multiValue(){   
  2.    var one = 1;   
  3.    return {  'var1' : one , 'var2': 2};   
  4. }    
  5.   
  6. var  obj = multiValue();   
  7. alert ( obj.var1 );  //  return 1   

還有其他方法可以參考這篇
javascript怎麼傳回多個值
Read more

[扭蛋] 扭蛋戰士NEXT 14

ガシャポン戦士NEXT 14
第14彈我也很喜歡,這次第一次出可以合體的機體,扭蛋還可以做到和體跟變形真的很酷,合體後就只剩4隻,這次主要是鋼彈00跟 A.O.Z. 系列的機體。

00 Gundam00 Gundam
00 Gundam- 本來很訝異動畫很早就出現後繼機,沒想到後來還一直強化又強化的,在再世篇超強的機體。
Read more

Android 版 Yahoo! Weather

Yahoo! Weather
Yahoo! Weather

總覺得iOS都上線很久了,現在才輪到Android版更新,安裝後UI的感覺很棒,結合flickr的天氣相片,又會輪播,變化又多,看起來真的很舒服,覺得這次Yahoo! 的新CEO真的做了很多令人耳目一新的事情呢。

哪天回羅東也多拍一些丟到flickr去分享好了。
Read more

2013年8月14日 星期三

宇宙の騎士テッカマンブレード

宇宙の騎士テッカマンブレード
以前的收藏再拿出來了,雖然這幾年魂Spec跟S.H.Figurarts都有出過套件,可是都不是強化版的,就先把這隻拿出來拍拍,希望之後這隻也有機會有心的模型問世。

宇宙の騎士テッカマンブレード宇宙の騎士テッカマンブレード
正面背面
Read more

2013年8月13日 星期二

[DeTools] 輸入地址取得經緯度座標

DeTools 取得經緯度

這次新增為了寫制服地圖用的輸入地址,就自動幫你算出經緯度的小工具,市區算起來還蠻準的,可是偏遠的地方誤差會比較大,給有需要的人使用。

輸入地址取得經緯度

另外UI有小改一點點,也可以看看。
DeTools v1.1
Read more

jQuery 偵測卷軸位置

簡單的寫一下偵測scroll位置及scroll到指定位置的方法。

  1. <div class="outside">  
  2.     <div class="inside">  
  3.         here is content.<br/>  
  4.     </div>  
  5. </div>  
  6. <div class="scroll_value">Scroll Left: <span class="sc_left">0</span> <br/>Scroll Top:    
  7. <span class="sc_top">0</span>  
  8. </div>  
簡單的準備html,讓裡面的長寬比外面的大,就會產生卷軸了,我再放兩個位置去顯示數值。

偵測卷軸橫向的位置用 .scrollLeft(),括號內沒值回傳位置,有值的話會到指定的位置,縱向的話則使用 .scrollTop()
  1. $(".outside").scroll(function(){   
  2.         $scrollVer=$(this).scrollLeft();   
  3.         $(".sc_left").text($scrollVer);   
  4.         $scrollHor=$(this).scrollTop();   
  5.         $(".sc_top").text($scrollHor);   
  6.     });  

Demo

Read more

2013年8月12日 星期一

用純css做置中效果

剛好看到有人分享的,就做一下筆記,沒有什麼高深的技術,這招學起來還算有用。

Demo

記得要用一層東西把div包起來,並把他的position設為relative就好了,然後在要置中的div寫這樣的css
  1. .Absolute-Center {   
  2.   width50%;   
  3.   height50%;   
  4.   overflowauto;   
  5.   marginauto;   
  6.   positionabsolute;   
  7.   top: 0; left: 0; bottom: 0; right: 0;   
  8. }  

還有其他的用法,可以參考這篇
Absolute Centering in CSS
Read more

2013年8月11日 星期日

CSS3 3D 翻牌效果

用CSS3來做3D的翻牌效果,這個效果很不錯,有興趣可以記一下怎麼做。

Demo

首先準備類似下面的html
  1. <div id="f1_container">  
  2. <div id="f1_card">  
  3.   <div class="front face">  
  4.     <img src="filpcard.jpg"/>  
  5.   </div>  
  6.   <div class="back face">  
  7.     <p>內容放這邊</p>  
  8.   </div>  
  9. </div>  
  10. </div>  

大致看一下就知道要做翻牌效果,要有兩層疊在一起的div,然後當滑鼠滑過去後讓他翻轉就可以了。
css像這樣設
  1. #f1_container {   
  2.   positionrelative;   
  3.   margin10px auto;   
  4.   width400px;   
  5.   height300px;   
  6.   z-index1;   
  7. }   
  8. #f1_container {   
  9.   perspective: 1000;   
  10. }   
  11. #f1_card {   
  12.   width100%;   
  13.   height100%;   
  14.   transform-style: preserve-3d;   
  15.   transition: all 0.5s linear;   
  16. }   
  17. #f1_container:hover #f1_card {   
  18.   transform: rotateX(180deg);   
  19. }   
  20. .face {   
  21.   positionabsolute;   
  22.   width100%;   
  23.   height100%;   
  24.   backface-visibilityhidden;   
  25. }   
  26. .face.back {   
  27.   displayblock;   
  28.   transform: rotateX(180deg);   
  29.   box-sizing: border-box;   
  30.   padding10px;   
  31.   colorwhite;   
  32.   background-color#000;   
  33. }  
要改變翻牌方向只要改rotate的坐標軸就可以了。

一些比較少見的css說明
CSS3 backface-visibility Property
CSS3 perspective Property
CSS3 transform-style Property

參考
Flipping content
Read more

2013年8月10日 星期六

[MEGA HOUSE] 翼神世音 RahXephon

RahXephon
因為我很喜歡翼神世音,所以看到這隻到貨就趕快入手,但MEGA HOUSE的品質果然不適很好,可動性還可以接受,不過頭上的翅膀後來因為卡不上就用膠把他黏死了,很多時候只能怪為什麼BANDAI不趕快出模型了。

RahXephonRahXephon
造型沒話說,這年頭造型還不行就沒人買單了。
Read more

2013年8月8日 星期四

Uniform Map 制服地圖- 調整瀑布流呈現及資料抓取方式

Uniform Map- 瀑布流瀏覽

在大神指導下改變了使用plugin的方式,如果直接在img上加上height及width,原本用的plugin就可以更快算出圖片該在的位置,就不會像之前一樣圖片讀完再跑到他該在的位置的情況了。

另外也調整了跑資料的方法,因為資料變動不會很大,本來都是讀php,現在就都用AJAX抓了。

Uniform Map 制服地圖

去看看還有什麼學校有缺的吧。
Read more

2013年8月7日 星期三

2013年8月6日 星期二

用 jquery 製作自動伸展寬度的 input 欄位

auto extend

因為有需求所以研究怎麼寫這樣的 UI: 如果在input的時候,想要後面一直有固定的值的寫法,又希望在打的時候能夠自動跟著輸入的值,這樣看起來使用者會覺得這個值就是之後會輸入到系統的值。

首先準備 html:
  1. <div class="input_row clearfix">  
  2.     <label>Account</label>  
  3.     <div class="input_area">  
  4.         <input type="text" class="input_field" size="2">  
  5.         <span title="thisisacompanythisisacompany">@thisisacompanythisisacompany</span>  
  6.     </div>  
  7. </div>  

這邊簡單提一個東西,因為@後面的寬度也必須要固定,當長度太長的時候才不會爆版,又因為系統可以輸入的寬度可以到20個以上,為了讓版面好看,我就限制住寬度,再用CSS 3讓文字超過寬度會出現 "..." 的字,這樣做起來就很好看了。

  1. .input_area span{   
  2.     display:block;   
  3.     float:left;   
  4.     width:100px;   
  5.     text-overflow:ellipsis;   
  6.     overflow:hidden;   
  7. }  

IE就不管他了。

再來寫 js,讓輸入欄位可以跟著變動,這樣效果就完成了。
  1. function resizeInput() {   
  2.         $length=$(this).val().length;   
  3.         if($length==0){   
  4.             $(this).attr('size', 2);   
  5.         }else if($length<15){   
  6.             $(this).attr('size', $(this).val().length);   
  7.         }else{   
  8.             $(this).attr('size', 15);   
  9.         }      
  10.     }   
  11. $('.input_field')   
  12.     // event handler   
  13.     .keyup(resizeInput)   
  14.     // resize on page load   
  15.     .each(resizeInput);   
  16. });  

Demo

參考
Auto-scaling input[type=text] to width of value?
Read more

2013年8月5日 星期一

php array_search- 尋找陣列值對應的index

  1. $locationArr=array("taipei""newtaipei""keelung""taoyuan""hsinchu""miaoli""taichung""changhua""nantou""yunlin""chayi""tainan""kaohsiung""pingtung""yilan""hualien""taitung""penghu""kinmen""matsu");   
  2. $locationCnArr=array("台北市""新北市""基隆市""桃園""新竹""苗栗""台中市""彰化""南投""雲林""嘉義""台南市""高雄市""屏東""宜蘭""花蓮""台東""澎湖""金門""馬祖");   
  3.   
  4. $key = array_search($location$locationArr);  

參考
Read more

2013年8月3日 星期六

[扭蛋] 扭蛋戰士NEXT 13

ガシャポン戦士NEXT 13
NEXT 13 比較有誠意了,這次飛翼零式跟托爾基斯III一起出,還有X,只可惜飛翼零式是光刀跟雙步槍二選一,我抽到光刀的那一包..

Wing Gundam Zero  Ver. EWWing Gundam Zero  Ver. EW
Wing Gundam Zero Ver. EW- 有EW的飛翼零式是一定要推的阿,做的很棒,可是我想要雙步槍版的阿..
Read more

2013年8月2日 星期五

Uniform Map 制服地圖- 新北市完成,台灣制服收集完成

newtaipei
在新北市完成的這一刻,台灣也完成了,有缺或有誤的再麻煩聯絡我囉,感謝。

taiwan
台灣插滿的樣子。

幾點經驗分享:
1. 感謝網友熱心提供照片,也希望目前缺少照片的學校也能夠有網友可以幫忙提供。
2. 男校還沒有放上去 XD 建中跟徐匯中學都是全男生的學校。
3. 不用穿制服的學校有新港藝術高中 政大附中 中科實中,所以也不在地圖上。
4. 一般來說,公立學校的學生多,制服也比較容易找,都市也比鄉下的學校好找。
5. 台灣大部分的學校都冠高中,可是看起來卻像高職一樣有分科,大概家長都希望自己的孩子都是讀高中才有這種情況吧。
6. 少子化的情況下,有些學校一定會面臨退場的壓力,這個地圖就當一個歷史的紀錄吧。

Uniform Map 制服地圖

之後會再把這些資料做整理再用另一種方式呈現,有空的時候再繼續放其他國家的制服到地圖上,也歡迎有興趣的朋友可以一起來幫忙喔。
Read more

2013年8月1日 星期四

Related Posts Plugin for WordPress, Blogger...