如何不讓flash object顯示在最上層 如何不讓flash object顯示在最上層

文章發佈於 : 2010-02-04 23:07:32 | 文章分類 : 程式相關
標籤 :
網頁中加入flash object 例如 youtube embedded 影片雖然可以讓網頁增色不少，但是網頁如果使用類似阿維雜記本最下方的wibiya toolbar相同的特效，也就是在網頁顯示中多加一層div來呈現內容，就會發現flash object會顯示在網頁中最上層。如果使用AJAX整頁鎖定特效，例如像colorbox特效，就會看得更明顯。

[ 範例 ]
1. 我們首先在網頁中加入一個youtube的影片

2. 我們希望當按下連結的時候，會出現下面的畫面


3. 可是事與願違，youtube影片會浮現在最上層擋住我們真正要顯示的內容


這時候我們只需要稍微修改一下flash object就可以達成我們想要的功能了。
如果你所使用的flash object是使用符合W3C XHTML標準的寫法 (請參考讓網頁插入的flash符合W3C XHTML標準)，那麼只需要在object 後面加上 <param name="wmode" value="opaque" /> 這段就可以。

如果你所使用的flash object不符合W3C XHTML寫法(目前youtube上面所提供的嵌入語法就是屬於這種)，那麼請修改以下兩個部分
1. 在object 後面加上 <param name="wmode" value="opaque" />
2. 在embed 的標籤中加上 wmode="opaque"，也就是 <embed wmode="opaque" src=xxxxxxx

透過這樣的修改方法就可以讓flash object不會一直顯示在網頁層次的最上層了。



閱讀全文 | 回 應(0)

用jQuery Highlighter做出燈箱效果 用jQuery Highlighter做出燈箱效果

文章發佈於 : 2009-12-30 00:54:42 | 文章分類 : 程式相關
標籤 :
jQuery Highlighter可以幫我們很輕易的做出多種酷炫的燈箱效果，不管是用在自己的網站或者是公司的網站上面都會有讓人驚艷的感覺。

主要的特色有
1. 支援鍵盤快速鍵：直接透過鍵盤按鍵就可以切換不同的區塊；
2. 可客製化：我們可以客製化出屬於自己想要的燈箱效果；
3. 自動撥放：支援頁面載入後，直接啟動燈箱效果，不需要透過使用者點選後才啟動。

  jQuery Highlighter 官方網站
  jQuery Hightlighter Demo


閱讀全文 | 回 應(2)

讓網頁插入的flash符合W3C XHTML標準 讓網頁插入的flash符合W3C XHTML標準

文章發佈於 : 2009-12-28 00:20:20 | 文章分類 : 程式相關
標籤 :
現在的部落格和許多網站都會使用XHTML，但是在網頁中插入flash格式的內容卻往往忽略掉標準XHTML的規範。但是並不是所有的人都了解這個規範是什麼，而提供連結的網站例如youtube.com也沒有顧慮到這點。不過如果你跟阿維一樣很介意自己的部落格或者是網站要符合W3C XHTML標準的話，可以按照以下的方式來修改。

下面這段是youtube所提供的轉貼原始碼，紅色部分所使用的embed是不符合規範的tag
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/ljZpu-HvKjY&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/ljZpu-HvKjY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

如果要符合W3C的規範我們就必須刪掉embed這個區塊，然後在object後面加上
1. type="application/x-shockwave-flash"
2. data="xxxx"，這邊的xxx內容就是原本embed src所包含的部分

修改之後會變成像下面這段，這樣的寫法就有符合W3C XHTML的規範，而且flash也可以正常在網頁上面播放。
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/ljZpu-HvKjY&hl=en_US&fs=1&" width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/ljZpu-HvKjY&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</object>

不過最好的方法還是原始提供連結的網站就提供符合標準的連結碼，畢竟不是每個人都了解怎麼修改這些鬼東西的。


閱讀全文 | 回 應(2)

PHPUnit介紹與範例 PHPUnit介紹與範例

文章發佈於 : 2009-12-16 19:53:33 | 文章分類 : 程式相關
標籤 :
程式的測試是很重要的工作，但是要怎麼做出有效率的測試卻不是一件容易的事情，也因此很多開發者都忽略這個部分，認為自己有測試過就好，因此就常常會發生一些詭異的狀況，而開發人員也因為這樣的生態演化出一套應對教戰手則( [轉] 程式為什麼不會動？程式設計師告訴你為什麼！)。

阿維剛剛找到這個簡報是由PHPUnit開發者所製作的簡報，透過40張簡報教導我們為什麼以及如何使用PHPUnit，希望對各位PHP的開發者有幫助。

Introduction to PHPUnit & Best Practices



閱讀全文 | 回 應(0)

[更新] C#連接MySQL [更新] C#連接MySQL

文章發佈於 : 2009-12-04 11:47:27 | 文章分類 : 程式相關
標籤 :
阿維在五年前(好久遠...)寫過一篇關於C# 連接 MySQL的文章，由於年代久遠MySQL也更新了相關的DLL，所以舊的程式會發生一些錯誤，因此阿維更新了這段程式，希望對於有使用C#連接到MySQL的朋友有所幫助。

安裝MySQL Connector
1. 首先請先到MySQL官方網站下載新的Connector：Connector/Net 6.2
2. 安裝完畢之後請開啟你的Visual Studio，點選專案名稱後按右鍵，接著點選Add Reference
MySQL Connector Add Reference

3. 按下Add Reference之後會開啟下面的視窗，切換到Browse頁籤，如果剛剛安裝Connector的時候是使用預設的路徑，那麼請切換到C:\Program Files\MySQL\MySQL Connector Net 6.2.1\Assemblies這個路徑，就可以看到跟阿維截圖一樣的畫面。
Add Reference MySQL Connector Step 2

4. 根據你的需求選擇要加入的DLL，選好之後按下OK，可以在Solution Explorer看到MySql.Data
Add Reference MySQL Connector Step 4

撰寫程式

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using MySql.Data;
using MySql.Data.MySqlClient;

namespace mysql
{
    class Program
    {
        static void Main(string[] args)
        {
            string dbHost = "資料庫位址";
            string dbUser = "資料庫使用者名稱";
            string dbPass = "資料庫使用者密碼";
            string dbName = "資料庫名稱";

            // 如果有特殊的編碼在database後面請加上;CharSet=編碼, utf8請使用utf8_general_ci
            string connStr = "server="+dbHost+";uid="+dbUser+";pwd="+dbPass+";database="+dbName;
            MySqlConnection conn = new MySqlConnection(connStr);

            // 連線到資料庫
            try
            {
                conn.Open();
            }
            catch (MySql.Data.MySqlClient.MySqlException ex) {
                switch (ex.Number)
                { 
                    case 0:
                        Console.WriteLine("無法連線到資料庫.");
                        break;
                    case 1045:
                        Console.WriteLine("使用者帳號或密碼錯誤,請再試一次.");
                        break;
                }
            }

            // 進行select
            string SQL = "select plain from yammer order by id desc limit 0,10 ";
            try
            {
                MySqlCommand cmd = new MySqlCommand(SQL, conn);
                MySqlDataReader myData = cmd.ExecuteReader();

                if (!myData.HasRows)
                {
                    // 如果沒有資料,顯示沒有資料的訊息
                    Console.WriteLine("No data.");
                }
                else
                {
                    // 讀取資料並且顯示出來
                    while (myData.Read())
                    {
                        Console.WriteLine("Text={0}", myData.GetString(0));
                    }
                    myData.Close();
                }
            }
            catch (MySql.Data.MySqlClient.MySqlException ex) {
                Console.WriteLine("Error " + ex.Number + " : " + ex.Message);
            }
        }
    }
}


執行結果，中文也可以正常顯示
C# connect to MySQL Result

如果有任何問題歡迎跟阿維一起討論


閱讀全文 | 回 應(2)

Highcharts: 免費的純javascript圖表元件 Highcharts: 免費的純javascript圖表元件

文章發佈於 : 2009-12-02 23:47:34 | 文章分類 : 程式相關
標籤 :
阿維之前介紹的十個非常實用的PHP Classes這篇文章中有介紹到兩個好用的圖表產生class，一個是Google大神出的Google charts API，另外一個是pChart。雖然相當的好用可是如果你製作的網站不能連外，那麼即使是強大的Google大神也不能幫上忙，如果你不是使用PHP來寫程式，那麼pChart也沒有辦法幫你。

不過人生也沒有這麼悲慘，阿維找到一個純JavaScript撰寫的圖表產生元件 - Highcharts，除非你開發的系統的使用者連JavaScript都關閉，不然這個免費的元件可以幫我們做出許多美觀且實用的報表。

開啟Highcharts首頁就可以看到超炫麗的圖表，而且將滑鼠移到圖表上面，可以顯示每一個節點代表的資訊，看到這裡是不是很心動了？
Highcharts

別急，讓我們繼續進去Demo Gallery看看更多的範例，左邊選單那常常一大串分類好的圖表等待我們一個一個去哇哇哇。如果你還在為了製作圖表而煩惱，阿維建議你一定要試試看Highcharts！


閱讀全文 | 回 應(2)

backlinks Back Links