JQUERY


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

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

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

参考サイト

XMLHttpRequest cannot load エラーの対処法

jqueryでajaxを利用すると、コンソールにエラーが出た

実行したjquery
-------------------------------------------------
$.post(
//アクセスするURL
'http://sub.exemple.com',
{
'value': value
},
function(data){
//リクエスト成功時の処理
});
-------------------------------------------------

コンソールに出たエラー
-------------------------------------------------
XMLHttpRequest cannot load http://sub.exemple.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://exemple.com' is therefore not allowed access.
-------------------------------------------------

リクエスト成功時に実行される処理も行われない。

header("Access-Control-Allow-Origin
解決方法は、http://sub.exemple.com にAccess-Control-Allow-Origin レスポンスヘッダを追加する。

ワイルドカードですべてのドメインからの接続を許可
-------------------------------------------------
header("Access-Control-Allow-Origin: *");
-------------------------------------------------

特定のドメインからの接続のみを許可する場合
-------------------------------------------------
header("Access-Control-Allow-Origin: http://exemple.com");
-------------------------------------------------

.htaccessに書き込むなら
-------------------------------------------------
Header append Access-Control-Allow-Origin: *
-------------------------------------------------

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]);
-------------------------------------

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

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

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

-------------------------------------------
<!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

【JQuery】異なるイベントで同じ関数を実行する

異なるイベントで同じ関数を実行させたい場合、イベント発生時の処理用に共通の関数を定義して、それぞれのイベントから実行させる。

サンプルスクリプト
-----------------------------------------------
//検索欄でenterキーが押されたら実行
$('#kensaku-form').keydown(function() {
if( event.keyCode == 13 ) {
myFunc();
return false; //enterキー無効
} //if
});

//もしくは検索ボタンが押されたら実行
$('#kensaku-button').click(function(){
myFunc();
});

//実行される共通の関数
function myFunc() {
alert('イベントが実行されました');
};
-----------------------------------------------

【JQuery】スマホでhoverを使う

hover を使ったリンクをつくって iPhone で見ると、リンクにタッチした瞬間には hover は反応せずに指を画面から離した瞬間に反応する。

PC上の hover がマウスポインタを置いた瞬間に反応するように、タッチした瞬間にスマホ画面を反応させるには JQuery を使うといい。

Jquery ファイル
/////////////////////////////////////////////////
//PC用 hover 処理。css に hover を記述するとスマホサイトで見たときに
//挙動がおかしくなるので PC 上の挙動もここでつくる
//PC用とスマホ用を上下入れ替えると、android で挙動がおかしくなる。
//android が hover とtouchstart(touchend)のどちらにも反応するためだと思われる。
$('.touch-res').removeClass("touchstyle").addClass("notouchstyle");
$('.touch-res').hover(
function () {//---マウスオーバーの処理
$(this).removeClass("notouchstyle").addClass("touchstyle");
},//---カンマを忘れずに
function () {//---マウスアウトの処理
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
);

//スマホ用。touchstart & touchend で処理。
$('.touch-res').bind({
'touchstart': function(e) {
$(this).removeClass("notouchstyle").addClass("touchstyle");
},
'touchend': function(e) {
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
});
/////////////////////////////////////////////////

//CSSファイル
/////////////////////////////////////////////////
/* JQuery専用なので、htmlファイルには touch-res クラスだけリンクに設定する*/
.touchstyle { background-color:#d9effc;}
.notouchstyle { background-color:transparent;}
/////////////////////////////////////////////////

問題点がひとつあって、iPhone で次のページに進んだ後、戻るボタンでもどると、リンクの色が変わったままになっている。

iPhone だけなら css の擬似クラス :active で、PC上の hover と同じような反応を出すことができる。ただし、android は反応しなくなる。

【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