about my life of multimedia: 2013

2013年11月11日星期一

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

2013年10月29日星期二

disable weird scroll bar in IE7

just a note for disabling the weird scrollbar in IE7

add the following css

html {
overflow:auto;
}

2013年10月26日星期六

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讓小弟知道
謝謝

2013年10月11日星期五

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~

2013年4月19日星期五

phonegap opening a PDF file in Windows Phone

For those who suffering from opening PDF in your application
here you are the solusion

just simply upgrade your cordova framework to at least 2.6.0
and use the following js to open

window.open("your/pdf/link", "_system")

the package can be downloaded here

please leave me a comment if it solves your problem~

2013年2月18日星期一

google map v3 custom infobox template

Here you are the google map custom infobox template,
the js library can be downloaded here

and the API document is here

<html>
 <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
  <script type="text/javascript">
   var gMap;
   var ib;
   $(window).load(window_load);

   function initMap() {
    var _mapOptions = {
     center: new google.maps.LatLng(22.302698, 114.160501),
     zoom: 12,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    gMap = new google.maps.Map(document.getElementById("mapArea"), _mapOptions);
   }

   function setMarker() {
    var _mOptions = {
     position:new google.maps.LatLng(22.302698, 114.160501),
     map:gMap
    }
    
    var _marker = new google.maps.Marker(_mOptions);
    
    ib.open(gMap, _marker)
    
    google.maps.event.addListener(_marker, 'click', function() {
     if(ib.getVisible()){
      ib.close();
     }else{
      ib.open(gMap, _marker)
     }
    });
   }

   function setInfoBox() {
    var _infoBoxOptions = {
     content: "<div class='divInfoContent'>hello world~~</div>",
     alignBottom:true,
     closeBoxURL: "",
     pixelOffset : new google.maps.Size(-20, -30),
     boxStyle: {
      width: 100,
      height: 75,
      background: "url(http://www.clker.com/cliparts/6/b/2/4/1197148387581632758SRD_comic_clouds_2.svg.thumb.png) no-repeat"
     }
    }
    
    ib = new InfoBox(_infoBoxOptions);
   }

   function window_load(){
    initMap();
    setInfoBox();
    setMarker();
   }
  </script>
 </head>
 
 
 
 <style>
  #mapArea {
   width: 480px;
   height: 360px;
   margin: 0 auto;
  }
  
  .divInfoContent {
   padding: 10px 20px;
  }
 </style>
 
 
 
 <body>
  <div id="mapArea"></div>
 </body>
</html>

2013年2月6日星期三

jquery .animate() overflow

just a note on $().animate()

this function will set overflow:hidden when method call and it will be back to normal when animation finished

simply set overflow:visible when needed.

about my life of multimedia

BloggerAds廣告

相關文章

2013年11月11日星期一

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

2013年10月29日星期二

disable weird scroll bar in IE7

2013年10月26日星期六

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

og:description

og:image

og:title

2013年10月11日星期五

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

2013年4月19日星期五

phonegap opening a PDF file in Windows Phone

2013年2月18日星期一

google map v3 custom infobox template

2013年2月6日星期三

jquery .animate() overflow

BloggerAds廣告

相關文章

2013年11月11日 星期一

2013年10月29日 星期二

2013年10月26日 星期六

og:description

og:image

og:title

2013年10月11日 星期五

2013年4月19日 星期五

2013年2月18日 星期一

2013年2月6日 星期三

2013年11月11日星期一

2013年10月29日星期二

2013年10月26日星期六

2013年10月11日星期五

2013年4月19日星期五

2013年2月18日星期一

2013年2月6日星期三