Site Under MaintenanceWe'll be back soon! Our site is currently undergoing maintenance. Please check back later.
シンプルなカラーピッカーを作ってみた。 - うなの日記
シンプルなカラーピッカーを作ってみました。 →サンプルはこちら。 四角をクリックすると色選択UIがポップアップします。 色にカーソルをあわせて、クリックで選択。 ソースは以下。 /** * カラーピッカー * @param elementId ピッカーを表示する要素のID * @param color ピッカーの初期値 例) #FFFFFF */ ColorPicker = function(elementId, color) { this.elementId = elementId; this.color = color; this.init(); } ColorPicker.prototype = { init: function() { var self = this; var top = "<table id='picker_table_" + this.elementId + "
Ring
Ringとは、リクルートグループ会社従業員を対象にした新規事業提案制度です。 『ゼクシィ』『R25』『スタディサプリ』など数多くの事業を生み出してきた新規事業制度は、 1982年に「RING」としてスタートし、1990年「New RING」と改定、そして2018年「Ring」にリニューアルしました。 リクルートグループの従業員は誰でも自由に参加することができ、 テーマはリクルートの既存領域に限らず、ありとあらゆる領域が対象です。 リクルートにとって、Ringとは「新しい価値の創造」というグループ経営理念を体現する場であり、 従業員が自分の意思で新規事業を提案・実現できる機会です。 Ringフロー その後の事業開発手法 Ringを通過した案件は、事業化を検討する権利を得て、事業開発を行います。 さまざまな事業開発の手法がありますが、例えば既存領域での事業開発の場合は、 担当事業会社内で予算や
pngfix & rollover library sisso.jsを作成しました。 : tech.kayac.com - KAYAC engineers' blog
通販で自転車のスポーク買いました。agoです。 社内から「yuga.jsみたいに呼べば使えて、環境に依存しないpngfixとrolloverライブラリがほしい」とリクエストを受けたので作成してみました。 使い方はファイルをダウンロードし、以下のようにマークアップすれば完了です。 <img src="opacity.png" class="btn" /> <!-- mouseover時にopacity_o.pngを表示 --> <div class="bgpng" style="background-image:url(opacity.png); width:200px; height:200px"></div> <!-- 背景のpngfix（img,input[type="button"]は自動的にpngfixする） --> <div class="bgpng btn" style="ba
tableソート・スクリプト - Archiva
恒例のライブラリを使わないシリーズ。今回は、テーブル行を並べ替えるスクリプトを書いてみました。実は前にも作ったことはあるんだけど、当時はてきとーにその辺から拾ったものを継ぎ合わせただけで理解してたわけではなく... まあ気にはなってたので、いま作ってみたらどうなるだろう、と。 結果的に、JavaScriptの連想配列をソートする方法を学びました。これがあるから自作はやめられない。車輪の再発明は勉強にはは必要よ。性能面でも、とりあえず400行くらいのデータテーブルなら（画像入ってても）特に遅くはないようです。仕事で使ったから大丈夫。 以下、解説です。 HTML <table border="1" cellspacing="0" cellpadding="0" id="device"> <thead> <tr> <th><a href="" onclick="table_sort.exec('
Bridge Word
This shop will be powered by Are you the store owner? Log in here
CSS+JavaScriptで作る簡単なプログレスバーのサンプル - うなの日記
CSS+JavaScriptを使って、簡単なプログレスバーを作ってみました。戦略は以下のとおり。 バーとして使うアニメーションGIFを作成しておく。 サンプルでは→を用意して使いました。 プログレスバーとするdiv要素を用意し、CSSで 背景画像として↑の画像を設定。 背景画像のx座標を調整し、最初は非表示になるようにしておく。 また、widthを固定しておく。 進捗状況が変わった場合、JavaScriptで背景画像のx座標を更新し、バーを表示する。 ↓のサンプルではタイマーで200msごとに進めています。 →サンプルはこちら ソースは次のとおりです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> // メイン
jQuery.opensocial_simple Pluginを作成しました。 - KAYAC Engineers' Blog
昨日OpenSocial Hackathonに参加させていただきました。agoです。 Hackathonは終わってしまいましたが、jQueryからOpenSocialを簡単に扱うためのPluginを作成したので、jQuery.opensocial_simpleとして公開したいと思います。 opensocial、gadgetsのすべての機能を実装したわけではないですが、owner、viewerの情報取得、外部サイトへの接続はかなり簡単に実装できるようになったと思います。 使い方はjQuery読み込み後、jquery.opensocial_simple.jsを読み込み、$.opensocial_simpleからmethodを呼び出すだけ。 MySpaceアプリの場合以下の形で使用できます。 <script type=" text/javascript"http://api.msappspace
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
RedLine Magazine : スペースは嫌、class付けるのも嫌な時用(追記有)
スペースは嫌、class付けるのも嫌な時用(追記有) >>081210：追記 コメント欄にてもっといい書き方教えて頂きました！ タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社 名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。 ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
DOM Events とブラウザの実装: Days on the Moon
ブラウザ上でのイベント処理の仕組みは DOM 2 Events および DOM 3 Events 草案にて規定されています。しかし、DOM 2 Events で言及されていない部分など、細かい動作はブラウザごとに異なっていることもあります。そうした仕様と実装の差異を、「作って納得! DOM 2 Events」で触れなかったものも含めて、いくつかまとめてみました。 ターゲットフェーズで呼び出されるリスナ DOM 2 Events のイベントモデルにおいて、あるノードでイベントが発生すると、そのノードの祖先ノードのイベントリスナが呼び出されるキャプチャリングフェーズ、そのノード自身のイベントリスナが呼び出されるターゲットフェーズ、再び祖先ノードのイベントリスナが呼び出されるバブリングフェーズと、3 段階にわたってイベントが伝播していきます。このうちターゲットフェーズでは、addEventLis
DOMNodeInserted と DOMNodeRemoved に似た仕組みを IE でも使えるようにして、セレクタの実行結果をキャッシュする - latest log
セレクタ(id, tag, class, css, xpath)の実行速度を改善するには、2つの方法があります。 ロジックを改善する キャッシュを使う 今日は2の方法について検討したことを書き残します。 心配事 キャッシュを使う上での心配事は「キャッシュが古くなったらどうするか、それをどうやって知るか?」です。 古くなったキャッシュはクリアしなければなりません。 DOM Level2 MutationEvents を使うと、ノードの挿入, 削除と、属性の更新 を取得できる DOM Level2 MutationEvents という仕様があります。これらを活用するとDOMツリーが更新されたタイミングを監視できます。 DOMNodeInserted は ノードの挿入, DOMNodeRemoved は ノードの削除, DOMAttrModified は 属性の変更に対応しています。 各ブラウザ
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
はてなブックマークが重い件について、Page Detailerというツールを使って調べてみる - VTuberになったプログラマーの魂の残滓
JavaScriptの部分は というわけでid:amachangに任せましょう。 というわけでそれ以外の部分でいったいどこが重いのか 何が重いの？ということで重たい箇所を分析していきましょう。 IBM PageDetailer 解析ツールとしてIBM PageDtailerを利用します。 alphaWorks Community 解説するよりも見てもらうほうが早いと思うのでさっそく使ってみるよ。 ちなみに上記ソフトのダウンロードにはIBMアカウント（無料）が必要なので、使いたい人は登録しよう！ http://b.hatena.ne.jp/HolyGrail/ の結果 こんな感じのグラフが出てきます。 では、詳細を見てみましょう。 このグラフですが、長い部分が http://b.hatena.ne.jp/HolyGrail/ のHTMLそのもののロード時間になっています。 内訳としては 濃い
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
読込が完了したら画像を交換
このサーバーは基本的に速いので、高速回線を入れてると効果がよくわからないかも。 一瞬表示されるかもしれない黒い画像が読込中の画像です。 ■効能 <img> の name に "change" が含まれていると、スクリプトはその画像を読込中のものに変更し、本来の画像をバックグラウンドでロードします。 ロードが終わると、読込中の画像を本来のものに戻します。 ■使用方法 ソースを見て、<head> にあるスクリプトをコピペします。 スクリプトの方に、読みこみ中に表示する画像のパスを入れます。 var loading = "loading.png"; //読みこみ中の代替画像 最後の画像より後に、以下の3行を入れます。 <script type="text/javascript"><!-- imageswap(); //スクリプト開始--> </script> あとは交換スクリプトを使いたい <i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス: Douglas Crockford (著), 水野貴明 (翻訳): 本
Gearsを使ってフォームデータを保存する - XOOPS専門-株式会社RYUS
複数画像の読み込みが完了したら、処理をすすめるには？ - OKWAVE