javascript


動的に生成した要素に対してマウスオーバー(アウト)のイベントを起こす

動的に生成した要素に対してマウスオーバー(アウト)のイベントを起こすjQueryの記述

-------------------------------------------------------
$(document).on({
"mouseenter": function(){
$(this).removeClass("notouchstyle").addClass("touchstyle");
},
"mouseleave": function(){
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
}, ".touch-res");
-------------------------------------------------------

参考サイト

【javascript】ajaxを利用しない場合のローディング画像の出し方

ぐるぐる回るローディング画像の具体的な表示の仕方についてはこちらを参考

ajaxありの場合
-----------------------------------------------
JavaScriptdispLoading("処理中..."); //ローディング画像を表示するユーザー定義関数

//ajax処理

removeLoading(); //ローディング画像を消すユーザー定義関数
-----------------------------------------------

ajaxなしの場合
-----------------------------------------------
JavaScriptdispLoading("処理中...");

//javascript で描写が画面に反映されるタイミングは、関数の実行が終わってから。
//そのため、ローディング画面を表示させるために一旦ここで関数を終わらせる。
setTimeout(function() {

//時間がかかるjavascriptの処理(ajaxでない)。

removeLoading();
}, 0);
-----------------------------------------------

javascriptは、関数の実行中にページの書き換えは起こらない。関数の実行キューが空になって時点ではじめてページの書き換えが起こることに注意。

参考サイト

ジャンプ先ページで特定の要素をウインドウの中央に表示

ページ内リンクの要領で、特定の要素をウインドウの中央に表示する方法

<script type="text/javascript">
//ページの読み込みが完了したら
window.onload = function(){

var positionX = window.pageXOffset;
var positionY = window.pageYOffset;
alert(positionX);
alert(positionY);
//window.scrollTo( 0, 200) ;

// 要素の位置を取得する
var element = document.getElementById("jump");
var rect = element.getBoundingClientRect() ;

// 座標を計算する
var positionY = rect.top + window.pageYOffset ; // Y座標のスクロール量
// alert(positionY);
positionY = Math.floor(positionY) ; //小数点以下切り捨て
// alert(positionY);

var winHeight = window.innerHeight; //現在のウインドウの高さ

alert("ウインドウの高さ" + winHeight);

//0.5秒遅れてスクロールさせる。速いとうまくいかない※
setTimeout(function() { window.scrollTo( 0, positionY - winHeight/2) ; }, 500);
}

※ 詳細はこちら

こちらも参考

JQUERYのPOST(ajax)で戻り値を複数返す

JQUERYのPOST(ajax)で戻り値を複数返すには、PHPからjavascriptへのデータの受け渡しの際に配列をJSON形式に変換する

//PHP側
-------------------------------------
$data_arr = array($data1, $data2);

//javascriptに受け渡すため配列をJSON形式に変換
$datas = json_encode($data_arr);
echo $datas; //JQUERYに渡す
-------------------------------------

JQUERY側
-------------------------------------
data_arr = JSON.parse(data); //戻り値をJSONとして解析
alert(data_arr[0]);
alert(data_arr[1]);
-------------------------------------

【javascript】getElementByIdとgetElementsByClassNameの違い

javascriptのgetElementByIdで値を取得したようにgetElementsByClassNameで値を取得しようとすると取得できなかった。getElementsByClassNameはたんにgetElementByIdのClass版ではなかった。

getElementByIdとgetElementsByClassNameでは戻り値が違う。

getElementByIdの戻り値
-----------------------------------------------------
存在する場合は要素(オブジェクト)を返し、存在しない場合はnullを返す。
-----------------------------------------------------

getElementsByClassNameの戻り値
-----------------------------------------------------
存在する場合は1個以上のHTMLCollectionを返し、
存在しない場合は0個のHTMLCollectionを返す。
-----------------------------------------------------

getElementById
getElementsByClassName

getElementByIdがオブジェクトを返すのに対して、getElementsByClassNameは配列っぽいものを返す。複数返すからgetElementsByClassNameなのね。

//idにクリックイベントを設置
-----------------------------------------------------
document.getElementById('content').click = function (e){
alert("クリックされた");
}
-----------------------------------------------------

//classにクリックイベントを設置
-----------------------------------------------------
document.getElementsByClassName('box1')[0].onmouseup = function (e){
alert("クリックされた");
}
-----------------------------------------------------

ルビつきの文章からルビを削除してコピペする

ルビだけコピーしたくない

上のページを参考にルビつきの文章を選択してボタンを押すとアラートでルビなしの選択テキストが表示されるスクリプトを書いたのでメモ。

-------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a</title>
</head>
<body>
<section>
<h2>おはなし</h2>
<p>
<ruby><rb>親譲</rb><rp>(</rp><rt>おやゆず</rt><rp>)</rp></ruby>りの<ruby><rb>無鉄砲</rb><rp>(</rp><rt>むてっぽう</rt><rp>)</rp></ruby>で小供の時から損ばかりしている。
</p>
</section>
<div id="foot_bt">
ルビなし文章をアラート
</div>
</body>
</html>
-------------------------------------------

//採用したのはこちら
-------------------------------------------
//いったん削除する
var rtList = document.getElementsByTagName("rt");
var contentList = [];
Array.prototype.forEach.call(rtList, function(rt) {
contentList.push(rt.textContent); //配列に入れる
rt.textContent = ""; //空にする
});

//選択した文章を代入
selection_text = document.getSelection().toString();

//削除したやつを戻す
setTimeout(function() {
Array.prototype.forEach.call(rtList, function(rt) {
rt.textContent = contentList.shift();
});
}, 0);
-------------------------------------------

最初の参考ページにdisplay:none;でルビを消す方法も載っているが、選択したテキストを取得する場合、IE11ではルビが残ってしまい無理だった。
参考:選択中文字列の取得 ブラウザによる違い

このページも役に立った

http://mamewaza.com/support/blog/howto-use-range-selection.html

【javaScript】インラインフレーム内のテキストを選択して取得する

選択したテキストを取得して確認するために、アラートで表示するスクリプトをつくった。

test.js
-------------------------------------------------------
//ボタンが押されたら
$('#test_bt').on('click', function () {

var selObj = document.getElementById('iframe').contentDocument.getSelection();

//もしくはこちら
//var selObj = document.getElementById('iframe').contentWindow.getSelection();

alert("選択した文字列: " + selObj); //アラートで表示

});
-------------------------------------------------------

test.html
-------------------------------------------------------
<div class="ifrm-container">
<iframe src="iframe_test.html"></iframe>
</div>
<div>
<input type="button" value="ボタン" id="test_bt">
</div>

-------------------------------------------------------

あらかじめテキストを選択しておいて、ボタンが押されたら選択されたテキストがはいったアラートを表示する方法をとったのだが、android だとボタンを押すとテキストの選択が解除される。「選択解除」 → 「選択テキストを取得してアラートを表示」の順番になるのでうまく取得できない。

<<追記>>
android でも選択したテキストをアラートで表示できた。

test.js
//touchend のタイミングでテキストを保存しておけばいい
-------------------------------------------------------
selection-text = "global"; //グローバル変数をつくっておく
$(window).on("load", function(e){

$("#iframe").contents().find("div").on("touchend", function(e){

//ここでグローバル変数にテキストを保存しておく
$(this).data('selection-text',window.getSelection());

});
});
-------------------------------------------------------

touchend 指を離したタイミングでアラートする場合

//touchend のタイミングで取得
-------------------------------------------------------
$(window).on("load", function(e){

$("#iframe").contents().find("div").on("touchend", function(e){

var selObj = document.getElementById('iframe').contentDocument.getSelection();
alert("選択した文字列: " + selObj);

});
});
-------------------------------------------------------

【JQuery】iPhoneでのiframeの設定とスクロール

iPhoneでは、iframeの高さが設定できないので、フレームをはみ出る大きなコンテンツもスクロールバーは表示されず、iframeのサイズが無視されて表示される。

解決するには、iframeの真上の要素にサイズを設定する。

sample.php
----------------------------------------
<?php //スクロール量表示場所 ?>
<div id="log"></div>

<div class="ifrm-container">
<iframe src="iframe_test.html" id="iframe" class="ifrm" scrolling="auto"></iframe>
</div>
----------------------------------------

sample.css
----------------------------------------
.ifrm-container {
width:300px;
height:400px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}

.ifrm {
width:100%;
height:100%;
border:none;
display:block;
}
----------------------------------------

参考サイト

jqueryでスクロールバーを操作する場合は、iPhoneでは、iframeをかこう要素にイベントを設定、それ以外ではiframe要素自身にイベントを設定する

//iPhone以外で100スクロールさせる
----------------------------------------
$($("#iframe").contents()[0]).scrollTop(100);

//スクロール量の表示
$( $('#iframe')[0].contentWindow ).scroll(function () {
var st = $($("#iframe").contents()[0]).scrollTop();
$("#log").html(st);
// });

----------------------------------------

//iPhoneで100スクロールさせる
----------------------------------------
$(".ifrm-container").scrollTop(100);

//スクロール量の表示
$('.ifrm-container').scroll(function () {
var st = $(".ifrm-container").scrollTop();
$("#log").html(st);
});
----------------------------------------

参考:【jquery】iframe内のスクロールイベント設定とスクロール量取得

ただし、iPhoneで表示されるiframeは仕様上テキストが選択できない。テキストが選択したい場合は、擬似フレームを使う。

テキストが選択できない理由はこれだった↓↓
iPhoneで長文のテキストが選択しにくい

【JQuery】iframe内をタップしたらイベントを発火させる

sample.html
-------------------------------------------
<!DOCTYPE HTML>
<html>

<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>
</head>
<body>
<iframe src="iframe_test.html" id="iframe"></iframe>
</body>
</html>
-------------------------------------------

iframe_test.html
-------------------------------------------
<html>
<head>
</head>
<body>
<div>
インラインフレームの内容
</div>
</body>
</html>
-------------------------------------------

test.js
-------------------------------------------
//iframeの内容が完全に読み込まれたら
$(window).on("load", function(e){
//iframeにはタッチやクリックイベントは発行されないためこういう記述
$("#iframe").contents().find("body").on("touchstart", function(e){
alert("タップされた");
});
});
-------------------------------------------

参考ページ1 
参考ページ2

ただ、これだとiPhoneのsafariだと「click」うまく動作しない。「touchstart」なら動く。理由はこれだと思う。
iPhoneのsafariだとbody要素に登録したclickは無効なのでdivなどに登録先を変える。

-------------------------------------------
$("#iframe").contents().find("body").on("click", function(e){
alert("タップされた");
});
-------------------------------------------

↓↓↓↓↓↓↓↓↓

-------------------------------------------
$("#iframe").contents().find("div").on("click", function(e){
alert("タップされた");
});
-------------------------------------------

iframe内の部品がクリックされたイベントを起こす場合は↓

■sample.html
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>Test</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#hoge").contents().find("#fuga").bind("click", function() {
alert("hogehoge");
});
})
</script>
<iframe id="hoge" src="hoge.html"></iframe>
-------------------------------------------

■hoge.html
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>hoge.html</title>
<button id="fuga">PUSH!!</button>
-------------------------------------------
参考:http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1036893315

【javascript】スマホで縦スクロール禁止

javascript の記述
---------------------------------------
//touchmove の縦スクロールを禁止
document.body.addEventListener( 'touchmove', function(e){
e.preventDefault();
});
---------------------------------------

jQuery の場合
---------------------------------------
// スクロール禁止
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});

// スクロール禁止 解除
$(window).off('.noScroll');
---------------------------------------
※.noScroll は解除するためにつけた名前

参考ページ

http://qiita.com/kokushin/items/ef96194bd0fa7c145d7b

1 / 3123