1月 23, 2010

虎年朋友們543


感謝09年都靠朋友們讓我安然渡過,在此也感謝我的朋友們的照顧,真的是出外靠朋友呢...放在我的小瑪莉旁邊的是剛從米國回來的阿菁送的小禮物紀念品,畢業後雖然5405的大家都各忙各的,但是還是有互相關心啦~在此感謝一下YZU的同學們^^(由於那個小綠人default拿的標語都頗為...不適合我主管看到,因此我自己隨便弄了張紙給他拿...)最左邊的綠色杯子"我不是紙杯"是好友蕃茄送的,感謝他送的生日禮物耶...(這個杯子讓同事們一整個詢問度頗高...)真的很實用唷^^也預祝還在學校的朋友們都能順順利利的畢業,有更好的未來呢~



另外是108Club的朋友們^^,從這些其妙的朋友身上學到很多東西,也跟我分享很多社會經驗之類的東西(當然還有莫名其妙的經驗...一整個很難參透),總之也感謝一下這些朋友們的關照~這天是建清珮榕家小寶貝品安的彌月之喜,他們家小朋友真的很可愛,也讓我體會到當爸媽的辛苦...



這小傢伙大大的眼睛還會看鏡頭唷~哈~以後應該是High咖了!!



另外就是新環境的朋友們,真的人都超好的呢^^希望未來繼續為KM努力奮鬥,配合大家的想法做出更棒更屌更有想法、有質感的東西,而且大家都超有創意的,只要肯做就一定做得到的,希望2010年開始我的朋友們都可以順順利利、健健康康的,往新的目標邁進吧~(我這篇怎麼態度好正面,該不會wincamp回來的心態持續至今吧~)

Read more...

1月 16, 2010

有趣的Coda-Slider



最近因為工作需要~比較常會用到CSS之類的東西,老實說CSS這種東西真的需要些經驗,因為用久了就會知道哪些ok那些用了會有差異,和一些解決的辦法,總而言之~就是用久就會了(我感覺要用很久)

今個順便紀錄一下Coda-Slider這個東西,Coda Silder其實就是講網頁區塊的橫向effect方式,這在flash的網頁其實頗為常見,以前做的案子透過Flex只要輕鬆的下個指令就可以做這種slide的動作,但如今不能使用flash的前提之下(為了要用精簡版又要符合我超愛酷炫的效果),公司最近的東西就使用了Coda-Slider來做

可以到這邊看看漂亮的效果 [Panic],當然官方這邊有更多的DEMO可以看看唷!!也順便為我自己紀錄一下~

但聽說這個方式對 SEO 和 Usability 有些許影響,所以盡量不要整個網站都這樣搞...

雖然我還不會用JQuery~-而且這個東西跟JQuery有相當大的關連,但自己看一下語法~稍微修修改改應該是不成問題,現在滿多CMS都有用到這類的東西,我想是未來的小趨勢吧,這陣子跟Flash真是愈來愈遠了^^

很貼心的是~這裡有滿完整的教學...當然英文是在所難免的,加減看吧~哈

講一下這個東西的好處-摘自介紹這個東西的網站(以下簡稱這個東西)
1. 這個東西不像Flash會吃CPU資源...without hogging browser CPU
2. 這個東西用不到Javascript
3. 這個東西在效果上支援tab的方式和左右navigation的方式
4. 這個東西不影響顯示內容的格式
5. 這個東西免錢...(公司應該最愛這個~哈)


說到這邊突然想到前陣子弄的影片之類的東西(因為構想是從那邊轉換過來的)




(我想我離題了...)稍微講一下怎麼弄的好了~

1. 在HTML的部份
Class navigation的部份是代表上方的tab
而class scrollContainer很明顯的就是放content的地方囉


<div id="slider">
<ul class="navigation">
<li><a href="#sites">Sites</a></li>
<li><a href="#files">Files</a></li>
<li><a href="#editor">Editor</a></li>
<li><a href="#preview">Preview</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#terminal">Terminal</a></li>
<li><a href="#books">Books</a></li>
</ul>

<!-- element with overflow applied -->
<div class="scroll">
<!-- the element that will be scrolled during the effect -->
<div class="scrollContainer">
<!-- our individual panels -->
<div class="panel" id="sites"> ... </div>
<div class="panel" id="files"> ... </div>
<div class="panel" id="editor"> ... </div>
<div class="panel" id="preview"> ... </div>
<div class="panel" id="css"> ... </div>
<div class="panel" id="terminal"> ... </div>
<div class="panel" id="books"> ... </div>
</div>
</div>
</div>



2. 在CSS的部份
主要是調整整個滑動區域的樣式參數(要多大.邊界多寬之類的)


#slider {
width: 620px;
margin: 0 auto;
position: relative;
}

.scroll {
height: 250px;
overflow: auto;
position: relative; /* fix for IE to respect overflow */
clear: left;
background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}

.scrollContainer div.panel {
padding: 20px;
height: 210px;
width: 580px; /* change to 560px if not using JS to remove rh.scroll */
}


關鍵來了
3. 在Load外部檔案的部份
由於這個東西主要是使用jQuery,所以人家寫好的東西,我們就從外面把他load進來就好囉
可以放在</head>之前


<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.3.3-min.js" type="text/javascript"></script>
<script src="jquery.localscroll-1.2.5-min.js" type="text/javascript"></script>
<script src="jquery.serialScroll-1.2.1-min.js" type="text/javascript"></script>



靠邀~人家寫好的東西不給我怎麼用~
來囉~主要是剛剛那幾個.js檔案囉~看不懂就不用改了...(我也不太會)

Download

下載後放在根目錄或是指定個路徑,改一下剛剛上面的路徑就ok囉~

Read more...

1月 07, 2010

2010新生活~oh YA



其實光國小同學會就可以寫滿滿一篇了,只是這個年底到現在真的發生了好多事唷~話說回來能參加到國小的同學會真的是我莫大的光榮,哈~因為還被人肉搜索才找到,我想我真的失聯太久了,但2010年真的要來了~oh ya!!(這裡似乎有點太跳tone)

從12月弄到現在過了很久,真的很沒心在寫自己的部落格了~哈哈!!可能是因為在公司目前就一直在做這方面的,重要的是做的開心實在就好...^^因為現在都會告訴自己要每天都有滿滿的熱忱,我想這或許是新人訓帶來的Action效應吧~

從12月到現在都2010年了,發生了好多事~也整個轉換了心情,沒空一一道來,但這陣子真的收穫滿多的,例如:耶誕節交換禮物,俺拿到了可愛的小白板,老實說我還滿愛的,只是板擦不知道放哪...



聖誕節後到台北逛逛,居然101附近萬人空巷,我可以在馬路上躺著拍照...




因為剛好遇到遊行(我好無聊...)



跨年和學長姐們一起吃火鍋放煙火玩wii順便看101雞毛撢子~還滿有趣的~在這裡先感謝VIVI學長所提供的超豪華干貝,也太好吃了吧~



另外再感謝yoyo學姊他們家準備的火鍋,大伙兒也太會吃了,吃了三鍋...




跨完年回新竹搬家,新房間整個超大的...感謝老爸幫我找了個好房間(雖然目前洗手台有點堵住...)感謝房東豪邁的提供了10坪的空間讓我可以玩一下巧拼,一整個很想好好佈置一下^^




新的一年來囉~祝福大家能夠順順利利的,除了自己過的好之外,別忘了幫助更多需要幫助的人唷~

ok的

Read more...
Related Posts with Thumbnails