2014年4月20日 星期日

16 jQuery Menu + 96 color

網站設計/開發的時候,為了快。相信都會找一些現成的產品,與其自己做一個殘缺不全的,當然是找一個現成品又快又方便。

如果你Google一下jQuery menu,首幾個搜尋結果其中一個就是apycom

然後我知道好多人就會開始對apycom不放在眼裡,聽過一個說法就是apycom menu都不是什麼新鮮事,都是左湊右拼。最後卻包裝成一個商品。

於是,有些看不過眼的大大就運用自己的知識去把它加密的程式碼進行解密。

如果你有下載個都知道,每頁最底也會有一句Copyright 強制聲明。
即是你刪除了他,他就會強制生成一個[No back link]的噁心方塊摭擋下拉菜單。

在此提供三個解決辦法。
首先底部一定有一句

第一個方法︰
使用Css 將 id copyright 轉為不顯示。雖然那是駝鳥政策,視而不見。
如果你的網站也有一個同樣名稱的容器就會比較麻煩,因為id是不可重覆的。

第二個方法︰
因為它的檢測方法是先檢查你的網頁是否存在id copyright的容器,至於它是檢查#copyright或是div#copyright就忘記了。
如果沒有就貼上[No back link],即使發現了copyright ,它還會繼續檢查一下是否有一個超連結連到它們的網站
Apycom jQuery Menus
有趣的是那裡只檢查是否有一個超連結前往apycom.com,顯示的文字可以是其它,例如~!@#$%^&甚至是沒有
換言之即是可以寫成那樣

第三個方法︰
買一個要29.95(歐元),那是從前的價位。現在要39.95(歐元),換成你自己的貨幣可以Google一下例如39.95EUR=?HKD,貴到嚇死人,不如自己寫一個,但沒時間了,明天便要交功課,直接刪除它那段檢查用的代碼
建議使用各大TextEditor,例如Notepad++,UltraEdit……可以快速匹配括號。加密代碼在menu.js中的最後一段,以其中一個為例

可以發現,整段代碼都加密了。傳統方法, eval 改 alert ,之後運行。教學就建議使用Firefox,方便複製代碼。彈出對話框中代碼全部複製:
不過不想用FireFox,一向都是Chrome。所以將 eval 改成 console.log ,之後按F12複雜出那埋代碼。
123
複雜後取代原來整段,發覺還有一段被eval了。如法炮制得出了
    var $ = jQuery;
    // retarder
    $.fn.retarder = function(delay, method){
        var node = this;
        if (node.length){
            if (node[0]._timer_) clearTimeout(node[0]._timer_);
            node[0]._timer_ = setTimeout(function(){ method(node); }, delay);
        }
        return this;
    };
    (function(){
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++){
        if (links[i].href && /^http:\/\/(?:www\.|)apycom\.com[\/]*$/i.test(links[i].href))
            return true;
    }
    if (document.body){
        var box = document.createElement('div');
        box.innerHTML = '';
        document.body.appendChild(box);
    }
    return false;
})(); 
刪除那幾行,之後要靠你自己測試。 因為16個菜單不是16個都一樣,只是大同小異。有幾個菜單都有破圖現象,除此之外菜單都是使用過舊的jQuery,可能與你現在使用的版本有衝突。

不過我就看過不少網站在使用,例如是嘉禾影院

1, 4好看, 好水晶, 較反光, 很圓滑的樣子

5, 6, 12 也有些似

2, 10方方的,一個圓角也沒有

3很大的MENU

5幾特別, 與1相似,有條線追蹤著滑鼠

7,與1、5相似,整個方塊很快地追著滑鼠

8很難配合得好

9 挺好兩種效果也很獨特
16挺好

11有Sub list也沒有表示

14唯一一個由X軸水平展開的MENU

15幾有動感,曉動L,可下拉有表示,有Sub List也有表示

16號~11號

2號~10號

最受歡迎,最多人使用的1號


2014年4月7日 星期一

解決Flash 在最上方顯示的煩惱

解決Flash 在最上方顯示的煩惱。

今天公司決定要為網站加入Google Seach功能,但是當加入後,搜索結果被首頁的Flash覆蓋。
之後那個技術問題就落在我身上。

小弟雖然愛玩Web,不過一向對Flash興趣不大。
要學多種語言太煩了,而且一向沒有藝術天份。為免費時失事,Flash帶來的動感就靠其它東西補充。

動畫效果、滑鼠MouseOn/MouseOver、文字陰影都可以用CSS3、jQuery、jQuery UI解決。
我才懶得學多一種語言 Action Script(貌似由2代到3代的改變也超級多),而且Adobe Flash要$買,jQuery免費。
如果我不是製作網上遊戲,我完全看不到的Flash的優勢。
即使網上遊戲,現在也可以完全不依賴Flash進行,單單是HTML5+CSS3+Javascript 技術已經可以滿足到我們。

但是好不幸地,我的老闆堅持要用Flash,沒法子了。老一輩的人就是有自己一思考模式。
好了,你是老闆,我都只是打工,正所謂受人錢財替人消災。

只好在用Flash的前提下解決那個問題。

為什麼Flash 會顯示在最上方?

完全不懂Flash的小弟,要我忽然解決那個問題。好,沒問題,讓我先找出為什麼那個笨Flash會永遠最前端顯示。

用我最信任的Google,按照傳統,找那些還是用英文較好。
flash always on top,之後一大堆結果,現在是爬文時間

http://sierakowski.eu/list-of-tips/54-flash-on-top-of-the-html-elements-changing-the-window-mode-parameter.html
首段就是陳列一下什麼是Flash always on top,圖右方才是我們希望的結果。
但實際的結果是被綠色Flash庶蓋了下拉菜單(就是你鼠標指著然後自己伸出來的菜單)

之後它就說到重點,<object> 或 <embed> 標籤都有一個屬性叫wmode
wmode 有三個有效的值分別是

  • window (那個是預設值) - Flash 會在自己容器內標示在最上方
  • opaque - Flash 和其它HTML元素將會由css z-index 決定誰高誰低
  • transparent - 與 opaque 類同,在Flash下方的HTML元素可以透過Flash的透明區域看見
    (即是暗示opaque HTML元素即使在透明Flash下也看不見?)

所以解決辦法就是將wmode設定為opaque

object 標籤
<object>
...
<param name="wmode" value="opaque">
...
</object>

embed  標籤
<embed ... wmode="opaque" ... >

好,之後文章又說些題外話。
其實那個問題亦都可以在Flash匯出/譯出/發佈的時候設置

好自然老毛病又發作了,原來原生可以設置的。
如果用Html去設置好像有點不可靠,不如在Flash的時候就限制它啦。

細問之下,原來首頁的Flash是外判給其它公司完成。
那source呢(即*.xfl, *.fla)? 當然沒有啦!!
唉,即是說不知是那個開發笨笨忘了選opaque? 害我~!@#$%^&*(

算了,繼續看下去
Flash player 10 新增了兩個wmode,分別是Direct and GPU
詳情在Adobe 官網
http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html
按進去,英文一大篇。已經不想看,知道了關鍵字找一找opaque,
掃一掃子標題Using Window Mode (wmode) values,看完。

好像已經找到結果,但我嘗試後都是失敗。那裡出錯呢。
難道那篇文章已經過時,內容失實?

今次找到另一篇,中文內容真好
https://developers.google.com/+/plugins/+1button/?hl=zh-tw#faqs

為什麼 Adobe Flash 內容會截斷游標懸停泡泡?

那個小標題的下方就是了,
原來根據預設,Flash 內容會顯示在所有其他 HTML 內容上方
哈哈,上一篇也有說到wmode 預設值是window,如果沒有指名,它本來就是預設顯示在最上方。那時啥預設值,很霸度。

如果Flash是透過指令碼加入的情況,您就需要使用更複雜的解決方案。
只要 Flash 元素不是內嵌在 iframe 中,這個方法都可以順利運作。

我不知道我的情況是否複雜,但我又知道我的情況不是透過指令碼加入的情況。
不過就是想玩玩看
https://github.com/scribd/flash_heed
那個複雜的解決方案就是匯入一個flash_heed.js,再呼叫FlashHeed.heed();
好像很有趣,但是呢我也不可以在公司網站那樣做。
加一個flash_heed.js好像有點少提大做,而且我也沒有權利做。
可以存取網頁伺服器的帳戶都不在我手,一個官僚的運作。
我只是負責找出解決辦法,即是叫你Debug但你只可以看源代碼。
多少有點白白的一件事。

算了算了,我可以做到的事做只有。
打開https://github.com/scribd/flash_heed/blob/master/flash_heed.js
把程式碼複製,在Chrome按F12,哈哈,貼上執行。再執行FlashHeed.heed();
然後試試Google search,哇,彈出來的結果真的沒有再被Flash覆蓋,好犀利呀。

好,回到起點,假設不採納那個方案。
我依然想找出為什麼設定了wmode=opaque,也沒有效果?當中肯定是有些東西

找下找下,原來embed已經在HTML5重新定義,
<embed> Tag is redefine in HTML5
it have 4 attributes only.
http://www.w3schools.com/tags/tag_embed.asp
http://webdesign.about.com/od/htmltags/p/bltags_embed.htm
不過公司的網頁宣告還是<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
即是不用理會了,雖然現在有很多quality, title, pluginspage

最後搞了我半天,我把embed 放進一個Div,再加上style="overflow:hidden;"
embed增加一個wmode屬性,設定值為opaque

刪除embed附近的
之後就成功了,起初沒有加入style="overflow:hidden;"
embed 的Flash爆了出來,令到Flash 的容器(Container)變成Body,雖然我不知道為什麼Flash會爆了出來。不過最後做到想要的結果就算了。

以上一看便知那都不知是那個舊Adobe DW自動生成的代碼,見到就不順眼。
重點是竟然在用HTML4.01,重點要用Flash當預上Mobile的時候。就會Redirect去另一頁,那頁用的是GIF,真的整個傻眼了。

細問之下,原來是可以話事的那位頭兒堅持要用Flash?! 因為首頁沒有Flash很單調。
哦,不!?Flash那些Mouse Hover亮燈的Effect,我可以靠Css hover解決,加少少javascript。算了,我想說的都說完。

其它參考資金
object tag
http://www.w3schools.com/tags/tag_object.asp