JavaScriptプログラムに関する各種メモ書き

コンパクトなサイズで設置簡単な(alert・モーダル)ウィンドウ jquery プラグイン

コンパクトなサイズで設置簡単な(alert・モーダル)ウィンドウ jquery プラグイン

● jquery.alertable.js - Minimal alert, confirm, and prompt replacements.

https://github.com/claviska/jquery-alertable

・デモ

http://www.jqueryscript.net/demo/Nice-Clean-jQuery-Alert-Confirm-Dialog-Plugin-alertable-js/

・設置方法

<script src="assets/js/jquery.alertable.min.js"></script>
<link  href="assets/js/jquery.alertable.css" rel="stylesheet">
$.alertable.alert('Howdy!');

これだけです。とても簡単ですね。

No.1130
04/17 13:46

edit

jQuery

iMacros for Google chrome で htmlからマクロを動作させる

● iMacros for Google chrome で htmlからマクロを動作させる

http://bit.ly/2nY6fYn

<html>
   <body onload="window.setTimeout('document.getElementById(\'criimlaunch\').click();', 1000);">
      <script>
         var macroCode = '';
         macroCode += 'PROMPT HELLO!\n';
         macroCode += 'URL GOTO=http://imacros.net/\n';
         macroCode += 'PROMPT BYE!\n';

         function launchMacro()
            {
            try
               {
                  if(!/^(?:chrome|https?|file)/.test(location))
                  {
                     alert('iMacros: Open webpage to run a macro.');
                     return;
                  }
			   
                  var macro = {}; 
                  macro.source = macroCode;
                  macro.name = 'EmbeddedMacro';
			   
                  var evt = document.createEvent('CustomEvent');
                  evt.initCustomEvent('iMacrosRunMacro', true, true, macro);
                  window.dispatchEvent(evt);
               }
            catch(e)
            {
               alert('iMacros Bookmarklet error: '+e.toString());
            };
         }
      </script>

      <a id="criimlaunch" href="javascript:launchMacro();">Launch CR iMacros</a>

   </body>
</html>
document.createEvent('CustomEvent');

でイベントを作成し発火させています。

https://developer.mozilla.org/ja/docs/Web/API/Document/createEvent

参考 : http://toolmania.info/post-8421/

No.1117
04/05 11:01

edit

iMacros

javascript 難読化する

オンラインでjavascript 難読化するには下記のようなサイトがあります。

● Javascript Obfuscator

https://javascriptobfuscator.com/Javascript-Obfuscator.aspx

● jjencode

http://utf-8.jp/public/jjencode.html

● aaencode

http://utf-8.jp/public/aaencode.html

● /packer/

http://dean.edwards.name/packer/

● JSFuck

http://www.jsfuck.com/

No.1116
04/04 17:46

edit

😊😊😊iPhoneの絵文字をWindowsで表示・入力する

● 【emoji表示ライブラリその1】jQueryEmoji による絵文字の表示

表示したい絵文字を、Aopple絵文字、Twitter絵文字、Microsoft絵文字から選択できます。
https://github.com/rodrigopolo/jqueryemoji
デモ : https://rodrigopolo.github.io/jqueryemoji/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jQueryEmoji.js"></script>
<link href="css/style.css" rel="stylesheet">
<script>
$(function(){
    $('p').Emoji({
        path:  '/emoji/jqueryemoji/img/apple72/',
        class: 'emoji',
        ext:   'png'
    });
});
</script>

● 【emoji入力ライブラリその1】wedgies/jquery-emoji-picker による絵文字の入力

https://github.com/wedgies/jquery-emoji-picker

デモ : http://wedgies.github.io/jquery-emoji-picker/demo.html

使い方

<link rel="stylesheet" type="text/css" href="{$config.root_uri}/jquery-emoji-picker/css/jquery.emojipicker.css">
<link rel="stylesheet" type="text/css" href="{$config.root_uri}/jquery-emoji-picker/css/jquery.emojipicker.a.css">
<script type="text/javascript" src="{$config.root_uri}/jquery-emoji-picker/js/jquery.emojipicker.js"></script>
<script type="text/javascript" src="{$config.root_uri}/jquery-emoji-picker/js/jquery.emojis.js"></script>
<script>
$(document).ready(function(){
	$('.emoji').emojiPicker({
	height: '300px',
	width:  '450px'
	});
});
</script>

```
<input type="text">
```
  ↓
```
<input type="text" class="emoji">
```


#● 【emoji入力ライブラリその2】OneSignal/emoji-picker による絵文字の入力
https://github.com/OneSignal/emoji-picker  
デモ : http://onesignal.github.io/emoji-picker/  

**特徴**
 - ```<input type="text">``` タグの上の表示用レイヤーを作成するのでブラウザによる見え方の違いがありません。
 - 上記理由により動的に入力タグのサイズを変更するスクリプトとは相性が良くないです。


####・使い方
```
<link  href="{$config.root_uri}/emoji-picker/lib/css/nanoscroller.css" rel="stylesheet">
<link  href="{$config.root_uri}/emoji-picker/lib/css/emoji.css" rel="stylesheet">
```
```
<script src="{$config.root_uri}/emoji-picker/lib/js/nanoscroller.min.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/tether.min.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/config.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/util.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/jquery.emojiarea.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/emoji-picker.js"></script>

<script>
$(function() {
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath        : './lib/img/',
    popupButtonClasses: 'fa fa-smile-o' ,
    xoffset : 500 ,
  });
  window.emojiPicker.discover();
});
</script>
```

```<input>```タグを下記のように変更します。

```
<input type="text">
```
  ↓
```
<input type="text" data-emojiable="true">
```
No.1103
03/15 21:28

edit

フォームの入力途中で画面遷移しようとするとアラートを出して注意する

● フォームの入力途中で画面遷移しようとするとアラートを出す例

jQueryを使っています

● フォーム例

<form action="test.php" name="MYNAME">
	<input type="text" name="input1">
	<textarea name="input2"></textarea>
</form> 

● JavaScript

$(function(){
var form_change_flg = false;
    $(window).on('beforeunload', function() {
        if (form_change_flg) {
          return "入力画面を閉じようとしています。入力中の情報がありますがよろしいですか?";
        }
    });
    //フォームの内容が変更されたらフラグを立てる
    $('form[name=MYNAME] input[name=title1]').change(function() {
        form_change_flg = true;
    });
    $('form[name=MYNAME] textarea[name=input2]').change(function() {
        form_change_flg = true;
    });
    // フォーム送信時はアラートOFF
    $('form[name=MYNAME]').submit(function(){
        form_change_flg = false;
    });
});

No.1092
03/27 09:26

edit

フォーム
jQuery

No.1082
01/30 13:58

edit

jQuery
フォーム

JavaScript の querySelector の書式入門

jQueryが使えない環境やメモリ的にjQueryを使用したくない場合のDOMセレクターにJavaScriptのquerySelectorがとても便利に使えます。

jQueryが使えないiMacros環境でも使用できます。

querySelector()  : セレクターに最初の要素ひとつを返す
querySelectorAll() : セレクターに合致した全ての複数の要素を返す。(DOMオブジェクトの配列で返る)

● JavaScript クエリセレクタの使い方例

・ID・クラス名で指定

window.document.querySelector("#my_id");
window.document.querySelector(".my_class");
window.document.querySelector([class='my_class']);

・その他いろいろな指定方法

window.document.querySelector("input[type='checkbox']");
window.document.querySelector("table[class='shipInfo'] tr td:nth-of-type(1)");
window.document.querySelector("tr > td");
window.document.querySelectorAll(".my_class");

・残念ながら使えない指定方法(文字列●●●を含む要素)

window.document.querySelector( 'tag:contains("●●●")' );

↑これは使用できません。 (Xpathなら取得できるのですが)

・xpathとクエリセレクタの変換

http://bit.ly/2b5BzLI
http://bit.ly/2bht2by

No.1050
08/31 14:09

edit

iMacros
jQuery
DOM
xpath

jQueryプラグインのひな形

jQueryプラグインを作成するためのひな形はネットで調べるといくつかパターンが出てきますがこういうのはどうでしょうか。

;(function($){

$.fn.myPlugin = function(options) {

     'use strict';

    if (this.length === 0){
    	var error_css  = 'background: #ff0000; color: #FFF; padding: 2px; line-height: 1.5;';
    	console.log('%cERROR( jquery.myPlugin.js ) :DOM Object not found', error_css);
    	return this;
    }

    // private variables
    var priOne = '';
    var priTwo = '';

    // private methods
    var foo = function() {
    };

    // public variables
    this.pubOne = 0;

    // public methods
    this.initialize = function() {
		return this.each(function(i, elem) {
			// ...
    	});
    };

    return this.initialize();
};
})(jQuery);
No.1040
07/03 14:45

edit

jQuery

JavaScript( node.js )でAES暗号を使う

■ cryptoJS

https://www.npmjs.com/package/crypto-js

● 1. インストール

npm install crypto-js

● 2. AES暗号化復号化のテスト

ファイル名 : test_node_aes.js

var AES = require("crypto-js/aes");
var CryptoJS = require("crypto-js");
// 暗号化キー
var txt_key = "0123456789ABCDEF0123456789ABCDEF";
// 暗号化したい元データ
var txt_plain = "元テキストです。";
console.log('txt_plain: ' + txt_plain);
var utf8_plain = CryptoJS.enc.Utf8.parse(txt_plain);
// 暗号化
var encrypted = CryptoJS.AES.encrypt( utf8_plain, txt_key );
var encrypted_strings = encrypted.toString();
console.log('encrypted_strings: ' + encrypted_strings);

// 復号化
var decrypted = CryptoJS.AES.decrypt(encrypted_strings, txt_key);
var decrypted_strings = decrypted.toString(CryptoJS.enc.Utf8);
console.log('decrypted_strings: ' + decrypted_strings);

● 3. 実行

node test_node_aes.js

● 4. 結果

txt_plain: 元テキストです。
encrypted_strings: U2FsdGVkX1+VR07vpJ+z0oKnSjrz0bT7uD3/lDdFgfhZI9HnlM8XKUEMusvCWKGQ
decrypted_strings: 元テキストです。
No.1038
05/25 19:58

edit

node.js

ES6( ECMAScript 2015)フレンドリー + 他ライブラリ非依存のスムーススクロール sweet-scroll.js

● sweet-scroll.js

http://webdesign-dackel.com/2015/12/17/sweet-scroll/

  • MIT ライセンス
  • 動作が軽快
  • 他の JavaScriptライブラリに依存しない
  • 設置も超カンタン
  • webpackやbrowserify対応

のことから使わない理由がみつかりません。おすすめです。

単独で使用するには

<script src="sweet-scroll.min.js"></script>

で読み込んで

const sweetScroll = new SweetScroll({
});

で、実行。簡単です。

オプションも豊富です

{
 trigger: "[data-scroll]",       // トリガーとなる要素をCSSセレクタで指定
  header: "[data-scroll-header]", // 固定ヘッダをCSSセレクタで指定
  duration: 1000,                 // アニメーション再生時間のミリ秒
  delay: 0,                       // アニメーション開始までの遅延ミリ秒
  easing: "easeOutQuint",         // イージングのタイプ
  offset: 0,                      // スクロール位置のオフセット
  verticalScroll: true,           // 垂直方向のスクロールを許可
  horizontalScroll: false,        // 水平方向のスクロールを許可 (デフォルトでは無効)
  stopScroll: true,               // ホイール・タッチイベントが発生した時にスクロールを停止
  // call back function
  beforeScroll: null,             // スクロールが始まる前 (return falseでキャンセル可)
  afterScroll: null,              // スクロールが終わった時
  cancelScroll: null              // スクロールがキャンセルされた時
}
No.1036
05/25 00:29

edit

背景画像の遅延読み込み(lazy load)をするlazysizes.js

● lazysizes.js

https://github.com/aFarkas/lazysizes

画像を画面に表示される直前に読み込む lazysizes.js 軽量でjQueryも必要ありません。

 

<script src="/js/lazysizes.min.js" async=""></script>

背景画像を遅延読み込みするには下記コードを追加します

<script>
  document.addEventListener('lazybeforeunveil', function(e){
      var bg = e.target.getAttribute('data-bg');
      if(bg){
          e.target.style.backgroundImage = 'url(' + bg + ')';
      }
  });
</script>

HTMLは以下のように修正します

<p style="background-image:url(large.jpg)">テスト</p>

 ↓

<p class="lazyload" data-bg="large.jpg">テスト</p>

● lazysize.js で画像を読み込み時にフェードインさせる

cssに以下を記述して読み込ませます `css .lazyload, .lazyloading {

opacity: 0;

} .lazyloaded {

opacity: 1;
transition: opacity 1000ms;

}


No.1026
11/28 12:28

edit

画像

最速アニメーションライブラリ velocity.js の記述方法

● 1. velocity.jsの読み込み(jQueryは読み込まなくても可能ですが、共存することもできます)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>

● 2. velocity.js のアニメーション記述

省略記法で記述する例

.velocity( 変形させたいパラメータ,(ハッシュ) アニメーション時間(ms), オプション(ハッシュ),  終了時実行関数(関数) )

例1:

$('#menu').velocity({
  opacity    : [ 1, 0 ],
  translateY : [ 0, -50 ]
},600,{ easing: "easeOutCirc" } ,
function(){ console.log("complete !!");  }
);

例2:opacity と translateY それぞれに違うイージングをかけたい場合

$('#menu').velocity({
  opacity    : [ 1, 'easeInQuart', 0 ],
  translateY : [ 0, 'easeOutQuart', -50 ]
},2000);

● 3. velocity.js の連続アニメーションの記述例

3つのアニメーションを連続して動かします。

$('#menu')
.velocity( { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] },600, { easing: "easeOutCirc" } )
.velocity( { translateY: 10 }, 200 )
.velocity( { translateY: 0 }, 200 );

● 4. 複数の要素に対して順番にアニメーションを動作させる記述例

.velocity.ui を追加で読み込ませます。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>

Velocity.RegisterEffect でアニメーションを定義して velocityで呼び出します。
stagger が1つ1つの要素を順番にアニメーションしていく際の待ち時間になります。

  $.Velocity.RegisterEffect("trans.my_effect", {
    defaultDuration: 500,
    calls: [[ { opacity: [1,0],  scaleX:[ 1, 0.1 ], scaleY:[ 1, 0.1 ] }, 1.00, { easing: "easeOutCirc" } ]] 
  })

  $('#menu li').css({opacity:0}).velocity("trans.my_effect", {
    easing  : 'ease-in-out',
    duration: 1000,
    stagger : 150
  });

● 5. さらに複雑なアニメーションを記述するには

複雑なアニメーションとそれに伴う処理を簡潔に書くことのできるライブラリ vq を作った

No.1020
06/06 14:03

edit

css
jQuery

Copyrightの今年の年をJavaScriptで表示させる

毎年変更するのが面倒なCopyrightの今年の年をJavaScriptで表示させる

2017をJavaScriptで表示

<script type="text/javascript">document.write(new Date().getFullYear());</script>

 ↓

2017

よくあるコピーライトをJavaScriptで表示

&copy; 2016 hogehoge.com 

 ↓

&copy; <script type="text/javascript">document.write(new Date().getFullYear());</script> hogehoge.com
No.1016
01/30 16:30

edit

このウィンドウはx秒後に自動的に閉じられます

「このウィンドウはx秒後に自動的に閉じられます」と表示してカウントダウンしていくやつ。

<pre>
このウィンドウは <span id="close_button_count"></span>秒 後に自動的に閉じられます。
</pre>
<script>
close_count_down(5);
function close_count_down(sec){
	if (sec <= 0){ window.close(); }
	document.getElementById('close_button_count').innerHTML = sec;
	setTimeout( function() {
			close_count_down(sec-1);
	}, 1000 );
}
</script>
No.1014
03/18 15:56

edit

jqueryの fadeIn / fadeOut メソッドを CSS3アニメーションにする

jqueryの fadeIn / fadeOut メソッドを CSS3(animation)アニメーションにするには以下のようにします。

デモ : http://logic.moo.jp/livedemo/jquery.fadecss3/demo.html

<link rel="stylesheet" href="jquery.fadecss3.css">
<script type="text/javascript" src="jquery.fadecss3.js"></script>
$('#item').fadeInCss3();
$('#item').fadeOutCss3();

$('#item').fadeInCss3(1000, 'ease-in');
$('#item').fadeOutCss3(3500, 'ease-in-out');

jquery.fadecss3.css として保存

@keyframes fadein_css3_kf {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadein_css3_kf{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes fadeout_css3_kf {
  0% {opacity: 1;}
  100% {opacity: 0; visibility: hidden; }
}
@-webkit-keyframes fadeout_css3_kf{
	0% {opacity:1;}
	100% {opacity:0; visibility: hidden;}

jquery.fadecss3.js として保存

$.fn.fadeInCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  var _this = this;
  setTimeout(function() {
    return $(_this).show().css({
        'animation'                 : 'fadein_css3_kf 400ms linear 0s 1 normal' ,
        'animation-duration'        : duration + 'ms' ,
        'animation-timing-function' : easing ,
        'animation-fill-mode'       : 'forwards' ,
        'visibility'                : 'visible'
    }).on(event_alias, function(){
      $(this).off(event_alias);
      $(this).css({
        'visibility' : 'visible' ,
        'animation'  : 'none'
      });
    });
  }, 0);
};

$.fn.fadeOutCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  $(this).each(function(){
    if( $(this).filter(':not(:hidden)').length ){
      $(this).show().css({
          'animation'                 : 'fadeout_css3_kf 400ms linear 0s 1 normal' ,
          'animation-duration'        : duration + 'ms' ,
          'animation-timing-function' : easing ,
          'animation-fill-mode'       : 'forwards' ,
          'visibility'                : 'visible'
      }).on(event_alias, function(){
        $(this).off(event_alias);
        $(this).css({
          'visibility' : 'hidden' ,
          'animation'  : 'none' ,
          'display'    : 'none'
        });
      });
    }
  });
  return $(this);
};

ただ現時点では CSSアニメーションはjQuery本体のanimate()よりは早いものの、Velocity.js には劣るようです。 参考 : http://bit.ly/1QnSfRn

No.1006
02/22 15:14

edit

css
アニメーション
高速化

jqueryでフォームのふりがな自動入力

jquery.autoKana.js https://github.com/harisenbon/autokana

<form>
<input type="text" id="user_name">
<input type="text" id="kana_name">
</form>
<script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#user_name', '#kana_name', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
</script>
No.1005
02/15 10:34

edit

jQuery
フォーム

jQuery(Javascript)で表示中のディスプレイが retina対応か判別する

jQuery(JavaScript)でRetina対応ディスプレイかどうか判別して、出力する画像(プリロードする先読み画像)の種類を分けたい時があります。

JavaScriptのみで対応可能です。 以下のように判別します。

var retinaCheck = window.devicePixelRatio;
if(retinaCheck >= 2) {
	alert('retina対応ディスプレイです。');
}
No.1004
02/08 16:51

edit

画像
jQuery

クリックでクリップボードにコピーするボタンを作るjQueryプラグイン【clipboard.js】

● clipboard.js

https://zenorocha.github.io/clipboard.js/

このclipboard.jsは Flashを使用しません。 そのかわり Safari には未対応となっています。

● 使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
$(function () {
var clipboard = new Clipboard('.clip_copy_btn');
});
</script>
<input type="text" id="clip_copy_1" value="XXXXX">
<button class="clip_copy_btn" data-clipboard-target="#clip_copy_1" >クリップボードにコピーする</button>

です。

No.1000
01/26 21:27

edit

フォーム
jQuery
HTML5

jQueryを使用しできない環境でjQueryメソッドを使用したい時に参照するサイト

■ YOU MIGHT NOT NEED JQUERY http://youmightnotneedjquery.com

例えばjQueryで `fadeIn()` を使用したかったらJavaScriptのみでこのように書けばいいよ、を教えてくれます。

No.992
01/05 10:13

edit

jQueryを使ってCSS3アニメーションを操作する。【jquery.transit】

■ jquery.transit · GitHub

https://github.com/rstacruz/jquery.transit#readme

jQueryを使いますが、アニメーション自体はCSS3アニメーションなのでスマホでも軽いです。 例:(フェードインの例)

<div id="test" style="border:1px solid red;">テストです</div>
$('#test').transition({ opacity: 0.0, scale: 0.5 }, 0);
$('#test').transition({
  opacity : 1.0,
  scale   : 1.0 ,
  duration: 5000,
  complete: function() {
    alert("CSS3 animation complete!");
  }
});
No.988
12/18 17:23

edit

jQuery
css
アニメーション

JavaScriptでオブジェクト、配列の要素数を取得する

JavaScriptで配列の要素数を取得するには( .length )

var ar = [111,222,333];
console.log(ar.length);    // 3

JavaScriptでオブジェクトの要素数を取得するには( Object.keys(オブジェクト名).length )

var obj = {
  a: 111 ,
  b: 222
};
console.log( Object.keys(obj).length );    // 2

とします。

No.987
12/18 15:05

edit

ドラッグ&ドロップで複数ファイルファイルアップロード + 進捗(プログレスバー)表示する Dropzone.js

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。(共存可能です。以下の例ではjQueryと併用します。)
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js (ダウンロード)
dropzone_config.js (自分で作成)
dropzone_upload.php (自分で作成)
dropzone.css (自分で作成)

です。

■ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js ( .jsファイル)
からダウンロードして保存します。

■ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます (※要追加) のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
	url                          : './js/dropzone_upload.php',
	paramName                    : 'file',
	maxFilesize                  : 999 , //MB
	addRemoveLinks               : true ,
	previewsContainer            : '#preview_area' ,
	thumbnailWidth               : 50 , //px
	thumbnailHeight              : 50 , //px
	dictRemoveFile               :'[×]' ,
	dictCancelUpload             :'キャンセル' ,
	dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか?' ,
		uploadprogress:function(file, progress, size){
		file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
	},
	success:function(file, rt, xml){
		// それぞれのファイルアップロードが完了した時の処理(※要追加)
		file.previewElement.classList.add("dz-success");
		 $(file.previewElement).find('.dz-success-mark').show();
	},
	processing: function(){
		// ファイルアップロード中の処理(※要追加)
	} ,
	queuecomplete: function(){
		// 全てのファイルアップロードが完了した時の処理(※要追加)
	} ,
	dragover: function( arg ){
		$('#' + arg.srcElement.id).addClass('dragover');
	} ,
	dragleave: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	drop: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	error:function(file, _error_msg){
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	},
	removedfile:function(file){
		delete_hidden('dropzone_files[]',file.xhr.response);
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	} ,
	canceled:function(arg){
	} ,
	previewTemplate : "\
	<div class=\"dz-preview dz-file-preview\">\n\
	  <div class=\"dz-details\">\n\
	    <div class=\"clearfix\">\n\
	      <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
	      <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
	    </div>\n\
	    <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
	    <div>\n\
	      <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
	      <div class=\"dz-my-separator\"> / </div>\n\
	      <div class=\"dz-size\" data-dz-size></div>\n\
	      <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
	    </div>\n\
	  </div>\n\
	</div>\n\
	"
});
});

■ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
	$temp_file = $_FILES['file']['tmp_name'];
	$ext = get_ext($_FILES['file']['name']);	// ファイル名から拡張子を取得
	$target_file = basename($_FILES['file']['tmp_name'].$ext);
	$ja_file     = $_FILES['file']['name'];
	$target_file_fullpath =  $store_folder . $target_file;
	move_uploaded_file($temp_file, $target_file_fullpath);
	echo "{$target_file}\t{$ja_file}";		// 英語ファイル名[TAB]日本語ファイル名 を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
	$p = pathinfo($file_name);
	if ( isset($p['extension']) ){
		return '.'.$p['extension'];
	}
	else{
		return '';
	}
}

■ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
	text-align: center;
	padding: 20px 0;
	height: 70px;
	width: 100%;
	color: #666;
	background-color: #f9f9f9;
	border: 4px dotted #bbb;
}
.dragover {
	color: #111               !important;
	background-color: #f1f1f1 !important;
	border: 4px dotted #777   !important;
}
.dz-preview {
	margin: 5px 0;
	padding: 10px;
	float: left;
	background-color: #F5F5F5;
	border-radius: 5px;
}
.dz-details {
	padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
	float: left;
}
.dz-my-separator {
	width: 20px;
	text-align: center;
}
.dz-size {
	margin-top: 1px;
}
.dz-progress {
	width: 500px;
}
.dz-progress .dz-upload {
	display: block;
	border: 5px solid #1E9BFF;
	border-radius: 2px;
}
.dz-remove {
	float: left;
	margin-left: 5px;
}
.dz-thumbnail {
	margin-bottom: 3px;
}
.fa-check-circle:before {
	color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
	display: block;
	float: left;
}
.dz-success-mark {
	height: 25px;
	margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

(formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。)

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。

No.982
01/22 23:37

edit

HTML5
フォーム
jQuery
Ajax
画像

JavaScriptで文字列を指定バイト数で切り取る

JavaScriptを使って長すぎる文字列を指定バイト数で切り取って「...続きを読む」みたいにするには以下のようにします。

function substr(text, len, truncation) {
  if (truncation === undefined) { truncation = ''; }
  var text_array = text.split('');
  var count = 0;
  var str = '';
  for (i = 0; i < text_array.length; i++) {
    var n = escape(text_array[i]);
    if (n.length < 4) count++;
    else count += 2;
    if (count > len) {
      return str + truncation;
    }
    str += text.charAt(i);
  }
  return text;
}

使い方

var text = '長い長い日本語の文字列。English English English ';
var text2 = substr(text, 10, '...続きを読む');
alert('text2:' + text2);
No.980
11/05 11:39

edit

日本語

JavaScript の getElement系メソッドによる HTMLタグ(DOMオブジェクト)の取得

JavaScriptでIDやタグ(DOMオブジェクト)を取得するとき

jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。

DOMオブジェクト取得時には取得の成否を判別する必要があります。

使い方は以下のとおりです。

■ document.getElementsByTagName(タグ名によるDOMオブジェクトの取得)

<a href="#">テスト</a>
var obj_array = window.document.getElementsByTagName('a');
if (obj_array.length > 0){
  alert('Aタグは存在します。');
  for ( var i=0; i<obj_array.length; i++){
	  alert(obj_array[i].innerText);
  }
}
else{
  alert('Aタグは存在しません。');
}

■document.getElementsByName(name属性によるDOMオブジェクトの取得)
<input type="text" name="hoge_name">
if (window.document.getElementsByName("hoge_name").length > 0){
  alert('name="hoge_name"のタグが存在します。');
}
if (window.document.getElementsByName("fuga_name").length > 0){
  alert('name="fuga_name"のタグが存在します。');
}
else{
  alert('name="fuga_name"のタグが存在しません。');
}

■document.getElementById(ID名によるDOMオブジェクトの取得)
<div id="hoge_id"></div>
if (window.document.getElementById("hoge_id")){
  alert('id="hoge_id"のタグが存在します。');
}
if (window.document.getElementById("fuga_id")){
  alert('id="hoge_id"のタグが存在します。');
}
else{
  alert('id="hoge_id"のタグが存在しません。');
}
No.979
10/23 16:34

edit

フォーム
DOM
jQuery

入力途中のフォーム内容を保存して自動的に復元する 『Sisyphus.js』

『Sisyphus.js』はフォームへの入力途中に「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値をローカルDBに保存して復元してくれるjQueryプラグインです。

HTML5のローカルDBを使用しますので Windows IE は 8以上が必要です。 それ以外のモダンブラウザは全て問題なく動作します。

■ Sisyphus.js

http://sisyphus-js.herokuapp.com/

■ 使い方( input type="hidden" 以外の全てのフォームを自動で記憶する。)

<form id="FM">
</form>
$(function(){
	$( "#FM" ).sisyphus( {
		locationBased: false,
		excludeFields: $('input[type="hidden"]'),
		autoRelease: false
	} );
});
No.974
09/09 15:00

edit

フォーム
jQuery
HTML5

prototype.js の フォーム操作

1行テキストエリア(id="hoge")の値

<input type="text" name="hoge" id="hoge" value="999" >
// ◆ prototype.js
$F('hoge');

オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ prototype.js
$F('hoge');

ラジオボタン(id="radio_id")の値の取得

// ◆ prototype.js
var data = $A(document.FM.radio_id).find(function(v) {return v.checked;});

単一チェックボックス(id=cb1)の値の取得

<label><input type="checkbox" id="cb1_id" name="cb1" value="あいうえお" />あいうえお</label>
// ◆ prototype.js
alert( $F('cb1') );

No.973
09/09 14:37

edit

prototype.js
フォーム

IE8以下で console.log がエラーになる問題の対処

IE8以下で JavaScriptで console.log() を記述しているとエラーとなってしまいます。 そこでIE8以下でもとりあえずエラーが出ないようにする対策

対策1. consoleオブジェクトがあるかどうかを調べてから console.log() を使用する

console.log( my_obj);

  ↓ このように変更する。

if(console && console.log) { console.log( my_obj); }

対策2. 何もしない空のconsoleオブジェクトを作成する

(function () {
    if (typeof window.console === "undefined") {
         window.console = {}
    }
    if (typeof window.console.log !== "function") {
         window.console.log = function () {}
    }
})();

引用 : http://goo.gl/czcLY3

No.972
09/09 10:42

edit

jQuery
エラー対処

ブラウザ自動運転マクロ、iMacrosの細かいテクニック

・コメントアウト【 .iim ファイル】

' 先頭がクォーテーションはコメントと見なされます
' コメント 
' コメント

・2秒間ウェイトする(待つ)【 .iim ファイル】

WAIT SECONDS=2

・全てのコマンド実行時に x秒間ウェイトする(待つ)【 .iim ファイル】

SET !REPLAYSPEED SLOW
SET !REPLAYSPEED MEDIUM
SET !REPLAYSPEED FAST
SLOW   : 2秒待つ
MEDIUM : 1秒待つ
FAST    : 0秒待つ(待たない。)

・コマンドライン(URL,検索バー)からの実行

マクロ「mymacro.iim」を実行します。

 imacros://run/?m=mymacro.iim

実は拡張子 .js のマクロも実行できます

 imacros://run/?m=mymacro.js

フォルダ「myfolder」の中に入った「mymacro.iim」を実行するには「/」を「%5C」で置き換えます

 imacros://run/?m=myfolder%5Cmymacro.iim

Aタグを使ってHTMLから起動することもできます

<a href="imacros://run/?m=myfolder%5Cmymacro.iim">マクロ起動</a>

・JavaScriptからのマクロ実行【 .js ファイル】

var test;
test = "CODE:";
test += "URL GOTO=www.google.com \n";
var rt = iimPlay(test);
alert(rt); // 1 以下の時エラー

・iMacrosの .js からDOMオブジェクトを操作する【 .js ファイル】

window.content.document.getElementById("xxx");

・iMacrosの .js からconsole.log で出力する【 .js ファイル】

window.console.log( 'TEST!!!' );

・iMarcorsにエラーがあった時に止まらないようにする

SET !ERRORIGNORE YES

・iMacrosの1命令ごとのタイムアウトを設定する

(ステップごとのタイムアウトを 2秒 に設定する)

SET !TIMEOUT_STEP 2 

・重いページを読み込む時にページの読み込みを待たない

(ページ読み込みのタイムアウトを 1秒 に設定する)

SET !TIMEOUT_PAGE 1

・フォームの入力テキストにスペースを入力する

(スペースの代わりに <SP> を入力します。)
TAG POS=1 TYPE=INPUT:TEXT FORM=ACTION:myform.php ATTR=* CONTENT=日本語<SP>太郎

・XPathで要素を指定してクリックする

普通に xpath が使えます (xpath式はダブルクォーテーションで囲むこと)

 TAG XPATH="//*[@id='my_id']/tr/td[3]/div/a"

・target="_blank" のリンクでウィンドウを開くとタブ番号がおかしくなる

firefoxで新規ウィンドウをタブで開く場合 target="_blank" をマクロで踏むとタブ番号がおかしくなりその後のマクロでエラーが出ることがあります。 この場合はリンクを押す代わりにリンク先を取得して imacros で画面遷移しましょう

・iMacrosでスクリーンショットを撮る

http://qiita.com/nori4k/items/2e55bc346062d5c490b8

リファレンス http://imacros.doorblog.jp

No.971
04/25 18:31

edit

iMacros
エラー対処
DOM
Firefox

iMacrosでマクロによる変数代入とJavaScriptによる変数代入

iMacrosではマクロ内で変数 (VAR1 〜 VAR9)が使用できます。
が、そもそもJavaScriptも使用できるので変数を使用したい場合はJavaScriptで扱うのもいいと思います。

iMacrosで変数を扱うサンプル ( imacros_debug.html )

表示用のHTMLページを用意してどこかのサーバにアップしておきます

<html lang="ja">
<head>
<meta charset="utf-8">
<title>iMacros debug</title>
</head>
<body>
<form action="test.cgi" name="FM">
!VAR1 : <input type="text" name="var1" id="var1" size="30"><br>
!VAR2 : <input type="text" name="var2" id="var2" size="30"><br>
!VAR3 : <input type="text" name="var3" id="var3" size="30"><br>
</form>
</body>
</html>

iMacrosで変数を扱うサンプルマクロ(拡張子は .js で使用すること) ( set_var.js )

ページ xxxx.xxxx.com/imacros_debug.html を開いてその中のフォームに変数を代入します。

var test;
test = "CODE:";
test += "URL GOTO=xxxx.xxxx.com/imacros_debug.html "+"\n";
test += 'SET !VAR1 "テスト 太郎"' + " \n";
test += 'SET !VAR2 "てすと たろう"' + " \n";
test += 'SET !VAR3 "000-111-2222"' + " \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var1 CONTENT={{!VAR1}} \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var2 CONTENT={{!VAR2}} \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var3 CONTENT={{!VAR3}} \n";
iimPlay(test);
alert('imacrosで変数をフォームに代入しました');

test2 = "CODE:";
test2 += "URL GOTO=xxxx.xxxx.com/imacros_debug.html "+"\n";
iimPlay(test2);
window.document.getElementById("var1").value = 'ジャヴァ スクリプト';
window.document.getElementsByName("var2")[0].value = 'じゃば すくりぷと';
window.document.getElementsByName("var3")[0].value = '000-999-8888';
alert('JavaScriptで変数をフォームに代入しました');

Firefox(やChrome)を立ち上げ、そこからiMacrosを立ち上げてそこから set_var.js を起動すると、1回目はマクロでフォームに変数を代入します。2回目はJavaScriptで代入します。

No.970
09/02 17:00

edit

iMacros
Firefox

フォームのプレースホルダーをjQueryで再現する

HTML5のプレースホルダー(placeholder : 入力例)はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。

■ 動作デモはこちら

HTML

<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>

JS

$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
  $(this).next(".placeholder").hide();    
}
});
$(".placeholder_check").focus(function(){
  $(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
  $(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
  if($(this).val() == "") {
    $(this).next(".placeholder").show();
  }
});
});

CSS

.placeholder {
	display: block;
	white-space:pre;
	position: absolute;
	top: 9px;
	left: 30px;
	color: #bbb;
}

参考 : http://hack.aipo.com/?p=3005

添付ファイル1
No.964
07/23 09:54

edit

添付ファイル

jQuery
フォーム
HTML5

JavaScript(jQuery)でギターのタブ譜を表示する

JavaScript(jQuery)でギターのタブ譜を表示するライブラリ。以下のようなものがありました

vexflow

http://www.vexflow.com

gregjopa/HTML5-Guitar-Tab-Player

https://github.com/gregjopa/HTML5-Guitar-Tab-Player
タブ譜と五線譜が両方表示されます。
再生ボタンを押して演奏することもできます。

HTML5 Guitar Tab Player

http://www.codeproject.com/Articles/834206/HTML-Guitar-Tab-Player
旋律用ギタータブ譜。再生ボタンを押して演奏することもできます。

acspike/ChordJS

https://github.com/acspike/ChordJS
ギターコードの指板画像を表示する。

No.945
09/14 00:43

edit

jQuery
HTML5

jQueryでフォームの全ての要素に入力や選択があるかどうかを調べる

関数 is_form_written を定義

function is_form_written(jq_obj){
	var tagname = $(jq_obj).prop("tagName");
	var type = $(jq_obj).prop('type');
	if (tagname==='SELECT'){
		if ( $(jq_obj).val() === '' ){ return false; }
		else{ return true; }
	}
	else if (tagname==='INPUT'){
		if (type==='radio'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='checkbox'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='text'){
			if ($(jq_obj).prop('value')!==''){ return true; }
			else{ return false; }
		}
	}
	else{
console.log($(jq_obj).prop("tagName"));
	}
}

以下のように呼び出して全ての要素(input , select , textarea)をチェックします

$('input,select,textarea').each(function(){
	if ( is_form_written(this) ){
		alert( $(this).prop('name') + ' は入力または選択済みです。');
	}
})
No.935
03/19 19:15

edit

jQuery
フォーム

jQueryでフォームのsubmitボタンの二重送信防止する

■ jquery.disableOnSubmit.js

が便利です。

http://bitarts.jp/blog/archives/003743.html

使い方

HTML

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.disableOnSubmit.js"></script>

HTML

<form id="FM">
</form>

JavaScript

$(function() {
  $("#FM").disableOnSubmit();
});

とするだけです。

ただしページ遷移後にブラウザの「戻る」ボタンで戻ってきた場合に二度とボタンが押せなくなるので、

それを修正したバージョンがこちら

スクリプト : ファイル名「jquery.disableOnSubmit.js」で保存してください

(function() {
	$.fn.disableOnSubmit = function(config) {
		var config = $.extend({
			timeout: 7000
		}, config);
		var buttons = $(":submit, :image", this);
		buttons.bind("click",function() {
			var hidden = $("<input />").
				attr("type", "hidden").
				attr("name", $(this).attr("name")).
				attr("value", $(this).attr("value"));
			$(this).after(hidden);
		});
		$(this).bind("submit",function() {
			buttons.attr("disabled", true);
			setTimeout(function(){
				buttons.attr("disabled", false);
			}, config.timeout);
		});
		$(window).unload(function(){
			buttons.attr("disabled", false);
		});
		return this;
	};
})(jQuery);

jQuerty Form disable on submit

(c) BitArts, Inc. (http://bitarts.jp)

Author: Tatsuya Miyamae <miyamae@bitarts.co.jp>

オリジナルのダウンロードは : http://goo.gl/XdRQg7

No.933
03/12 12:17

edit

ドロップダウンリスト(オプション・メニュー)のスタイルを変更するjQueryプラグイン【jquery.customSelect】

<i class="fa fa-github fa-2x"></i> jquery.customSelect

https://github.com/adamcoulombe/jquery.customSelect

ダウンロードするには【Download ZIP】のアイコンをクリック

<select>の後ろに<span class="customSelect">というタグを追加することによりドロップダウンリスト(オプション・メニュー)のスタイルを変更するプラグインです。

■ 使い方

<select class="my_form">
<option value="">選択してください</option>
<option value="土曜日">土曜日</option>
<option value="日曜日">日曜日</option>
</select>

というHTMLを用意して

<script src="jquery.min.js"></script>
<script src="jquery.customSelect.js"></script>
<script>
$(function(){
    $(".my_form").customSelect();
});
</script>

で実行します。

■ 動的に値を書き換える(ドロップダウンリストの状態を変更する)場合

動的に<select>の値を変更しても、jquery.customSelectによって生成された<span>の状態までは書き換えられません。

そこで次のように「trigger('render')」を使って書き換えを行います。

$(".my_form").val('土曜日');
$(".my_form").trigger('render');
No.931
03/07 11:48

edit

jQuery

ブックマークレット作成に便利なサイト

ブックマーク作成サイト

http://userjs.up.seesaa.net/js/bookmarklet.html

http://www.eonet.ne.jp/~wdf/software/bookmarklet_creator.html


作成したブックマークレットを戻して再編集するときに使用するサイト

http://home.kendomo.net/board/decode/decode2.php

http://jsbeautifier.org


ブックマークレットでjQueryを使う

http://goo.gl/3vzBSS

No.930
03/05 11:20

edit

Bookmarklet

jQueryでのクラス表示方法・クラス指定方法

あるタグ(jQueryオブジェクト)のクラス,IDを取得し表示

<div id="hoge" class="red big long" >テスト</div>
// そのタグが持つクラスを取得し表示
alert( $('div').attr('class') );
// そのタグが持つIDを取得し表示
alert( $('div').attr('id') );

複数のクラスを持つタグ(jQueryオブジェクト)を選択【AND検索】

<div class="foo bar">テスト</div>
// 間にスペースはいれない
$('.foo.bar')

// +をつかった書き方(こちらのほうが見やすいと思います)
$( '.foo' + '.bar' )

あるIDとあるクラスを持つタグ(jQueryオブジェクト)を選択【AND検索】

<div id="myID" class="myCLASS">テスト</div>
// +をつかって書く
$( '#myID' + '.myCLASS' )

あるクラスまたは別のあるクラス【OR検索】

<div id="myID" class="testA">テストA</div>
<div id="myID" class="testB">テストB</div>
// クラスの間にカンマをはさみます
$('.testA,.testB').each(function(){
    alert( $(this).attr('class') );
})
No.929
12/21 17:44

edit

jQuery

jQueryでフォームの入力値をチェックする(Validation)プラグイン

jQuery Validation Plugin

http://jqueryvalidation.org

日本語での解説

http://kudakurage.hatenadiary.com/entry/20091211/1260521031

スクリプトの読み込み

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js

■用意するHTML

<form name="FM">
<input type="text" name="hoge">
<input type="text" name="fuga">
</form>

■バリデーションの定義

$("#FM").validate({
	rules: {
		hoge: {
			required: true
		} ,
		'fuga': {
			required: true
		} 
	} ,
	messages: {
		hoge: {
			required: '入力してください。'
		} ,
		'fuga': {
			required: '入力必須項目です。'
		} 
	}
});

■標準搭載されているバリデーションメソッド

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

■正規表現のバリデーションメソッドを追加する

$.validator.addMethod("myregex", function(value, element, reg_str) {
	var re = new RegExp(reg_str);
	return re.test(value);
}, "入力値が正しくありません");

バリデーション定義に以下のように記述

rules: {
	postal: {
		myregex: '^[0-9\-]+$'
	}
} ,
messages: {
	postal: {
		myregex: '郵便番号を正しく入力してください。'
	}
}


■バリデーションのルールを追加するには関数を定義します

jQuery.validator.addMethod('my_validation_func', function(value, element) {
	if ( XXXXX ){
			return true;	// trueが返るとエラーとならない
		}
	else{
		return false;	// falseが返るとエラー
	}
}, 'デフォルトのエラーメッセージ');

■フォームのハイライトを中止する

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は

空のfunction() を定義します。

$("#FM").validate({
    highlight: function(element, errorClass) {
    }
});

■ 任意のタイミングでバリデーションを実行する

バリデーションの実行タイミングは

・フォーム Submit時

・エラー後のフォーム内容変更時

ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

<form id="FM">
$("#FM").valid();

■ バリデーションの条件分岐

rules: {
  my_name : { required: function() { return ($('#my_flg').val() === '1' ); } } 
} ,
messages: {
  my_name: { required: 'my_flgが『1』の時はmy_nameは空欄にはできません' } 
}
No.928
07/14 10:58

edit

フォーム
jQuery

JavaScriptでアルファベットの大文字と小文字を区別せずソートする。

一般的に文字列でソートすると大文字と小文字は区別されてしまいます。

そこで大文字の(A)も小文字の(a)も同じ(a)としてソートする方法がこちら

var text_array = ['AAA','aaa','bb','BBB','zzzz']
// ソート(大文字と小文字を区別しない)
text_ary = text_ary.sort(function (a, b) {
	a = a.toString().toLowerCase();
	b = b.toString().toLowerCase();
	return (a > b) ?  1 :
		   (b > a) ? -1 : 0;
});
alert(text_array);

引用元 : https://gist.github.com/ishiduca/1215718

No.921
02/12 10:18

edit

配列

JavaScriptで全角→半角変換を行う

JavaScriptで全角→半角変換を行うのにとても便利なjQueryのプラグインがあります

■ jQuery Super Text Converter

https://github.com/megazalrock/jquery-supertextconverter

使い方

var my_text = '全角のテキスト1233456';
var conv = $.SuperTextConverter();
my_text = conv.toHankaku(my_text);
alert(my_text);

です。

簡単でとても便利!

No.916
01/15 15:08

edit

最も簡単にYouTube動画を貼り付けるjqueryプラグイン

■ jQuery.tubeplayer.js ↓(ダウンロードは下記サイトの画面右下【Download ZIP】から)

https://github.com/nirvanatikku/jQuery-TubePlayer-Plugin

コードは下記のようになります

<script src="jquery.js"></script>
<script src="jQuery.tubeplayer.min.js"></script>
<div id='player'></div>
<script>
jQuery("#player").tubeplayer({
	width: 600, // the width of the player
	height: 450, // the height of the player
	allowFullScreen: "true", // true by default, allow user to go full screen
	initialVideo: "[some video id]", // the video that is loaded into the player
	preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
	onPlay: function(id){}, // after the play method is called
	onPause: function(){}, // after the pause method is called
	onStop: function(){}, // after the player is stopped
	onSeek: function(time){}, // after the video has been seeked to a defined point
	onMute: function(){}, // after the player is muted
	onUnMute: function(){} // after the player is unmuted
});
</script>

簡単ですね。

No.914
11/06 16:34

edit

YouTube
jQuery

JavaScriptでPHPのin_arrayのような関数を作る

JavaScriptにはin_arrayのようにある数値や文字列が配列の中に存在するかどうかを判別する関数がありません。

そこで以下のようにして作成します。

Array.prototype.in_array = function(val) {
	for(var i = 0, l = this.length; i < l; i++) {
		if(this[i] == val) {
			return true;
		}
	}
	return false;
}

これで、配列のメソッドとして in_array が使用できるようになります。

var my_array = new Array('hogehoge','fugafuga');
if ( my_array.in_array('hogehoge') ){ alert('存在します'); }
No.900
10/25 18:14

edit

配列

JavaSriptで入力値のサニタイズ(PHPの htmlspecialchars()関数 )

JavaSriptで入力値のサニタイズを行いたい時があります。

まず PHPの htmlspecialchars() の互換関数 を作成します。

function htmlspecialchars(str) { 
	str = str.replace(/&/g,"&amp;");
	str = str.replace(/"/g,"&quot;");
	str = str.replace(/'/g,"&#039;");
	str = str.replace(/</g,"<");
	str = str.replace(/>/g,">");
    return str ;
}

htmlspecialchars()関数では対応できない文字を追加で変換する html_sanitize関数を作成します

function html_sanitize(str) { 
	str = str.replace(/;/g,"!___escape_semicolon___!");
	str = htmlspecialchars(str);
	str = str.replace(/!___escape_semicolon___!/g,"&#59;");
	str = str.replace(/\//g,"&#47;");
	str = str.replace(/\\/g,"&#92;");
	str = str.replace(/=/g,"&#61;");
	return str ;
}

使い方の例

var a = 'ABCDEFG\\=/<script>alert("XSS");';
var b = html_sanitize(a);
alert(a);
alert(b);
No.888
09/18 12:50

edit

正規表現

SWF Object 不要。jqueryのFlashムービー(swf)貼り付けプラグイン

http://jquery.thewikies.com/swfobject/

$('#hogehoge').flash({
  swf: "http://www.youtube.com/v/"+video_id+"&autoplay=1",
  width: 600,
  height: 600,
  bgcolor:'#000000',
  hasVersion: 10,
  hasVersionFail: function (options) {
   alert('version error');
   return false;
  },
  encodeParams: true,
  flashvars: {
   allowfullscreen: 'true'
  },
}
);
No.886
05/17 10:51

edit

jQuery

jQueryで<ul><li>の最後の要素を選択する

jQueryで<ul id="test"><li>の最後の要素を選択するには下記のようにします。

	$('#test li:last');

コーディング例:最後の要素のIDを表示します。

HTML

<ul id ="test">
<li id ="test1">あああ</li>
<li id ="test2">いいい</li>
<li id ="test3">ううう</li>
</ul>

JavaScript

alert( $('#test li:last').attr('id') );
No.885
05/07 14:48

edit

jQuery

JavaScriptでBlowfish暗号を利用する

不可逆可能な暗号化で広く使われているBlowFishをJavaScriptで使うための方法。

■ こちらのblowfish.js を使用します(MITライセンス)

http://logic.moo.jp/data/filedir/882_1.js

使い方(全角文字を使用する時は escape , unescape などを使用します。)( encodeURI , encodeURIComponent でも可 )

var bf = new Blowfish("some key"); // 任意の暗号・復号化キー
var ciphertext = bf.encrypt64( escape("日本語の文字列") );
var plaintext = unescape( bf.decrypt64(ciphertext ) );
alert( ciphertext );
alert( plaintext );

添付ファイル1

jQueryで "ある要素" が画面内にあるかどうかを判別する

jQueryで "ある要素" が画面内にあるかどうかを判別するには

要素のページ内での位置(Y座標)、現在のスクロール位置(Y座標)を見て判別します。

$(function() {
	// 引き金となる要素を設定
	var triggerNode = $(".trigger");
	// 画面スクロール毎に判定を行う
	$(window).scroll(function(){
		// 引き金となる要素の位置を取得
		var triggerNodePosition = $(triggerNode).offset().top - $(window).height();	
		// 現在のスクロール位置が引き金要素の位置より下にあれば‥
		if ($(window).scrollTop() > triggerNodePosition) {
			// なんらかの命令を実行
			console.debug("Do Something");
		}
	});

引用元:http://hennayagyu.com/webhack/javascript/

ある要素が表示されたときに命令を実行するjavascript-w-jquery-2348

No.879
05/30 10:08

edit

jQuery

IE8 IE7 IE6 でCSS3の background-size: contain; を使用できるようにするjQueryプラグイン

CSS3で追加された background-size。値は以下のとおり指定します。

<b>auto</b> 自動的に算出される(初期値)
<b>contain</b> 背景領域に収まる最大サイズになるように背景画像を拡大縮小する
<b>cover</b> 背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
<b>xxx px</b> 背景画像の幅・高さを指定する
<b>xxx %</b> 背景領域に対する背景画像の幅・高さのパーセンテージを指定する

とこれが Windows IE8 7 6 ではこのプロパティは認識されません。

そこで以下のjQueryプラグイン

■ jquery.backgroundSize.js

(要 jQuery バージョン1.7.0以降 )

http://louisremi.github.com/jquery.backgroundSize.js/demo/

■ 使い方(<div class="hoge">に { background-size : cover; } を適用する。)

<script type="text/javascript" src="jquery.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="jquery.backgroundSize.js"></script>
    <script>
    jQuery(document).ready(function() {
        jQuery('div.hogehoge').css({backgroundSize: "cover"});
    });
    </script>
<![endif]-->

No.872
05/30 10:08

edit

jQuery

JavaScript(jQuery) で郵便番号から住所を自動入力する2つのライブラリ

■ 1.【 jQueryプラグイン jquery.jpostal.js】

設置が簡単なのでおすすめです。住所データも自動更新。

https://github.com/ninton/jquery.jpostal.js

ライブラリの読み込み

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

スクリプトの実行

$('#postcode1').jpostal({
	postcode : [
		'#postcode1', // 郵便番号 前3桁
		'#postcode2' // 郵便番号 後4桁
	],
	address : {
		'#address1'  : '%3', // 都道府県
		'#address2'  : '%4', //住所1
		'#address3'  : '%5' // 住所2
	}
});

です。とても簡単ですね。


■ 2. 【ajaxzip3】

郵便番号から住所を自動入力するには住所データ自動更新してくれる ajaxzip3 も簡単便利です。

https://github.com/ajaxzip3/ajaxzip3.github.io

ライブラリの読み込み

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

郵便番号入力欄に追加

正規表現で郵便番号が7桁入力された時に検索を実行するようにします。

【name=zipcode】のテキストエリアに7桁の郵便番号を入力すると

【name=prefecture】のドロップダウンリスト

【name=address】の1行テキストに住所が反映されます。

■ HTMLの1行テキストを下記のように修正

<input name="zipcode" type="text" />
↓
<input name="zipcode" type="text" onkeyup="check_zip(this);" />

■ HTMLの<head>タグ内に下記を追加(.js ファイルにして外に出してもok)

<script>
var postal_name = '';
function check_zip( _this ){
    if ( postal_name != _this.value ){
        AjaxZip3.zip2addr( '_this', 'prefecture', 'address' );
        postal_name = _this.value;
    }
}
</script>

これだけです。

No.870
07/14 13:50

edit

jQuery

ウィンドウサイズ変更を検知してサイズによって画像サイズを変更する

以下のようにウィンドウサイズによって画像サイズを変更したい時があります。

・画面サイズ(横幅)が800px 以下の場合は 800px固定

・画面サイズ(横幅)が800px 以上の場合は 100%(横いっぱい)

jQueryを使って以下のようにします。

<img id="hogehoge" src="./test.jpg" width="800" />
<script>
function liquid_image(){
	var wh = jQuery(window).height();
	var ww = jQuery(window).width();
	if (ww > 800){
		jQuery('#hogehoge').css("width", "100%");
	}
	else{
		jQuery('#hogehoge').css("width", "800px");
	}
}
jQuery(document).ready(function(){
	liquid_image()
});
jQuery(window).resize(function(){
	liquid_image()
});
</script>

jQueryのウィンドウサイズ変更を検知するイベント

jQuery(window).resize(function(){
// ここに処理を記述
});

jQueryの画面スクロール変更を検知するイベント

jQuery(window).scroll(function () {
// ここに処理を記述
});
No.869
01/26 19:25

edit

画像
jQuery

iPad, iPhone, スマートフォン用にviewportをJavaScriptで設定する

下記の用に JavaScriptで端末を判別してからそれぞれにセットしたい viewport を追加します。

下記の例では

iPhoneの時 499px

iPad の時 999px

にセットしています。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    if(navigator.userAgent.indexOf('iPhone') > -1){
        jQuery("head").append(jQuery('<meta name="viewport" content="width=499, user-scalable=yes" />'));
    }
    else if(navigator.userAgent.indexOf('iPad') > -1){
        jQuery('head').append('<meta name="viewport" content="width=999, user-scalable=yes" />');
    }
});
</script>
No.867
12/01 23:19

edit

jQuery

ある日にちからの経過日数(経過時間)を取得する

ある日にちから今日までの経過時間を取得するには下記のようにします。

function calc_elapsed_days(last_modified_date){
	var pass_day  = Math.floor(( (new Date()) - (new Date(last_modified_date)) ) / (1000*60*60*24));
	var pass_hour = Math.floor(( (new Date()) - (new Date(last_modified_date)) ) / (1000*60*60));
	var pass_min  = Math.floor(( (new Date()) - (new Date(last_modified_date)) ) / (1000*60));
alert('pass_day:'+pass_day+'   pass_hour:'+pass_hour+'   pass_min:'+pass_min);
	return pass_day;
}

呼び出し方は

// '2012/01/15 16:00:00' から 今日までの経過日数を取得
var elapsed_days = calc_elapsed_days('2012/01/15 16:00:00');
No.862
11/02 16:31

edit

JavaScriptで xx日前の日付け、今日の日付を求める

JavaScriptで 10日前の日付を求めるには以下のようにします。

var date = new Date();
date.setDate(date.getDate() + 10);
console.log(date.toString());

JavaScriptで今日の日付を求めるには以下のようにします。

function _get_now(){
	var nowdate = new Date();
	var year = nowdate.getFullYear();
	var mon  = nowdate.getMonth() + 1;
	var date = nowdate.getDate();
	var week = nowdate.getDay();
	var hour = nowdate.getHours();
	var min  = nowdate.getMinutes();
	var sec  = nowdate.getSeconds();
	if (mon < 10) {mon= "0" + mon;}
	if (date < 10){date = "0" + date;}
	if (hour < 10){hour = "0" + hour;}
	if (min < 10) {min = "0" + min;}
	if (sec < 10) {sec = "0" + sec;}
	return year+'/'+mon+'/'+date+' '+hour+':'+min+':'+sec;
}
var now_day = _get_now();
No.858
08/05 14:46

edit

JavaScriptに sptintf 関数を実装する

JavaScriptにはsprintfがありません。

そこで自前で実装する方法

引用 : http://d.hatena.ne.jp/uupaa/20091214/1260737607

/*!{id:"uupaa.js",ver:0.7,license:"MIT",author:"uupaa.js@gmail.com"}*/
window.sprintf || (function() {
var _BITS = { i: 0x8011, d: 0x8011, u: 0x8021, o: 0x8161, x: 0x8261,
              X: 0x9261, f: 0x92, c: 0x2800, s: 0x84 },
    _PARSE = /%(?:(\d+)\$)?(#|0)?(\d+)?(?:\.(\d+))?(l)?([%iduoxXfcs])/g;

window.sprintf = _sprintf;

function _sprintf(format) {
  function _fmt(m, argidx, flag, width, prec, size, types) {
    if (types === "%") { return "%"; }
    var v = "", w = _BITS[types], overflow, pad;
    idx = argidx ? parseInt(argidx) : next++;
    w & 0x400 || (v = (av[idx] === void 0) ? "" : av[idx]);
    w & 3 && (v = (w & 1) ? parseInt(v) : parseFloat(v), v = isNaN(v) ? "": v);
    w & 4 && (v = ((types === "s" ? v : types) || "").toString());
    w & 0x20  && (v = (v >= 0) ? v : v % 0x100000000 + 0x100000000);
    w & 0x300 && (v = v.toString(w & 0x100 ? 8 : 16));
    w & 0x40  && (flag === "#") && (v = ((w & 0x100) ? "0" : "0x") + v);
    w & 0x80  && prec && (v = (w & 2) ? v.toFixed(prec) : v.slice(0, prec));
    w & 0x6000 && (overflow = (typeof v !== "number" || v < 0));
    w & 0x2000 && (v = overflow ? "" : String.fromCharCode(v));
    w & 0x8000 && (flag = (flag === "0") ? "" : flag);
    v = w & 0x1000 ? v.toString().toUpperCase() : v.toString();
    if (!(w & 0x800 || width === void 0 || v.length >= width)) {
      pad = Array(width - v.length + 1).join(!flag ? " " : flag === "#" ? " " : flag);
      v = ((w & 0x10 && flag === "0") && !v.indexOf("-"))
        ? ("-" + pad + v.slice(1)) : (pad + v);
    }
    return v;
  }
  var next = 1, idx = 0, av = arguments;
  return format.replace(_PARSE, _fmt);
}
})();
No.857
10/10 11:37

edit

jQueryで画像やリンクのクリック状態(マウスイベント)やキーボード入力状態を強制的に作り出す

http://api.jquery.com/trigger/

<b>.trigger()</b> メソッドを使って強制的にイベントを作ることができます。

// id=hoge の要素をクリック状態(onclick)を作り出す
jQuery('#hoge').trigger("click");

// id=fuga の要素にマウスオーバーさせる(onmouseover)
jQuery('#fuga').trigger("mouseover");

注意

<input type="text" name="hoge" id="hoge_id">
のフォームがあるとき
$("input[name='hoge']").trigger("focus"); // 動作しません ☓ NG
$("#hoge_id").trigger("focus"); // 動作します ○ OK

となりますので注意。

指定できるのは次のイベントです

 blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup

キーボードの入力状態を強制的に作り出す

var evt = $.Event('keydown');
evt.keyCode = 39;    // キーボードの右矢印(→)入力
$('#hoge').trigger(evt);

jQueryのkeycodeはこちらで調べられます

http://goo.gl/HO6ong

keycode一覧表

http://goo.gl/5UwW2

No.853
03/11 16:34

edit

jQuery

配列かどうかを判別する

JavaScriptである変数(hogehoge)が配列かどうかを確認したい時があります。その時は

if ( hogehoge instanceof Array) {
	alert('配列')
}
else{
	alert('スカラー')
}

とします

No.852
05/30 10:09

edit

配列

JavaScript(jQuery)でスマートフォン(iPhone, iPad, Android)を判別する

jQueryでスマートフォン(iPhone, iPad, Android)を判別するには下記のようにします

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		alert('スマートフォンです:' + agent);
	}
});
</script>
No.846
04/24 15:55

edit

jQuery
iPhone

JavaScriptの正規表現で変数を使う

JavaScriptの正規表現で変数を使うには以下の様に RegExp オブジェクトを宣言してから使用します。

// 後ろに(test.jpg)がつく文字列(例:Atest.jpg , Btest.jpg , 1_test.jpg)を検索したい場合
var file_name ='test.jpg';	// 検索したいファイル名
// ↓    これは次の正規表現と同じになります  /(.+)test¥.jpg$/i
var re = new RegExp( '(.+)'+ file_name + '$', "i");
var hogehoge = URL.replace(re,''); // replace(置換)
No.844
01/31 13:13

edit

正規表現

GoogleによるJavaScriptホスティング(CDN)を使用する

2009年からGoogleが有名なJavaScript(jQuery , prototype.js 等)のホスティングを開始しています。

もちろん運用で使用してもいいのですが、ちょっとしたテスト等には確実に使えます。

使用方法( 最新のjQueryを呼び出す )

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

使用方法(jQuery UI を呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>


使用方法(swfobjectを呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

使用方法(prototype.jsを呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>

その他貼りつけソースコードをコピーするサイト

http://scriptsrc.net/

No.795
04/05 17:35

edit

Google
jQuery
prototype.js

jQueryのテンプレートプラグイン【 jQuery.tmpl 】を使用する

jQuery Plugin .tmpl()

http://api.jquery.com/jquery.tmpl/

ダウンロードはこちら

https://github.com/jquery/jquery-tmpl

ソースは以下のとおり

手順は

1. jqueryとjquery.tmpl を読み込む
2. テンプレートを定義する(<!-- template -->で囲まれたところ)
3. データを定義する( var data = ..... ; のところ)
4. テンプレートを表示する ( $tmpl ....... のところ )

です。

簡単ですね。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js"></script>
</head>

<body>
<div id="target"></div>

<!-- template -->
<script id="template" type="text/x-jquery-tmpl">
  <li>${name}</li>
</script>
<!-- /template -->

<script>
var data = [ { "name" : "HOGE hofe" }, { "name" : "FUGA fuga" } ];
alert( $.tmpl( $('#template'), data ).html() );
$.tmpl( $('#template'), data ).appendTo( "#target" );
</script>

</body>
</html>
No.843
04/09 14:02

edit

Ajax
jQuery

JavaScriptファイル自身のURLを取得する。またドキュメントルートを取得する。

JavaScriptファイル自身のURLを取得する。

またローカル環境下でドキュメントルートを取得するには以下のようにします。

ファイル名【local_or_server.js】でディレクトリ【js】に保存します。

// ここのパラメーターを書き換える ↓↓↓↓↓
var set_js_path = '/js/';		// JavaScript設置パス(絶対パス表記)
var set_script_name ='local_or_server.js';	// スクリプト名
// ここのパラメーターを書き換える ↑↑↑↑↑

// 1. パスを取得
var script_path;
var re = new RegExp( '(.+)'+ set_script_name + '$', "i");
var scripts = document.getElementsByTagName("script");
var i = scripts.length;
while (i--) {
	var m = scripts[i].src.match(re);
	if ( m ) {
		script_path = m[1];
		script_path = script_path.replace(/\/$/,'');
		break;
	}
}
alert('js格納ディレクトリは: '+script_path);
// 2. ドキュメントルートを取得
set_js_path = set_js_path.replace(/\/$/,'');
var re = new RegExp( set_js_path +'$', "i");
var document_root = script_path.replace(re,'');
alert('ドキュメントルートは: '+ document_root);

参考:http://goo.gl/j2v05

No.842
04/10 00:48

edit

文字列型を数値型(整数型)に変換する(parseInt)

JavaScriptで文字列型をint型にするには以下のようにします。

var a = "123.45";
a = parseInt(a);
b = a + 10;
document.write(b);
No.838
03/16 13:35

edit

jQueryでオブジェクト(HTMLタグ要素)の存在、表示、アニメーション中を判別する

jQueryでオブジェクト(HTMLタグ要素)の存在を判別するには <b>.length</b>や <b>.is()メソッド</b> を使用します。

●<div id="hoge">が<b>『存在するかどうか?』</b>を調べるには

if($('#hoge').length) {
    alert('存在します');
}

とします。

●<div id="hoge">が<b>『表示中か非表示か?』</b>を調べるには

// 方法1. 「透明度」と「visibility」両方を確認する(おすすめ)
  if ($('#hoge').css('opacity') > 0 && $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法2. 「visibility」のみ確認する
if( $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法3. 「visibility」のみ確認する
if ( $('#hoge').is(':visible') ){
    alert('表示中です');
}

●<div id="hoge">が<b>『CSS3アニメーション中かどうか?』</b>を調べるには

    console.log( $('#hoge').css("transform") );
    console.log( $('#hoge').css("transition") );
    console.log( $('#hoge').css("opacity") );

など、CSSのプロパティを取得してきて変化中の値を見るといいでしょう。

●<div id="hoge">が<b>『JavaScript(jQuery)アニメーション中かどうか?』</b>を調べるには

// 方法1.
if ( $("#hoge:animated").length ){
	alert('アニメーション中です');
}
// 方法2.
if ( $("#hoge").is(":animated") ){
	alert('アニメーション中です');
}

.is() メソッドを覚えておくと色々便利です。

上記の例以外にも

// 要素にフォーカスがあたっているなら
if ($("#hoge").is(":focus") ){
    alert('フォーカスしています');
}

// 要素が最後の要素であれば
if ( $(".fuga").is(":last-child") ){
    alert('最後の要素です');
}

// 要素が表示中なら
if( $("#hoge").is(":visible") ){
    alert('表示中です');
} 

// 要素が非表示なら
if ( $("#hoge").is(":hidden") ){
    alert('非表示です');
}

// 要素がfugaクラスを内包しているなら
if ( $("#hoge").is(":has('.fuga')") ){
    alert('.fugaクラスを内包しています');
}
 
No.829
02/16 14:26

edit

jQuery

Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。

Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。

チェックボックスやラジオボタンの様にクリックするのが小さいフォームを作るときは、

フォームの横の文字もクリック出来るようにしておくととても便利です。

それを実現するのが<label>タグなのですがIEでは以下の2つの不具合があります。

■ 1.IE6では<label></label>でテキストを囲んだだけでは動作しない

以下のコードはIE6では動作しません。

<label><input type="checkbox" />チェックボックス1</label>
<label><input type="checkbox" />チェックボックス2</label>

以下のように全ての<checkbox>にidをセットして、<label>タグでそのIDを指定します。

<input type="checkbox" id="label_1" /><label for="label_1">チェックボックス1</label>
<input type="checkbox" id="label_2" /><label for="label_2">チェックボックス2</label>

■ 2.IE6, IE7, IE8では<label>タグ内に画像があった場合その画像をクリックしても何も起こらない

IE9では修正されていますが、IE6,7,8では以下のコードの時画像をクリックしてもチェックボックスにチェックはつきません。

<input type="checkbox" id="label_1" /><label for="label_1"><img src="photo.jpg" /></label>

それを修正するにはJavaScript(jQuery)プラグインを使用します。

$(function () {
        $('label > img').click(function () {
            $('#'+$(this).parent().attr('for') ).focus().click();
        });
});

これを「jquery.ie678label.js」で保存してサーバーにアップロード。

条件付きコメントでIE8以下のブラウザにのみ読み込ませます

<!--[if lte IE 8]>
<script type="text/javascript" src="jquery.ie678label.js"></script>
<![endif]-->

これhtmlは何も書き換えずにIE6,7,8,で<label>内画像をクリックできるようになります。

No.826
04/03 14:45

edit

jQuery

■ Google Maps を住所から自動生成するサンプル ( Google Maps API V3 使用)

PHPやPerlなどで動的に出力されるページにGoogle Mapsを埋め込む場合、

「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」

をやっていたのでは面倒な場合があります。

そこでGoogle Maps API V3を使用して簡単に地図表示を行います。

(ただしWindowsIE6は未対応なので対応したい場合はV2を使用します。)

Google Maps を住所から自動生成するサンプル

google_map.js

var my_google_map;
var my_google_geo;

function googlemap_init( id_name, addr_name ) {
	var latlng = new google.maps.LatLng(41, 133);
	var opts = {
		zoom: 15,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	my_google_map = new google.maps.Map(document.getElementById(id_name), opts);

	my_google_geo = new google.maps.Geocoder();
	var req = {
		address: addr_name ,
	};
	my_google_geo.geocode(req, geoResultCallback);
}


function geoResultCallback(result, status) {
	if (status != google.maps.GeocoderStatus.OK) {
		alert(status);
	return;
	}
	var latlng = result[0].geometry.location;
	my_google_map.setCenter(latlng);
	var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
	google.maps.event.addListener(marker, 'dragend', function(event){
		marker.setTitle(event.latLng.toString());
	});
}

これを読み込んで

html

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script>
<script src="googlemap.js" type="text/javascript" charset="UTF-8"></script>
<script>
$(document).ready(function(){
	googlemap_init('google_map', '■表示させたい住所■');
});
</script>

<body>
<div id="google_map" style="width: 600px; height: 600px"></div>
</body>

で起動します。

■表示させたい住所■を任意の住所に書き換えればOK。

サイズは

<div id="google_map" style="width: 600px; height: 600px"></div>

をスタイルで書き換えます。


jqueryプラグインはこちら

http://blog.bumberboom.net/archives/monthly/2010_09/google-maps-api-v3-jquery.php

※ なおGoogle Maps APIのバージョン3からAPIコードは必要なくなりました。

添付ファイル1
No.824
09/20 10:54

edit

添付ファイル

jQuery
Google

任意の範囲のフォーム項目をリセットするjQueryプラグイン【jquery.clearform.js】

任意の範囲のフォーム項目をリセットするjQueryプラグイン【jquery.clearform.js】

以下のようなhtmlの時に

<form>
	<div id="my_form_1">
	<input type"text" name="hoge">
	</div>
	<div id="my_form_2">
	<input type="text" name="fuga">
	</div>
</form>

ID my_form_1 以下のフォームをすべてリセットする

$('#my_form_1').clearForm();

添付ファイル1

jQueryのアニメーションにイージングをかける

■ jQueryのアニメーションにイージングをかけるplugin
http://gsgd.co.uk/sandbox/jquery/easing/

イージングサンプルはこちら
http://semooh.jp/jquery/cont/doc/easing/
No.820
10/12 10:59

edit

jQuery

jQueryで画像にマスクをかける画像ギャラリー【mbmaskedgallery】

■ mbMaskedGallery.js (要jQuery)

http://pupunzi.open-lab.com/2009/02/16/mbmaskedgallery/

サンプルは以下のとおり

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="mbMaskedGallery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#id名").mbMaskGallery({
		type:"normal",			// または "random"
		transition:"crossfade",		// または "normal"
		galleryMask:"photo.png",	//マスクする画像
		galleryColor:"black",		//マスクの背景色
		galleryLoader:"loader.gif",	//ローディング画像
		loaderOpacity:.3,		//ローダーの透明度
		loader:true,			// または "false"
		fadeTime: 200,			//フェードの時間
		navId:"",
		nextPath:"",
		prevPath:"",
		slideTimer: 2000
		changeOnClick:false,

	});
});
</script>
<body>
<div id="sample">
<img src="g/sky.jpg">
<img src="g/muuu_01.gif">
<img src="g/muuu_02.gif">
<img src="g/muuu_03.gif">
</div>

No.819
10/04 13:54

edit

jQuery
画像

Appleの検索窓のようにフォーカスするとサイズが変わるテキスト入力を実現する

Appleの検索窓のようにフォーカスするとサイズが変わるテキスト入力を実現するjQueryプラグイン

■ jQuery Smooth Animated Search Field Freebie

http://thefinishedbox.com/freebies/scripts/jquery-animated-search/

デモはこちら

http://thefinishedbox.com/files/freebies/jquerysearch/index.html


No.797
05/16 14:03

edit

jQuery

jQueryでiPhoneの電話帳のように画面左に「A〜Z」のショートカットインターフェースを再現する

jQueryでiPhoneの電話帳のように画面左に「A〜Z」のショートカットインターフェースを再現する
■ slidernav
http://devgrow.com/slidernav/
デモ
http://devgrow.com/slidernav-jquery-plugin/

No.796
05/27 13:50

edit

jQuery
iPhone

jQueryによるGoogleサジェストライクなプラグイン【jquery.autocomplete.js】

入力テキストの値を補間するGoogleサジェストライクなプラグイン

■ jquery.autocomplete.js

http://docs.jquery.com/Plugins/Autocomplete

サンプルコード

$(function() {
	$("#Keywords").autocomplete('/ajax_suggest.php?flag=amazon', {
		delay : 50
	}).keydown(function(event){
        if( event.keyCode == 13 ){
            if( !event.isDefaultPrevented() ){
                return false;
            }
			else{
				document.form1.submit();;
			}
        }
    });
});

http://kazunori.watson.jp/uchikikase/?p=365

No.794
05/10 13:37

edit

jQuery
Ajax

JavaScriptでクリップボードを操作する【zeroclipboard】

クリップボードを操作できるJavaScriptライブラリ【zeroclipboard】

http://code.google.com/p/zeroclipboard/

解説:http://d.hatena.ne.jp/replication/20110405/1302014971

HTML5のClipboard API

http://www.w3.org/TR/clipboard-apis/

No.791
04/18 14:10

edit

HTML5

JavaScriptでヒアドキュメントもどき + ヒアドキュメントライブラリ

JavaScriptには残念ながらヒアドキュメントがありません。

が楽して複数行テキストを記述する方法はあります。以下のとおり。

ヒアドキュメントもどきの記述方法

var text = "\
あ\
い\
う\
";
alert(text);

var text2 = "\
か\n\
き\n\
く\
";
alert(text2);

出力結果

あいう
か
き
く

と出力されます

「各行の最後に ¥ を付ける」と、これだけです。

改行を入れたい場合は「¥n¥」を入れます。

ヒアドキュメント作成ツール

http://flatsystems.net/js_heredoc.html

こちらに文字列を入れるとJavaScriptヒアドキュメントコードを生成します。

No.786
07/03 15:42

edit

リファラー(REFERRER)を消して外部ページに移動する

外部ページに移動するときに リファラー(HTTP_REFERER)をサーバに送りたくない時があります。そんなときは次のやり方で行けます。

動作サンプルはこちら

http://logic.moo.jp/data/filedir/569_1.html

Safari5 , Chrome で有効な方法

<a href="data:text/html;charset=utf-8,%3Chtml%3E%0D%0A%3Cscript%20%3E%0D%0Alocation.replace(%22http%3A%2F%2Fwww.teria.com%2F~koseki%2Fmemo%2Freferrer%2Fview.php%22)%3B%0D%0A%3C%2Fscript%3E%0D%0A%3C%2Fhtml%3E%0D%0A">リファラ消し</a>

Firefox4 , IE6,7,8 で有効な方法

<a href="javascript:document.open();document.write('<meta http-equiv=\'refresh\' content=\'0;url=http://taruo.net/e/\'>');document.close();">3. リファラ消し</a>

ただしOperaではうまく動作しません。

その場合苦肉の策としてGoogleを経由するという方法を使います

<a href="http://www.google.com/url?q=http://taruo.net/e/">4. リファラ消し(Using Google)</a>

HTML5の rel=noreferrer を使用する方法

<a href="http://taruo.net/e/" rel=noreferrer>5. リファラ消し</a>

◆ 外部リンク時にリファラーを消すjQueryプラグイン【jquery_kill_referrer.js】

http://logic.moo.jp/data/filedir/569_3.js

これを jquery_kill_referrer.js という名前で保存して

jQueryとともに読み込ませます(jquery.jsは各自用意してください)

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery_kill_referrer.js"></script> 

読み込ませるだけで、そのページ内の外部リンク全てにreferrerを消す処理を付け加えます

(ただしOperaは未対応)

添付ファイル1
添付ファイル2
No.569
03/28 10:15

edit

添付ファイル

jQuery

ドラッグ、ドロップで要素を順番変更するjQuery UI Sortableモジュール

ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。

■ JQUERY SORTABLE

http://jqueryui.com/demos/sortable/

http://jqueryui.com/download ←ダウンロードはこちら

JS

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> 
<script type="text/javascript"> 
$(function(){
$("#sortable").sortable({
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>

HTML

<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、<li>要素がドラッグ&ドロップで順番入れ替えできます。

入れ替え後のデータは data(PHP用) , data2(CSV形式) に入るのでそれをプログラムに渡すといいでしょう。

No.713
03/30 14:09

edit

jQuery
DOM
Ajax

JavaScriptでPHPのisset関数みたいなものを使う

JavaScriptには変数になんらかの値が入っているかどうかを検知する関数【isset】がありませんので

下記のようにして作成しておくと何かと便利になります。

function isset( data ){
	return ( typeof( data ) != 'undefined' );
}

検証コード(JavaScript)

var A = 0;		check_isset(A,'Aをテスト:');
var A = -1;		check_isset(A,'Aをテスト:');
var A = false;		check_isset(A,'Aをテスト:');
var A = null;		check_isset(A,'Aをテスト:');
var B;			check_isset(B,'Bをテスト:');
var C=[];		check_isset(C,'Cをテスト:');
var D=new Array;	check_isset(D,'Dをテスト:');
var E=new Object;	check_isset(E,'Eをテスト:');
function isset( data ){
	return ( typeof( data ) != 'undefined' );
}
function check_isset( data, text ){
	if (typeof text == 'undefined') { text=''; }
	if (isset(data)){
		alert(text+'存在します:'+isset(data)+':'+data);
	}
	else{
		alert(text+'存在しません:'+isset(data)+':'+data);
	}
}

JavaScriptの null と undefined は違う

JavaScriptの null と undefined は概念的には違うものでそれぞれ定義されています。

undefined - 変数(未定義型)の未定義値
null - オブジェクト型の未定義値

がこれを厳密に区別してコーディングすることはあまりないので特に意識はしなくていいと思います。

No.765
03/23 18:43

edit

jQueryでHTMLソースコードを整形する

jQueryでHTMLソースコードを整形するのに便利なプラグインを紹介します。

■ jquery.indent.js

http://www.m12i.com/jquery_indent.html

使い方1(すでに取得したhtmlコードに対して使用する)

var html_a = '<html><body><div><p>テスト</p></div></body></html>';
var html_b = jQuery.indent( dumper.dump( data ),{
	tab: " " ,
	conserve: ['script', 'style'] 
});

使い方2( id="sample" の中のテキストに対して使用する)

var html_b = jQuery('#sample').indent()

簡単なのでおすすめです。

No.760
12/04 11:06

edit

jQuery

JavaScriptで外部サイトをスクレイピング【Cross-Domain-Ajax】

JavaScriptで外部サイト(別ドメイン)のファイルを取得しようとすると、crossdomainの制約にひっかかってエラーとなります。

そこでCross-Domain-Ajaxプラグインを使用します。

jquery.xdomainajax.js

https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

例1:Yahooのトップを取得します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xdomainajax.js"></script>
<script type="text/javascript">
	uri = 'http://www.yahoo.co.jp/';
	$.get(uri, function(data){
		alert(data.responseText);
	});
</script>

例2:Yahooのキーフレーズ抽出APIを呼び出してみます。

appid は各自用意してください。

ajaxメソッドを呼び出していますが、【type:'POST'】は使用出来ません。

【type:'GET'】の時のみ正常に動作します。

    // Cross Domain Ajax ajax()メソッド
    jQuery.ajax({
        url: 'http://jlp.yahooapis.jp/KeyphraseService/V1/extract',
        type: 'GET',
        data: {
            appid    : 'XXXXXXXXXX',
            sentence : '庭には二羽鶏がいる',
            output   : 'json'
        },
        success: function(data) {
            alert( jQuery(data.responseText).text() );
        }
    });

簡単ですね。

おすすめです。

No.759
02/24 17:30

edit

Ajax
jQuery

jQueryによるAjax操作の基礎

jQueryで動的に外部HTMLファイル読み込みをした後に変数に代入する

$.get("test.php", function(data, status){
  alert(status);
  alert("Data Loaded: " + data);
});

要素の内容を書き換える( .html() )

$("#hoge").html('<p>書き換える要素</p>');

要素に追加する( .append() )

$("#hoge").append('今ある要素のいちばん後ろに追加します');

要素を動的に( test.phpを読み込んで) に追加する( .load() )

$("#hoge").load("test.php,null,function(){
	alert('読み込み完了');
});

要素を削除する( .remove() )

$("#hoge").remove();

(class="hoge"な要素の)CSSプロパティを書き換える

$('.hoge').css({
	'width'  : '100px' , 
	'height' : '200px'
});

親要素、子要素を選択するセレクタの記述

#contents の中にある .title 要素を取得する場合

$(.title', '#contents');           // ☓ 遅い
$('#contents').find('.title'); // ○ 高速
$(this).parent().find('.myclass'); // 全ての子要素の中から 「myclass」クラスを取得。
$(this).children('.myclass'); // 直下の子要素の中から 「myclass」クラスを取得。孫要素は取得できない

要素の属性を取得する。属性を変更する

var img_src = $("img").attr("src");  // 取得
$("img").attr("src", "b.jpg");  // 変更

セレクタが正しく動作して、jQueryオブジェクトが取得できているかどうかを調べる

var jq_obj = $('MY_ID');
if ( $(jq_obj).length > 0 ){
	alert('jQueryオブジェクトが正しく取得できています。');
}
No.754
06/08 16:29

edit

jQuery
Ajax

jQueryまたはcssで画像の先読み(プリロード)を行う

CSS、HTMLのみでプリロードを行う

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
       background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
}
<div id="preloadedImages"></div>

JavaScript(jQuery)でプリロードを行う

jQuery.preloadImages = function(){
	for(var i = 0; i<arguments.length; i++){
		jQuery("<img>").attr("src", arguments[i]);
	}
};
// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

http://phpspot.org/blog/archives/2006/04/css_2.html

http://blog.webcreativepark.net/2009/03/17-161250.html

No.740
01/21 11:32

edit

jQuery

オブジェクト(クラス)のメソッドを SetInterval する

■ Kazuho@Cybozu Labs: setTimeout をオブジェクト指向にしてみる

http://labs.cybozu.co.jp/blog/kazuho/archives/2006/12/oo-settimeout.php

Function.prototype.applyTimeout = function (ms, self, args) {
  var f = this;
  return setTimeout(
    function () {
      f.apply(self, args);
    },
    ms);
};

Function.prototype.callTimeout = function (ms, self) {
  return this.applyTimeout(
      ms,
      self,
      Array.prototype.slice.call(arguments, 2));
};

Function.prototype.applyInterval = function (ms, self, args) {
  var f = this;
  return setInterval(
    function () {
      f.apply(self, args);
    },
    ms);
};

Function.prototype.callInterval = function (ms, self) {
  return this.applyInterval(
      ms,
      self,
      Array.prototype.slice.call(arguments, 2));
};

使い方は

this.timer_id = foo.bar.applyInterval(1000, foo, [ hoge ]); // setInterval & apply

セットした setInterval を解除するには

clearInterval(this.timer_id);

参考:http://blog.livedoor.jp/dankogai/archives/50714622.html

No.734
12/31 16:37

edit

HTML5のClient-side database(JavaScript Database)のSQL文サンプル

テーブルの作成

CREATE TABLE `test_dt ` (
  test_id   INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
  test_name  TEXT    NOT NULL ,
)

データのINSERT

INSERT INTO
test_dt ( test_name, test_date ) 
VALUES ( "日本語データのテスト" , datetime("now","localtime") )

テーブルの削除

DROP TABLE test_dt;

No.730
05/02 11:42

edit

Database
HTML5

No.729
04/30 13:00

edit

HTML5のClient-side database storage(JavaScript Database)を試す

HTML5で導入されるClient-side databaseが使用できるブラウザは以下の通り

( 一部ブラウザではHTML5未対応でも GoogleGears をインストールすると使えます。)

http://gears.google.com/

Win + IE6,7,8(Gears使用)
Win + Firefox3.6(Gears使用)
Win + Chrome(Gears使用)
Win + Opera10以降
Mac + Safari 3.1 , Safari 4以降
Mac + Chrome

使用できないのは

Mac + Firefox 3.6(Google Gears 未対応)
Mac + Opera 10.10(Google Gears 未対応)

だけですね。


サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="http://gear5.googlecode.com/hg/src/javascript/gear5.js"></script>
    <script type="text/javascript" src="jkl-dumper.js"></script> 
	<title>HTML 5 DB</title>
	<meta charset="utf-8" />
</head>
<body>
<script>
var db;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("sampledb", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
      else{
        alert('db ok');
      }
    } else {
      alert("データベースストレージはサポートされていません。");
    }
  } catch (error) {
    // ...
  }
// select
db.transaction(
    function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS AddressList(name TEXT, address TEXT)');
        var id = 12113;
        var name = 'ziddy';
        tx.executeSql("INSERT INTO AddressList VALUES (?, ?)", [id,name] ,
            function(tx, rs) { 
                alert(rs.insertId);
                var dumper = new JKL.Dumper();
                alert( dumper.dump( rs ) );
            }
        );
    } ,
    function(error) {
        alert( 'transaction error : ' + error.message');
      }
);
</script>
</body>
</html>

http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20385468,00.htm

http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html

No.727
03/23 18:46

edit

Database
HTML5

Javascriptで(GPS,Wifi)位置情報を検出する

Javascriptで(GPS,Wifi)位置情報を検出するには下記のようにします。

ただし、Firefox3、iPhone,iPadのSafariでないと動作しません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>HTML 5 GeoLocation Demo</title>
<script type="text/javascript">
if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {  
   s = position.coords.latitude+","+position.coords.longitude;
    alert(s);
 }); 
} else {
  alert("I'm sorry, but geolocation services are not supported by your browser.");
}
</script>
</head>
<body>
</body>
</html>

http://labs.mapion.co.jp/blog/javascript/firefox35geolocation_api.php

No.724
04/05 14:40

edit

JavaScriptでCookie(クッキー)を簡単に扱う

■ jQuery.cookie.js

● ダウンロードはこちら(ZIPボタンをクリックでダウンロード開始)

https://github.com/carhartl/jquery-cookie

● CDNはこちら

<script type="text/javascript" src="cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

使い方は

var hoge = $.cookie('the_cookie'); // get cookie
$.cookie('the_cookie', 'the_value'); // set cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration date seven days in the future
$.cookie('the_cookie', '', { expires: -1 }); // クッキーの削除
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
$.cookie('cookiename','data',{ expires: 7 });//書き込み{保存days}
document.write($.cookie('cookiename'));//読み出し
No.700
05/16 15:23

edit

jQuery
Cookie

JavaScriptで半角カタカナを判別する

以下のようなコードを記述します。

var text = '半角カタカナです。';
if ( text.match(/[ア-ン゙゚]+/) ){
	alert('半角カタカナが使用されています');
}

No.691
08/06 21:48

edit

正規表現

JavaScriptで現在時刻を取得する

JavaScriptで現在時刻を取得するには下記のようにします。

var d  = new Date() ;
var dw = new Array('日', '月', '火', '水', '木', '金', '土');

var year  = d.getFullYear();
var month = d.getMonth()+1;
var day   = d.getDate();
var hour  = d.getHours();
var min   = d.getMinutes();
var sec   = d.getSeconds();
var dow   = dw[d.getDay()];

now_text = year + '/' + month + '/' + day + '(' +dow + ')' + hour + ':' + min + ':' + sec; 
alert(now_text);
No.687
04/20 14:48

edit

FlashのバージョンをJavaScript(SWFObject)で取得する

■ SWFObject

http://code.google.com/p/swfobject/downloads/list

FlashのバージョンをJavaScriptで取得するにはSWFObjectを使用します。

サンプルコード

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    alert(swfobject.getFlashPlayerVersion().major );
    alert(swfobject.getFlashPlayerVersion().minor );
    alert(swfobject.getFlashPlayerVersion().release );
</script>


No.677
03/20 12:22

edit

jQuery でのフォーム操作

■ フォームの種類を 判別する( checkbox か radioか)

alert( $('#hoge').attr('type') );

■ 1行テキストエリア(id="hoge")の値

<input type="text" name="hoge" id="hoge" value="999" >
// ◆ jQuery
var v = $('#hoge').val();
var v = $('#hoge').attr('value');
// ◆ JavaScriptのみ
var v = document.getElementById('hoge').value;

■ オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ jQuery
var v = $('#hoge').val();
var v = $('#hoge :selected').text();

■ ラジオボタンの値の取得

var data = $("input:radio[name='my_radio']:checked").val();

■ 単一チェックボックス(id=cb1)の値の取得

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">あいうえお
var v = $('#cb1_id:checked').val();      // IDでアクセスする場合
var v = $("input[name='cb1']:checked").val();     // nameでアクセスする場合
alert(v);

■ checkboxにチェックがついているかどうかを調べる

true ,false が帰ってきます。

var flag = $("[name=checkbox1]").prop("checked");

■ checkboxにjQueryでチェックをつける

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">
// name が「cb1」 valueが「あいうえお」のチェックボックスにチェックを付ける
$('input[type="checkbox"][name="cb1"][value="あいうえお"]').prop("checked",true);

// 全てのチェックボックのチェックを外す
$("input:checbox").attr('checked', false);

■ フォームをサブミットする

<form id="FM"></form>
 $('#FM').submit();

■ (id="input_button")の送信ボタンを押せないようにする

$('#input_button').attr('disabled', true); // 押せない
$('#input_button').attr('disabled', false); // 押せる
No.666
02/24 11:39

edit

prototype.js
jQuery
フォーム

フォームに適当な値を自動で入力するブックマークレット(フォーム自動入力BookMarklet)

Firefox の WebDeveloper みたいなのを、Safari等で利用したいときに。
(下記リンクをブックマークバーにドラッグ)

フォーム自動入力Bookmarklet (646 bytes)

登録できてもうまく動作しない時は ↑フォーム自動入力Bookmarklet のアドレスをコピーして
ブックマークレットのアドレスに再度ペーストしてください。


No.665
12/04 11:07

edit

Bookmarklet
フォーム

JavaScriptでURIをパースする parseuri.js

■ parseuri.js

http://blog.stevenlevithan.com/archives/parseuri

ここからparseuri.jsをダウンロードする。


使い方は parseuri.js を読み込ませた状態で

var p = new parseUri(location.href);
alert(p.host);

とします。

host の代わりに以下の文字列が使用できます

source:URI全て
protocol:プロトコル(http または https または....)
authority:ベーシック認証等のユーザー名、パスワード+ホスト名
userInfo:ベーシック認証等のユーザー名、パスワード
user:ユーザー名
password:パスワード
host:ホスト名(www.test.com)
port:ポート番号
relative:ドキュメントルートからのURI(getパラメーター含む)
path:ドキュメントルートからのURI(getパラメーター含む)
directory:ディレクトリ
file:ファイル名
query:getクエリー
anchor:ジャンプ先 (#top)
添付ファイル1
param.png ( 5.5 KBytes ) ダウンロード

ドロップダウンリストを動的にJavaScriptで生成する

ドロップダウンリスト( = プルダウンメニュー = オプションメニュー)の内容を動的にJavaScriptで書き換えます

このようなHTMLの場合

<form name="FM">
<select name="myselect" >
<option value="value_aaa">AAA</option>
<option value="value_bbb">BBB</option>
</select>
</form>

このようなスクリプトで変更出来ます。

opt_array = [
	{ text: 'メニュー1', value: 'menu1' } ,
	{ text: 'メニュー2', value: 'menu2' } ,
	{ text: 'メニュー3', value: 'menu3' }
];
_create_dropdownlist( 'FM', 'myselect', opt_array )

function _create_dropdownlist( form_name, select_name, select_array ){
	// length
	document[form_name][select_name].length = select_array.length;
	
	// text, value
	var i;
	for ( i=0; i<select_array.length; i++){
		document[form_name][select_name].options[i].text = select_array[i].text;
		document[form_name][select_name].options[i].value = select_array[i].value;
	}
}

起動方法は

_create_dropdownlist( フォーム名, selectタグのname, 設定したいメニューのハッシュの配列 )

です。

No.630
10/05 16:27

edit

ラジオボタン <radio name="form_name"></radio>の状態を変える

■ ラジオボタン

<input type="radio" name="radio_button_name" value="yes">はい
<input type="radio" name="radio_button_name" value="no">いいえ

の選択状態変更するJavaScript。


■ 関数名(_change_radiobutton)

function _change_radiobutton( form_name, value ){
	var element = document.getElementsByName( form_name );
	if (element.length == 0){ alert( '<input type="radio" name="' + form_name +'"> is not find.'); return; }
	

	var flag = false;
	for (var i=0; i<element.length; i++) {
		if(element[i].value == value){ element[i].checked = true; flag = true; }
		else{ element[i].checked = false; }
	}
	if(! flag){ alert( 'DATA [' + value + '] is not find in <input type="radio" name="'+form_name+'"> '); }
}

■ Usage

_change_radiobutton( 'radio_button_name', 'no' );

jQuery Mobile を使用すると次のようにも記述することができます

jQuery('input:radio').prop('checked',true).checkboxradio( 'refresh' );
No.593
03/03 10:01

edit

ドロップダウンリストの状態をJavaScriptで動的に変更する

ドロップダウンリスト(オプションメニュー)の状態をJavaScriptで動的に変更する

<select id="prefecture_id" name="prefecture_name" >
<option value="北海道">北海道</option>
<option value="沖縄">沖縄</option>
</select>

■ 関数名(_change_dropdown_id)

function _change_dropdown_id( id_name, value ){
	var element = document.getElementById(id_name);
	if (! element){ alert( '<select id="' + id_name +'"> is not find.'); return; }
	
	var flag = false;
	for (var i=0; i<element.options.length; i++) {
		var option = element.options[i];
		if (option.value == value){
			if (flag){
				option.selected = false;
			}
			else{
				option.selected = true; flag = true;
			}
		}
		else{ option.selected = false; }
	}
	if(! flag){ alert( 'DATA [' + value + '] is not find in <select id="'+id_name+'"> '); }
}

■ 関数名(_change_dropdown_name)

function _change_dropdown_name( form_name, value ){
    var element = window.document.getElementsByName(form_name)[0];
    if (! element){ alert( '<select id="' + id_name +'"> is not find.'); return; }

    var flag = false;
    for (var i=0; i<element.options.length; i++) {
        var option = element.options[i];
        if (option.value == value){
            if (flag){
                option.selected = false;
            }
            else{
                option.selected = true; flag = true;
            }
        }
        else{ option.selected = false; }
    }
    if(! flag){ alert( 'DATA [' + value + '] is not find in <select id="'+id_name+'"> '); }
}

■ Usage(使い方)

// IDでの呼び出し
_change_dropdown_id( 'prefecture_id', '沖縄' );
// フォーム名での呼び出し
_change_dropdown_name( 'prefecture_name', '沖縄' );

ちなみに ドロップダウンリストを 操作できないような状態にするには

document.getElementById('prefecture').disabled = true; // 操作不可能にする
document.getElementById('prefecture').disabled = false; // 操作可能にする 
No.592
10/05 17:46

edit

Gmailのように「shift + クリック」でチェックボックスの複数選択を可能にするjQueryプラグイン

Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。

■ 1.jQueryをダウンロード

http://jquery.com/

からjQueryをダウンロードします。(ダウンロードしたファイル名を jquery.js とします。)

■ 2. jQuery Field Plug-inをダウンロード

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm

から【jquery.field.js】をダウンロードします。

■ 3. 以下のようなチェックボックスを含むhtmlを用意します

<form>
  <input type="checkbox" name="user_id" id="ch_1" value="1"><label for="ch_1">Option 1</label>
  <input type="checkbox" name="user_id" id="ch_2" value="2"><label for="ch_2">Option 2</label>
  <input type="checkbox" name="user_id" id="ch_3" value="3"><label for="ch_3">Option 3</label>
  <input type="checkbox" name="user_id" id="ch_4" value="4"><label for="ch_4">Option 4</label>
  <input type="checkbox" name="user_id" id="ch_5" value="5"><label for="ch_5">Option 5</label>
</form>

■ 4. 用意したhtmlのヘッダに以下の記述を追加

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.field_j.js"></script>
<script>
	$(document).ready(
		function (){
			$('input[@name="user_id"]').createCheckboxRange();
		}
	);
</script>

以上で「シフト+クリック」による複数選択が実行できます。

とても便利。

また「シフト+クリック」実行後にコールバック関数を指定することもできます。

function (){
	$('input[@name="user_id"]').createCheckboxRange( function(){
		alert('選択完了');
	} );
}

No.591
08/10 11:20

edit

jQuery
フォーム

JavaScript(jQuery)でリッチテキスト編集(wysiwyg)エディタ

JavaScript(jQuery)でリッチテキスト編集できるライブラリを探してみる。

■ cleditor(jQueryプラグイン)

http://premiumsoftware.net/cleditor/

■ jwysiwyg(jQueryプラグイン)

https://github.com/akzhan/jwysiwyg (ダウンロード)

http://akzhan.github.com/jwysiwyg/help/examples/ (デモ)

■ Yahoo! UI (おすすめ)

http://developer.yahoo.com/yui/editor/

http://developer.yahoo.com/yui/examples/editor/flickr_editor.html

■ open wysiwyg (Safari2×)

http://www.openwebware.com/products/openwysiwyg/demo.shtml

■ FCKeditor(Safari2×)

http://www.fckeditor.net/

■ TinyMCE(Safari2×)

http://tinymce.moxiecode.com/index.php


No.589
04/28 12:46

edit

jQuery

prototype.js を使わずにDOMオブジェクトのスタイルを取得する

JavaScriptでのスタイルの取得は

prototype.js を使って

Element.getStyle(element, cssProperty)	

ですが、

Prototype.jsを使わず(JavaScriptだけで)行う場合は

var style = element.currentStyle || document.defaultView.getComputedStyle(element, '') 
alert(style.width);

でOKです。

参考:http://d.hatena.ne.jp/amachang/20070611/1181554170

No.586
12/05 13:22

edit

prototype.js

IE6 で<select></select>より上にレイヤーを配置する

IE6では <select>オブジェクトが常に最前面にきてしまうので、それより上にレイヤーを重ねることができない。

それを回避するにはレイヤーよりz-indexが小さいインラインフレームを挿入すればいいみたいです

参考:

http://programming-magic.com/?id=64

http://oshiete1.goo.ne.jp/qa2331121.html

No.584
02/13 18:08

edit

最も簡単な画像のロールオーバー導入方法 (jQuery)

■ jQuery用プラグイン jquery.easyrollover.js を使用します。

■ 1. scriptファイルを読み込ませます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easyrollover.js"></script>

■ 2. ロールオーバー画像ファイル名の最後に _on をつける。

例: 【image.gif】 の場合 【image_on.gif】

■ 3. HTMLの<img>タグに属性 class="rollover" を追加する

<img src="image.gif" >
  ↓
<img src="image.gif" class="rollover" >

以上の手順で完了。

簡単です。

jquery.easyrollover.js のダウンロードはこちらから↓

添付ファイル1
No.579
01/21 10:20

edit

添付ファイル

jQuery
画像

jQuery , prototype.js 用「ツールチップ(吹き出し説明)」表示ライブラリ

「ツールチップ」とはオンマウス時に表示される画像やテキストのことです。

Windows IEで画像の上にマウスを置いてしばらく待つとALT属性が見えるというアレですね。

これを簡単に実装するライブラリを紹介。jQuery、prototype.js プラグインメインで探してみました。

■ script.js ( prototype.js jQuery不必要 )

http://www.leigeber.com/2008/06/javascript-tooltip/

・おすすめ

・ツールチップがフェードして現れます

■ cooltips ( 要prototype.js , script.aculo.us )

http://okonet.ru/projects/tooltips/index.html

・フェードエフェクトで出現するツールチップ

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jTip A jQuery Tool Tip ( 要 jQuery )

http://www.codylindley.com/blogstuff/js/jtip/

・Ajaxで動的にツールチップの中身を読み込んで表示します。

・日本語テキストを扱うにはハックする必要がありそう…。

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jQuery plugin: Tooltip ( 要 jQuery )

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

title属性やファイル名をツールチップとして表示させるというライブラリ。

オンマウスになった瞬間に表示されます。

使い方

<script type="text/javascript" src="jquery.tooltip.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" >
<script>
jQuery('img').tooltip({
    delay: 0, 
    track: true ,
    showURL: false
});
</script>

オプション

http://docs.jquery.com/Plugins/Tooltip/tooltip#toptions


その他 jQueryライブラリはこちらで取り上げられてます

http://coliss.com/articles/build-websites/operation/javascript/356.html

No.564
08/01 10:19

edit

jQuery
prototype.js

DOMプロパティ

DOMプロパティ一覧

attributes[]	〔ノードの属性リストを取得〕
childNodes[]	〔子ノードのリストを取得〕
className		〔クラス名の取得・設定〕
dir				〔テキスト・ディレクションの取得・設定〕
firstChild		〔最初の子ノードを取得〕
id				〔ID名の取得・設定〕
innerHTML		〔ノード内のHTML要素の取得・設定〕
innerText / textContent	〔ノード内のプレーンテキストの取得・設定〕
lang			〔言語コードの取得・設定〕
lastChild		〔最後の子ノードを取得〕
localName		〔ローカル名の取得〕
namespaceURI	〔名前空間のURIの取得〕
previousSibling/nextSibling	〔直前・直後にある兄弟ノードを取得 :: Mac風OSメニュー〕
nodeName		〔ノードの名前を取得〕
nodeType		〔ノードの型を取得〕
nodeValue		〔ノードの値を取得〕
ownerDocument	〔オーナードキュメントを取得〕
parentNode		〔親ノードを取得〕
prefix			〔名前空間の識別子を取得〕
tagName			〔タグ名の取得・設定〕
title			〔タイトル属性の取得・設定〕

JavaScript/DOM ? DOMプロパティ | PHP & JavaScript Room

No.557
05/28 01:07

edit

DOM

Javascriptでの正規表現

Javascriptでの正規表現マッチには .match を使用します。

Perlと同じように カッコで挟むと $1 に入ります。

file_name='http://www.test.com/aiueo/kakikukeko.gif';
alert(file_name);
r=file_name.match(/([a-zA-Z0-9_.]+?)\.gif$/);
alert(r);
alert(RegExp.$1);

No.556
08/03 18:58

edit

正規表現

adobe の Javascript フレームワーク【spry】を使ってみる

■ adobe の Javascript フレームワーク【spry】を以下からダウンロード

Adobe Labs - Spry framework for Ajax

■ html ファイルの <head>〜</head>内に読み込ませる

<script type="text/javascript" src="js/SpryEffects.js"></script>

■ エフェクト例

spry_obj = new Spry.Effect.Fade( 'id_name', {

	duration: 800,
	from: '100%', to: '0%',
	horizontal : false,
	toggle: true
});
spry_obj.start();

// id_name : エフェクトをかけたい要素のid名
// Spry.Effect.Fade:フェードエフェクト。
// Spry.Effect.Blind:ブラインドエフェクト。
// Spry.Effect.Grow:グロウエフェクト。
// Spry.Effect.Highlight:ハイライトエフェクト。
// Spry.Effect.Shake:シェイクエフェクト。
// Spry.Effect.Slide:スライドエフェクト。
// Spry.Effect.Squish:スクイッシュエフェクト。
No.554
09/11 16:20

edit

jQuery html()メソッドと DOM.innerHTML の違い

例えば id="hogehoge" の中身を書き換えるには

■ prototype.js + DOM の場合

var mytext='aiueo';
$('hogehoge').innerHTML=mytext;

■ jQueryの場合

var mytext='aiueo';
j$("#hogehoge").html(mytext);

と書けますが、このとき

var mytext=0;
$('hogehoge').innerHTML=mytext; // 0 が表示される
j$("#hogehoge").html(mytext); // 何も表示されない

という違いがあるようなので注意!

No.553
05/27 15:37

edit

prototype.js
jQuery

prototype.js のフォームシリアライズ(Form.serialize)をテストする

prototype.js の便利な機能に

Form.serialize('フォームのid名前');

というのがありますが、これをテストしてみます。(↓添付ファイルをダウンロード後、prototype.jsを読み込ませて実行のこと)

実行してみてわかることは

<textarea name="text" rows="3" id="text_id">bbb
bbb
bbb
</textarea>

のところは

text=bbb%0Abbb%0Abbb%0A

という値が帰ってくるということ。調べたとろ

  • htmlファイルの改行コードが「 LF 」「 CR+LF 」「 CR 」いずれの場合も %0A になる。
  • id ではなく name の値でシリアライズされる。

という事みたいです。

別ウィンドウのフォームをシリアライズするには。。。

別ウィンドウの DOM document インターフェイスは

var parent_document = window.opener.document

とすると取得できます。(openerの document を取得)

添付ファイル1
No.551
01/11 20:34

edit

添付ファイル

prototype.js

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js

JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため

window.onload を待って処理を行う必要があります。

しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。

そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓

[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)

domready.js 記述方法

Event.domReady.add(function() {
       alert('DOMツリーの読み込みが完了しました');
});

ちなみに jQuery では $(document).ready() で実装されています。

$(document).ready(function(){
       alert('DOMツリーの読み込みが完了しました');
});

jQueryで $(window).load() と同じ動作をさせる

jQuery.event.add(window, "load", function(){
       alert('全てのデータの読み込みが完了しました');
});

YUIでは onDOMReadyで実装されています。

YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );

prototype.jsでは Version 1.6以降 で contentloaded というメソッドで実装されています

document.observe('contentloaded', function() {
    alert('DOMツリーの読み込みが完了しました');
});

MooTools では domready イベントで実装されています

window.addEvent('domready', function() {
    alert('DOMツリーの読み込みが完了しました');
});
No.550
07/17 13:20

edit

DOM
jQuery
prototype.js
YUI

JavaScript FAQ

2ch の FAQなんだけど、かなり良くできている。

以下に引用

【FAQその1】 
Q1. 開いた別窓/フレームの内容にアクセスできないのですが… 
A1. ページ内容が別サーバの場合セキュリティ制約により絶対無理です。 


Q2. JavaScriptでローカルファイルを読み/書きたいのですが… 
A2. Webではセキュリティ制約により絶対無理です。できたら恐ろしいことに… 


Q3. 同じタグの中でonclick="foo()"とonclick="bar()"を同時に使いたいのですが… 
A3. セミコロンで複数の文を区切られます。onclick="foo();bar();"としましょう。 


Q4. document.write(...)でページ内容を追加したいのですが… 
A4. 一度ページ表示完了後にwrite()すると内容はクリアされちゃいます。 
 部分的に内容変更するには(1)他フレーム/iframe/別窓への表示、 
 (2)textarea等への表示、(3)DOMでノード挿入、(4)innerHTMLのどれかで。 
 innerHTMLは非標準ですがIE、Opera、Safari、Gecko(N6/N7/Firefox等)で対応済。 


Q5. table/tbody/tr要素のinnerHTMLを書き換えるのがうまく行かないのですが… 
A5. IEはそれらの要素のinnerHTMLは変更不能。DOMを使って書き換えるか 
 <div><table>...</table></div>とでもしてdivのinnerHTMLを書き換えましょう。 


Q6. DOMでtable要素にtr要素を追加しても表示されないのですが… 
A6. DOMでは(XHTML 1.x除く)tbody要素にtr要素を追加する必要があります。 
 tbody要素はtbodyタグを書いていなくても自動的に作成されます。 
 またはtable.insertRow()/tbody.insertRow()を使いましょう。 


Q7. 変数w1、w2…を順にループで(番号をiに入れて)設定/参照したいのですが… 
A7. グローバル変数はwindowのプロパティだからwindow['w'+i]を読み書きすれ。 


Q8. フォーム部品名を変数にした「...myform.変数名.value」が動きません… 
A8. 「document.forms.myform.elements[変数名].value」でどぞ。 
 JavaScriptでは一般に「obj.x」と「obj['x']」は同じ意味です。

No.541
07/30 18:11

edit


JavaScript で hidden属性<input type=”hidden” name=”name” value=”value”>を作成する

意外に登場する機会が多いので関数として登録しておく

■ hidden属性を作成する make_hidden()

// make_hidden : hiddenを作成する : Version 1.1
function make_hidden( name, value, formname ){
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = name;
    q.value = value;
	if (formname){ document.forms[formname].appendChild(q); }
    else{ document.forms[0].appendChild(q); }
}

使い方:引数は( '名前' , '値', 'フォーム名' )

make_hidden('id', '1234');

とすると

<input type="hidden" name="id" value="1234">

が作成されます。

またHTMLファイル内に複数の<form>タグが存在する場合はフォーム名を指定して呼び出せばOK。

<form name="FM"></form>
<form name="SFM"></form>

の二つのフォームが存在する場合

make_hidden('id', '1234', 'SFM');

とすると name="SFM" の方にhiddenが作成されます


また作成した hidden 属性を削除するには以下の関数を使用します

■ hidden属性を削除する make_hidden()

// delete_hidden : hiddenを削除する : Version 1.1
function delete_hidden( name, value, formname ){
	var dom_obj_array = window.document.getElementsByName(name);
	for (var i=0; i<dom_obj_array.length; i++){
		if ( dom_obj_array[i].value === value ){
			element = dom_obj_array[i];
			element.parentNode.removeChild(element);
		}
	}
}
No.540
11/27 15:23

edit

DOM
フォーム

JavaScriptで小数点xxケタで四捨五入する

JavaScriptで小数点xxケタで四捨五入するには、

数値.toFixed(ケタ数)

とします。


■ 例

d1=( 1 / 3 ).toFixed(2);	// 小数点2ケタで四捨五入
// 結果は 0.33 です

d1=( 1 / 1 ).toFixed(2);	// 小数点2ケタで四捨五入
// 結果は 1.00 です
No.539
08/30 11:39

edit

JSON記述の基本とデコード( json2.js )

ajaxでデータをやりとりする際に json 形式でデータをやりとりすることが多い。

jsonの記述フォーマットをよく忘れてしまうのでひな形をここに↓

jsonデータの記述

var json_text  ='{"bindings": [ { "id": 123456, "name": "myname" } ]}';
var json_text2 = '["key1":"val1", "key2":"val2", "key3":"val3"]';

jsonデータのデコード( json2.js )

下記サイトから json2.js をダウンロードします。

https://github.com/douglascrockford/JSON-js

使用方法は

// 古いやり方 var json_object = eval('(' + json_text + ')');
var json_object = JSON.parse( json_text );

alert(json_object.bindings[0].id);
alert(json_object.bindings[0].name);
No.535
02/24 16:37

edit

json

これは便利!好きなブラウザで JavaScript を即座に実行【jsbin】【jstests】

◆ jsbin

http://jsbin.com/

◆ jstests

http://www.3site.eu/jstests/jhp/


上記サイトを開くと上部にソースを書くエリアが表示されますのでそこにJavaScriptコードを書きます。

記述後に左下の白いエリアをマウスでクリックすると即座に実行されます。

便利!

No.534
04/09 18:22

edit


<input type="button">にname=”submit” は使用できない

JavaScriptでフォームの送信(submit)を行うときは

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<body>
<form name="orderform" action="http://www.yahoo.co.jp/">
<input type="button" value="go" onclick="document.orderform.submit();">
</form>
</body>
</html>

このように記述しますが、このとき

<input type="button" value="go" onclick="document.orderform.submit();">

<input type="button" name="submit" value="go" onclick="document.orderform.submit();">

とするとエラーになるので注意。

<input name="submit" type="submit">とするとJavaScriptでエラーとなる

<form name="form1">
<input name="submit" type="submit" value="送信">
</form>

<script>
document.form1.submit();
</script>

は Object not found エラーとなります。

name="submit"

を削除するか別の名前に変更するとなおります。

No.526
10/02 11:08

edit

エラー対処

入力文字数によってテキストフィールド<textarea>のサイズを変える

A. jQueryを使用してテキストエリアを動的に変更する。【jquery.elastic.js】

http://www.unwrongest.com/projects/elastic/

$(document).ready(function(){
    // 読み込み時にリサイズ
	$('textarea#my_text_area').elastic();
    // クリック時にリサイズ
	$('textarea#text_name').bind("click", function(){
	  $('textarea#text_name').elastic();
	});
});

B. jQueryを使用してテキストエリアを動的に変更する。【autoresize.jquery.js】

http://james.padolsey.com/javascript/jquery-plugin-autoresize/

<script type="text/javascript" src="autoresize.jquery.js"></script>  
<script type="text/javascript"> 
$(document).ready(function(){
	$('textarea#my_text_area').autoResize();
});
</script>

C. prototype.js を使用してテキストエリアを自動的に変更する。

http://jroller.com/page/rmcmahon?entry=resizingtextarea_with_prototype

D. jQueryを使用してテキストエリアを動的に変更する。【jquery.autogrow-textarea.js】

http://javascriptly.com/2008/09/quick-useful-jquery-plugins/

ダウンロード:

http://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

$(document).ready(function(){
  $('textarea#mytextarea').autogrow();
});
No.520
04/28 11:51

edit

prototype.js
jQuery

外部JavaScriptによるWindows IE7 の「ランタイムエラー」に対処する

JavaScriptを外部ファイルにしたり、別ドメインのJavascriptを

<script language="JavaScript" src="http://www.testserver.local/test.js"></script>

というふうに呼び出したりすると Windows版IE7 で「ランタイムエラー」が起きることがあります。

この場合の対処方法は

Javascriptが記述してあるファイルの

  • 文字コードを「UTF-8」
  • 改行コードを「CR」+「LF」

にする。

です。これで直ると思います。


またIE7 , IE8 では prompt を使うと

このWebサイトはスクリプト化されたウィンドウを使用して情報を依頼しています。このWebサイトを信頼している場合には、ここをクリックして、スクリプト化されたウィンドウを許可してください

という警告が出て、ユーザーに不必要な動作をさせることになるので気になる場合は使用しないように。

jQuery Alert Dialogs

http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

等で代用するのがいいでしょう。

No.519
02/18 11:59

edit

エラー対処

外部JavaScriptファイルを動的に読み込み(遅延読み込み)HTMLページ描画を高速にする

外部JavaScriptファイルを動的に読み込みWEBサイトを高速にしましょう!

JavaScriptは通常の<head></head>タグ内に記述しますが、この場合HTML描画前にJavaScript読み込みが発生し、またJavaScriptの読み込みが終わるまで待機しているので、読み込み終わりを待ってからでないとHTML描画は開始されません。

そこで外部JavaScriptファイルを動的(HTMLレンダリングと同時、またはDOM Ready時)に読み込むよう変更します。


■ 方法1-1. async をつけて読み込む(新しいやり方)

今までJavaScriptは以下のように読み込んできました。

<script src="myfile.js"></script>

これに async を追加します

<script src="myfile.js" async></script>

これで非同期読み込みとなり、「Javascript読み込み」と「HTMLページ描画」が同時に行われ、高速にページを表示することができます。

ただしasync属性の特徴として

・.js ファイル読み込み完了と同時にその .jsファイルを実行する

・実行順序がバラバラ(読み込み完了順)になる

がありますので jQuery プラグイン等 jQueryの存在が前提となるスクリプトがある場合は

  • jQuery本体には使用しない
  • jQueryプラグインには使用する

とする必要があります。(結局jQuery本体の読み込みに待ちが発生するのでおすすめはしません。)

または全てを1ファイルにまとめて読み込ませるという方法もあります(これはとてもいい方法です。が、手動でするには手間がかかります。)


■ 方法1-2. defer をつけて読み込む(新しいやり方)(とりあえずJavaScriptはよくわからないけど高速化したいという方にはこちらの方をおすすめします。)

async属性の代わりにdefer属性というのもあります。

違いは

async :  .jsファイル読み込み直後に実行。『複数の .jsファイルを読み込む場合に実行順序は保証されない』
defer :  DOMツリー構築完了直後(DomReadyハンドラ前)に実行。『実行順序は保証される』

です。どちらもDOM構築を妨げない(HTMLレンダリングが高速)のは同じです。

記述方法は

<script src="myfile.js"></script>

これに defer を追加します

<script src="myfile.js" defer></script>

簡単ですのでこちらをおすすめします。


■ 方法2. 遅延読み込みスクリプトで対応する(古いけど確実なやり方)

例:3つのJavaScriptファイル『aaa.js』『bbb.js』『ccc.js』と1つのCSSファイル『test.cs』を遅延読み込みする(要:jQuery)

// dom ready時に読み込み開始(事前にjQueryを読み込ませておいてください。)
$(function(){
		alert('js load start !!! ');
		require_onload( ['aaa.js', 'bbb.js', 'ccc.js', 'test.css'] );
});

function require_onload( arg ) {
	if (is_array(arg)){
		var element = [];
		for(var i=0; i<arg.length; i++){
			if ( arg[i].match(/\.css$/) ){
				add_child_css(arg[i]);
			}
			else if ( arg[i].match(/\.js$/) ){
				add_child_js(arg[i]);
			}
			else{ alert('check url : ' + arg[i]) }
		}
	}
	else{
		if ( arg.match(/\.css$/) ){
			add_child_css(arg);
		}
		else if ( arg.match(/\.js$/) ){
			add_child_js(arg);
		}
		else{ alert('check url : ' + arg[i]) }
	}
}
function add_child_js(src){
	var element = document.createElement("script");
	element.src = src;
	document.body.appendChild(element);
}
function add_child_css(src){
	var css_element = document.createElement('link');
	css_element.type = 'text/css';
	css_element.rel  = 'stylesheet';
	css_element.href = src;
	document.body.appendChild(css_element);
}
function is_array(obj) {
	return Object.prototype.toString.call(obj) === '[object Array]';
}

これを<head>〜</head>タグ内に設置します。(</body>タグ直前でなくてもOK。)

3行目に

		alert('js load start !!! ');

があるので、読み込み開始時にアラートが表示されます。(もうその時にはHTML描画(正確にはDOM構築)が終わっていることが確認できると思います。)

実際使うときにはこの行は削除してください。

このスクリプトを使うと全てのページ描画準備が終わった段階(DOM Ready)で .js .css を読み込みに行きますので高速になります。

またページレイアウトに関係ある .css を遅延読み込みするとHTML描画とCSSスタイルの読み込み・適用が同時に行われるので画面が一瞬乱れる可能性があります。

ですのでWEBフォントの .css など レイアウトに関係ない .css を遅延読み込みするといいでしょう。

No.517
07/09 14:21

edit

高速化
HTML5

JavaScriptソースコードを圧縮してサイズを小さくする。またはソースを整形する

JavaScriptのソースコードを圧縮してファイルを軽くしたい。

という時がたまにあります。(ブックマークレット作成時とか。)

そこでソースコード圧縮サービスサイト。

・YUI Compressor

http://refresh-sf.com

YUI Compressor などのアルゴリズムを使用してHTML, JavaScript, CSSの圧縮ができます。


・packer

http://dean.edwards.name/packer/

なお行頭が ;;; で始まっているコメントはデバッグ用コメントと見なされ圧縮時に削除されます。便利!

;;; alert('test!'); // この行は圧縮時に削除されます。

・Creativyst® JavaScript Compressor

http://www.creativyst.com/Prod/3/


・逆にソースコードを整形する場合はこちら

http://jsbeautifier.org/


No.513
07/07 12:55

edit

DOM要素(<div>タグ)をJavaScriptで削除する

DOM要素をJavaScriptで削除するには次のようにします。

次のような html 構造になっている場合

<div id="hoge">
 <div id="aaa">テストA</div>
 <div id="bbb">テストB</div>
 <div id="ccc">テストC</div>
</div>

id="hoge" を削除するには

_delete_element('hoge');

function _delete_element( id_name ){
	var dom_obj = document.getElementById(id_name);
	var dom_obj_parent = dom_obj.parentNode;
	dom_obj_parent.removeChild(dom_obj);
}

子要素 id="aaa" id="bbb" id="ccc" を削除するには次のようにします。

_delete_child_element('hoge');

function _delete_child_element( id_name ){
	var dom_obj = document.getElementById(id_name);
	while (dom_obj) dom_obj.removeChild(dom_obj.firstChild);
}

こちらにもっと詳しく書いてあります : ライブラリを使わない素のJavaScriptでDOM操作

No.512
06/14 09:36

edit

DOM

JavasScriptでウィンドウの幅、高さを取得する。

//-------------------------------- get_browser_width
function get_browser_width() {
	if ( window.innerWidth ) { return window.innerWidth; }  
	else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; }  
	else if ( document.body ) { return document.body.clientWidth; }  
	return 0;  
}
//-------------------------------- get_browser_height
function get_browser_height() {
	if ( window.innerHeight ) { return window.innerHeight; }  
	else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; }  
	else if ( document.body ) { return document.body.clientHeight; }  
	return 0;  
}

参考:http://d.hatena.ne.jp/onozaty/20060802/p1

参考:http://www.sasaraan.net/program/js/jswndstate.html

No.511
04/05 17:03

edit

DOMオブジェクト・jQueryオブジェクト をダンプ(テキスト表示)する。

デバッグ時には必ず出くわすのですが、DOMオブジェクトの中身を見たい!という時があります。

・DOMオブジェクトの中身を確認したいときには以下のようにします。

Firefox限定ですが便利。

var serializer = new XMLSerializer();
alert( serializer.serializeToString( dom_obj ) );

・Safari、Chrome, Firefox でオブジェクトの中身を確認したいときには以下のようにします。(出力は「エラーコンソール」)

console.log( object )

Chrome, Firefox でオブジェクトの中身が DOMオブジェクトなのか jQueryオブジェクトなのかを確認したいときは

console.log( Object.getPrototypeOf( $("#test01") ) );
console.log( Object.getPrototypeOf( document.getElementById('test01') ) );

とします。 jQueryの場合は【jQuery】、DOMオブジェクトの場合は 【HTML.......】と表示されます。

ただ、そもそもオブジェクト以外の者を渡した場合場合にエラーとなりますので、

	if (Object.prototype.toString.call(my_obj)==='[object Object]'){ console.log(Object.getPrototypeOf( my_obj )); }

としてもいいです。


どうせなら groupメソッドを使って

jq_obj =  $("#test01");

console.group('jq_objの中身は↓');
console.log(Object.getPrototypeOf( jq_obj ));
console.log(jq_obj);
console.groupEnd();

とするとメッセージがグループ化されていい感じに見えます。


・jQueryオブジェクトをダンプしたい場合は

http://goo.gl/rXUKI

が便利です。

・その他のオブジェクト(JSON等)、配列、連想配列などをダンプしたい場合は

JKL.Dumper が便利です↓

http://www.kawa.net/works/js/jkl/dumper.html

使い方(オブジェクト hoge の中身をダンプする)

<script type="text/javascript" src="jkl-dumper.js"></script> 
var hoge = [1,2,3,4,5];
alert( new JKL.Dumper().dump(hoge) );

便利!!!

No.510
06/13 17:25

edit

DOM
json
配列
jQuery

htmlソースからDOM生成用のJavaScriptコードを吐くツール【DOM Tool】

◆ DOM Tool

http://goo.gl/qz5UKT

便利です。

htmlソースを入力して【Create DOM Statements】ボタンを押すと

DOM生成用のJavaScriptコードを吐いてくれます。


例:<div id="text"></div>というhtmlコードを JavaScript で実行したい。

HTML:

<div id="test"></div>

OUTPUT:

var div1=document.createElement('div');
div1.setAttribute('id','test');

No.509
03/18 10:19

edit

DOM

jQuery と prototype.js を同時に使う。($(); のコンフリクト回避)

jQueryとprototype.js を同時に使いたい場面がまれにあります。

そのとき

$('id_name'); //prototype.js
$('#id_name'); //jQuery

といった書式を jQuery, prototype.js 共に持っているのですが、その動作(書式や戻り値)が違います。

例えば戻り値の場合、

  • prototype.js:DOMオブジェクトを返す
  • jQuery:jQueryオブジェクトを返す

という違いがあります。

そこで jQueryとprototype.jsを同時に使いたい場合は jQueryの $(); を違う名前に変更して使います。

jQuery.noConflict();
var j$ = jQuery;

2行を追加します。

こうすることによって

// jQuery
jQuery('#id_name');
j$('#id_name');
//prototype.js
$('id_name');

として使用できます

No.499
01/13 15:34

edit

jQuery
prototype.js

Ajaxによって動的に書き換えられたhtmlソースコードを表示する方法。

Ajax(いわゆる)によってhtmlが動的に書き換えられることが最近多くなってきていると思います。 そこで動的に書き換えられたページを確認するブックマークレット
Kazuho@Cybozu Labs: Ajax な HTML ページのソースコードを表示する

Safari用ブックマークレット
Javascript で書き換えられた後の Webページの内容を表示する (groundwalker.com)

このページで表示されるリンクをブックマークに入れて、Ajaxなサイトに行きページが書き換えられた後にブックマークを起動すると新しいウィンドウでソースコードが表示されます。

No.498
02/09 14:32

edit

Ajax
Bookmarklet

n桁のランダムなIDを作成する

下記サイトより引用です。

function create_privateid( n ){
    var CODE_TABLE = "0123456789"
        + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        + "abcdefghijklmnopqrstuvwxyz";
    var r = "";
    for (var i = 0, k = CODE_TABLE.length; i < n; i++){
        r += CODE_TABLE.charAt(Math.floor(k * Math.random()));
	}
	return r;
}

◆ 使い方は桁数を指定して呼び出します。(下記の例の場合6桁のランダムなIDを取得します。)

id=create_privateid(6);
alert(id);

引用元:http://www.graviness.com/virgo/javascript/d010926.html

No.497
09/24 16:20

edit

ソースコードを色づけするJavaScriptライブラリ【google-code-prettify】

すごくいいですこれ。

http://code.google.com/p/google-code-prettify/

ブラウザ対応チェックはこちら

http://google-code-prettify.googlecode.com/svn/trunk/tests/prettify_test.html

No.476
06/15 16:24

edit


prototype.js を使ってイベントを登録する。

javascript 実行イベントを毎回 <onload="testfunc();">みたいに入力するのは面倒なので

prototype.js を使って登録する。

Event.observe(window, 'load', testfunc, false);

又は無名関数を使うとこのように書ける

Event.observe(window, 'load', function(){
   alert('test');
});

書式は

Event.observe( 追加する要素 , イベント , 関数 , 段階 );

です。


No.461
09/08 12:46

edit

prototype.js

JavaScriptで数字3桁ごとにコンマを打つ

<html><body>
<script>
var data1=123456789;
alert(data1);

data2=comma(data1);
alert(data2);

function comma(num) {
	return num.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' );
} 

</script>
</body>
</html>
No.440
06/15 16:04

edit


JavaScriptでURIエンコード(URLエンコード)を行う

javaScriptでURIエンコードを行うには

  • encodeURI
  • encodeURIComponent
  • escape

の関数を使う事ができる。

この3つの違いはエンコードしない文字に違いがあって

■ encodeURI がエンコードしない文字列

;/?:@&=+$-_!~*.,()a#'

■ encodeURIComponent がエンコードしない文字列

-_!~*.()a'

■ escape がエンコードしない文字列

*+-_./

となっています。

なので(http&#58;//〜)を含むURLをエンコードするには、コロンやスラッシュを変換したい用途、したくない用途によって

encodeURIComponent , encodeURI を使い分けるのがいいでしょう。

通常<b>encodeURIComponent</b>を使うのがいいと思います。

また escape は 全角文字など文字コードが256以上の値を持つ文字は %uxxxx という形式に変換しますのでURLエンコード用途では使用しないほうがいいでしょう。

■ 使い方

e_uri = encodeURIComponent( 'http&#58;//xxx.yyy.zzz/aaa.cgi?bbb=ccc' );

■ 動作サンプルコード

こちらの動作サンプルコードをご使用ください。

■注意 1.

これらの関数はUTF-8でエンコードするのでそれ以外の文字コードを使ったページの場合は

使えません。

shift_jis , euc-jp でurlエンコードを行いたい場合は http://www.junoe.jp/downloads/itoh/enc_js.shtml こちらの関数を使うといいでしょう。

■注意 2.

URLデコードするときには <b>decodeURIComponent , decodeURI </b>を使用しますが、これらの関数はデコードできない文字が含まれるときエラーでスクリプト自体を終了させるので、必ず try catch しましょう。

添付ファイル1

透過png画像を IEバージョン6以下のブラウザで表示させる方法。

Windows IE6 以下ではアルファチャンネルを持ったいわゆる「透過png」を表示する時にわざわざ記述をしなくてはならなく(以下、例)めんどくさいです。

.icon{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/template/default/g/waku.png');
}

そこで↓のページの pngfix.js を使うと、jsファイルを読み込ませるだけでIE6以下のブラウザで 透過pngが表示できます。

参考:http://homepage.ntlworld.com/bobosola
参考;http://www.designwalker.com/2006/12/transparent-png.html

No.429
09/08 13:01

edit

script.aculo.usを使ったフェードイン、フェードアウト エフェクト

script.aculo.usのフェード効果を使います。

<div id="test">テキスト</div>    

という要素に対してフェードイン効果を加えるには

と記述します。

またオプションで
>duration(フェードイン、アウトする時間(秒))デフォルト値:1.0  
>from:(開始する透明度 0.0〜1.0 の範囲内で指定)デフォルト値:0.0  
>to:(終了時の透明度 0.0〜1.0 の範囲内で指定)デフォルト値:1.0  

が使えるので、オプションを適用した記述は以下のようになります。

```Effect.Appear( 'test', { duration:3.0, from:0.0, to:0.5 } );```


No.426
08/23 12:42

edit

ある要素にCSS、スタイルシートプロパティをJavaScriptでセットする

■ 1. prototype.js を使います

id="test" な要素に プロパティを追加します。

  Element.setStyle('test', 
  { 
	"font-size" : "x-small" ,
	"line-height" : "20px"
  });


■ 2. prototype を使わずに記述します。

http://bmky.net/text/note/javascript-css.html


No.425
11/15 10:48

edit

prototype.js

htmlページ内のdiv のX,Y座標位置を取得する

■ ライブラリ bytefx を使用する

http://www.devpro.it/bytefx/

<script type="text/javascript" src="../js/lib/bytefx.js"></script>
objX = bytefx.$position(document.getElementById('ID名')).x;
objY = bytefx.$position(document.getElementById('ID名')).y;

で取得できます。便利。

■ prototype.js を使う。

1.6系
var offset = $('elementID').positionedOffset()
alert ( offset ); // offsetLeft, offsetTopが入った配列

1.5系
var off set = Position.positionedOffset()
alert ( offset ); // offsetLeft, offsetTopが入った配列

■ yui(Yahoo! User Interface Library)を使用する方法はこちら

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter81/013/index.html

yui を使うとかなり簡単に座標位置を取得できます。

<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>

でyuiライブラリを読み込んでおいて

position = YAHOO.util.Dom.getXY("myBox");
alert( position );

で取得できます。

ただし Windows版IE は top,left 共に2pxずつ多めに取得されてしまいますので、

ブラウザ判別をして 2px 引いてあげる必要があります。

また座標位置が正確に取得できないことも多々ありますので注意

参考:ghostbass1.4β - 要素の位置を取得する(正解?)


No.424
03/16 14:04

edit

prototype.js
YUI

JSANモジュールシステムを使おう

読み込む .js ファイルがあまりに増えてきたので導入してみます。

http://d.hatena.ne.jp/m-hiyama/20050930/1128054954

No.412
12/06 19:44

edit


ajax(jQuery)で複数ファイルアップロード+転送進捗表示【uploadify】

uploadify(シェアウェア)

jQuery , Flashを使用したファイルアップロードプログラムです。

複数ファイルのアップロードも可能。

Flashバージョン、HTML5バージョンがあり、プラットフォームによって選択できます。

http://www.uploadify.com/



No.409
11/25 10:28

edit

Ajax
jQuery
HTML5

配列をランダムに並び替える

配列 array をランダムに並び替える。

for (i=0 ; i<array.length; i++){
var tmpA, tmpB, rnd;
rnd=Math.floor(Math.random() * array.length);
tmpA=array[i];
tmpB=array[rnd];
array[i]=tmpB;
array[rnd]=tmpA;
}

例:

<script language="javascript">
array=new Array(
'カリーニ' ,
'ロドリゲス' ,
'レコバ' ,
'フォルラン' ,
'エストジャノフ'
);
document.write(array+"¥n");
for (i=0 ; i<array.length; i++){
var tmpA, tmpB, rnd;
rnd=Math.floor(Math.random() * array.length);
tmpA=array[i];
tmpB=array[rnd];
array[i]=tmpB;
array[rnd]=tmpA;
}
document.write(array+"¥n");
</script>
No.395
04/12 18:02

edit

配列

No.285
10/05 12:22

edit

JavaScriptのSetTimeoutで 疑似sleep(遅延実行) を実現する

● JavaScriptの setTimeout を使って遅延実行する

setTimeout( function() {
    console.log('aaa');
    console.log('bbb');
}, 1500 );
console.log('ccc');

結果

ccc
aaa
bbb

※ 正確には setTimeoutは遅延実行です。(指定時間たってから実行するようタイマーをセットする。) 上記の例ですとブラウザのコンソールに 'ccc' と表示されてから 1.5秒後にaaa, bbb が表示されます。

● setTimeout に変数を渡す

setTimeout で 呼び出す関数に引数を渡すには遅延時間の後に引数を渡します。

for (var i = 0; i < 10; i++) {
	setTimeout( function(data) { document.write(data+"<br>\n"); }, i*500, i );
}

●settimeout に オブジェクトのメソッドを指定する

my_method : function() {
	var _this = this;
	this.timer_id = setTimeout( function(){ _this.method(); },500);
}
No.279
10/10 17:20

edit

jQuery, prototype.js でラジオボタンの値を取得する

jQueryでは次のように記述します

// <input name="myform" type="radio" value="yes" />の値を取得
val = $("input:radio[name='myform']:checked").val();

prototype.js では選択されたラジオボタンの値を取得する方法がないみたい。。。

なので↓のようにする

// フォーム name="FM"  ラジオボタン name="radio_flag" の値を取得する 
val = Form.serialize($(FM)).toQueryParams()['radio_flag'];

■ prototype.js を使わない方法

// ラジオボタン name="my_radio" の値を取得
function getRadio() {
    var radioGroup = document.forms[0].my_radio;
    for (i=0; i<radioGroup.length; i++) {
        if (radioGroup[i].checked == true) {
            return radioGroup[i].value
        }
    }
}
No.241
02/12 17:45

edit

prototype.js
jQuery

No.206
04/19 12:29

edit


No.165
03/07 19:49

edit


Yahoo JavaScript ライブラリ YUI

■ デモ(↓で移動したページの一番右 Animation Utility Examples のリンクをクリック)
http://developer.yahoo.com/yui/animation/


http://labs.cybozu.co.jp/blog/akky/archives/2006/02/yahoo_ui_librar.html
で紹介されている

No.159
09/08 13:05

edit

YUI

No.158
02/23 17:06

edit


IEでどのレンダリングモードが適用されているか調べる

alert(document.compatMode);

(戻り値)

・CSS1Compat ( 標準準拠モードの時 )

・BackCompat ( 互換モードの時は )

Safariでは undefined が返ってくるみたい

No.152
04/12 18:01

edit


Win版IE6でdocument.body.scrollTopが常時0のバグ?(仕様らしい)

Windown版IE6では

DOCTYPEが

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

の時に

document.body.scrollTopの値が常に【0】になる仕様があるみたい。

回避策としては

if ( document.compatMode == 'CSS1Compat'){ nowY=document.documentElement.scrollTop; }
else{ nowY=document.body.scrollTop; }
No.151
08/23 20:13

edit


prototype.js

prototype.js解説ページ( 最新マニュアル日本語訳)

prototype.js v1.5.0 の使い方

メソッドリスト表

Prototype Dissected - Snook.ca

Scripteka

Scripteka :: Prototype extensions library

No.18
11/15 10:53

edit

prototype.js