solve safari weird display when resize problem

the image shows the weired layout display at safari when resizing the html page

it looks totally fuxked up, but the HTML are just fine actually when you select any items on the page, because safari just render the graphic wrongly.

the problem causes is that i used negative z-index in my CSS

to solve it, simply change all negative z-index to >=0

input password placeholder workaround IE

the workaround solution for using placeholder on IE<10
it works for IE7~10

(credits to http://jsfiddle.net/q8ajJ/)

HTML

<!-- Style = display none for people who dont have javascript -->
<input id="fake_pass" name="fake_pass" style="display: none;" type="text" value="Enter Password:" />
<input id="real_pass" name="real_pass" type="password" />

JS

// On DOM ready, hide the real password
$('#real_pass').hide();

// Show the fake pass (because JS is enabled)
$('#fake_pass').show();

// On focus of the fake password field
$('#fake_pass').focus(function(){
    $(this).hide(); //  hide the fake password input text
    $('#real_pass').show().focus(); // and show the real password input password
});

// On blur of the real pass
$('#real_pass').blur(function(){
    if($(this).val() == ""){ // if the value is empty, 
        $(this).hide(); // hide the real password field
        $('#fake_pass').show(); // show the fake password
    }
    // otherwise, a password has been entered,
    // so do nothing (leave the real password showing)
});

vertical center css

content from http://blog.themeforest.net/tutorials/vertical-centering-with-css/

In this method, we will insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

<div id="floater">
<div id="content">
 Content here
</div>
</div>

#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}

THE GOODS

• Works in all browsers
• When there isn’t enough space (ie. the window shrinks) our content will not be cut off, and a scrollbar will appear.

THE BADS

• Only one I can think of is that it requires an extra empty element (which isn’t that bad, another subjective topic)

make a phone call on mobile using native html (no javascript needed)

simply an <a> tag:
using "tel:" protocol in the href like other protocols such as "email:", "javascript:"
<a href="tel:xxxxxxxx" >phone me</a>

if country code is needed, start with "+" and your country code,
the country in Hong kong is 852 so:
<a href="tel:+85218503">call HK Observatory</a>

example:
call 萬寧妹妹

the code were tested with the following devices using its default browser:
Galaxy S2(Android 4.0.4),
iphone 4S(IOS 5.0.1),
WinPhone 8

hope the information above can help u all

facebook sharer 使用詳解 之 description, title 和 image

(本文最後檢閱日期 - 27th August, 2015)

facebook sharer 使用詳解是本部落格的人氣文章
謝謝各位的支持

若各下新接觸facebook sharer(後稱sharer) 的話
您在跟著本文實作時或會遇到一些困難,
這時不妨先到上述連結了解一下sharer是怎樣運作

今天繼續說明如何設定sharer其他重要的屬性

---

og:description

設定方法為 <meta name="og:description" content="blar blar blar" />
sharer 會先看看html裡有沒有設這個meta
  有:用這個meta 裡的content 屬性
  沒有:在html 裡找第一個多於120字(不包括120)的 <p>

兩個都找不到的話, 那description就會設為空白
這就是為甚麼通常share 出去的description 怪怪的原因

---

og:image

設定方法為 <meta name="og:image" content="http://absolute.image.path"/>

可設多張, 多copy一次就可

圖的url一定要absolute path 而且是published url

聽起來好像好簡單，那你就錯了

不要相信debugger裡og:image的結果, 那是騙你的
用來參考倒是可以的, 一切要以真正sharer 的結果為準

長氣點說多次, 若遇上甚麼問題, 請參閱facebook sharer 使用詳解

這裡sharer 會這樣做:

先看HTML裡有沒有設og:image

    有:圖片是否大過200x200? (不包括200)

      是:sharer會用這個圖

      否:sharer不會使用這圖片, 請繼續看下去

    否: 忽略此圖片, 並找找網頁裡有哪些 *有夠大 的<img>,

      如有: 放入thumbnail list 讓用家選擇

      沒有: 這個分享不會顯示任何thumbnail

* : 夠大的定義目前還未測試出來, 總之是大圖片

除了og:image 已證實必定要大過200x200外 (deleted on 18th June, 2015 -- its not always true)

其他由HTML extract出來的暫時都未太清楚甚麼size才會當做thumbnail,
簡單來說夠大的都會有機會

測試所得, sharer會比較喜歡找放在開頭的圖

---

og:title

這個是最簡單最正常的屬性

設法為<meta name="og:title" content="bi li ba la"/>

sharer 會先看有沒有設og:title

  有:用這個為title
  沒有:
     sharer會找<title>當title
     若<title>都沒有的話就會直接把網址當成title

文章如能幫到各下的話, 請留個comment讓小弟知道
謝謝

solution of strange extra width on 100% width input on iphone

given the following html and css:

html:

<div class="formWrapper">
 <input id="myName" type="text"/>
 blar..
 blar...
 blar....
</div>

css:

#myName {
 width:100%;
 border: 1px solid white;
}

as the css speaks, it draws a white border gracefully in many browsers such as chrome, Firefox, and android 4.0.4 browser.

however it fails in iphone, it adds some extra width to it.

with some research, there is a messy but a good solution below:
first, we need to add a wrapper to our textfield

<div class="formWrapper">
 <div class="border"><input id="myName" type="text"/></div>
 blar..
 blar...
 blar....
</div>

next, we add border to this wrapper instead of <input >

#myName {
 width:100%;

 /*we remove all styles on input*/
 margin: 0px;
 padding: 0px;
 border: 0px;
}

.border {
 border: 1px solid white;
}
 

and now it looks nicely in iphone and other browsers~~
this method works in chrome, firefox, safari and also works in IE6 IE7 & IE8

leave me a comment if it helps you~

A very convenience way to use google map

Since i pubilshed the article about facebook share last time, i got so many new visitors~
It is pleased to know that my knowledge helps

Also i've got quiet alot visitors from western, i decided using english this time

Just discovered a very convenience way to use google map.
its called Google static maps

<img src="http://maps.google.com/maps/api/staticmap?
center=North Point
&zoom=12
&size=512x512
&maptype=roadmap
&markers=color:Red|label:A|North Point
&sensor=false"
/>

for the sake of demonstration, i have not escape the html

you should escape it

as you see, it just use an img HTML tag

of cause~ you cannot have any interactions but this is much easier to use then JS version

facebook sharer 使用詳解

(本文最後檢閱日期25th November, 2015)

added on 26th October, 2013
這篇是講解facebook sharer 的機制
sharer 的其他設定及使用方法請到小弟另一篇文章
facebook sharer 使用詳解 之 description, title 和 image

facebook sharer是一個使人又愛又恨的功能
你永遠也不知道要如何設定才能正確顯示

這個問題以前每天都有上千上萬的人在facebook developer forum 問
但通常都沒有人回答
就算有，他們的 solution 多數一樣沒有效

小弟也鑽研了好久的時間
現在總叫略有小成跟各位分享

sharer是啥?
就是facebook 的share link功能了
用來分享網頁的
它的正身是www.facebook.com/sharer.php(updated at 5th November, 2013)
https://www.facebook.com/sharer/sharer.php

再來看你會見到sharer帶兩個參數
分別是u和t
u是URL, t是title
例如www.facebook.com/sharer/sharer.php?u=http://www.littleshell.net&t=littleshell的網站

(added on 10th April, 2015)
sharer已經不再support t 這個參數

看到這裡各下可能會想
e??正~!很易用耶~有啥難??
小弟想當年第一次接觸sharer時也是這樣想
不過別發夢了, 沒這樣易

sharer的運作是如何的呢
它會讀取參數u, 即url
然後會extract url 裡的html
最後變成Open Graph object (Open Graph是另一個大課題, 不在此說明)

u 收到了, 可是 t 呢??對不起, t 它是不會理會的
真不知道facebook的工程師們如何想的
extract了後, 例如找到了對的title 就會顯示title, 否則會留空
(title 的詳細設定方法請到facebook sharer 使用詳解 之 description, title 和 image)
之後.........它就會可惡地把這個結果cache 30mins~一天

因為會cache 的原故
這就成了為何很多人在說代碼可行但其他人照用就不行
解決的方法不難, 只要share 隨意加些參數在url 後就行了
例如www.littleshell.net/index?test=1 總之就是保持url 是unique就可以了

這做法可瞞過sharer使它以為是另一個新的graph object
到測試完成後把多餘的添加參數拿走就好

要做一個sharer懂看的html 也不難
可能你都看過很多不同的方法
不過因facebook 現在要行open graph 的原故
舊的方法不太穩定, facebook似乎也不再support舊方法了, 不建議用

我們要用上open graph protocol(og), 故此
<html>裡要加一個attributes 讓html知道og 是甚麼
<html xmlns:og="http://ogp.me/ns#">

然後最基本, 你需要加上三個og properties, 分別是
<meta property="og:title" content="The Rock"/>標題
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>圖示
<meta property="og:description" content="blar blar blar blar blar"/>敘述

基本的用法就是這樣了
一般來說這段html 都不會有問題的
詳細用法請參閱 facebook sharer 使用詳解 之 description, title 和 image

重頭戲到了
依照上面的寫法
你很開心的share了
有幾個字你不滿意, 想改

ar ......媽的...
cache了改不到???

別慌, 還有一個工具未介紹
就是url Linter debugger了
是一個sharer的 debug工具
http://developers.facebook.com/tools/lint
http://developers.facebook.com/tools/debug (updated at 13rd March, 2012)

這會告訴你facebook 在將要被share的url 裡extract 了些甚麼
正式share 前不況用先來這裡測試
Linter 還有一個妙用
它有把cache renew的神效

就是說當我用Linter來測試www.littleshell.net
本身sharer.php裡的cache也有可能被更新!

若果依然都不能......
added on 25th November, 2015
這有可能要檢查一下您的網址是否public accessible
eg http://192.168.123.123 像這樣只有自己才能看到的網址facebook是不可能找到資料的

是否有redirect script?
facebook 是找取網頁render好的那刻的html,所以如果你的網頁有跳轉頁面的話那facebook 只能抓到跳轉前的html
換句話說, 如果你的頁面是用javascript 控制的話, 那facebook 是會抓javascript運行前的html source code

時間線是這樣的
server 回傳需要的html > facebook 抓取server回傳的html >  讀取css, js 等等 > browser 排版 > javascript 開始運行

是否有密碼保護??
例如.htaccess 等等 facebook 同樣是抓不到資料的





若果依然都不能......
對不起了, 小弟暫時也無能為力

有說得不明白的地方, 還請指正, 謝謝