JQUERY


【jquery】スクロールできるモーダルウインドウの作り方

http://naming-dic.com/word2.html?lang=en&wordurl=48132895

スクロールできるモーダルウインドウの作り方

以下のページを参考にして、自分の環境用にいじったもの

jQueryでスクロールバーの出るモーダルウィンドウを作る方法

ウィンドウのスクロールバーの横幅を計算するjQueryコード

モーダルを表示したときに背景部分はスクロールできないようにする

/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>[DEMO]jQueryでスクロールバーの出るモーダルウィンドウを作る方法</title>
<script src="js/jquery.js"></script>
<script>
//スクロールバーの出るモーダルウィンドウ
///////////////////////////////////////////////////////
// スクロールバーの横幅を取得
$('html').append('<div class="scrollbar" style="overflow:scroll;"></div>');

//これがスクロールバーの横幅
var scrollbar_width = window.innerWidth - $(window).outerWidth(true);
$('.scrollbar').hide();

var current_scrollY;

// 「.modal-open」がクリックされたら
$('.modal-open').click(function(){

//スクロール済みの距離を取得
current_scrollY = $( window ).scrollTop();

//overflow: 'hidden' で下地画面をロックすると、画面が上に戻ってしまうので
//現在地まで移動させる
$( '#wrap' ).css( { top: -1 * current_scrollY } );

//下画面ロック
$( 'html, body' ).css( { overflow: 'hidden' } );

// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');

// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');

// モーダルコンテンツのIDを取得
var modal = '#' + $(this).attr('data-target');

// モーダルコンテンツを囲む要素を追加
$(modal).wrap("<div class='modal-wrap'></div>");

// モーダルコンテンツを囲む要素を表示
$('.modal-wrap').show();

// モーダルコンテンツの表示位置を設定
modalResize();

// モーダルコンテンツフェードイン
$(modal).fadeIn('slow');

// モーダルコンテンツをクリックした時はフェードアウトしない
//「.modal-open」がクリックされたときにはじめてイベントの登録(イベントが起こったとき関数が呼ばれるようにする)
$(modal).click(function(e){
e.stopPropagation();
});

// 「.modal-overlay」あるいは「.modal-close」をクリック
//「.modal-open」がクリックされたときにはじめてイベントの登録(イベントが起こったとき関数が呼ばれるようにする)
$('.modal-wrap, .modal-close').off().click(function(){
// モーダルコンテンツとオーバーレイをフェードアウト
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){

// オーバーレイを削除
$('.modal-overlay').remove();

// モーダルコンテンツを囲む要素を削除
$(modal).unwrap("<div class='modal-wrap'></div>");

//モーダルウインドウを開いたときに設定したの current_scrollY を解除
$( '#wrap' ).css( { top: 0 } );

//overflow 'hidden' から戻す
$( 'html, body' ).css( { overflow: 'visible' } );

alert('current_scrollY' + current_scrollY + 'px');

//モーダルを表示する前の位置に戻る
$(window).scrollTop(current_scrollY);

});
});

// リサイズしたら表示位置を再取得
$(window).on('resize', function(){
modalResize();
});

// モーダルコンテンツの表示位置を設定する関数
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
function modalResize(){

// ウィンドウの横幅、高さを取得
var w = $(window).width();
var h = $(window).height();

// モーダルコンテンツの横幅、高さを取得
var mw = $(modal).outerWidth(true);
var mh = $(modal).outerHeight(true);

// モーダルコンテンツの表示位置を設定
if ((mh > h) && (mw > w)) {

$(modal).css({'left': 0 + 'px','top': 0 + 'px'});

} else if ((mh > h) && (mw < w)) {
var x = (w - scrollbar_width - mw) / 2;
// alert('アラート2\nx' + x + 'px\nh' + h + 'px\nw' + w + 'px\nscrollbar_width' + scrollbar_width + 'px\nmw(モーダル幅)' + mw + 'px\nwindow.innerWidth(垂直スクロールバー(表示されている場合)を含む幅)' + window.innerWidth + 'px\nclientWidth' + $('.scrollbar').prop('clientWidth') + 'px\ncurrent_scrollY(スクロールした距離)' + current_scrollY + 'px');
$(modal).css({'left': x + 'px','top': 0 + 'px'});
} else if ((mh < h) && (mw > w)) {

var y = (h - scrollbar_width - mh) / 2;
$(modal).css({'left': 0 + 'px','top': y + 'px'});

} else {

var x = (w - mw) / 2;
var y = (h - mh) / 2;
$(modal).css({'left': x + 'px','top': y + 'px'});

} //if

}
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
//function modalResize ここまで
</script>

<style>
body {
margin:10px;
padding:10px;
border:10px solid #ddd;
}

.lock {
overflow:hidden;
}

.modal-content {
position:relative;
display:none;
width:50%;
margin:30px;
padding:10px 20px;
border:2px solid #aaa;
background:#fff;
}

.modal-content p {
margin:0;
padding:0;
}

.modal-overlay {
z-index:1;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.75);
}

.modal-wrap {
z-index:2;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}

.modal-open {
color:#00f;
text-decoration:underline;
}

.modal-open:hover {
cursor:pointer;
color:#f00;
}

.modal-close {
color:#00f;
text-decoration:underline;
}

.modal-close:hover {
cursor:pointer;
color:#f00;
}
</style>
</head>
<body>
<a data-target="con1" class="modal-open">リンク1</a>
<a data-target="con2" class="modal-open">リンク2</a>
<a data-target="con3" class="modal-open">リンク3</a>
<a data-target="con4" class="modal-open">リンク4</a>
<a data-target="con5" class="modal-open">リンク5</a>

<div id="con1" class="modal-content">
<p><a href="./">リンク1の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con2" class="modal-content">
<p><a href="./">リンク2の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con3" class="modal-content">
<p><a href="./">リンク3の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con4" class="modal-content">
<p><a href="./">リンク4の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con5" class="modal-content">
<p><a href="./">リンク5の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<p>
クリックしてみてください。ウィンドウより大きいモーダルウィンドウにはスクロールバーが出ていると思います。<br>
</p>

</body>
</html>
/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////

jQueryで文字列から破綻したhtmlタグを取る方法

破綻したhtmlタグとは
1.こんにちは</div> ← 開始のdivタグがない
2.<span>こんばんは ← 終わりの span タグがない

文字列操作をしていると上記のような状況が出てきたので、htmlタグに破たんがないように修正したかった。

方法
/////////////////////////////////////////////////
var string = 破綻した html
//破綻している html を作業スペースに置く
$('#tmp_place').html(string);

//再度取り出す
string= $('#tmp_place').html();
/////////////////////////////////////////////////

//作業スペースはあらかじめ用意しておく
/////////////////////////////////////////////////
htmlファイル
<div id="tmp_place" style="display:none"></div>
/////////////////////////////////////////////////

jQuery の .html でエレメント内に挿入して、ふたたぎ取り出すと破綻した html は修正される。確認は chrome のみ。ほかのブラウザは不明。

【jQuery】アラートを一回だけ出す

【jQuery】アラートを一回だけ出す

これで↓「青年」をクリックすると「青年」「ある青年の主張」とアラートが二度出てしまう。
-------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(document).on("click", "span", function() {

var get_txt = $(this).text();

alert(get_txt);

});
});
</script>
</head>
<body>
<span>ある<span>青年</span>の主張</span>
</body>
</html>
-------------------------------------------------

「青年」をクリックすると「青年」だけ、その他の文字列をクリックすると「ある青年の主張」というアラートをそれぞれ一度だけアラートするには。

方法1
バブリングを止める
-------------------------------------------------
<script type="text/javascript">
$(document).ready(function(){

$(document).on("click", "span", function(e) {

var get_txt = $(this).text();

alert(get_txt);
e.stopPropagation(e);

});
});
</script>
-------------------------------------------------
stopPropagation で親要素へのイベントの伝播を止めている

方法2
event.target を使う
-------------------------------------------------
<script type="text/javascript">
jQuery(document).on('click', function (event) {
var target = event.target;

if (target.tagName === 'SPAN') {
alert(target.textContent);
}
});
</script>
-------------------------------------------------

event.targetは、イベントバブルのイベントを開始したDOM要素を返すプロパティ。

jQueryで文字列だけ残してタグを削除

jQueryで文字列だけ残してタグを削除する方法

特定の値を持ったカスタムデータ属性を含むタグを消す場合
-------------------------------------------------
$("span[data-url=" + url + "]").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});
--------------------------------------------------

参考:教えて!goo jqueryを使って無駄なspanタグを削除したい

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

動的に生成した要素に対してマウスオーバー(アウト)のイベントを起こす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);

//連想配列でも可
//$data_arr = array('apple'=>'りんご', 'peach'=>'もも', 'pear'=>'なし');

//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で長文のテキストが選択しにくい

1 / 3123