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> と書いておくとよいよう…

thickboxをページロード時に表示させる方法

jquery & thickboxにて、ページが表示する最初にthickboxを起動したい場合の方法。 <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" /> <script src="jquery.js" type="text/javascript"></script> <script src="thickbox.js" type="text/javascript"></script> <script type="text/javascript"> //</link>

Wordpress 2.7 での wp-amazon プラグイン

Wordpressを2.7にアップグレードしたところ、使用していたwp-amazonプラグインが動作しなくなってしまった。調べていたら、 http://www.whowants.net/wp/?p=827 http://netafull.net/aff/027747.html を見つけた。 こちらでも、wp-amazonのプラグインを停止…

javascriptのリテラル(literal)

class GInfoWindowOptionsInstances of this class are used in the opts? argument to the methods openInfoWindow(), openInfoWindowHtml(), openInfoWindowTabs(), openInfoWindowTabsHtml(), the bindInfoWindow*() variants, and showMapBlowup() of cl…

シングルクォートと文字列の間に半角スペースが。。。

よくわからない現象に悩まされた。1. javascriptで生成したjsonのコードをinnerHTMLにて画面に表示。 2. マウスで対象部分をdragしてcopy。 3. エディタでhtmlにpaste。最初の一行目は問題ないが、二行目以降、シングルクォートと文字列の間に半角スペースが…

meta refresh, Locationヘッダを使用した場合のHTTP_REFERERについて

<meta http-equiv="Refresh" content="0; URL=http://www.miyagino.net/" /> や、 print <</meta>

Google Maps API setMapType()でのエラー

GMap2#setMapType()はGMap2#setCenter()以降に呼び出すこと。でないと、 a has no properties main.js (line 443)Xf.prototype=new uj;Xf.prototype.fromLatLngToPixel=function(a,b){var c=this,d=c.... のエラーが出る(Firebugにて)。 var map = new GMap2…

Google Maps API でのマウスホイールでのズーム(zoom)機能

v2.78以降の機能。 var map = new GMap2(document.getElementById("mapid")); .... map.enableDoubleClickZoom(); // v2.58 or later map.enableContinuousZoom(); // v2.58 or later map.enableScrollWheelZoom(); // v2.78 or later .... GMap2#enableDoub…

(Java|ECMA)scriptでのString#match(), String#replaceの正規表現

String#match(),String#replace()に指定する正規表現に関して、変数を使用する場合。 var MATCH_REGEX = '^http:\/\/www\.example\.jp\/'; var REPLACE_REGEX = 'http:\/\/www\.example\.jp\/'; var url = '....'; .... if (url.match(MATCH_REGEX)) { alert…

xmlhttprequestでの同期通信・非同期通信の例

xmlhttprequestはデフォルトで非同期通信。 非同期通信の例 XMLHttpRequest#onreadystatechangeに関数定義する。 var req = new XMLHttpRequest(); req.onreadystatechange = function () { if (req.readyState == 4 && req.status == 200) { document.getEl…

GMakerManagerを使用してのpanTo() or setCenter() and openInfoWindowHtml()

某サイトで、いままでGMap2#addOverlay()で追加していたGMaker(以下:マーカ)をGMakerManagerを使用して登録するようにしてみた。 というのは、GMakerManagerを使用すると表示部周辺(で最少、最大ズーム範囲内)のマーカだけを追加することになるらしく、これ…

SafariでのDate.parse()

Safari 1.0.3 on MacOS X 10.2.8 という環境で、 Date.parse('2007/02/01 00:00:00'); は、2019年8月17日と認識されてしまう。なぜ?で、 Date.parse('Feb, 1 2007 00:00:00'); と変更。

xhtmlでのjavascriptの書き方

<html xmlns="http://www.w3.org/1999/xhtml"> <head> .... <meta http-equiv="Content-Script-Type" content="text/javascript" /> .... <script type="text/javascript"> // </meta></head></html>

CGIとJavascript

CGIで出力したhtml中のJavascriptにて、window.onloadを行いたい場合。 .... <script type="text/javascript"> <!-- window.onload = function() { .... } // --> </script> </body> </html> と書く位置(終了body要素の前)に書いておく必要があるみたい。

xmlhttprequestでgetしたときの文字コード

XMLHttpRequest()にて、あるhtmlを取得しようとした場合に、文字コードをちゃんと認識させる方法。Apache限定。あるhtmlファイルをhtml.sjisとかにするとShift_JISとして取得してくれる。 var req = new XMLHttpRequest(); .... req.open("GET", "foobar.htm…

DreamWeaverで生成されたポップアップメニューJavaScript

DreamWeaver MXにて生成されたポップアップメニューがIE7では横に表示させたいメニューが縦に表示されてしまう(IE6、Firefoxでは問題なし)。 IEの場合には、 <div id="menuItemN"> <div id="menuItemTextN"> (同様にid="menuItemHiliteN"もある) <div id="menuItemShimN"> <div align="left">文字列</div> という要素でメニューを構成している。このmenuIte</div></div></div>…

Array#lengthの動作(結論)

http://d.hatena.ne.jp/kazuokohchi/20061106で、ちょっと困っていたことに対して、inamoriさんからコメントとトラックバックを頂いていた。 トラックバック先ではECMAの仕様書まで調べていただいており、結論としては、IE側がきっちりとECMAの仕様書に準拠…

Yahoo User Interface Library

Yahoo User Interface Libraryという(?:ECMA|Java)Scriptで書かれたユーティリティがある。これ、とてもいい感じで、しかもBSD Licenseで配布されているのだ。いま、これを使ってちょっとしたカレンダーアプリケーションを作ろうかと思っているのだが、IEだ…

関数オブジェクトの代入

いつも、 window.onload = function() { .... }と書いていたので気が付かなかったが、http://homepage3.nifty.com/aya_js/js2/js201.htm によると、 <SCRIPT LANGUAGE="JavaScript"> var a; function init() { a = document.forms[0].elements[0].value; } window.onload = init; </SCRIPT> a という…

ハッシュ配列

ハッシュ配列(Javascriptではハッシュとはいわないのかな?)の要素すべてを処理する場合には以下のようにする。 var a = [ "no1" : [0, 1, "あ"], "no2" : [2, 3, "い"], "no3" : [4, 5, "う"], "no4" : [6, 7, "え"], "no5" : [8, 9, "お"] ]; window.onload…

Array#lengthの動作

(Java|ECMA)Scriptで、 var a = ["a", "b", "c", ]; // 最後にカンマがある alert(a.length);と書いた場合、Firefox、Operaは3なのに、IE[67]は4なんだよね。結構困っちゃうな(もちろん、最後のカンマを取ればすべて3なんですけどね)。 ちなみに、同じような…