網頁設計

不裝外掛,不需關閉javascript,在ie裡就是要貼上資料

孤影 — Wed, 05 Sep 2007 23:41:00 GMT

今天接到一個問題,
有個表單有限制貼上的功能,

<body onpaste="return false;">

因為有很多筆資料要新增,
如果不能貼上的話,那就要自己重key...真的是非常的不UserFriendly...

通常,遇到這樣的情形,
我會直接改用firefox就好了,
不過因為現在只能用ie去編輯(因為對方不想裝FireFox),
那當然,直接關掉ie的javascript也是可以.
但是一關掉javascript的話,連其他的功能也不能用了,
所以只好另想辦法,
當然最有用的方式就是複製那個網頁,拿掉不想要的限制,
然後丟到自己的電腦或是自己的主機上做(當然action要記得改成對方的主機),
但是,這樣還是有點麻煩...

後來找到一個方法,
只要在ie的網址列輸入下列語法就可以了.

javascript:alert(document.body.onpaste=function(){return%20true;});

如果你要測試的話,
可以透過下面網址測試
http://ajunlee.googlepages.com/PasteTest.htm
當然這個測試只能在ie上測試(因為標題已經說了"在ie"...).

先開啟上面的網頁,隨便複製一段字串,
試試看能不能貼到文字方塊中,
然後在複製上面的javascript語法,
貼在剛剛哪個ie的網址列後按下enter,
這時會跳出一個訊息視窗,按下確定關閉訊息視窗,
然後在試試看能否貼上資料!!

當然,可能還有其他的方法,
不過這樣的方式會讓不會程式的人覺得很厲害(或許把妹可以用的到,如果收到好人卡不要怪我)...

試玩silverlight

孤影 — Tue, 04 Sep 2007 15:21:00 GMT

用silverlight畫曲線圖

http://vip.blueshop.com.tw/ajun/demo/StockLine.htm

ps.如果你在瀏覽上面的頁面時會發生錯誤,那應該是silverlight版本的問題...
目前最新版本為 Version: 1.0.20816.0
silverlight runtime ps2.好吧...不應該拿人家網站上的silverlight.js來用...我還是從silverlight 1.0 SDK中拿好了... 這樣就不會有錯誤了.... 只是版本不同的話可能還是看不到...

一些silverlight的sample

孤影 — Fri, 06 Jul 2007 01:15:00 GMT

Silverlight 1.0 beta sample
http://silverlight.net/themes/silverlight/community/gallerydetail.aspx?cat=1

Silverlight 1.1 Alpha sample
http://silverlight.net/themes/silverlight/community/gallerydetail.aspx?cat=2

不知道有沒有人看過微軟的surface
http://www.microsoft.com/surface/

如果看過的話,
那下面這個silverlight範例,應該會蠻吸引人的!
http://delay.members.winisp.net/SilverlightSurface/

Visual Studio 2005中使用silverlight intellisense

孤影 — Thu, 28 Jun 2007 20:11:00 GMT

之前曾經去上過聖殿祭司開的silverlight training,
不過資策會只有裝Visual Studio 2005,
沒有Orcas可以用,那時也不知道怎麼讓VS2005可以有silverlight intellisense,
所以所有的程式都要自己手key...
果然習慣了VS.中的intellisense功能後,要像以前寫ASP或是玩SVG時那樣純手工打造...變得有點吃力,
所以特地找了一下相關資料看在VS2005中怎麼使用silverlight intellisense,
原來,檔案就在silverlight 1.1 Alpha SDK中,
只要將SDK中的silverlight.xsd複製到下面這資料夾就可以了.

C:\Program Files\Microsoft Visual Studio 8\Xml\Schemas

但是還有一點要注意的是...
如果你把檔案複製進去後,重開VS2005後還是沒有效果的話,
你可能要再確認一下你的xaml檔的開頭是不是下面這樣.

玩玩Silverlight streaming

孤影 — Wed, 20 Jun 2007 23:24:00 GMT

微軟的一個新的服務silverlight.live.com,
讓你有4GB的免費空間可以放你的silverlight application或是多媒體.

先看一下我傳上去的...

TokyoDisney (可能有點吵...)

有興趣的可以看一下下面這些相關連結

How to get started with Silverlight Streaming

http://www.fabiopedrosa.info/2007/06/19/how-to-get-started-with-silverlight-streaming/

Silverlight streaming example

http://www.moulster.com/silverlightstream.html

如果你裝了Microsoft Expression Media Encoder Preview後卻發現沒有template的話,

這主要是語系的問題,
所以直接將安裝資料夾中的Template\en的資料夾複製一份並命名為zh-tw(如果你的是繁體中文的作業系統的話)
(Template放置的資料夾 : C:\Program Files\Microsoft Expression\Media Encoder 1.0\Templates\en)

而manifest.xml的內容,你可以直接複製下面這片段來用

<SilverlightApp>
<loadFunction>StartWithParent</loadFunction>
<jsOrder>
<js>MicrosoftAjax.js</js>
<js>PreviewMedia.js</js>
<js>EmePlayer.js</js>
<js>player.js</js>
<js>startPlayer.js</js>
</jsOrder>
</SilverlightApp>

document.body.scrollTop都是0

孤影 — Thu, 07 Jun 2007 15:55:00 GMT

整個五月都沒有在維護blog,
雖然有不少東西可以寫,但就是因為懶...
所以這次一定要趁還想寫的時候趕快寫下來...

今天,再作一個網頁特效的時候,
遇到了一個狀況,
因為要作的功能是,捲動瀏覽器的捲軸後,
廣告圖片會跟著滑動.
而這功能,在網路上已經有很多範例了,
所以特別挑了一個簡短而且在IE跟Firefox上都可以用的來,
稍微修改一下,寫個範例測試,沒有問題就想說可以開始套了,
結果沒想到將那個片段套在程式裡以後,卻不會動...
所以只好重頭debug了.
debug到後來才發現,
原本的測試網頁中使用的document.body.scrollTop是正常的,
但是套用到aspx的頁面時,
不管怎麼捲動,document.body.scrollTop都是0.

google一下後發現,原來是因為網頁的DOCTYPE的問題,
在測試的網頁中,是用下面這片段

但是在網站中,是用

(ps.這是在.Net studio中預設新增網頁時會加上去的.)

所以原本的document.body.scrollTop要改成document.documentElement.scrollTop就可以了.

update - 20070614:

感謝無名氏的提醒,
這才發現原以為ie跟firefox都正常的範例是有點問題的...
而問題點在於,
未使用DTD前,在ie跟firefox都可以使用下列的語法來設定位置

document.getElementById("adimg").style.top = 200;

但是在使用DTD之後,
ie還是可以接受上面的語法,
但是在firefox卻是不行的,
而firefox所能接受的如下(需要加上單位)
document.getElementById("adimg").style.top = "200px"

而這個在ie上是接受的,
所以只要改成如上的語法就可以在ie跟firefox都正常了.

範例網頁:

原始 : http://ajunlee.googlepages.com/rolling.htm
使用DTD : http://ajunlee.googlepages.com/rolling_err.htm
使用DTD修正後 : http://ajunlee.googlepages.com/rolling_ok.htm

玩玩Picasa Web Albums 系列二

孤影 — Wed, 25 Apr 2007 01:16:00 GMT

今天抽空寫了個picasaweb結合lightbox程式,
利用picasaweb提供的JSON,再加上lightbox的效果,
效果如下

你可以點選我的blog左邊的那個picasaweb album下的照片(感覺有點簡陋...)看看demo
或是點選下面這兩個demo.

http://vip.blueshop.com.tw/ajun/demo/picasaalbum1.htm
http://vip.blueshop.com.tw/ajun/demo/picasaalbum2.htm

如果你對這有興趣,要使用的話,只要在網頁加上下面這兩行

其中要修改的為user跟albumid,
user當然就是你的picasaweb的帳號(也就是google的帳號)
albumid是你的相簿的id,而id可以從幾個地方取得,
看是從picasaweb提供的相簿Rss或是從API的結果中都可以取得.

而size則是要顯示的圖檔大小,
目前可以使用的大小為72,144,160,288,800

如果你看了上面的說明後,還是不太會用的話,
那你可以直接使用下面這工具來產生,

http://vip.blueshop.com.tw/ajun/albumlist.aspx

只要輸入你的google帳號後按下[瀏覽],
就會出現你所有公開的相簿,
然後按下圖片下方的[顯示PicasaLightboxAlbum代碼]就會出現該相簿所屬的javascript,
然後再將代碼些在你要顯示相簿的區塊即可.

目前的功能,在一個頁面上顯示一個相簿沒有問題,但多個的話就不保證了...有空再來慢慢調整...

玩玩Ajax系列 - Dom在asp與asp.net

孤影 — Tue, 13 Mar 2007 18:46:00 GMT

前言

這陣子微軟似乎正在大力的推ajax,
而blog中如果有個ajax的資料,似乎也能增加些瀏覽數..

不過這次是因為某個專案的功能,才會有這篇的...

話說,因為支援別人寫的一個用了大量ajax的案子,
但是這個案子原本是用asp,而我則是要用asp.net 1.1開發新功能,

而原本的程式中,
是使用Microsoft.XMLDOM將要傳送的資料打包後post到後端,
程式碼如下(前端javascript的片段)

xmlData = "<xml>..................</xml>"
var xmlDom=new ActivexObject("Microsoft.XMLDOM")
xmlDom.load("domtest.xml")

而後端是用asp.一樣用Microsoft.XMLDOM來接收
而接收的程式如下

Dim mydoc
Set mydoc=Server.CreateObject("Microsoft.XMLDOM")
mydoc.async=false
mydoc.load(Request)

不過,現在問題來了,
1.前端用new ActiveObject("Microsoft.XMLDOM")在firefox下是不會動的.
2.而且也不適合再用Server.CreateObject來建立Microsoft.XMLDOM,
3.因為我是用.net 1.1,所以不能像asp這樣直接load(Request)

在ie中使用xmlhttp是用new ActiveXObject("Microsoft.XMLHTTP");
而在firefox中則是用new XMLHttpRequest();
這個之前有說過.(使用xmlhttp讀取遠端檔案)
那Microsoft.XMLDOM呢??
其實,在firefox是不需要建立這個的.
只要直接使用下面的語法就可以了....

xml = "<xml>..................</xml>";

xmlHttp.open("POST", url);
xmlHttp.setRequestHeader("Content-Type", "text/xml");
xmlHttp.send(xml);

.net 1.1中的Microsoft.XMLDOM呢?
如果注意一下前端送過來的資料就可以知道,XMLDOM實際上就是xml的內容,
所以在.net中是使用XMLDocument去接收,
所以程式碼如下

XmlDocument _xmldoc = new XmlDocument();
_xmldoc.LoadXml(xmlData);

而xmlData就是接收到的xml結構內容,但是.net要怎麼接收呢??

在.net的Request物件跟asp的不同,不能直接用_xmldoc.Load(Request)
而.net中,Requet有個InputStream的屬性,
而這就是我們需要的,只是他是Stream,所以我們在接收的時候需要用StreamReader去接收,
所以接收的程式如下

StreamReader reader = new StreamReader(Request.InputStream);
string xmlData = reader.ReadToEnd();

以上,問題到此就解決了.

最後附上一個測試用的範例,
使用ajax的方式新增Rss item,
在ie跟firefox上都能work.

範例網址 : http://vip.blueshop.com.tw/ajun/item.htm

其中,前端的部分,程式都在頁面中了,
而後端接收的程式(ItemSave.aspx)的原始碼在這 http://vip.blueshop.com.tw/ajun/sample/ItemSave.aspx.cs.txt

有興趣的就玩玩吧!!

iframe中href="javascript:alert('MOG')"有問題 - 原來是因為base target

孤影 — Fri, 09 Feb 2007 19:54:00 GMT

因為asp.net不容許一個頁面有多個form,
所以需要將原本搜尋的功能改用javascript串字串換location的方式來寫.

原本,單一頁上都沒有問題,
但是後來因為需要讓其他網站使用,所以其他網站就使用iframe來包那一頁,
但是,一包進iframe卻發生function沒有被定義的問題...

追了半天才發現,原來是因為<base target="_parent">的問題...

因為搜尋的那頁除了搜尋的功能外,還有其他的link,為了讓他可以點選link後是替換掉整頁,
所以就用最簡單的方法,在header加個<base target="_parent">
而因為搜尋的按鈕是個圖片,所以就用連結的方式包起來呼叫function,
像是:<a href="javascript:search();">圖片</a>.

所以只要將原本的
<a href="javascript:search();">圖片</a>
改成
<a href="javascript:search();" target="_self">圖片</a>
就可以了.

玩玩下面的範例,
你會發現,在iframe中,要呼叫上一層或是其他frame的javascript,
只要用href的方式,加個target就可以了!!

範例 : http://ajunlee.googlepages.com/iframe_js.htm

IE vs. FireFox系列 - createElement option的問題

孤影 — Fri, 26 Jan 2007 15:40:00 GMT

因為想要寫個javascript的function可以自動產生設定好時間區間的下拉選單,
所以寫了下面看是正統的function

var newOpt = document.createElement('option');
newOpt.text = text;
newOpt.value = value;

先用firefox測試,沒有問題,
但是換到IE(6跟7)後,卻發現下拉選單是變長了,
但是卻沒有出現項目的文字內容,
所以,在ie下,用newOpt.text跟newOpt.value應該是沒有作用的,
所以要改成如下

var newOpt = document.createElement("option");
var oText = document.createTextNode(text);
newOpt.appendChild(oText);
newOpt.setAttribute("value",value);

變成需要使用createTextNode來建立option標籤內的文字內容,
然後再用setAttribute來設定option中的value屬性值.