Archive

‘WebDesign’ 分類過的Archive

於網頁顯示特殊符號(Registered,copyright,trademark)

2010年3月24日 尚無評論

很少會用到一些特殊符號，剛好有需要去查了一下，所以整理出來，好讓下次又要用到時，可以快點查到，此外，也順便查了一下意思，有興趣的人請再延伸閱讀

©  © Copyright

® ®  Registered
®符號是Registered（即“註冊“）的簡稱，其代表已獲得註冊之意，其通常被標示於品牌的右上或右下方，藉此告知相關消費者與競爭同業，該
品牌已是註冊商標，如果他人使用相同或近似商標於相同或類似商品/服務上，商標專用權人將可對其提起商標侵權訴訟。

™ ™ or  ™ TM (Trademark)
而TM則是Trademark（即“商標”）的簡稱，代表商標的意思，其通常亦被標示於品牌的右上或右下方，藉此告知相關消費者與競爭同業，該品牌
已被做為商標使用，而非一般商品名稱或描述性用語。雖然無論商標是否註冊皆可標示TM，但一般來說該符號大多標示在尚未獲得註冊之商標上。

參考資料:
商標標示®和TM有何不同?
HTML Special Characters

Categories: WebDesign Tags: , ,

showModalDialog 在同視窗轉到下一頁

2009年12月25日 尚無評論

平常很少用window.showModalDialog 來開啟視窗，
原因是他參數的傳遞及運用上，其實都蠻不順手的
不過因為window.open目前在使用上，九成九都會被瀏覽器擋住
所以還是只能轉用window.showModalDialog

先前如果使用window.showModalDialog 如果要到下一頁，而就要在<head> 標籤之中加上

<BASE target=”_self”>

不然就會另跳視窗開啟這連結；不過發現在使用javascript 的location.href 轉到下一頁時，
還是會另跳視窗，去查詢了一下是否有解法，才知在五六年前早就有解法
真是孤陋寡聞呀!!

只要有和小弟一樣的需求，可以改成用以下方式就可以在showModalDialog連到下一頁

  <script>  
  window.name=”__self”;  
  window.open(“yoururl”,”__self”)  
  </script>

而且很有趣的，這樣並不會被瀏覽器擋住，看來這問題是迎刃而解了

Categories: WebDesign Tags: ,

CSS 置中text-align: center 在Firefox無法作用

2009年12月10日 2 則評論

最近常在用CSS設定頁面
忽然發現一個很簡單的置中，在IE是正常的但竟然Firefox不支援

text-align: center;

不過想這種問題應該很多人都有解決方法了，去查了一下
找到自己覺得最好的解答，如下:

#center {
text-align: -moz-center;
!text-align: center;
}

這樣不管是IE或是Firefox都可以支援了!!
不知是哪一個瀏覽器沒照規格來~~@@

又在chrome試了一下~~不OK吶，目前找不到解法!!所以先hold住 有找到再補上囉!!

參考資訊:
text-align: center; not working in Firefox

Categories: WebDesign Tags: , ,

網頁表格隔行變色大整理

2009年8月12日 2 則評論

什麼是表格隔行變色呢?  看下圖就知道我要說的是什麼了!!

用戶插入圖片

整理目前在網路上針對網頁表格隔行變色的處理方式，用背景圖及一行一行設定的方法就不列入啦，其它大致如下:

CSS Expression

文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景：background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');

這是先前有在使用的方法，當初看上他是因為簡短的code就能達到該效果，不過後來才知CSS Expression並不是W3C標準的語法，只能在IE7以下使用，IE8 (微軟想開了，還是回歸標準了)及 FireFox都不支援，所以大家看看就好，還是不要用這個來處理!! 不是標準就是不會長長久久的。

CSS 定義

<style type=”text/css”><!–
#raw0 {background:#cccccc;}
#raw1 {background:#ecf6fc; }
–></style>
<!– 以下為html code–>
<table>
   ＜tr class=”raw0″>…
   ＜tr class=”raw1″>…
</table>

這雖然和一行一行寫顏色差不多，但至少他用了CSS 所以方便以後更換Style，所以還是介紹一下

CSS + Javascript

<style type=”text/css”><!–
#senfe {
   width: 300px;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
}
#senfe td {
   border-right: #000 1px solid;
   border-bottom: #000 1px solid;
}
–></style>
<script language=”javascript”><!–
function senfe(o,a,b,c,d){
   var t=document.getElementById(o).getElementsByTagName(“tr”);
   for(var i=0;i<t.length;i++){
       t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
       t[i].onclick=function(){
           if(this.x!=”1″){
               this.x=”1″;//本來打算直接用背景色判斷，FF獲取到的背景是RGB值，不好判斷
               this.style.backgroundColor=d;
           }else{
               this.x=”0″;
               this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
           }
       }
       t[i].onmouseover=function(){
           if(this.x!=”1″)this.style.backgroundColor=c;
       }
       t[i].onmouseout=function(){
           if(this.x!=”1″)this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
       }
   }
}
//senfe(“表格名稱”,”奇數行背景”,”偶數行背景”,”鼠標經過背景”,”點擊後背景”);
senfe(“senfe”,”#fff”,”#ccc”,”#cfc”,”#f00″);

–></script>

這個方式不錯，只要載入javascript並執行一行即可達到，不過每頁都要載入是真的有點麻煩，但也只能這樣才能簡化針對Style寫的code

CSS + JQuery

<style type=”text/css”> /*注意選擇器的層疊關係*/
 .stripe_tb th{background:#B5CBE6; color:#039; line-height:20px; height:30px}
 .stripe_tb td{padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center}
 .stripe_tb td *{padding:6px 11px}
 .stripe_tb tr.oddalt td{background:#cccccc} /*這行將給所有偶數行加上背景色*/
 .stripe_tb tr.alt td{background:#ecf6fc} /*這行將給所有偶數行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*這個將是鼠標高亮行的背景色*/
</style>

<script type=“text/javascript“>
 $(document).ready(function(){
 $(“.stripe_tb tr“).mouseover(function(){ //如果鼠標移到class為stripe_tb的表格的tr上時，執行函數
 $(this).addClass(“over“);}).mouseout(function(){ //給這行添加class值為over，並且當鼠標一出該行時執行函數
 $(this).removeClass(“over“);}) //移除該行的class
 $(“.stripe_tb tr:odd“).addClass(“oddalt“); //給class為stripe_tb的表格的奇數行添加class值為oddalt
$(“.stripe_tb tr:even“).addClass(“alt“); //給class為stripe_tb的表格的偶數行添加class值為alt
 });
</script>

即然javascript可以做到，那JQuery有何做不到的，程式碼更減少了，所以如果本身系統已經使用JQuery了，可以考慮用這個方法

參考資料:
http://chinaz.com/Design/Pages/0Q23513H008.html
http://www.wowbox.com.tw/blog/article.asp?id=3077
http://www.cnblogs.com/css/archive/2008/07/23/1249622.html

Categories: WebDesign Tags: , , ,

好用的Flash Mp3 Player（可用javascript控制喔)

2009年1月7日 尚無評論

最近剛好要找一個Flash Mp3  Player，剛好看到niftyplayer，還不錯用
特別來介紹一下。

他的官方網站如下
http://www.varal.org/media/niftyplayer/

用戶插入圖片

目前最新版本到1.7，看來蠻陽春的，沒關係，因為我是想要隱藏播放器的
會選這套的重點是，就是看上他可以用javascript控制

因為只想做個Music On/Of的開關就好，簡單一點，不用播放器那麼佔空間
他官網介紹的很詳細，蠻容易使用的，所以不多說什麼啦，接下來只介紹在網頁上如何加上Music On /Off

先將flash及javascript放在你的網站，然後在你的網頁加上以下html語法:

Music
<span id=”m1″ style=”display:none”><a href=”javascript:music_play();” class=”style7″>On</a></span>
<span id=”m2″ style=”display:”><a href=”javascript:music_pause();” class=”style7″>Off</a><span>


然後在<head></head>之間加上javascript語法:

<script type=”text/javascript” language=”javascript” src=”niftyplayer.js”></script>
<script>
function music_pause() {
niftyplayer('niftyPlayer1').pause();
m1.style.display=””;
m2.style.display=”none”;
}

function music_play() {
niftyplayer('niftyPlayer1').play();
m1.style.display=”none”;
m2.style.display=””;
}
</script>


當然還有一個我就不說啦就是要把flash語法崁上去並設name為niftyPlayer1 (sample的語法貼上即可)，如要隱藏就在height 及width 都設定為0就可以啦

這樣，你的網頁就有音樂播放功能啦

Categories: WebDesign Tags:
分頁: 上一頁 1 2 3 4 下一頁