Google 地圖API 實作範例 (教你回何將Google地圖放到網頁中.)

scooter.tw@gmail.com(admin) — Mon,14 Jul 2008 20:55:33 +0800

今天興致來朝玩了一下Google的Map，覺得還真的不錯，尤其開放了API之後，受益最多的應該是牽涉到旅遊、休閒..等涉及地圖服務相關網站，真的挺方便的喔！小弟就簡單的介紹一下如何利用Google所提供之 Maps API 將 Google 地圖服務內嵌到你的網頁中，並且將座標定至你所要標記的地點。

步驟1：先至 Google Maps 申請一組 API Key (網址：http://www.google.com/apis/maps/signup.html)

1. 將核取控制項打勾(I have read and agree with the terms and conditions的那個按鈕)，並將欲申請Google Maps API的網址填入(例如像本站就輸入：http://www.pro-soho.com )。

2. 按 "Generate API Key" 取得 Key。

3. 最後會出現三個方塊，分別是你取得的 Key (Your key is)，你設定之URL(This key is good for all URLs in this directory:)，以及一個範例(Here is an example web page to get you started on your way to mapping glory)。

範例中會有如下的片段：

程序代碼

此段中(key=ABQIAAAAU42K6cZiPBspSseDAjgVrxRepqq5VEHxc05H62box0rt476kmhQ0nk6V2K6RWEv9xHr3ovELZDXswA)
等於後面的這串ABQ......swA就是你的key，整段JavaScript需放至HTML中之之間。

步驟2：取得欲標記的地點的經緯座標值

1. 進入 Google Maps搜尋頁面：http://maps.google.com/maps/ms?ie=UTF8&hl=zh-TW&msa=2
2. 輸入欲標記的地點的地址或名稱，並按"搜尋地圖"(例如：桃園大飯店)。
3. 確認搜尋結果無誤後，請按"連結至此網頁"，取得地圖的連結。
連結如下：

程序代碼

http://maps.google.com/maps?f=q&hl=zh-TW&geocode=&q=%E6%A1%83%E5%9C%92%E5%A4%A7%E9%A3%AF%E5%BA%97&ie=UTF8&ll=24.853419,121.231384&spn=0.255451,0.422974&z=11

步驟3：將以下範例程式片段copy到之間：

程序代碼

範例網址：http://www.pro-soho.com/Blog/GoogleMap.htm

相關參數說明：

程序代碼

//設定要顯示的控制項
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl
());

Google Maps API 內建四種控制項：

1. GLargeMapControl : 適合給大型地圖的控制項。
2. GSmallMapControl : 適合給小型地圖的控制項。
3. GSmallZoomControl : 只有 Zoom Level 的調整，沒有地圖移動控制。
4. GMapTypeControl : 顯示地圖型態切換的控制項。

程序代碼

//決定你 Google 地圖的中心點位置和縮放大小
map.setCenter(new GLatLng(24.853419,121.231384), 16);

設定 Google 地圖的中心點位置和縮放大小：

1. setCenter(GLatLng(經度, 緯度), [+ 放大(近)] -> [- 縮小(遠)]);

程序代碼

//標記在 Google 地圖上的經緯度
var point = new GLatLng(24.853419,121.231384);
var marker = new GMarker(point);
map.addOverlay(marker);

//在此標記所要顯示的資訊
var html = "桃園大飯店";
map.openInfoWindowHtml (map.getCenter(), html);

在地圖上標記地點：

1. 設定座標值：
var point = new GLatLng(24.853419,121.231384);
var marker = new GMarker(point);

2. 在地圖上放置標點 :
map.addOverlay(marker);

3. 在地圖上放置標點說明 :
var html = "桃園大飯店";
map.openInfoWindowHtml (map.getCenter(), html

解決 Flash 蓋住彈出目錄的方法

scooter.tw@gmail.com(admin) — Fri,07 Mar 2008 21:08:31 +0800

無論是 CSS 下拉式目錄，或是 Javascript 製作出來的彈出式清單，一旦遇到 Flash 時，就被 Flash 遮蓋住，這個問題困擾了不少設計人員，原則上有兩種解決方法，一種是在圖層中使用 IFRAME，另一種則是改變 Flash 嵌入方式。

以下提供改變Flash嵌入方式的語法：

程序代碼

無法播放 Flash 時替代的文字內容

http://img1.qq.com/lady/pics/3931/3931550.jpg">

href="http://lady.qq.com/a/20071007/000003.htm" target=_blank> onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2007/10/07/hot1.jpg" width=240 border=0>

http://lady.qq.com/a/20071007/000009.htm" target="_blank"> onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2007/10/07/hot2.jpg" width=240 border=0>

http://lady.qq.com/a/20071007/000005.htm" target=_blank> onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2007/10/07/hot3.jpg" width=240 border=0>

http://lady.qq.com/a/20071007/000006.htm" target=_blank> onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2007/10/07/hot4.jpg" width=240 border=0>

>http://mat1.qq.com/lady/images/index/2007/10/07/hot01.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000003.htm','','')">

onclick=Mea(1); onmouseout=setAuto()
>http://mat1.qq.com/lady/images/index/2007/10/07/hot02.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000009.htm','','')">

onclick=Mea(2); onmouseout=setAuto()
>http://mat1.qq.com/lady/images/index/2007/10/07/hot03.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000005.htm','','')">

onclick=Mea(3); onmouseout=setAuto()
>http://mat1.qq.com/lady/images/index/2007/10/07/hot04.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000006.htm','','')">

MS SQL 使用 SQL 取得日期部份數值

scooter.tw@gmail.com(admin) — Sat,28 Jul 2007 14:58:49 +0800

在 MS SQL 中使用 getDate() 系統函數會取到精度達微秒的時間值，
所以若是只想取得只有 yyyymmdd 部分或是 yyyymmdd hh:mm:ss 部分的時間值就需要加工處理
我們可以利用 Convert 型別轉換函數來處理

語法：CONVERT ( data_type [ ( length ) ] , expression [ , style ] )

select GetDate()
,CONVERT(datetime,CONVERT(char(10), GetDate(),111),111) as YMD
,CONVERT(datetime,CONVERT(char(11), GetDate(),111) + CONVERT(char(8), GetDate(),108),111) as YMDHMS

其中若是 GetDate() = 2005-02-06 11:22:33.456
則 YMD = 2005-02-06
而 YMDHMS = 2005-02-06 11:22:33

另外在 MS SQL 2000 支援較多的 style 格式參數，可參考線上手冊。

如果在 SQL 2000 Server 環境經常使用的話，可以建立成使用者自定函數

Create FUNCTION dbo.getDateYMD
(@dt datetime )
RETURNS datetime
AS
BEGIN
RETURN ( CONVERT(datetime,CONVERT(char(10), @dt,111),111) )
END

go

Create FUNCTION dbo.getDateYMDHMS
(@dt datetime )
RETURNS datetime
AS
BEGIN
RETURN ( CONVERT(datetime,CONVERT(char(11), @dt,111) + CONVERT(char(8), @dt,108),111) )
END

這樣就可以用下列語法查詢

select getDate(), dbo.getDateYMD(getDate()), dbo.getDateYMDHMS(getDate())

完美的WEB友善列印

scooter.tw@gmail.com(admin) — Fri,19 Jan 2007 16:48:45 +0800

相信用B/S方式做過應用的人都可能會遇到這樣一個問題，如何方便、美觀地實現報表列印。如果使用瀏覽器的列印菜單列印的話，將把網頁上的一些無用的東西打到報表上，比如應用菜單等。因為選擇列印菜單列印網頁將會把網頁中的所有內容全部列印出來，如果你的應用有分幀則列印內容將包括各幀中的內容，而你實際要的內容只是其中一部分。所以有很多應用就只能把列印功能放到後台完成了。　　針對這種情況，我們該怎麼辦？其實可以有多種方法實現網頁列印功能。

一種方法就是使用專業的列印工具，如Crystal Reports(水晶報表)。用過Visual Studio 5.0的朋友肯定記得這個工具，不過那時的版本只有4.幾。現在的最新版本已達9了，近幾個版本的水晶報表都支援WEB列印。最簡單的方法是先用水晶報表製作好模板，然後使用ASP帶參數呼叫製作好的模板即可。水晶報表在網頁上產生報表後，可以直接列印，也可以轉存為其它的比較通過的檔案如Excel檔案。使用水晶報表可以製作出非常漂亮的樣式，關鍵在你對水晶報表的開發能力上，但由於水晶報表價格較高，只有當項目很賺錢時才買得起。

第二種方法是購買第三方的網上列印控件，費用同水晶報表相比便宜，但效果性能到底如何則仁者見仁了。

第三種方法是利用樣式表及JavaScript自定義函數實現。通過樣式表及JavaScript，實現網頁列印，效果也還可以。在此有一個實例請大家看看。下面是列印函數實現詳解：

程序代碼

好了，一切就緒了，現在要做的就是呼叫DP函數，如果你將實現呼叫的按鈕設計在同一張網頁上，則直接呼叫即可；如果你用了分幀方法，實現呼叫的按鈕是在另一張網頁上，則在DP函數的第一行加入window.focus()命令，否則列印的只是有按鈕的網頁。

第四種方法，實現是一種取巧的方法。一樣還是通過呼叫window.print()實現，只是將你要列印的內容專門產生一張網頁，而列印按鈕在另一幀上。假設報表網頁在mainFrame上，按鈕在topFrame上，按鈕呼叫PrintReports()函數，PrintReports()函數如下即可實現列印工作。

程序代碼

讓Flash載入時不需按一下就產生作用

scooter.tw@gmail.com(admin) — Mon,06 Nov 2006 22:13:03 +0800

相信會在網頁建置Flash的設計者都曾經遇過一個擾人問題就是當Flash載入時如果想按Flash上面的按鈕
必須先按一下Flash區塊(讓Flash產品作用)才能去點選所要的按鈕。

例如(以雲科大網頁為例)：

如果你要點選學術單位必須先按一下整個Flash，目的在讓Flash產生作用

再把滑鼠移過去，才會出現子分類的各學院

這樣做或許有它的安全考量，但其實對於網頁的操作是蠻麻煩的，畢竟要讓使用者先點一下，才能正式點選所要功能，不免讓有些使用者會因為點選一下感覺無效而放棄操作，如果只是閒來逛逛那還好，如果因此遺失件大生意可就得不償失囉！

為了解決以上的困擾，看了一下其他有Flash先進的網站，發現可以透過 JavaScript 方式來解決

步驟一：將以下程式碼copy存成AC_RunActiveContent.js

//Copyright 2006 Adobe Systems, Inc. All rights reserved.
var requiredMajorVersion = 8;
// 需要 Flash 的次要版本
var requiredMinorVersion = 0;
// 需要的 Flash 版本
var requiredRevision = 0;
// 支援的 Javascript 版本
var jsVersion = 1.0;

function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
    return src.replace(/\?/, ext+'?');
  else
    return src + ext;
}

function AC_Generateobj(objAttrs, params, embedAttrs)
{
  var str = '  for (var i in objAttrs)
    str += i + '="' + objAttrs[i] + '" ';
  str += '>';
  for (var i in params)
    str += ' ';
  str += '  for (var i in embedAttrs)
    str += i + '="' + embedAttrs[i] + '" ';
  str += ' >';

  document.write(str);
}

function AC_FL_RunContent(){
  var ret =
    AC_GetArgs
    (  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     , "application/x-shockwave-flash"
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_SW_RunContent(){
  var ret =
    AC_GetArgs
    (  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
     , null
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();

    switch (currArg){
      case "classid":
        break;
      case "pluginspage":
        ret.embedAttrs[args[i]] = args[i+1];
        break;
      case "src":
      case "movie":
        args[i+1] = AC_AddExtension(args[i+1], ext);
        ret.embedAttrs["src"] = args[i+1];
        ret.params[srcParamName] = args[i+1];
        break;
      case "onafterupdate":
      case "onbeforeupdate":
      case "onblur":
      case "oncellchange":
      case "onclick":
      case "ondblClick":
      case "ondrag":
      case "ondragend":
      case "ondragenter":
      case "ondragleave":
      case "ondragover":
      case "ondrop":
      case "onfinish":
      case "onfocus":
      case "onhelp":
      case "onmousedown":
      case "onmouseup":
      case "onmouseover":
      case "onmousemove":
      case "onmouseout":
      case "onkeypress":
      case "onkeydown":
      case "onkeyup":
      case "onload":
      case "onlosecapture":
      case "onpropertychange":
      case "onreadystatechange":
      case "onrowsdelete":
      case "onrowenter":
      case "onrowexit":
      case "onrowsinserted":
      case "onstart":
      case "onscroll":
      case "onbeforeeditfocus":
      case "onactivate":
      case "onbeforedeactivate":
      case "ondeactivate":
      case "type":
      case "codebase":
        ret.objAttrs[args[i]] = args[i+1];
        break;
      case "width":
      case "height":
      case "align":
      case "vspace":
      case "hspace":
      case "class":
      case "title":
      case "accesskey":
      case "name":
      case "id":
      case "tabindex":
        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
        break;
      default:
        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// 需要 JavaScript 協助程式以偵測 Flash Player PlugIn 版本資訊
function JSGetSwfVer(i){
    // NS/Opera 版本 >= 3 檢查外掛程式陣列中的 Flash 外掛程式
    if (navigator.plugins != null && navigator.plugins.length > 0) {
        if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
            var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
              var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
            descArray = flashDescription.split(" ");
            tempArrayMajor = descArray[2].split(".");
            versionMajor = tempArrayMajor[0];
            versionMinor = tempArrayMajor[1];
            if ( descArray[3] != "" ) {
                tempArrayMinor = descArray[3].split("r");
            } else {
                tempArrayMinor = descArray[4].split("r");
            }
              versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
            flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
          } else {
            flashVer = -1;
        }
    }
    // MSN/WebTV 2.6 支援 Flash 4
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
    // WebTV 2.5 支援 Flash 3
    else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
    // 舊的 WebTV 支援 Flash 2
    else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
    // 在其它情況下皆無法偵測
    else {
        flashVer = -1;
    }
    return flashVer;
}
// 如果以沒有參數的方式呼叫，這個函數會傳回應為 Flash Player 的版本值或 0.0 的浮點值
// 例如：Flash Player 7r14 會傳回 7.14
// 使用 reqMajorVer、reqMinorVer 或 reqRevision 呼叫時，如果有該版本或更新的版本時，會傳回 true
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision) {
    reqVer = parseFloat(reqMajorVer + "." + reqRevision);
       // 往後尋找最新版本
    for (i=25;i>0;i--) {
        if (isIE && isWin && !isOpera) {
            versionStr = VBGetSwfVer(i);
        } else {
            versionStr = JSGetSwfVer(i);
        }
        if (versionStr == -1 ) {
            return false;
        } else if (versionStr != 0) {
            if(isIE && isWin && !isOpera) {
                tempArray         = versionStr.split(" ");
                tempString        = tempArray[1];
                versionArray      = tempString .split(",");
            } else {
                versionArray      = versionStr.split(".");
            }
            versionMajor      = versionArray[0];
            versionMinor      = versionArray[1];
            versionRevision   = versionArray[2];

            versionString     = versionMajor + "." + versionRevision;   // 7.0r24 == 7.24
            versionNum        = parseFloat(versionString);
            // 是否主版本 >= 需要的主版本，而且次版本 >= 需要的次版本
            if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
                return true;
            } else {
                return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );
            }
        }
    }
    return (reqVer ? false : 0.0);
}

二、在需載入Flash的網頁貼上以下語法

[color=White][color=White][color=White][color=White][color=White][color=Red]三、載入Flash的程式改為以下方式表示：[/color][/color][/color][/color][/color][/color]

http://www.macromedia.com/go/getflashplayer

大功告成囉！^_^ 祝大家測試成功

讓Iframe隨內容自動調整大小

scooter.tw@gmail.com(admin) — Tue,08 Aug 2006 15:30:07 +0800

程序代碼

彈出小視窗，並自動調整成適合圖片的視窗大小

scooter.tw@gmail.com(admin) — Tue,08 Aug 2006 11:54:52 +0800

程序代碼

利用JS+CSS實現圓角

scooter.tw@gmail.com(admin) — Sun,06 Aug 2006 16:01:27 +0800

http://www.html.it/articoli/niftycube/NiftyLogo.png">

by Alessandro Fulciniti

More than one year has passed from the http://www.html.it/articoli/nifty/index.html">first version of Nifty Corners. While it was more of a proof of concept, and the http://pro.html.it/articoli/id_599/idcat_31/pro.html">second version presented some big improvements, there was still something missing. So here I present Nifty Corners Cube, that are simpler and more flexible than the previous versions. Let's start.

New features

If you're new to Nifty Corners, I suggest to look in particular at the article on the http://www.html.it/articoli/nifty/index.html">first version to understand the concept behind them. Basically, Nifty Corners are a solution based on CSS and Javascript to get rounded corners without images.

There are several improvements and new features introduced in Nifty Corners Cube which make it more versatile and simpler to use than the previous versions:

The numbers of parameters has been reduced from four of the first version and five of the second version to just two, of which one is optional.
It's not necessary specify the colors anymore, since they are detected automatically.
They're easier to integrate into the design process, since the padding (both horizontal and vertical) of elements to round is preserved
It's easier to use them with other scripts
The support of CSS selectors has been improved and expanded
Just a single line in the head section is now needed for the whole library: even if they're still based on both CSS and javascript, the presentational CSS for Nifty Corners is loaded automatically by js
They're now released under GPL licence.

Together with the many novelties, that we'll discover through several examples, two features of the previous version has been abandoned. First, the support in Internet Explorer 5.0/Win has been totally dropped. Users of this browser will simply see squared corners, just as users with javascript disabled. The support remains very good however: the examples of the articles have all been tested successfully in IE5.5, IE6 and IE7 beta 2 preview, Opera 8.5, Firefox 1.5 and Safari 2.0. I had to drop even Nifty Corners with borders for compatibility issues I've had with IE and the new approach of the script.

Nifty Corners Cube: introduction

Nifty Corners Cube are a solution to get rounded corners without images, and this third version is build by three main components:

A javascript file, named "niftycornerscube.js"
A CSS file, named "niftycorners.css"
The javascript calls specific for the pages

Now we're now ready to look at the http://www.html.it/articoli/niftycube/nifty1.html">first example: it's a div with big rounded corners thanks to Nifty Corners. As I said before, the CSS file it's added automatically by javascript. In fact, the only reference to an external file in the example is the following:

Regarding the third point, as is the javascript calls needed for the page, the code for the http://www.html.it/articoli/niftycube/nifty1.html">example is the following:

In bold I've reported the part of the script that depends on the page, and that is the call for the function Nifty. This function is the core of the whole library, and receives two parameters that are the strength point of the script. Parameters have to be specified between quotes and separated by a comma. The first parameter is for the CSS selector that targets the elements to round, while the second parameter is for options for default cases could be omitted. Let's see them in depth.

The parameters

The first parameter is for the CSS selector to targets the elements on which apply Nifty Corners. The CSS selectors accepted are: tag selector, id selector, descendant selector (with id or class) and grouping. The following table show some example:

Selector	Example
tag selector	"p" "h2"
id selector	"div#header" "h2#about"
class selector	"div.news" "span.date" "p.comment"
descendant selector (with id)	"div#content h2" "div#menu a"
descendant selector (with class)	"ul.news li" "div.entry h4"
grouping (any number and combination of the previous selectors)	"h2,h3" "div#header,div#content,div#footer" "ul#menu li,div.entry li"

Talking about options: they're identified by keywords and they can be specified in any order and number. Let's see them:

keyword	meaning
tl	top left corner
tr	top right corner
bl	bottom left corner
br	bottom right corner
top	upper corners
bottom	lower corners
left	left corners
right	right corners
all (default)	all the four corners
none	no corners will be rounded (to use for nifty columns)
small	small corners (2px)
normal (default)	normal size corners (5px)
big	big size corners (10px)
transparent	inner transparent, alias corners will be obtained. This option activates automatically if the element to round does not have a background-color specified.
fixed-height	to be applied when a fixed height is set via CSS
same-height	Parameter for nifty columns: all elements identified by the CSS selector of the first parameter will have the same height. If the effect is needed without rounded corners, simply use this parameter in conjuction with the keyword none.

We'll meet the selectors and options through the many examples I've prepared. Let's start.

Example 1: a single div

The http://www.html.it/articoli/niftycube/nifty1.html">first example has been already presented. The code to round the div with id="box" is the following:

The first line is needed to link the nifty corners library, while the others are for the specific page. Background colors of the page and the div id="box" are detected automatically by the script. Another thing to note is that the padding of the div (20px on vertical sides in this case) is preserved.

The part reported in bold is the call to the Nifty function. For the sake of brevity, starting from the next example, I'll report just the calls for this function, but please keep in mind that these have to be incorportated in an embedded script tag or, even better, in an external js file.

Example 2: two divs

In the http://www.html.it/articoli/niftycube/nifty2.html">second example nifty corners were used to round two divs with one single call:

Nifty("div#content,div#nav");

In this case just the first parameter has been used, as is the CSS selector with grouping: the two id selector are separated by a comma. The second parameter hasn't been used, therefore nifty corners will be of medium size (5px) and with antialias by default.

Example 3: transparency

In the http://www.html.it/articoli/niftycube/nifty3.html">example three nifty corners were applied on a div with a gradient background. In such cases the use of inner transparency could be really useful, and will be obtained via the transparent option. Let's see the javascript call:

Nifty("div#box","transparent");

The transparency option is compatible with all others, and is used by default on elements with no background-color set.

Example 4: nifty tabs

The http://www.html.it/articoli/niftycube/nifty4.html">fourth example is one of the major request on nifty corners: a tabbed menu without images. The javascript call is the following:

Nifty("ul#nav a","small transparent top");

Links are rounded on the top side, with small and transparent inside corners. Inner transparency is essential for the rollover effect. In the case rollover with background-color is not needed, here's a http://www.html.it/articoli/niftycube/nifty4bis.html">small variant where each tab is smooth-rounded and has got a different color. The js call in this case is:

Nifty("ul#nav a","top");

There's a thing to highlight, as is the fact that in both examples the tabs are perfectly elastic, since they're em-dimensioned.

Example 5: nifty buttons

In the http://www.html.it/articoli/niftycube/nifty5.html">fifth example a mini-navigation, suitable for blogs and such, is obtained with nifty corners. The code is the following:

Nifty("ul.postnav a","transparent");

In this markup, a class for the buttons has been used, so it would be possible to get several sets of of link-buttons in the same page. On the nifty corners side, the descendant selector with a class has been therefore used.

Example 6: boxes

In the http://www.html.it/articoli/niftycube/nifty6.html">sixth example nifty corners are used to round six divs with fixed height and bold corners. Each of div has a different color, even the lower-right one which is white like the background of the page. Antialias is automatically done, and padding of the list-items, both vertical and horizontal, has been preserved. But in order to honour the fixed height specified via CSS, the fixed-height keyword has to be specified. Here's the only js call used:

Nifty("div#about li","tl bottom big fixed-height");

Example 7: nifty columns

With the http://www.html.it/articoli/niftycube/nifty7.html">seventh example we introduce one of the biggest new features of nifty corners: nifty columns. This feature allow to get a faux-column effect without background. The option that does the trick is same-height, and the elements must be specified within the first parameter. The call for the example is:

Nifty("div#content,div#nav","same-height");

The option same-height tells the script to detect the height of the elements targetted by the css selector and to assign them the same height, as is the maximum value detected, without the need for background-images.

Example 8,9 and 10: more nifty columns

The examples http://www.html.it/articoli/niftycube/nifty8.html">eight, http://www.html.it/articoli/niftycube/nifty9.html">nine and http://www.html.it/articoli/niftycube/nifty10.html">ten are built on the same markup, which is the following:

<ul id="split">
<li id="one">
  <h3>Title</h3>
  <div>Content</div>
</li>
<li id="two">
  <h3>Title</h3>
  <div>Content</div></li>
<li id="three">
  <h3>Title</h3>
  <div>Content</div>
</li>
</ul>

The only things that vary are in fact CSS and the calls to nifty corners, which use nifty columns in the three cases. In the http://www.html.it/articoli/niftycube/nifty8.html">example height the javascript call is the following:

Nifty("ul#split li","same-height");

In http://www.html.it/articoli/niftycube/nifty9.html">example 9 two calls were used: one for the headings, and one, with the same-height options, for lower divs:

Nifty("ul#split h3","top");
Nifty("ul#split div","bottom same-height");

If you don't need rounded corners on the lower part, but you'd like to get anyway elements with the same height, as in the http://www.html.it/articoli/niftycube/nifty10.html">example 10, simply specify the none option:

Nifty("ul#split h3","top");
Nifty("ul#split div","none same-height");

Example 11 and 12: Nifty Corners Layout

We've arrived to two major examples of the article, as is Nifty Corners Layouts. In the example http://www.html.it/articoli/niftycube/nifty11.html">eleven and http://www.html.it/articoli/niftycube/nifty12.html">twelve nifty corners are used extensively for layout and page elements.

In http://www.html.it/articoli/niftycube/nifty11.html">example eleven, as in the previous examples, I left for ease of consultation the CSS and the script embedded in the page. The javascript section is the following:

window.onload=function(){
Nifty("div#container");
Nifty("div#content,div#nav","same-height small");
Nifty("div#header,div#footer","small");
}

When the page has loaded, Nifty Corners are applied on container, small and with faux columns on content and sidebar for navigation, and just small on the footer. The effect o a white border around all the page is achieved with a padding on the container.

The http://www.html.it/articoli/niftycube/nifty12.html">example twelve represent a two-column layout, tabbed navigation and some elements (like dates and comments) common in blog design. In this case CSS and javascript are kept in external files, here is the regarding code in the head section:

Apart from the CSS, two javascript files are linked in; one is the library for nifty corners, while the second one contain the specific call for the page:

window.onload=function(){
Nifty("div#menu a","small transparent top");
Nifty("ul#intro li","same-height");
Nifty("div.date");
Nifty("div#content,div#side","same-height");
Nifty("div.comments div");
Nifty("div#footer");
Nifty("div#container","bottom");
}

The option same-height has been used in two cases: on the three boxes of introduction and between content and navigation. In this second case, rounded corners are not visible, since they're done with transparency inside because the content has not a background-color specified.

Example 13: NiftyLoad

We've finally arrived at the last example. One of the frequent reported question is in fact how to make coexist Nifty Corners with other script, given the fact only one assignation to window.onload is possible.

In the http://www.html.it/articoli/niftycube/nifty13.html">example 13 an alert message, attached to window.onload, is shown before nifty corners proceed. This is done thanks to the function NiftyLoad, that will preserve a previous window.onload function. The javascript section, embedded on the page this time, is the following:

NiftyLoad=function(){
Nifty("div#box","big");
}

In order to make nifty corners work together with other script, you just have to use NiftyLoad instead of window.onload. Obviously the function could go even in an external file, the only important thing is that the two script blocks for nifty corners, as is the library and the page-centric calls, are the last two script blocks of head section of the page. The NiftyLoad function can also be used when nifty corners are the only script of the page, as is in any of the previous examples we've seen.

Troubleshooting and problem solving

While making Nifty Corners Cube I've tried to mantain the script as simple and robust as possible, and I hope to have inspired readersthrough the many example,.

The examples was also a way to test cross-browser compatibility, but this doesn't mean one might never get problems.

Even if javascript knowledge is not necessary, a working knowledge of CSS and HTML is, and it's also good practice to use always validate the code. If you do encounter problems, the first thing is to remove temporarily nifty corners and see if they persist. A general approach of development, that I've used on preparing the examples of this article, is getting the HTML and CSS entirely written before adding Nifty Corners to the page.

Two features introduced in this version should simplify Nifty Corners usage. Colors are detected automatically, and could be changed in the CSS without the need to update the javascript calls. Padding, both vertical and horizontal, is now preserved. Especially for vertical padding, it's suggested to specify a pixel value at least equal to the size of the corners.

The examples should be a good starting point: one thing to keep in mind is that in some case I've used ID, but if you'd need more than one element on a page you should use class or descendant selector, since an id in a page, according to HTML specification, should be unique.

Credits, licencing and download

I'd like to thanks David Lindquist for his help in getting things right in Safari. The idea of nifty columns was inspired by http://www.paulbellows.com/getsmart/balance_columns/">CSS balanced Columns, a very clever way to get faux columns without background.

Nifty Corners Cube are released under the http://www.gnu.org/copyleft/gpl.html">GNU GPL licence and were published on the 22 March 2006 both in italian and english.

The examples and code the code is available for http://www.html.it/articoli/niftycube/NiftyCube.zip">download. Enjoy!

史考特部落格園地 - JavaScript

Google 地圖API 實作範例 (教你回何將Google地圖放到網頁中.)

輸入框高度自動增加

解決 Flash 蓋住彈出目錄的方法

MS SQL 使用 SQL 取得日期部份數值

完美的WEB友善列印

讓Flash載入時不需按一下就產生作用

讓Iframe隨內容自動調整大小

彈出小視窗，並自動調整成適合圖片的視窗大小

利用JS+CSS實現圓角

http://www.html.it/articoli/niftycube/NiftyLogo.png">

New features

Nifty Corners Cube: introduction

The parameters

Example 1: a single div

Example 2: two divs

Example 3: transparency

Example 4: nifty tabs

Example 5: nifty buttons

Example 6: boxes

Example 7: nifty columns

Example 8,9 and 10: more nifty columns

Example 11 and 12: Nifty Corners Layout

Example 13: NiftyLoad

Troubleshooting and problem solving

Credits, licencing and download