Developers Tech Notes

Archive for 3月 2016

2016年3月28日月曜日

（jQueryの学習）CSS：スクロール位置を操作する／scrollTopメソッド／縦スクロール位置を取得する（その１）

今回からはCSSのスクロール位置を操作する方法を学びます。
以下、4つのカテゴリに分けて見ていきます。

要素の縦スクロール位置（Y座標）を取得する
要素の縦スクロール位置（Y座標）を設定する
要素の横スクロール位置（X座標）を取得する
要素の横スクロール位置（X座標）を設定する

ここではjQueryにて要素に対する、スクロール位置の操作方法を整理します。

スクロール位置を操作するには、
縦スクロール（Y座標）に対しては「scrollTopメソッド」、
横スクロール（X座標）に対しては「scrollLeftメソッド」を利用する必要があります。
メソッドの種類は以下の通り。

■要素の縦スクロール（Y座標）を取得する
　・返却値（数値）＝要素．scrollTop（）　※ver1.2.6～
■要素の縦スクロール（Y座標）を設定する
　・返却値（jQueryオブジェクト）＝要素．scrollTop（数値）　※ver1.2.6～
■要素の横スクロール（X座標）を取得する
　・返却値（数値）＝要素．scrollLeft（）　※ver1.2.6～
■要素の横スクロール（X座標）を設定する
　・返却値（jQueryオブジェクト）＝要素．scrollLeft（数値）　※ver1.2.6～

これらのメソッドを使うことで、要素のいろいろなスクロール位置が取得ができるようになります。

それでは本日は「1.要素の縦スクロール位置（Y座標）を取得する」を学びます。

まずは要素に対する縦スクロール位置を取得します。

1.要素の縦スクロール位置（Y座標）を取得する

1-1.scrollTopメソッド【返却値(数値) = 要素.scrollTop( )】で1つの要素の縦スクロール位置（Y座標）を取得する

要素の縦スクロール位置（Y座標）を取得するためにはscrollTopメソッドを利用します。

スクロールバーを上下に動かしたときの対象要素に対する縦位置（Y座標）が取得できます。

サンプルソース

// HTML
<div class="box-inline">
  <b>テストエリア３</b>
  <div class="box-css-test-area-3">・・・略・・・</div>
  <div>scrollTop: <span id="st">0</span></div>
</div>

// CSS
/* テストエリア３ */
.box-css-test-area-3 {overflow:scroll; background: #F5EEFF; border:5px solid #44f; margin: 5px; padding: 5px; max-height:100px; max-width:200px; float:right;}

// jQuery
$(function() {
  // サンプル：「テストエリア３」の縦スクロール位置（Y座標）を取得する
  $(".box-css-test-area-3").scroll(function(){  // スクロールイベントを捕捉
    // 【構文】返却値(数値) = 要素.scrollTop()
    var st = $(this).scrollTop();
    // スクロール位置をセット
    $("span #st").text(st);
  });
});

実装例

要素の縦スクロール位置（Y座標）を取得します。

テストエリア３

【List】
1.ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
2.xxxxx
3.xxxxx
4.xxxxx
5.xxxxx
6.xxxxx
7.xxxxx
8.xxxxx

scrollTop: 0

次回はブラウザに対する縦スクロール位置を取得する方法を学びます。

それでは、また。

2016年3月25日金曜日

（jQueryの学習）CSS：相対位置を操作する／positionメソッド／親要素からの要素の相対位置を取得する（その３）

前回の続きで、
「複数要素」に対する親要素からの相対位置を取得する方法を考えます。

3-3.positionメソッドとmapメソッドで複数要素の親要素からの相対位置を取得する（できるか？）

複数要素の親要素からの相対位置は取得できませんでしたが、
heightメソッドやwidthメソッドと同じように「mapメソッド【返却値（jQueryオブジェクト）＝要素．map(function)】」を利用することで、
複数要素の左上からの相対位置をまとめて取得できるか？試してみます。

実際に動かしてみると、以下のようになった。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の親要素からの相対位置が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // サンプル：「テストエリア１と２」の左上からの相対位置を取得する
    var of = $(".box-css-test-area-1, .box-css-test-area-2").map(getPosition).get();
    // ↑：getPositionで各要素の左上からの相対位置を取得し、その結果をオブジェクトに格納する
    for (var key in of) {
      // ループして各要素の相対位置を取り出す
      alert("左から[" + of[key].left + "]　上から[" + of[key].top + "]");
    }
  });
});

// JavaScript
function getPosition(index, el){
    // 【構文】返却値(objectオブジェクト) = 要素.position()
  return $(el).width();
}

実装例

テストエリア１とテストエリア２に対する親要素からの相対位置を取得します。

要素:テストエリア１とテストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

mapメソッドを利用することで
「複数要素」に対する親要素からの相対位置が
まとめて取得できることがわかりました。

いかがでしたか？
offsetメソッドやpositionメソッドによる
相対位置の取得・設定方法が分かったと思います。

それでは、また。

2016年3月21日月曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：相対位置を操作する／positionメソッド／親要素からの要素の相対位置を取得する（その２）

引き続き、親要素からの要素の相対位置を取得する方法を学びます。

次は「複数要素」に対する親要素からの相対位置を取得します。

3-2.positionメソッド【返却値(objectオブジェクト) = 要素.position( )】で複数要素の相対位置を取得する（できるか？）

3-1.では1つの要素に対する親要素からの相対位置を取得しましたが、
複数の要素ではどうなるのか？試してみます。

以下、サンプルの通り、
「テストエリア１」と「テストエリア２」を要素としてpositionメソッドを実行したところ、
「テストエリア１」の幅のみ取得できたことがわかります。
※3-1.で確認

positionメソッドは複数要素には対応していないことがわかります。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の親要素からの相対位置が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(objectオブジェクト) = 要素.position()
    //   サンプル：「テストエリア１と２」の左上からの相対位置を取得する
    // 左からの相対位置
    alert("[" + $(".box-css-test-area-1, .box-css-test-area-2").position().left + "]");
  });
});

実装例

テストエリア１とテストエリア２に対する親要素からの相対位置を取得します。

要素:テストエリア１とテストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

offsetメソッドと同様に、
前回と同じ方法では「複数要素」に対する
親要素からの相対位置は取得できないことがわかりました。
次回は違う方法で考えます。

それでは、また。

2016年3月18日金曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：相対位置を操作する／positionメソッド／親要素からの要素の相対位置を取得する（その１）

CSSの要素の相対位置を操作する方法の3回目です。

本日は「3.親要素からの要素の相対位置を取得する」を学びます。

まずは「単一要素」に対する親要素からの相対位置を取得します。

3.親要素からの要素の相対位置を取得する

3-1.positionメソッド【返却値(objectオブジェクト) = 要素.position()】で親要素からの要素の相対位置を取得する

次はpositionメソッドを使い、親要素からの要素の相対位置を取得します。

サンプルの「テストエリア１」と「テストエリア２」にとっての親要素とは、
テストエリア１と書かれてる文言がある枠のさらに外側の枠の部分です。

なお、対象要素の位置の基準点は、border外側の左上の角になり、marginは含みません。
（わかりにくいですが、「テストエリア１」や「テストエリア２」の「テ」文言のすぐ下あたりになります）

注意：このメソッドは設定では使用できません。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、親要素からの要素の相対位置が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(objectオブジェクト) = 要素.offset()
    //   サンプル：「テストエリア１」の左上からの相対位置を取得する
    // 左からの相対位置
    alert("[" + $(".box-css-test-area-1").position().left + "]");
    // 上からの相対位置
    alert("[" + $(".box-css-test-area-1").position().top + "]");
  });
});

実装例

指定した要素に対する親要素からの相対位置を取得します。

要素:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

次回は「複数要素」に対する親要素からの相対位置を取得する方法を学びます。

それでは、また。

2016年3月14日月曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：相対位置を操作する／offsetメソッド／左上からの要素の相対位置を設定する（その２）

引き続き、左上からの要素の相対位置を設定する方法を学びます。

次は「複数要素」に対する左上からの相対位置を設定します。

2-2.offsetメソッド【返却値(jQueryオブジェクト) = 要素.offset(function)】で複数要素の左上からの相対位置を設定する

次に複数要素に対して、左上からの相対位置をまとめて変更します。

2-1.ではobjectオブジェクトに格納しましたが、今回は引数にfunctionを指定します。
引数に設定するFunctionの構文

function 任意のfunction名(インデックス番号, 現在の位置（objectオブジェクト）) {
  // ↓インデックスや現在の位置の引数が利用できる
  ・・・任意の処理・・・;
  // ↓最終的に移動したい位置をobjectオブジェクトに格納して返却する
  return 位置（objectオブジェクト）;
}

実際に動かしてみると、以下のようになります。

サンプルソース

// HTML
<input type="button" value="テストエリア１と２を右へ20px移動する"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(jQueryオブジェクト) = 要素.offset(object)
    //   サンプル：それぞれのエリアを左から「テストエリア１：10px」、「テストエリア２：20px」移動する
    $(".box-css-test-area-1, .box-css-test-area-2").offset(setOffset);
    // ↑：setOffsetで各要素の相対位置を設定する
  });
});

// JavaScript
function setOffset(index, ptObj){
  var newObj = {};
  newObj.left = ptObj.left + 10 * (index + 1);
  return newObj;
}

実装例

テストエリア１とテストエリア２を同時に移動します。

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

ここでは引数のfunctionを利用する方法で実現しましたが、
前回のやり方でも可能です。

いかがでしたか？
次回は「3.親要素からの要素の相対位置を取得する」を学びます。

それでは、また。

2016年3月11日金曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：相対位置を操作する／offsetメソッド／左上からの要素の相対位置を設定する（その１）

CSSの要素の相対位置を操作する方法の2回目です。

本日は「2.左上からの要素の相対位置を設定する」を学びます。

2.左上からの要素の相対位置を設定する

2-1.offsetメソッド【返却値(jQueryオブジェクト) = 要素.offset(object)】で要素の左上からの相対位置を設定する

次に要素の左上からの相対位置を変更します。

「テストエリア」の位置を変えてみます。

値はobjectオブジェクトに格納する必要があります。
なお、「50」と数値型で指定することができ、
さらに算術複合代入子（+=、-=）を使用した相対的な指定も可能。

サンプルソース

// HTML
<input type="button" value="指定したテストエリアを右へ50px移動する"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(jQueryオブジェクト) = 要素.offset(object)
    //   サンプル：「テストエリア１」の左からの相対位置を設定する
    var offsetObj = {};         // objectオブジェクト宣言
    offsetObj.left = $(".box-css-test-area-1").offset().left; // 変更前の位置をobjectに設定
    offsetObj.left = 50;  // ←絶対値指定・・・右から50pxの位置にする
    offsetObj.left += 50; // ←相対値指定・・・右へ50px移動する
    $(".box-css-test-area-1").offset(offsetObj);
  });
});

実装例

指定した要素を移動します。

要素:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

次回は「複数要素」に対する左上からの相対位置を設定する方法を学びます。

それでは、また。

2016年3月7日月曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：相対位置を操作する／offsetメソッド／左上からの要素の相対位置を取得する（その３）

前回の続きで、
「複数要素」に対する左上からの相対位置を取得する方法を考えます。

1-3.offsetメソッドとmapメソッドで複数要素の幅を取得する（できるか？）

複数要素の左上からの相対位置は取得できませんでしたが、
heightメソッドやwidthメソッドと同じように「mapメソッド【返却値（jQueryオブジェクト）＝要素．map(function)】」を利用することで、
複数要素の左上からの相対位置をまとめて取得できるか？試してみます。

実際に動かしてみると、以下のようになった。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の左上からの相対位置が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // サンプル：「テストエリア１と２」の左上からの相対位置を取得する
    var of = $(".box-css-test-area-1, .box-css-test-area-2").map(getOffset).get();
    // ↑：getOffsetで各要素の左上からの相対位置を取得し、その結果をオブジェクトに格納する
    for (var key in of) {
      // ループして各要素の相対位置を取り出す
      alert("左から[" + of[key].left + "]　上から[" + of[key].top + "]");
    }
  });
});

// JavaScript
function getOffset(index, el){
    // 【構文】返却値(objectオブジェクト) = 要素.offset()
  return $(el).width();
}

実装例

テストエリア１とテストエリア２の左上からの相対位置を取得します。

要素:テストエリア１とテストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

mapメソッドを利用することで
「複数要素」に対する左上からの相対位置が
まとめて取得できることがわかりました。

いかがでしたか？
次回は「2.左上からの要素の相対位置を設定する」を学びます。

それでは、また。

2016年3月4日金曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：相対位置を操作する／offsetメソッド／左上からの要素の相対位置を取得する（その２）

引き続き、左上からの要素の相対位置を取得する方法を学びます。

次は「複数要素」に対する左上からの相対位置を取得します。

1-2.offsetメソッド【返却値(objectオブジェクト) = 要素.offset( )】で複数要素の相対位置を取得する（できるか？）

1-1.では1つの要素に対する左上からの相対位置を取得しましたが、
複数の要素ではどうなるのか？試してみます。

以下、サンプルの通り、
「テストエリア１」と「テストエリア２」を要素としてoffsetメソッドを実行したところ、
「テストエリア１」の幅のみ取得できたことがわかります。
※1-1.で確認

offsetメソッドは複数要素には対応していないことがわかります。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の左上からの相対位置が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(objectオブジェクト) = 要素.offset()
    //   サンプル：「テストエリア１と２」の左上からの相対位置を取得する
    // 左からの相対位置
    alert("[" + $(".box-css-test-area-1, .box-css-test-area-2").offset().left + "]");
  });
});

実装例

テストエリア１とテストエリア２の左上からの相対位置を取得します。

要素:テストエリア１とテストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

高さや幅と同様に、
前回と同じ方法では「複数要素」に対する
左上からの相対位置は取得できないことがわかりました。
次回は違う方法で考えます。

それでは、また。

2016年3月28日月曜日

1.要素の縦スクロール位置（Y座標）を取得する

1-1.scrollTopメソッド【返却値(数値) = 要素.scrollTop( )】で1つの要素の縦スクロール位置（Y座標）を取得する

サンプルソース

実装例

2016年3月25日金曜日

3-3.positionメソッドとmapメソッドで複数要素の親要素からの相対位置を取得する（できるか？）

サンプルソース

実装例

2016年3月21日月曜日

3-2.positionメソッド【返却値(objectオブジェクト) = 要素.position( )】で複数要素の相対位置を取得する（できるか？）

サンプルソース

実装例

2016年3月18日金曜日

3.親要素からの要素の相対位置を取得する

3-1.positionメソッド【返却値(objectオブジェクト) = 要素.position()】で親要素からの要素の相対位置を取得する

サンプルソース

実装例

2016年3月14日月曜日

2-2.offsetメソッド【返却値(jQueryオブジェクト) = 要素.offset(function)】で複数要素の左上からの相対位置を設定する

サンプルソース

実装例

2016年3月11日金曜日

2.左上からの要素の相対位置を設定する

2-1.offsetメソッド【返却値(jQueryオブジェクト) = 要素.offset(object)】で要素の左上からの相対位置を設定する

サンプルソース

実装例

2016年3月7日月曜日

1-3.offsetメソッドとmapメソッドで複数要素の幅を取得する（できるか？）

サンプルソース

実装例

2016年3月4日金曜日

1-2.offsetメソッド【返却値(objectオブジェクト) = 要素.offset( )】で複数要素の相対位置を取得する（できるか？）

サンプルソース

実装例

Introduction

Popular Posts

Labels Cloud

Blog Archives

Featured Post