網頁上的呈現、列印與頁首 ( cross browser )

以前在網頁上寫了一個一覽表給人看以後，

若對方有要求要能列印時，

我通常會另外再寫一個專門做為列印用的網頁

而且還在那邊努力的計算每頁可以印出的列數，

以做為控制列印表頭的基礎，

這就有點難度了，因為不同的瀏覽器的狀況不一樣，所以很是麻煩



今天因為努力的找如何在 firefox 上做出列印的預覽，

得知無法以 javascript 來做出預覽的動作時，

意外的看到幾個做法，

特別記錄下來

首先便是 css 中便有特別設置 media="screen" 及 media="print"

前者便是專門用來給螢幕呈現用的樣式，後面便是列印專用

因此我可以在這其中決定哪個區塊或式按鈕要不要呈現，甚至連螢幕上文字顏色與背景顏色都可以和列印出來的不一樣



此外要控制每頁列印的表頭，也不必去辛苦的計算半天

直接用

被這兩個包起來的部份便是列印用的表頭

每頁都會自動列印出去

且試過在 ie , firefox , chrome 上都行

上傳圖片的旋轉( jquery 及 php )

原先讓用戶上傳的照片欄位，最近被舉報說上傳的照片會轉九十度橫躺下來

因此上網查了一下，發現是手機拍照的緣故

只要是手機豎著拍的照片都會有這一個現象發生

因此只好在畫面上加上讓用戶來旋轉照片的按鈕


前台用來轉動照片最厲害的工具 還是 jquery.rotate

因此到其網站下載 jquery.rotate

在 header 內不要忘了加上


然候城市內唱船圖片及預覽的下方在擺上這幾個按鈕



而且語法很簡單

另外，我擺上一個 input hidden 的欄位，用來傳到後台，讓php 知道要轉幾度來慘動圖片


不過麻煩的是，php 轉圖片的方向和jquery 轉圖片的方向是顛倒的


大功告成！

window open 採用 post 來傳值

平常寫程式時，總是能用 post 的方式來傳值，可以避免在網址列被看到傳遞的資料內容

最明顯的例子便是密碼

不過在碰到需要另開視窗時，會使用 window.open

也想要採用 post 的方式來傳值，這就得走不一樣的途徑了

在網路上找了許久中做測試出一可行的方法<>

我的實作例子：(確實可行)

最後的主程式內只要去呼叫 newDesc() 便可以

當然了兩個參數值也必須要有才行

利用 jacascript 來繪圖

最近因為工作上的需要，急需要一套可以利用 javascript 來畫曲線圖的工具，於是再度透過 google 大神的介紹，先是找到了 flot ，這是
基於 jQury 來繪劃出的，剛好這一陣子就在學 jQuery, 所以便選了它。但是試用一下後，發現它有一個致命傷，就是碰到 ie6 時，那個繪圖
網頁便會跳出一些警告，怕使用者會使用不便，於是我再去找到另外一套 Js Charts！

經過一再的嘗試，我決定就使用它來運作。

以下是我作出來的結果：


底下便是我的程式：



不過，這套 JsCharts 還是有幾點的缺點
1. 當 X 軸是日期時，就完全要自定坐標了, 但是自定坐標值時，若該座標沒有點時，就不會出現文字。這有點麻煩。

2. 一條數線上必須要有兩點以上才可以，沒有點或只有一點時，它是完全停擺，還送出個警誥訊息來，不太方便。

3. Title 不接受中文，不過當滑鼠移到點上面時，出現的說明可以有中文！

4. 當滑鼠移到點上面所出現的說明, 在 ie6 時，越告右邊的點，越會亂折行！

基於以上幾點, 我想我應該還會再找一個更適用的工具了 !!!

JsCharts 的網站 : http://www.jscharts.com/

如何防止當按下 enter 鍵後, 表單就送出 submit 了

應工作需要, 必須限制使用者隨便在輸入的欄位中按下 enter 鍵，就把資料送到後方去了, 造成一些不必要的影響。便又開始從 google 大神那邊來搜找解法。google 大神這次還是沒有讓我失望，輕易的找到了解決作法！

當然了, 還是用 javascript 的作法來解決了 !





至於程式中，則更簡單了, 如下

解決 ie6 無法如預期顯示透明的 png 圖

ie6 真的是很討厭, 對於 png 圖的支援有限，當網頁中此用了透明的 png 圖時，不但不會透明，還會以灰色的底來呈現，讓網頁變得超級難看 !

於是請出 google 大神去找一下，果然有解法,

以下為解決步驟 :

1. 到 DD_belatedPNG 去下載 js 檔, 網上有兩個, 下載任一個都可以！

2. 上傳到自己的網站上去

3. 在網頁中加入，


問題便解決了....

用 javascript 來取代 marquee 《by 童顏未老人》

　最近網站上的部份功能被老板要求要改變了，他希望公司的訊息能跑馬登的方式來呈現，呵，這不太難：


　不過這會有一個問題，那就是在 "星期五,同劉真去跳舞" 和 下一次出現的 "星期一,幫林志玲穿新衣" 間會有一大塊的空白，會形成冷場，所以這不是我所要的。但是我在網路上找半天後發現，用現成的 marquee 來製作的話，好像就一定會有這一大塊的空白。恩，看來要用 javascript 了。


　先用 google 大神找一下，果然網路上有現成的，但是很多都是有點小問題，不是只能在 ie 跑，要不然在 firefox 下會毫無動靜，不過還是讓我找到一個最簡單又貼近我的需求的作品，雖然它有一個小問題，就是當滑鼠移入後不會讓跑馬燈停下來，不過這還好，修改一下就可以了 :


而結果也還算是如人意，若想要調整捲動速度時, 僅要去改一下 setInterval(NewsMarquee,100); 裏面的數字即可 !

透過 javascript 來新增與刪除上傳檔案《by 童顏未老人》

　最近又碰到一個比較困難的東西，就是要在使用者上傳檔案時，需要可以任意的新增檔案，也要能隨意刪出任一個已選的檔案。

　如下圖是最先的狀況，


　使用者可以任意的點選「新增檔案」來增加上傳的檔案數。


　若覺得不妥想再刪除，只要點選該檔案後面的「刪除」，即可。


　新增的部份比較簡單，刪除的部份我花了不少時間才弄出來。

　在程式本體中，請如下的程式碼 :


主要是設了一個容器 fieldset 用來包含著每一個讓人去上傳檔案之用。在這裏先放上一個，方便使用者來用。當使用者想增加其它的檔案時，就點選上面的「新增檔案」按鈕，透過 onclick 去發動 addupload()。

var fieldcount = 1;

function addupload() {
fieldcount++;
var newfield = document.createElement('input');
newfield.type = 'file';
newfield.name = 'file' + fieldcount;
newfield.id = 'file' + fieldcount;
newfield.size = '60';
document.getElementById('fs').appendChild(newfield);

var newbutton = document.createElement('input');
newbutton.type = 'button';
newbutton.name = 'b' + fieldcount;
newbutton.id = 'b' + fieldcount;
newbutton.value = '刪除';
newbutton.onclick=function(){delfile(this.getAttribute('id'));};
document.getElementById('fs').appendChild(newbutton);

}

(以上 程式碼要包函在 script 和/script 中 )

因為我們在程式中已預先擺了一組可供使用者上傳用的檔案按鈕，所以作為 counter 用的 fieldcount 起始值為 1。然後每次被 call 一次 addupload 時，便立刻加一。然後利用 createElement 來創建兩個結點，一個是讓人上傳檔案用的欄位，另一個是用刪除該上傳欄位用的按鈕。各自將其 attribute 上進去後，在利用 appendChild 來將兩個節點上到 fs ( fieldset )這個父容器之下。

要想刪除認一指定的欄位時，同時也得把後面的刪除鈕一併刪除。當點選了「刪除」鈕時，會觸發 onclick 去執行 delfile(this.getAttribute('id')), 其中要把那一顆刪除鈕的 id 一併傳到delfile 這 function 去。

function delfile(idname) {
var filename = 'file' + idname.substr(1,1);

var filex = document.getElementById(filename);
var bx = document.getElementById(idname);
filex.parentNode.removeChild(filex);
bx.parentNode.removeChild(bx);
}

因為每一組的 上傳欄位的 id 都是 file1、file2、file3、....，其相對應的「刪除」鈕之 id 為 b1、b2、b3...，所以只要透過 substr(1,1) 將「刪除」鈕 id 的第二碼取出，便可組合出相對應上傳欄位的 id 名。最後透過 父容器的 removeChild 便可將兩者一一移去！

ie6 下的覆蓋問題解決《by 童顏未老人》

　這幾天被一個工作上的問題給困擾住了，小弟寫的網頁需要當滑鼠停在會員名字上或是會員的照片上時，要出現該會員的簡介。這功能原本不算太難，用小弟之前的方法，光用 css 就可以辦的很好。但是當套用在用會員照片排成的九宮格狀時，在 ie6 下會員名片會被隔壁的照片壓在下面弄的支離破碎，但是在 firefox 下卻仍有很好的表現。

慘不忍睹的 ie6 表現狀況：


firefox 下的狀況正是我所要的：


　但是我不能犧牲使用比例還是最多的 ie6 使用者，所以只得另謀他法了，有朋友介紹我使用
[jQuery] bgiframe Plugin，不過我現在情況很趕，無法仔系去鑽研 jQuery，那可得等我過年有空時慢慢去研究，我現在能用的便是 javascript 和 css 了，我試了一天後終於給我弄出來了。這想穿了其實也沒什麼高明之處，就是得花時間想一下。

首先在整個 程式最末端埋入一整段會員名片的程式碼，

<div style="position: absolute; width: 220px; height: 140px; z-index: 1;
left: -1000px; top: -1000px" id="mycard">
<table border="1" cellpadding="0" style="border-collapse: collapse"
width="220" id="table3"
height="140" bordercolor="#76A9B4">
<tr>
<td id="carddata" bgcolor="#E1F7F7">
<table width="220" height="140" border="0"
cellpadding="0" cellspacing="10" bgcolor="#E1F7F7">
<tr>
<td height="66" valign="top" align="center">
<table width="100%" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td width="66" valign="top" align="center">
<table width="66" height="66" border="0"
cellpadding="0" cellspacing="0" bgcolor="#418488">
<tr>
<td align="center"><img id="pic2" src=""
width="60" height="60"></td>
</tr>
</table>
</td>
<td width="8">&nbsp;</td>
<td valign="top"><table width="100%" height="22"
border="0" cellpadding="0"
cellspacing="0" bgcolor="#C0E2DF">
<tr>
<td width="5">&nbsp;</td>
<td valign="bottom"><span class="MwordCL01"
id='username'></span>&nbsp;-<span class="Sword02"
id="sexname"></span></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="5" height="24">&nbsp;</td>
<td height="24" valign="bottom">
<span class="Sword02">層級：</span>
<span class="Sword02" id="attname"></span></td>
</tr>
<tr>
<td width="5" height="19">&nbsp;</td>
<td height="19" valign="bottom">
<span class="Sword02">區域：</span>
<span class="Sword02" id="codename"></span></td>
</tr>
</table> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="SwordCL01">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="70" height="19" align="right"
class="SwordCL01">健康部落：</td>
<td height="19" class="Sword01"><nobr>
<? if ( strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")) { ?>
<span style="width:130;text-overflow: ellipsis;overflow: hidden;"
id="vip_name"></span></nobr></td>
<? }else{ ?>
<div style="width:130;text-overflow: ellipsis;overflow: hidden;"
id="vip_name"></div></nobr></td>
<? } ?>
</tr>
<tr>
<td width="70" height="19" align="right"
class="SwordCL01">發表篇數：</td>
<td height="19" class="Sword01" id="doccnt">
<span class="Sword01">篇</span></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div>

因為我需要在整個網站到處都會用到這個會員名片，所以我是把它單獨寫成一斷的程式，然後在每一隻需要用的程式末端下

<?include('Common/card.phtml');?>
</div>
</body>
</html>

　然後另外再寫一支的放滿我需要的 junction 的 js ，也是方便每隻需要用到會員名片的程式來 call ！

<script language="javascript" src="/Js/feijer.js"></script>

其內容如下 :

function CardShow(obj,ty,lx,pic2,username,sexname,attname,codename,vip_name,doccnt){
enoter_IsBoard = 1;

if(enoter_IsBoard){

var enoter_demo = document.getElementById("mycard").style;
var leftNum,topNum;
enoter_demo.visibility="visible";

document.getElementById("pic2").src = pic2;
document.getElementById("username").innerHTML = username;
document.getElementById("sexname").innerHTML = sexname;
document.getElementById("attname").innerHTML = attname;
document.getElementById("codename").innerHTML = codename;
document.getElementById("vip_name").innerHTML = vip_name;
document.getElementById("doccnt").innerHTML = doccnt;
var _x = getObjX(obj);
var _y = getObjY(obj);

leftNum=19;
topNum=0;

document.getElementById("mycard").style.left = Number(_x) + lx +"px";
document.getElementById("mycard").style.top = Number(_y) + ty +"px";
}
}

function getObjX(obj){
var hlcleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
hlcleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}else if (obj.x) hlcleft += obj.x;
return hlcleft;
}

function getObjY(obj){
var hlctop = 0;
if (obj.offsetParent){
while (obj.offsetParent){
hlctop += obj.offsetTop;
obj = obj.offsetParent;
}
}else if (obj.y)hlctop += obj.y;
return hlctop;
}

function CardClose(){
document.getElementById("mycard").style.left=-1000+"px";
document.getElementById("mycard").style.top=-1000+"px";
}

然後程式需要的地方，除了把值傳進去 function ，並可以指定名片視窗要出現在 父容器的那邊，因為有時那個名片太靠右邊時，會被畫面切割掉，這時就可以調整 ty lx 兩個值來指定七其位置。

<a href="<?=$Blog;?>"
onmouseover="CardShow(this,30,60,'<?=$pic2;?>','<?=$username;?>','<?=$sexname;?>',
'<?=$attname;?>','<?=$codename;?>',
'<?=$vip_name;?>','<?=$doccnt;?>');"
onmouseout="CardClose();">

所以當 onmouseover 被觸發時，便去 call js 中的 CardShow function ，再一一的將資料放會員名片中，如此便可以將名片無誤的在想要的地方去呈現。

透過 javascript 新增一筆訂單明細《by 童顏未老人》

　小弟接觸 網站開發 沒多久，還在半生不熟的狀況，所以每每碰到新的問題總得花一點時間到處尋找解決的方法，但是小弟一向見到 Google 找到的 list 中後面出現一個「簡」字，我是不會進去的，所以能找到解答的機會便少了很多。中國那邊的人很會將別人的成果據為己有，所以一篇解決問題的作法，從 Google 找出來的 List 中，在中國那邊的網頁往往會出一大堆相同的文章，真是浪費網路資源！

　但小弟今天碰到的是，在訂單新增時，需要能動態的增加一筆明細項，以供使用者敲入訂單資料。把一大本動態網頁設計大全翻了又翻，終於被我弄出來了，呵呵，在此特別記下來，免得日後又要再想一遍！

在 html 部份：

在 JavaScript 部份：

run 出來的結果如下，還差強人意 !