Javascript

スクロール催促ボタンとページトップへ戻るボタンの出し分け

2017/06/13 jQuery No comments

See the Pen GoToTop by Tenderfeel (@Tenderfeel) on CodePen.

某サイトで使っているボタンを要点だけ切り出してみた。

以下が指定された挙動だった:

  • 初期状態は下へスクロールするボタン
  • ファーストビューが消えるくらいスクロールしたらトップへ戻るボタンにする
  • フッターにトップへ戻るボタンを被せない

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

2011/10/05 Javascript No comments , ,

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

(さらに…)

[css,js] Retinaディスプレイ対策

2011/09/07 CSS No comments ,

スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。

500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら
1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。
その方法を以下に列挙する。

(さらに…)

[HTML5] アプリケーションキャッシュの使い方

2011/05/31 HTML5 3 comments , ,

アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、
表示の高速化やオフラインでの動作を可能にするものです。
ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。
特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。

(さらに…)

[js] iframeからのアクセスかブラウザでの直アクセスか判別する

2010/09/07 Javascript No comments ,

同タイトルの質問より。
もうちょっと具体的にソースを書いてみる。

index.html(フレームを呼び出すページ)

iframeのsrc属性で、ファイル名に続けて適当にパラメーターをつける。

<iframe src="inner.html?frame=true"></iframe>

inner.html(フレームの中ページ)

JavaScript

<script type="text/javascript">
(function(){
	 if(location.search.indexOf("frame=true")!==-1){
		document.write("フレームからの呼び出しです");
	}else{
		document.write("直接アクセスしています");
	}
})();
</script>

JavaScriptの場合、パラメーターはlocationで拾えるのでindexOfとかmatchとかで調べる。
イベントハンドらはwindow.onloadとかでもいい。

コンテンツを非表示にしたいならstyleを弄るのが楽かな~。

<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
	<meta charset="UTF-8">
	<title>inner.html(フレームの中ページ)</title>
	<script type="text/javascript">
	(function(){
		 if(location.search.indexOf("frame=true")!==-1){
			document.body.style.display="block";
		}
	})();
	</script>
	<style type="text/css">
		body{display:none}
	</style>
</head>
<body>
<h1>iframeからのアクセスかブラウザでの直アクセスか判別するテスト</h1>
<div style="background:#eee;height:400px">インラインフレームから見てね!</div>
</body>
</html>

PHP

<?php
if(isset($_GET&#91;"frame"&#93;)&&$_GET&#91;"frame"&#93;==ture){
	print "フレームからの呼び出しです";
}else{
	print "直接アクセスしています";
}
?>

PHPの場合はグローバル変数$_GETにパラメータがあるかどうか調べる。

PHPでコンテンツを見えなくするならページの先頭でdieしてしまうのが早いかな。

<?php
if(isset($_GET&#91;"frame"&#93;)&&$_GET&#91;"frame"&#93;!=ture){
	die("トップページからアクセスしてください");
}
?>
<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
	<meta charset="UTF-8">
	<title>inner.html(フレームの中ページ)</title>
</head>
<body>
<h1>iframeからのアクセスかブラウザでの直アクセスか判別するテスト</h1>
<div style="background:#eee;height:400px">インラインフレームから見てね!</div>
</body>
</html>

location.href=”index.html”とかheader(“location:index.html”)とかで強制的に飛ばしてもいい。