月別: 2017年11月

(33) div矩形内のどこを押してもリンク

CSS

1) aタグを inline-block にする。
2) aタグの表示幅・高さを、親要素の全域(100%)にする。

a.in_block{
	display: inline-block;
	width: 100%;
	height:100%;
}
div.button_frame{
	width: 100px;
	height: 100px;
	border: 2px #000 solid;  /* ただの装飾 */
	text-align: center;  /* ただの装飾 */
	line-height: 100px;  /* ただの装飾 */
}

HTML

<div class="button_frame">
<a class="in_block" href="https://www.yahoo.co.jp/">YAHOO!</a>
</div>

実行サンプルはこちら。
https://hp.dogrow.net/sample/00033/


(32) 【JQuery】 document.readyでページ表示時に処理を起動

よく忘れるので備忘録。

(1) WEBブラウザで「HTMLのロード完了時」に処理を起動する。

$(document).ready(function() {
  // do something
});

これは以下のように「(document).ready」の部分を省略して書ける。どちらも同じこと。

$(function() {
  // do something
});

(2) WEBブラウザで「HTML+その他のロード完了時」に処理を起動する。

その他: css, imgなど

$(window).load(function() {
  // do something
});

※JavaScriptで画像サイズなどの情報を使用する場合、document.ready ではなく window.load のタイミングで実行するべき。


(31) 【JQuery】 disabled状態をON/OFF

よく忘れるので備忘録。

(1) 現在のdisabled状態を取得する。

var val = $('xxxxx').attr('disabled');

(2) 任意のコントロールの disabled状態を設定する。

// disabledにする。
$('xxxxx').attr('disabled', true);

// disabledを解除する。
$('xxxxx').attr('disabled', false);

attr()ではなく prop()でもよい。

// disabledにする。
$('xxxxx').prop('disabled', true);

// disabledを解除する。
$('xxxxx').prop('disabled', false);

(30) 【JQuery】 radioボタンの状態を取得/変更

よく忘れるので備忘録。

(1) 選択されているradioの値を取得する。

セレクタの後ろに :checked を付けると選択中の radioボタンにアクセスできる。

var val = $('xxxxx:checked').val();

(2) 任意のradioを選択状態にする。

※Nは value属性値

$('xxxxx').val(['N']);

(29) 【CSS】DIV要素の中の文字を中段に表示

(1) やりたいこと

ブロック要素(今回はたまたまDIV)の中に表示するテキストを上下方向中央に表示したい。

でも、「vertical-align: middle」はブロック要素に対しては効かないのでこんな風になってしまう。

(2) 解決策

こんな時はブロック要素の「height」と「line-height」を同じにするとよい。

line-heightとは直訳したまんま 1行の高さのこと。
すなわち、2行以上を表示しようとすると、2行目以降は完全にはみ出してしまいブロック要素内に収まらないので注意。

おまけ:別解

1) DIVをブロック用でなくす

ブロック要素に「vertical-align:middle」と「display:table-cell」を指定して非ブロック要素にすると…

確かに中央に寄ってくれるが、他にもいろいろと指定しないといけなくなった…


(27) 【JQuery】 CHECKBOXの状態を取得/変更

よく忘れるので備忘録。

(1) checkboxのチェック状態を取得する。

1) チェック状態を取得する。

var chk = $('xxxxx').prop('checked');

2) チェックON/OFFを捕捉する。

$(function(){
  $('xxxxx').on('click', function(){
    var chk = $(this).prop('checked');
  });
});

(2) checkboxのチェック状態を設定する。

1) チェックを付ける。

$('xxxxx').prop('checked', true);

2) チェックを外す。

$('xxxxx').prop('checked', false);

(26) ページトップに戻るボタン

(1) やりたいこと

ホームページが縦に長くなってしまったとき、一気にページ先頭に戻りたい時がある。

パソコンでの閲覧時にはキー操作で一気に戻れたりするので必要に感じることは少ないが、
携帯やスマホでは操作手段が限られるため、一押しで先頭に戻れるボタンがあると便利だ。

今回は以下の仕様で「ページトップに戻るボタン」を実装してみる。
1) ある程度下方向にスクロールしたときにボタンが出現すること。
2) ボタンは常に画面の右下に表示すること。
3) ボタン押下時はスクロールしながらページトップに戻ること。

(2) 実現方法

実装したサンプルページはこちら。
https://hp.dogrow.net/sample/00026/

自分の頭の中を整理するために、HTML, CSS, JSの 3ファイルに分けて実装する。

1) index.html

17行目:「ページ先頭に戻るボタン」を配置している。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>

<h1>ページ先頭です。</h1>

<div style="height:2000px;padding:10px;border:2px #000 solid;background-color:#eee;text-align:center;">
長いコンテンツ
</div>

<div class="pagetop_button">↑戻る↑</div>

</body>
</html>

2) style.css

4行目: 他の要素に隠れることなく常に表示させるため。
5行目: ページ表示の初期状態では非表示。スクロール時にjsで表示に切り替えている。
6行目~8行目: ページ上での表示位置を固定にする。
11行目以下は見た目を飾っただけなので、機能を実現する上では不要なもの。

@charset "UTF-8";

div.pagetop_button{
  z-index: 9999;
  display: none;
  position: fixed;
  bottom: 20px;
  right:  20px;
}

/* 以下、別になくてもよい装飾 */
div.pagetop_button{
  padding: 5px;
  background-color: #fff;
  border: 1px #f00 solid;
  border-radius: 5px;
  cursor:pointer;
}

3) script.js

5行目: 300ピクセルを超えて下方向にスクロールしたならばボタンを表示
7行目: 300ピクセル以下ならばボタンを非表示
13行目: ボタンが押されたならば、1000msの時間をかけてスクロール量0の位置まで移動する。

$(function(){
  var pagetop_button = $('.pagetop_button');
  /////////////////////////////////////////////////////////////////////
  $(window).scroll(function(){
    if ($(this).scrollTop() > 300){
      pagetop_button.fadeIn();
    }else{
      pagetop_button.fadeOut();
    }
  });
  /////////////////////////////////////////////////////////////////////
  pagetop_button.click(function(){
    $('html,body').animate({scrollTop:0}, 1000);
  });
});