javascript

Shift + 矢印でリンクをフォーカスして Enter で onclick イベントは発生しない?

いやしますよね? ニコニコ動画トップ のカテゴリメニューでおきた現象で疑問に思う. 画像のように Shift + 矢印でリンクをフォーカスして Enter を押すと http://www.nicovideo.jp/# へ飛んでしまう.マウスでクリックしたときと同じように onclick イベン…

jQuery と CSS3 の :target セレクタを使ってスライドショーを作ってみた

:target セレクタの便利さを試してみたかったので作ってみた. デモ: jQuery Slideshow with CSS3 :target selector 上下キーでページ切り替え.単純なページ切り替えしか実装していない.文字が追加で表示されるとか横から何か飛び出てくるとかはできない…

文字列から曜日を返す

function getDay(s) { return ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][new Date(Date.UTC.apply(this,s.match(/(\d{4})?[^\d]*(\d{1,2})[^\d]*(\d{1,2})/).slice(1).map(function(e,i){switch(i){case 0:return e?e:(new Date()).getFullYear();case 1…

jQuery プラグイン 書いた

http://gist.github.com/590362 要素を縦方向のみリサイズできるように.要素の下につかんでドラッグできる要素を追加.http://gist.github.com/592245 テキストエリアを自動で伸ばす.動作がカクカクで気持ち悪い. デモ

delicious の recent ページにユーザリストをつけてみる

久々に JavaScript 書いてみたよ。 recent の タグページ(例: http://delicious.com/tag/opera)のサイドバーにそのタグをブックマークしたユーザのリストを表示するスクリプト。 ユーザの並びがソートされてないのはめんどくさいから。手直しするならこの…

クラスをつけたり消したり

function hasClass(elm, _class) { if(!elm || !_class) return; // var regexp = new RegExp('\\b'+ _class + '\\b'); // \ をエスケープしないと駄目なことを知らずにはまった // var regexp = new RegExp('(^|[^\\w-])' + _class + '([^\\w-]|$)'); var r…

Opera の右クリックイベント検出

IE, Firefox, Safari だと var d = document.getElementById('hoge'); d.oncontextmenu = function(e) { if(window.event) event.returnValue = false; // for IE else e.preventDefault(); // なんらかの処理 } のようなコードで右クリックでコンテキストメ…

フォーカスイベントとタブ切り替え

input や textarea にフォーカスがあったってる状態でタブを切り替えたときに focus, blur イベントがどのように起こるか各ブラウザを調べてみた。 テスト内容 テストページ ページには input[type=text], textarea, button が並んでる。 各要素はフォーカス…

$.each の落とし穴

jQuery の $.each は for で書くよりさくっとかけて便利だ。 *1 使い方は $.each([0, 1, 2], function() { alert(this); }) のように、第1引数に Array (or Object)、 第2引数に各要素に対する処理 Function を書く。 this は それぞれの値(この例だと 0, …

jQuery でしましまを作るプラグイン

ヒント: http://h2ham.seesaa.net/article/114037411.html each 内の function の引数にインデックスがわたされることがわかったので (function($){ $.fn.zebra = function(options){ var default_options = { class_name: 'zebra', interval: 2 }; options …

jQuery プラグインを書くときのポイント

input に事前に値を入力しておく - higeorange's blog を例に jQuery のプラグイン(メソッド追加)書き方のポイントを書いて見る。(あくまでも私の書き方) メソッドの追加法 (function($) { $.fn.[メソッド名] = function() {} })(jQuery) という書き方を…

input に事前に値を入力しておく

input に事前に入力値を入力しておいてフォーカスするとその値が消える jQuery プラグインを書いた。 (function($) { $.fn.preInput = function(txt, options) { var default_options = { class_name: 'pre-input' }; options = $.extend(default_options, o…

Zooomr 用 Autopagerize SITEINFO 書いた

フォトーク { "name": "Zooomr photalk", "data": { "pageElement": "//table[@id=\"timeline\"]", "url": "http://(jp|www).zooomr.com/*", "nextLink": "//table[@id=\"timeline\"]/following-sibling::h2[1]/a[last()]", "exampleUrl": "http://jp.zooomr…

Ajax でフォームポスト

(function($) { $.fn.ajaxPost = function(callback, options) { var default_options = { data_type: 'html', before_send: function() {}, error_handler: function() {} }; options = $.extend(default_options, options) return this.each(function(){ i…

汎用化

昨日のは マウスオーバー, マウスアウトによる制御だったけど他のイベントでもできるようにしてみた。 (function($){ $.fn.eventDelay = function(delay, triger, cancel, callback) { return this.each(function() { var target = $(this); var tid; target…

マウスオーバーしつづけると動く

はてなスター削除の時のように、ある要素にマウスオーバーし続けるとある動作が起こるようにする jQuery プラグインを書いた。 (function($) { $.fn.mouseOverDelay = function(delay, callback) { return this.each(function(){ var tid; $(this).hover(fun…

new Number() and new Boolean()

0 || 1 >> 1 // JavaScript では 0 も false のようにあつかわれると、思っていたんだけど Number(0) || 1 >> 1 // これは普通だ new Number(0) || 1 >> 0 false || 1 >> 1 Boolean(false) || 1 >> 1 new Boolean(false) || 1 >> false typeof 関数で object…

preventDefault() and stopPropagation()

jQuery でイベントの伝播を止めたり、デフォルトの動作を殺したりするには element.click(function(evt) { evt.preventDefault(); evt.stopPropagation(); alert('hoge'); }); のように書くんだけどこれは, IE の event.returnValue = false; と event.cance…

線の長さを測ってみる

線の長さを測ってみる Google Maps にかぶせて距離測れたらないいなと思ったけど.公式の API に既にあった.

http:// を補完する.

ttp:// とか tp:// とかを http:// にする. function completeHttp(str) { var sc = "http://" var h = sc.split(""); var i = 0; while(str.indexOf(h.join('')) != 0) { h.shift(); i++; } return sc.substr(0, i) + str; } var a = "http://www.google.c…

Object.watch メソッド

LDRの未読数をfaviconに表示するGreasemonkeyスクリプト - 素人がプログラミングを勉強していたブログ を見ていて watch メソッドってのがあったことを思い出した. で,調べて見たところ watch メソッドっていうのは Firefox(Gecko) でしか使えないのか?*1 …

canvas で文字を表示してみる

Firefox 3 以上限定 Canvas でテキストを表示してみる getContext('2d') で返される CanavsRenderingContext2D オブジェクトに Firefox 3 から moz なんちゃらというメソッドやプロパティが定義されている.それを使ったもの. 参考 文字を描く - Web API | …

del.icio.us で他人のコメントをコピーする

del.icio.us で network, tag などのページから save this というリンクをクリックしてブックマークする時に他人のつけているコメントをそのままコピーするスクリプト.わかりにくい. // ==UserScript== // @name del.icio.us Copy Note // @namespace http…

"Hashを使ってユニークにしよう!" を JavaScript で.

perl-mongers.org を var cars = ["honda", "honda", "suzuki", "toyota", "toyota", "daihatu", "mitubishi"]; var report = {}; cars.forEach(function(car) { report[car] = ++report[car] || 1; }); for(var i in report) { print(i + ": " + report[i])…

Canvas で簡単な図形を描いてみる

Canvas で簡単な図形を描いてみる 直線,矩形,円を描くことができる. mouseup するまでの間の途中段階も再現しようとしたけどなんかうまくいかないので見送り. Untitled を使おうとしたんだけれども. 追記 6/1 17:20 線,塗りつぶしの色を変更できるよう…

printf もどき

function printArray(format, arry) { var i = 0; return format.replace(/%s/g, function($0) { return arry[i++]; }); } var a = ["foo", "bar"]; printArray("%s+%s", a); // foo+bar そもそも printf がどんなものか詳しくはしらないのでそれっぽいやつ…

Number オブジェクトのメソッド呼び出しではまったこと.

数値のメソッド呼び出しは 3.toString(2); では Syntax Error となる. 3..toString(2); // . を二つつける. もしくは (3).toString(2); とする必要がある. 問題はここから. まず,Math.abs を Number.abs でも呼べるようにする. Number.prototype.abs =…

"先頭を0で埋めて桁をそろえる" を考えてみた

http://d.hatena.ne.jp/javascripter/20080514/1210791575 より unshift で Number.prototype.fillZero = function(n) { var r = this.toString().split(''); while(r.length <= n) { r.unshift('0'); } return r.join(''); } 2 Number.prototype.fillZero =…

としたときの挙動.

http://orera.g.hatena.ne.jp/higeorange/20080514/1210740349 でいろいろと疑問に思ったのでまとめてみる. まず検証ブラウザ. Opera, Firefox, Konqueror <body onload="func()"> としたとき Opera window.onload & window.document.body.onload に func を設定. しかし window</body>…

Input.focus

input [text]要素に focus させたとき。 入力してある文字の最後にキャレット 入力してある文字の先頭にキャレット どっちが正しかったっけ?