Category Archives: HTML/CSS

Disable HTML A HREF tag action

今日要遇到一個難題 有一個 AngularJs 的Webpage 不知道怎樣砌。。

因為一按那個A tag 的 tab 便轉了去另一個URL
想了一會便想到有可以嘗試把 “A” tag “HREF” tag 的 動作停用。。看看有什麼效果

那麼怎樣才可以
解決方法十分簡單

我們只需要在 A tag 的 tag 內加入 onclick=”return false”

這個JavaScript action便可以了

<a href="//blog.sharechiwai.com" onclick="return false"> Blog </a>

Hope you find it useful

HTML5 Input type=number do not accept decimal number – HTML5 Input type number 不能輸入小數位

在公司的Web project上.. 希可以可好好運用HTML5 的 input type 上的Form Validation
這可以增加 data input的安全度

誰不知.. 當我在 input type=”number” 的 textbox上輸入有小數的數值時
他出現錯誤信息
Please enter a valid value, The two nearest value are
Please enter a valid value

<form>
<label> Amount
<input type="number"/>
</label>
</form>

解決放法
我們只需要在這個 type=”number”的 input tag 上加上 step=”any” 這個屬性便可以了
<input type=”number” step=”any” />

E.g.

&lt;form&gt;
&lt;label&gt; Amount
&lt;input type="number" step="any"/&gt;
&lt;/label&gt;
&lt;/form&gt;

Hope you find it useful

Stop form submit via HTML – 如何以HTML停止 Form 提交這個動作

最近想做一些demopage來試一些Javascript 的程式碼
之後發現 任何 buttonform tag 之後
當你按下時..他便會做出 Form Submit這個動作
e.g. 以下的例子會做出Form Submit這個動作

<form role=”form” id=”frmWontSubmit” action=”http://blog.sharechiwai.com” >
<button onclick=”alert(‘Hello’);”> Say Hello</button>
</form>

解決方法十分簡單

我們只需要在 HTML Form tag上加上 onSubmit=”return false” 便可以
E.G.

<form role=”form” id=”frmWontSubmit” action=”http://blog.sharechiwai.com” onSubmit=”return false;”>
<button onclick=”alert(‘Hello’);”> Say Hello</button>
</form>

Demo

HTML5 Form Submit  Demo

Hope you find it useful

Drop Down List Tooltips on Select options – 在下拉列表 上的選擇加上 工具提示

還是在提升公司網頁的使用者體驗工作
今天想和大家分享的是..
原來在網頁上的 “Drop Down List / 下拉列表” 上加上 “Tooltips / 工具提示
應該是可以增加使用者體驗的..
特別是當你的網頁上有很多已經有很多資料或 已然密密麻麻的時候..
要在頁面上再加上一段文字去解釋 這個DropDownList的選項 有什麼意思…

解決方法十分簡單..
我們可以使用 HTMLTitle tag 來實現..

解決方法

<select id="Food Category">
<option value="fruit" title="Fruit is...">Fruit</option>
<option value="meat" title="This is meat option...">Meat</option>
<option value="vegetable" title="Vegetable is...">Vegetable</option>
</select>

Select Option / DropDownList Tooltips demo

Demo
http://sharechiwai.com/demohtml/selectoption_tooltips

Hope you find it useful

HTML5 check if Browser support LocalStorage – HTML5 檢查 瀏覽器是否支援LocalStorage

雖然現在有很多”瀏覽器/Browser” 都支援 HTML5..
但是別要忘記..雖然科技和工具都在..
但是用戶未必會把現有的 “瀏覽器/Browser” 更新到最近的版本..
所以有時候我們也都要 當在網頁 Load的時候檢查一下.. 用戶的 “瀏覽器/Browser” 支不支援 LocalStorage.. [如果你的WebSite有用這個技術的話]
之後便可以作出對應的方法..
令到使用者體驗更好

解決方法:
我們可以使用Javascript 來檢查 一下 “Storage” 這一個Object 是不是 “undefined” 的..
如果是的話 那你的”瀏覽器/Browser” 便不支援 Local Storage

E.G.

<script>
//Check if browser support Local Storage
if(<strong>typeof(Storage) =="undefined"</strong>)
  {
    alert("LocalStorage does not support on your browser..\n Please upgrade you browser in order to run this application");
  }
</script>

Hope you find it useful

HTML How to show partial Image – 在HTML 上怎樣顯示部份的圖片

今天需要在網頁上做一些圖像處理的功能…
第一個難是..
怎樣可以在網頁上只顯示一個JPG/PNG/GIF的圖片..
的其中一部份…
E.G.
右上角

嘗試過在Div上設定Max-WidthMax-Height都不能成功
如果在圖片上使用Width/Height的屬性的話..
這只會改變圖片的大小的
最後終於找到解決方法了
解決方法:
我們可以使用 overflow:hidden 來解決

E.G.

</pre>
<div style="width: 200px; height: 200px; overflow: hidden;"><img src="http://i1255.photobucket.com/albums/hh631/sharechiwai/Travel%202012/Borough%20Market%20London/WP_003652.jpg" alt="" /></div>
<pre>

另一個方法是在img tag上使用css中的Clip的屬性

<img style="clip: rect(0px,200px,200px,0px);" src="http://i1255.photobucket.com/albums/hh631/sharechiwai/Travel%202012/Borough%20Market%20London/WP_003652.jpg" alt="" />
 (top/上, right/右, bottom/下, left/左)
 

cssclip的好處是..可以設定顯然的地方
E.G.

Hope you find it useful