JQUERY


【javascript jQuery】eachでループして出力するとundefinedが出る

jQuery(javascript) で eachでループして出力すると undefined が出た。

//each で配列を展開
-------------------------
var my_value;
$.each(my_value, function(i, value) {
all_my_value += my_value;
});
-------------------------

上記の all_my_value は先頭に undefined という文字が入る。原因は var my_value; の部分で変数に何の値も代入していないこと。

undefined は 未定義値のこと。変数を宣言だけして何も代入していないと出る。

//これだと undefined の出る可能性がある
-------------------------
var 変数名
-------------------------

出したくなければ殻の値でも入れておく

//これだと undefined は出ない
-------------------------
var 変数名 = ""
-------------------------

参考ページ こちら

【jQuery】JavaScriptで追加した要素にイベントを設定するonの使い方

JavaScript を使って後から追加した要素に対してイベントを設定する on の書式。よく忘れるのでメモ。

on の書式
------------------------------------
$(親セレクタ).on(イベント名, 子セレクタ, function(){
------------------------------------

on の使用例
------------------------------------
$(document).on('click', '.class_name', function(){
------------------------------------

jQuery ui の dialog を最善面にする

jQuery ui の dialog が下に回り込んで見えなくなることがある。最善面にする方法は次のとおり。

css に設定する
-------------------------------
.ui-dialog { z-index: 1000 !important ;}
-------------------------------

z-index の値を大きくするほど前面に出る。

【Jquery】右クリックでイベントを発生させる

右クリックでイベントを発生させる記述

---------------------------------------
$(document).on('contextmenu', 'セレクター名', function() {

//イベントに対応して行うべき処理を記述

return false; //右クリックメニューを出さない処理

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

もしくは

---------------------------------------
$(document).bind('contextmenu', 'セレクター名', function() {

//イベントに対応して行うべき処理を記述

return false; //右クリックメニューを出さない処理

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

bindだと、ajax等で変更した要素にはイベントが発生しないので注意。

なお、contextmenu(コンテキストメニュー) とは、右クリックで出てくるメニューのこと。

textareaで一部の文字だけ装飾する

textareaで一部の文字だけ装飾する方法をネットで調べると Jquery を使った方法がいくつか見つかった。しかし自分のしたかったものとはちょっと違った。見つかった方法のソースをいじって自分のやりたかったことができればいいのだが、そこまで詳しくなので、理解するの時間がかかって面倒くさい。

で、タイトルとちょっと違うのだが、html や css で装飾した文字を textarea の文字のように簡単に編集できる方法を発見。やり方も超簡単だったので採用した。

サンプル

この文字は直接編集できます。textarea は使っていません。

html
--------------------------------
<div id="box" contenteditable=true>この文字は直接編集できます。textarea は使っていません。</div>
--------------------------------

css
--------------------------------
#Box {
border: 1px solid #999;
width:300px;
height:100px;
}

.font1 {
color: red;
}

.font2 {
color: blue;
}

.font3 {
font-weight: bold;
}
--------------------------------

大事なのは「contenteditable=true」の部分のみ。これは html5 の属性。たったこれだけで box 内の装飾された文字を、あたかも textarea 内に書かれた文字のように編集できる。

jQuery uiのdialogでタイトルに変数を使って更新させる

jQuery ui の dialog で タイトルを設定する場所は主に二箇所ある。

ひとつは jQuery ファイル内
---------------------------
//jQuery_ui の詳細設定
$('#dialog').dialog({
autoOpen: false,
width: 600,
title: 'ここがタイトルになる',
modal:false,
resizable:false,
buttons: {
"元に戻す": function() {
//$(this).dialog("close");
alert('元に戻す');
},
"閉じる": function() {
$(this).dialog("close");
}
}
});

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

もうひとつは html(PHP)ファイル内
---------------------------
<div id="dialog" title="ここがタイトルになる">
<p>ここがダイアログの内容</p>
</div>
---------------------------

二箇所どちらにもタイトルを設定すると jQuery ファイルの情報が優先される。

このたび、タイトルに変数を用いて、条件によってタイトルの内容を変更したかったのだが少し苦戦した。上記二箇所をいじってもタイトル文章がうまく更新できなかったのだ。
結論だけ言うと、タイトルはオプションを使っても指定できる。

jQuery ファイル内でダイアログのタイトルを上書き
---------------------------
$('#dialog').dialog('option', 'title', '新しいタイトル');
---------------------------

ここに変数を持ってきて、希望通りに表示できた。

参考サイト

画像ファイルを持っていかれないようにする方法

インターネットで公開している以上、絶対に画像を持っていかれない方法はない。

ここで紹介するのは、画像を持っていきにくくして、知識の乏しい人なら画像の持ち出しを諦めるだろう方法。そして簡単な実装できる方法を選んだ。

1.baseタグで基準となるURLを設定する

baseタグは、相対パスで書かれたURLの基準を指定するもの。

もしページのソースを見られたら画像の場所がわかってしまう。

絶対パス
----------------------------
<img src="http://example.com/image2001/image01.jpg">
----------------------------

相対パス
----------------------------
<img src="image2001/image01.jpg">
----------------------------

上の二つどちらも、画像ファイルは「http://example.com/image2001/」の中にあると読める。

そこでbeseタグを使うと画像ファイルの場所を少し分かりにくくできる。

headタグの間にbaseタグを記述する
----------------------------
<base href="http://example.com/image2001/">
----------------------------

すると「image2001フォルダ」までが基準になるのでimgタグへの記述は下記のようになる。

相対パスで
----------------------------
<img src="image01.jpg">
----------------------------

「image2001」の記述を省略できるのでimgタグ内だけを見ても画像の場所が分からなくなる。

2.baseタグはjavascriptで隠す。

imgタグだけを見ても画像ファイルの場所は分からないが、headタグ間に記述したbaseタグを見ると分かってしまう。
そこでbaseタグはheadタグ間に書かずに、外部ファイルとしてjavascriptで書くとよりいい。

外部ファイルとして読み込む
----------------------------
document.write('<base href="http://example.com/image2001/">');
----------------------------

参考

http://www.broadband-xp.com/hidesource/base.html

3.右クリックを無効にする

これまでの実装でソースを見ても画像ファイルの場所をわかりにくくすることは出来るが、画像自体を右クリックすれば画像のURLも分かるし、保存も出来てしまう。

そこで右クリックを禁止する。

bodyタグ内に記述
----------------------------
<body onContextmenu="return false">
----------------------------

これだと右クリックは防げるがデスクトップへドラッグすれば保存できてしまう。
そこでjquery.dwImageProtector.jsというjqueryのプラグインを使う。

使い方はこちらこちらが分かりやすい。

http://www.css-lecture.com/log/javascript/dwimageprotector.html

jquery.dwImageProtector.jsのソースはこんな感じ
---------------------------------------------------------
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
border: '1px solid #f00',
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('#content')
});
};
---------------------------------------------------------

head内のソースはこう
---------------------------------------------------------
<script src="http://example.com/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://example.com/js/jquery.dwImageProtector.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('load', function() {
$('img.protect').protectImage();
});
</script>
---------------------------------------------------------

保護するイメージには class を設定する
---------------------------------------------------------
<img src="image01.jpg" alt="" width="500" height="500" class="protect" />
---------------------------------------------------------

画像を囲む枠がずれる場合は「.appendTo('body')」の部分をbodyでなく任意の場所に変更すればうまくいく。

【jquery】masonryがスマホ画面で横並びしない場合の解決方法

javascript プラグインの masonry を使ったページでウインドウが横並びしない場合の対処法。

対処法 → columnWidth オプションを設定する。

------------------------------------------------------
<div class="js-masonry">

↓↓↓↓

<div class="js-masonry"
data-masonry-options='{
"columnWidth": 50,
"itemSelector": ".item",
"transitionDuration": "1.5s"
}'
>
------------------------------------------------------

columnWidth は、ボックスの横幅を指定するオプション。
masonry のデフォルトでは、スマホの画面幅にに二つ以上ウインドウを並べることはサイズ的に無理らしい。
そこで、50pxとかボックスのサイズを小さく指定する必要がある。

jqueryで文字列を置換するreplace関数【javascript】

jquery で文字列を置換するには、javascript のreplace関数を使う。
--------------------------------------------
new_text = text.replace(/探す文字列/g, '置換後の文字列');
--------------------------------------------

第一引数は正規表現で。g 修飾子はマッチするものすべてを見つける。

【jquery】配列内の重複を削除する【javascript】

jquery に unique() という関数があるが、これはDOM要素の配列の重複を削除するもの。文字列が入った配列の重複を解消するものでない。

jquery(javascript)で配列の内容をユニークにするには少し手間を掛ける必要がある。

//配列内の文字列の重複を削除する自作関数。
---------------------------------------------------------
function uniqueArray(array) {
var storage = {};
var resultAry = [];
var value;
for ( var i=0; i

2 / 3123