魚乾的筆記本: Html

顯示具有 Html 標籤的文章。顯示所有文章

星期日, 5月 26, 2013

Browser caching CSS, Javascript file 問題

有時遇到改了css或js，但卻沒反應，除了天兵改錯隻以外，太多是因為browser自己cache住了，有幾個做法可避免

ap server處理
apache可用mod_expires

//1.載入mod_expires.so
# vi /etc/httpd/conf/httpd.conf
LoadModule expires_module modules/mod_expires.so  #拿掉註解

//2.config 
#vi your_app_path/.htaccess
ExpiresActive on
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 months"

p.s. 最好搭must-revalidate ，不然cache時間寫太長的要改檔案才會變，不過也是有人測試說不一定有作用...，所以還是利用下面的做法一定有效!

利用uri不同，迫使Browser reload
以前是自己在get參數列加版本or日期
```
<link type="text/css" href="aaa.css?v=20130526"/ >
```
不過每次有更新就得手動更改，實在不是好方法
看到有人利用file更新日期搭RewriteEngine~ 真是太棒了~
- html載入
```
<link type="text/css" href="/css/main.<?php echo filemtime('/path/to/css/main.css'); ?>.css" / >
//會產出 /css/main.1237440708.css
```
  main.1237440708.css只是虛擬的檔案，此檔並不存在會透過rewrite rule指向main.css，因此還需設定.htaccess
- .htaccess設定
```
RewriteEngine On
RewriteRule ^(css|js)/(.*)\.[0-9]+\.(.*)$ /$1/$2.$3 [L]
```
  p.s. 如果很好學想知道rewrite rule怎麼寫的，可以看Force reload of updated CSS and Javascript files with unique filenames
利用HTML5的cache manifest
就隨意改一下 cache manifest的內容
Browser就會自己檢查有沒有新的版本...

References

星期三, 10月 06, 2010

ie 圓角問題

ie沒實作css3 border-radius
所以沒有圓角，該怎麼辦咧
看到有高手用jQuery完成ie圓角問題
正開心的覺得有解決方案時

機車johnny又說出口頭禪「按捏未塞啦歹看」
說圓角有鋸齒...很醜
還說看facebook在ie上是有圓角的...而且很smooth

馬上開ie用給我看
這... 嗯哉咧...

用firebug看(當然是在firefox上看)
是用css3的屬性達成的...

但ie未實作所以應該不是用這方法解決
只是ie也沒有類似firebug的工具可以看
想說硬是從html裡找出來慘念...
是用javascript產生的...
這下有的找了...

-- 後記 --
感謝Coud 分享ie develop tool
讓我查出來原來fb針對ie是另外做圓角
而不是跟直接用css的border-radius屬性
有找到pop_topleft這東西不過還沒看是用圖還什麼完成

References:
Rounded Corners in Internet Explorer
Rounded Corners in Internet Explorer Using JQuery

星期三, 9月 08, 2010

html無敵畫圖、畫線

用網頁畫圖的效果總是差強人意
因為都是div去組太多效率變很差
少的話鋸齒又很嚴重
總是沒有漂亮的線條
畫出來的線很醜，總是被美工嫌 (johhny... 再記你一筆)

後來看google map畫的導航路線真是漂亮
看起來也不像是圖但也不是用div畫的
利用firebug看了是用svg的tag組成
還以為是google自己開發的component
想想也不太可能因為也要browser支援
好奇查了一下原來早就有SVG這東西了
不過是2008年才成為W3C的標準

wiki上解釋為
「SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述影像內容，因此是一種和影像解析度無關的矢量圖形格式」

開心的試了一下哦耶~~ 這東西真是帥呆了

//SVG畫直線

"M30,0L100,110"

看圖就可以知道差異很大了
再看這張誘人的M字腿... ㄟ我是說麥當當的曲線圖

看到那曲線好細膩.. 我好感動
就像從vcd進步到dvd畫質一樣...

更強的是還可以做到動畫效果
這不就是一直輸flash的地方嗎
看到動畫的效果都快哭了...
好像從dvd進步到blue-ray... (好像沒相關...硬要接一下梗)
從此做動畫不再是flash的天下了... ya~~~ flash書拿去丟一丟 (好啦還是有差啦...)
路人：那silverlight？
謎之音：silverlight？那是什麼東西？好吃嗎？

不過就是svg的語法難懂了點
畢竟要把程式及圖型表示全用文字來形容...
工欲其善，先利其器...
就用SVG編輯器來做吧...

Library
Raphael

在ie8時，出現raphel vml null或什麼物件不存在，看一下是不是用了顏色名稱
ex: stroke:red, 即會發生
改用stroke:#ff0000取代

References
wiki SVG

星期四, 7月 23, 2009

div等其他tag做hover效果

透過<a 可以輕易的做到hover的效果
可是其他tag就不一定會有反應，不同的browser也可能有的會有hover效果，有的沒有
看破還是用onmouseover及onmouseout來做
比較麻煩的是要用this.style.*來做

動一下的感覺
onmouseover="this.style.padding='1px';" 
onmouseout="this.style.padding='0px';"

//讓圖變透明
style="opacity:0.4;filter:alpha(opacity=80)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100;"
onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80;"

星期六, 3月 28, 2009

搞清楚clientHeight, offsetHeight and scrollHeight

透過jQuery取高(寬)，有三個
1.height()
2.innerHeight() //不含border,padding
3.outerHeight() //包含border,padding及hidden elements

另外javascript本身取document.body有

clientHeight
offsetHeight
offsetHeight是自身元素的高度
*ie7不支援
scrollHeight
scrollHeight是自身元素的高度+隐藏元素的高度。

其實還是不太懂...

*DIV設Height:100% 沒反應
當在網頁裡多了以下的宣告
就會造成height的100%無效

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4>/strict.dtd">

查了一下
重點是因為body沒有height屬性，所以加入下面這行就可以啦

References
clientHeight、offsetHeight 和 scrollHeight
花点时间搞清top、postop、scrolltop、scrollHeight、offsetHeight

星期一, 1月 12, 2009

browser間的支援度

iframe問題
iframe doesn't work in IE7
原本利用屬性width及height設為100%，在ie7就會掛了
查了一下，利用style來設定就搞定
< IFRAME SRC='gnagna.htm' STYLE='width:100%;'>< /IFRAME>

星期五, 10月 31, 2008

安裝Meadroid的ScriptX

Step1.下載smsx.cab
載點：smsx.cab
進入後的畫面如下
有兩個載點，一個是可測試完整的功能
另一個就是直接載smsx.cab,後面有說明，記得改version到6,4,xxx

下載smsx.cab後
將檔案放到你自己指定的Server位置

Step2.在網頁的body放入Object

<!-- MeadCo Security Manager -->
<object style="display: none;" classid="clsid:5445be81-b796-11d2-b931-002018654e2e" codebase="http://[your path here]/smsx.cab#Version=6,4,438,06">
 <param name="GUID" value="{19CF4AF5-CCD8-4840-BA3C-85EB66D69A6E}">
 <param name="Path" value="http://[your path here]/sxlic.mlf">
 <param name="Revision" value="0">
</object>
<!-- MeadCo ScriptX -->
<object id="factory" style="display: none;" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814">
</object>

Step3.設定參數
這裡有兩個地方需設定
codebase及param的Path
其中codebase指定到剛你設定的[Server Url/smsx.cab]位置

而Path要放的是MeadCo的unique publishing license(即sxlic.mlf的位置)
只是用免費的功能話就可以把拿掉Path及Revision這兩行拿掉

<!-- MeadCo Security Manager -->
<object style="display: none;" classid="clsid:5445be81-b796-11d2-b931-002018654e2e" codebase="http://[your path here]/smsx.cab#Version=6,4,438,06">
<param name="GUID" value="{19CF4AF5-CCD8-4840-BA3C-85EB66D69A6E}">
<param name="Path" value="http://[your path here]/sxlic.mlf">
</object>

Step4.自定列印畫面配置
用完就可以開心的用免費版的功能

<script defer>
window.onload=function(){
factory.printing.portrait = true;  //直印，false:橫印
factory.printing.header = "";      //頁首，空白為不印頁首，也就不會佔空間
factory.printing.footer = "";      //註腳，空白為不印註腳，也就不會佔空間
factory.printing.leftMargin = 0;   //左邊界
factory.printing.topMargin = 0;    //上邊界
factory.printing.rightMargin = 0;  //右邊界
factory.printing.bottomMargin = 0; //下邊界
}
</Script>

星期四, 10月 30, 2008

利用Html網頁列印

1.去頁首頁尾問題
官網：http://www.meadroid.com/
檔案：透過email，會給下載網址

目前看比較好的方法還是透過meadroid這家公司的ActiveX
有免費版本，當然有些限制，不過至少可解大部份的問題了
1.直印、橫印
2.印不印頁首(頁尾)
3.上下左右邊界
安裝Meadroid的ScriptX

References:
HTML實現列印(三)頁首、註腳、邊界與列印方向設定

2.CSS排版問題
有時預覽列印時，會發現調用的CSS都無效了
那是因為
<link rel="stylesheet" type="text/css" href="CSS位置" media="screen" />
的media設為screen而沒設為列印時的參考，加入print就ok了，即
<link rel="stylesheet" type="text/css" href="CSS位置" media="screen,print" />
只加入print沒有screen還不行咧，怪哉

3.利用CSS分列印頁
<div STYLE="page-break-after: always;"> </div>

Media Types說明
值適用於
all 所有媒體類別
aural 言語合成器
braille 布拉耶點字法 (盲人用) 媒體
handheld 掌上型媒體
print 列印
projection 投射媒體
screen 電腦螢幕
tty 固定字寬 (fixed-pitch) 的媒體
tv 電視類的媒體

Reference:
列印 HTML 網頁強制換頁的方式
7個Media Types

4.列印背景圖\
*調browser的設定或利用list-item
*利用@media print{ }

星期日, 10月 05, 2008

html的table裡放圖片總會有空白

利用table來組圖片常會發生兩種情況
1.沒合起，分成三段
利用table來動態增長中段文字時，常會發生這種情況

2.td尾端總有留空去不掉(藍色部份)

解決方法
1.沒合起，分成三段
當要用table來動態拉圖時，要對table tag加入
cellpadding="0" cellspacing="0"
再試一次就ok啦

2.td尾端總有留空去不掉(藍色部份)
這個問題真是氣死人
花了我一個週末，什麼碗糕屬性全設了
還是失敗，最後在網路上看到.....
「因為td tag裡有空白」 ...

看了一下html，雖然是沒有，但有IDE切的斷行

<td>
  <img src="xxx">
</td>

於是就抱著期待又想譙人的心情設為

<td><mg src="xxx"></td>

一試果然成功了...嗚感動

想想這感覺是個好明顯的問題「空白」，可是卻看不出來
真想搥人...

星期三, 6月 25, 2008

CSS Hover在ie下無法顯示

在css裡設定hover在ie下總是無法正常顯示

外掛做法
這裡提供了csshover.htc可以解決
主要的做法是在css裡，遇到hover改成用mouseover等改寫
1. 下載csshover.htc
  Version 1.42.060206 (:hover and :active) download
2. 設定path
  path: 就先放在同一資料夾吧
3. 程式碼
  (1)在CSS裡
  已產生的dom可直接在css裡下
```
body{
  behavior:url(csshover.htc)
}
```
  (2)在JS裡
  動態產生的dom，因為放在css裡的已執行過，所以之後才產生的html tag似乎不會被改變，因此要javascript再跑一次
```
if (document.all && /MSIE (5\.5|6)/.test(navigator.userAgent) 
  &&  document.styleSheets 
  && document.styleSheets[0] 
  && document.styleSheets[0].addRule)
{
  document.styleSheets[0].addRule('*', 'behavior:url(csshover.htc)');  //csshover.htc的路徑
}
```
備註：
動態再呼叫javascript跑csshover.htc似乎會造成程式花了很多時間改寫hover
有建議將hover指定詳細減少搜尋改寫hover的時間
#menu li:hover ul { //指定li hover 再指出ul下
...
}
指定html版本
其他方法
據說設為W3C 4.01, ie就會乖乖聽話了
在html檔裡，最前面加上以下字串
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

Reference

Getting :hover to Work in IE7

html table常見問題

jQuery無法改table caption
當dom裡的caption是空白時，browser似乎會省略
導致後制的jQuery找不到caption
$('table caption').text('test'); <=無法出現test
因此得避免caption為空

table裡每列加form導致該td多一空白列
查半天都看不出為什麼那一列多出一個行空白
本以為是css設定問題
後來才發現在每個td利用form包一個input
就會造成該td多一個空白可能是擠不下的關係所以多出一列
氣死...平麼padding, margin全設了還是不行
把form刪了就ok了

星期三, 3月 19, 2008

'a' tag的href會重讀

原本為了讓文字有超鏈結的底線而加了href屬性
但在firefox下似乎會變成重讀頁面(ie不會)
只要加個#，即href='#' 即可。

在網路上另外看到
提交
的方式,通過一個偽鏈接來調用javascript方法.這種方法有一個問題是:
雖然點擊該鏈接的時候不會跳轉頁面.但是滾動條會往上滾,解決的辦法是返回一個false.
如下所示:
< a href="#" onclick="javascript:方法;return false;">提交< /a>

< a href="javascript:void(0)" onclick="javascript:方法;return false;"提交
javascript:void(0)就不會向上跳了:) >

還有一個方法是 #this
< a href="#this" onclick="javascript:方法">

星期二, 10月 30, 2007

div隱藏技

div的visibility可以隱藏本身，但會變成一個空格
用法：<[div] id="test" style="visibility: none;">
屬性選項：
visibility: hidden;
visibility: visible;
Javascript寫法
document.getElementById("test").style.visibility="hidden";
document.getElementById("test").style.visibility="visible";

利用display可以讓後面的物件往上拉
用法：style="display: none;"
屬性選項：
none;//隱藏
空白即為顯示
javascript寫法
　　document.getElementById("test").style.display="none";//隱藏
　　document.getElementById("test").style.display="";//顯示

訂閱：文章 (Atom)

魚乾的筆記本