ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

jQueryで「パソコン&Android」と「iPad&iPhone」で表示するボタンを切り替える

元々は、ボタンをクリックするとjqueryのcolorboxが立ち上がり、Flashムービーが流れるようにしていたんですが、それだとiPad&iPhoneで再生できない。。。

そこで、iPad&iPhoneで閲覧した際には、「MP4の動画ファイルに直リンクしているボタン」を表示することにしました。

  • PC&Androidで閲覧した場合
    colorboxの起動&Flashのムービーが再生されるボタンを表示
  • iPad&iPhoneで閲覧した場合
    MP4ファイルにリンクしたボタンを表示

以下が、サンプルコードです。

Javascript

<script type="text/javascript">

// iPad&iPhone用のボタンを非表示
$('.ipad_iphone_btn').hide();

$(function(){

	// iPad&iPhoneを判定
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1){

	// iPad&iPhone用のボタンを表示
	$('.ipad_iphone_btn').show();

	// PC&Android用のボタンを非表示
	$('.pc_android_btn').hide();

	}
});
</script>

HTML

<p class="ipad_iphone_btn"><a href="#">iPad&iPhone用のボタン</a></p>
<p class="pc_android_btn"><a href="#">PC&Android用のボタン</a></p>

HTML5が使えれば、こんなことをしなくても。。。

投稿日
2012年9月7日
カテゴリー
JavaScript

コメントを残す

デザイン・ポータルサイト事業デザインオフィス blow→in
〒598-0021 大阪府泉佐野市日根野7001-2
TEL.072-425-7218(代表)
WEB.https://blow-in.net
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
ブランディング・ネットショップ事業かつらぎフルーツ
〒649-7151 和歌山県かつらぎ町東渋田325-4
TEL.0736-26-8277
WEB.https://katsuragi.shop
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
飲食店事業パンケーキカフェ cafeblow
〒598-0021 大阪府泉佐野市日根野3926
TEL.090-5127-9187
WEB.https://cafeblow.com
  • フェイスブックアカウント
  • インスタグラムアカウント
  • ツイッターアカウント
  • line@アカウント