JavaScript

JSでもclass構文で書けるようになりそう

こちらの記事 https://html5experts.jp/takazudo/17355/ の説明がいい。継承の書き方はやっぱこれがいいよね。まだブラウザ側の対応があまりされていないようなので、実際に使えるかというともう少し様子見というところ。

jQuery.ajaxでのjsonpについての備忘録

jQuery.ajax()でdataTypeを"jsonp"にしたときは、asyncオプションでfalseにしても同期動作はサポートしてないとのこと。 jQueryのマニュアルに記載してあった。 async Default: trueBy default, all requests are sent asynchronously (i.e. this is set to …

jqueryでxmlのdc:dateを取得するには

jqueryのajaxにて、dc:date要素を取得する場合はコロンの前にバックスラッシュx2を指定する必要あるようだ。 $(document).ready(function() { $.ajax({ type: "GET", async: true, url: "/foo/bar.xml", dataType: "xml", success: function(xml) { $(xml).f…

githubのページ遷移のからくり

githubに置いたプロジェクト内のページ遷移はふつうにリンクをたどっているのにも関わらず動作がかっこいいのだが、そのからくりがよくわからなかった。 その簡単な解析を以下のサイトで行っていた。 http://d.hatena.ne.jp/zentoo/20101221/1292953257 http…

ドロップダウンメニューのjqueryプラグインdroppyがIE6で表示できない件

jquery.droppyプラグインを使用してドロップダウンメニューを実現した。 ところがjquery本体を最新版(現在1.7.1)にしてIE6で見たところ、入れ子のサブメニュー(第二階層以降)が表示されない(Firefox10, Chrome, IE9は問題なし)。調べてみたところ、jquery-1.…

PHPのために指定した配列用name属性をjavascriptで扱うには

PHP側で配列として処理するためにname属性を'foo'のように指定した場合、この属性をjavascriptで扱う場合には以下のように、document.form.elements['foo']とする必要がある。 document.form.foo は当然、 undefined であるし、 document.form.foo[] も構文…

javascriptのみでjqueryもどき

jqueryを呼ばずにjquery風に使う例。 以下の例ではメソッド html()を作成。他も同じように追加すればよさげ。 <script type="text/javascript">

jqueryプラグインnivoSliderについて

jquery.nivoSliderプラグインのeffectがなかなかよいし、フリー版もあるので試しに設定してみたが、現時点(v2.6)では、jquery 1.7ではうまく動かないeffectがあるみたい。設定に参考にしたサイトは以下。 http://nivo.dev7studios.com/ http://webdesignreci…

メールアドレス正規表現

メールアドレスの完璧な正規表現はないのだが、以下のもので「おおまか」に表現できるはず。 /^[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4}$/ 正規表現オプション"i"を付けられる言語であれば、"A-Z"の表記はいらないはず。元ネタは以下。 http://befi…

IE上のTinyMCEで日本語入力中に変換前の文字をbackspaceで削除すると文が消える件

以下のつぶやき発見。 http://twitter.com/#!/zista/status/67458362937311232 http://twitter.com/#!/zista/status/67765014198624256 で、 http://tinymce.moxiecode.com/develop/bugtracker_view.php?id=4320 にてfixされたようだ。現在使っているのが3.4…

lightboxで表示の際の高さ指定

lightbox(jqueryプラグインでないやつ)で画像を表示する場合、元のhtmlが長い場合、画像表示する場所が下になって隠れて表示してしまう。 そのため、lightbox.jsの231行目を修正して変更した。 // var lightboxTop = arrayPageScroll[1] + (document.viewpor…

jquery.cycle pluginを書いていてハマったこと

jquery.cycle plugin を書いていて、該当のhtmlを間違っていると、指定したcycleが一つおきに表示したりする。特に、終了タグなどを間違っている場合が多い。 <ul id="list"> <li><a href="http://www.example.jp">テスト0</a></li> <li><a href="http://www.example.jp">テスト1</a></li> </ul> と書くべきところを、 <ul id="list"> <li><a href="http://www.example.jp">テスト0</a><li> <li></li></li></li></ul>

Google Maps version3 マーカーをIE6で透過できない件

いつのまにか、 Google Maps v3のデフォルトマーカーがIE6では透過されなくなっていた。どうも、バージョンが3.4になってからのようだ。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=false&language=ja"></script> とバージョン指定すれば前のように透過できる。バージョンを指定しないと現時点ではv=3.4のようだ。参考 http://www.r…

Tiny_mce jquery plugin と google maps v3 を同時に使用している場合

Tiny_mce jquery plugin と google maps v3 を同時に使用しているページをFirefox3.6でリロードするとTiny_mceが表示されない。Firebugで見ると、 GET 'script_urlで指定しているtiny_mce.js' 304 Not Modified tinymce is not defined (function(b){var e,d…

javascriptでコールバック関数を渡すときに引数も渡したい場合

コールバックに指定する宣言済みの関数に引数を渡すと、指定時に実行されてしまう。 function foo(s) { alert("Hello " + s); return false; } // require jQuery $(document).ready(function() { $(':button').click(foo('test')); }); /* ページ読み込み後…

jQueryでキー押下で処理させる

javascript中においてキー押下で処理させたい場合、jQueryを使えば楽できる。 jQueryではeventの keydown(fn) を使う。実は bind("keydown", fn) のようだ。 $(window).keydown(function(e) { if (e.keyCode === 27 || e.keyCode === 81) { /* ESC,q */ $('#…

jquery tinymce プラグインで日本語化

久しぶりにtinymce(jqueryプラグイン版)をダウンロードして、以前の設定内容をコピーして設定してみたら表示されなくなっていた。 デフォルトのソース(tinymce_3_3_9_3_jquery.zip)だと、 language : "ja" があるとtinymceが動かない。 言語パック(tinymce_l…

jqueryで簡単画像hover

hover(rollover)用画像を作成しない場合にマウスhover時にちょっと変化させたい場合、jqueryで以下のようにすればよさそう。hoverしたいimg要素にclass="hover"と指定しておき、 $(document).ready(function() { $("img.hover").fadeTo(0,1.0); $("img.hover…

Google Maps v3でのマーカー(marker)ドラッグ(drag)について

Google Maps version3では、addListenerにて"dragend"をlistenしていてもMarkerインスタンスでdraggable: trueにしないとマーカーをドラッグできない。ちょっとハマった。 var marker = new google.maps.Marker({ position: point, map: map, draggable: tru…

jqueryを使ってページ内リンクのスムーススクロール

以下参考サイト。 http://tico-jpn.com/464/jquery-smooth-scroll // jquery.easing プラグインより抜粋。animate()に指定する。 jQuery.easing.outquart = function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; $(document).ready(functi…

jQueryプラグインのPhotoSlider

jQueryを使用したスライドショーPhotoSlider。元ページは以下。 http://opiefoto.com/articles/photoslider また、設置の説明などは以下が詳しい。 http://ascii.jp/elem/000/000/187/187279/ ただし、こちらの環境では、以下の修正が必要だったのでメモ。 j…

TinyMCEのオプション

$('textarea.tinymce').tinymce({ .... readlonly : 1, width : '95%', height : '240px', .... }); readonlyを指定すると表示のみとなる。TinyMCEにて、textareaに入力さたくない場合、 <textarea name="desc" class="tinymce" readonly="readonly"></textarea> と指定しても入力できるようになってしまうので、readonlyオプション…

フォントサイズ変更(代替スタイルシート変更)のjQuery plugin

http://d.hatena.ne.jp/kazuokohchi/20091109 で書いたように、fontsizeを変更するにあたってalternate stylesheetを使って変更するstyleswitcher.jsがあるがこれを元にjQuery pluginにしてみたもの。例のIEの問題も回避している。 http://www.miyagino.net/…

IEでのalternate stylesheetによるスタイル変更の不具合

http://www.alistapart.com/articles/alternate/ にあるstyleswitcher.jsというjavascriptを元にスタイルの変更を行わせていた。このstyleswitcher.jsではalternate stylesheetで指定したスタイルへの変更を行い、しかもcookieに保存してくれるので、次回表…

tinyMCEで画像挿入の際に一覧表示させるためのPHPスクリプト

tinyMCEでは画像を挿入することができるが、そのダイアログで一覧を表示させるために、tinyMCEの呼び出しで、 external_image_list_url : "tinyMCEImageList.php" /* index.html からの相対パスならOK */ のように指定する必要がある。そこで、 http://wiki.…

jQueryでのマウスオーバーによる画像入れ替え

DreamWeaverなどで吐き出されるjavascriptを用いずに、jQueryだけでマウスオーバーによる画像表示の変更を行う。 サムネイル画像(XXXX_ex.jpg)にマウスを乗せると表示部分(id: exampleimage)に(XXXX_big.jpg)が表示される。 大きい画像も最初に読み込んでお…

jQueryでロールオーバー

jQueryでロールオーバーさせるため、また、jQueryプラグインの作成の勉強としてjquery.rollover.jsを作った。 なお、ロールオーバー以外にもカレントパスを指定するとロールオーバーさせないようにできるようになっている。 http://www.miyagino.net/my/jque…

javascriptでprototypeを使って継承させる(親クラスに引数ありの場合)

prototypeプロパティを使ってjavascriptでのクラス継承を実現させる方法。親クラスに引数がないときには、 var MySub = function () { /* .... */ }: MySub.prototype = new MySuper(); var sub = new MySub(); でいいのだが、サブクラスのインスタンス生成…

jqueryプラグインflexigridのカラム非表示

表示テーブルをソートしたりカラム幅を変更したりページ送りできたりするjqueryのプラグインflexigrid。 http://www.flexigrid.info/ xml, jsonデータをajaxでロードすることも可能だが、既存のhtmlにも適用可能。 既存htmlに使ってみて以下のようにしたかっ…

jqueryで画像ロールオーバー(rollover)の実現

プラグインなしでjqueryを使用して画像ロールオーバー(rollover)を実現する。dreamweaverで吐き出すコードは使用しないのでhtmlコードがシンプルに書けるところが利点。 http://rewish.org/javascript/jquery_rollover ここでは、 <ul> <li class="rollover"><a href="#"><img src="foo.jpg" alt="サンプル" /></a></li> </ul> と書いておくとよいよう…