JavaScriptツールチップライブラリ24個:phpspot開発日誌
24 Tooltipp-Scripts | Dr. Web Weblog Tooltipps, also Mini-PopUps, beharrscht jeder halbwegs moderne Browser. JavaScriptツールチップライブラリ24個。 カーソルを合わせた際などにヒントとしてポップアップしてサイトの使い勝手を向上させることの出来るツールチップライブラリが多数紹介されています。 Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus jTip – A jQuery Tool Tip AJAX-enabled Help-Balloons Tooltipps mit CSS und Javascript qTip BoxOver SuperNotes DHTML
JavaScript で幅に合わせて文字列を切りつめる - Psychs's blog
デスクトップアプリを開発してると、ListView のカラム幅が足りなくなったときに「My Docume...」のように自動的に末尾を「...」で埋めて切りつめてくれる機能がある。ウェブでも同じことをやりたかったので、作ってみた。 まず、文字列の幅を測定するには、 <span id="ruler" style="visibility:hidden;position:absolute;"> </span> みたいな隠しエレメントを用意しておいて、 String.prototype.getExtent = function(ruler) { var e = $(ruler); var c; while (c = e.lastChild) e.removeChild(c); var text = e.appendChild(document.createTextNode(this)); var
javascript - 関数をtraceする : 404 Blog Not Found
2007年05月18日14:15 カテゴリLightweight Languages javascript - 関数をtraceする amachangのコメントを受けて追記 JavaScript: 関数の追跡 - 文系大学的IT系の悲哀からのTBを受けて追記 書き換えめんどいー。 IT戦記 - JavaScript の関数を「引数そのまま返す化」 alertだけ alert(hoge); hoge.method(); 改行めんどいー。 alert + そのまま返す化 alert.s(hoge).method(); // 1 ステートのまま Functionオブジェクトを拡張 というわけで、関数をtraceするmethodをFunction Objectに追加してみる。 まずは実例。 function add(x,y){ return x + y } add = add.trace('add
FireBugで使える役立つ関数テクニック色々:phpspot開発日誌
Seifi.org Blog Archive FireBug Tips and Tricks There is so much power packed into this little FireFox plug-in. FireBugで使える役立つ関数テクニック色々。 FireBugをインストールしていても、多くの機能を使っていない方が多いのではないでしょうか？ 次のような、便利な関数がFireBugには用意されています。 console.log 関数の sprintf 風使い方(次のように、sprintf 風に使えます) var x = "fubar"; var y = 543; console.log("value of x is %s and value of y is %d", x, y); console.info 関数 で情報アイコン付きでメッセージ表示 console.in
Firebug の monitorEvents unmonitorEvents がバグってる件とそのバグ修正方法 - IT戦記
以下のエントリーを見て FirebugのmonitorEventsが動かない - Enjoy*Study で、実際はどうなんだろうと試してみた。 ちなみに monitorEvents とは Firebug のコンソールで >>> monitorEvents(document.body) と打ち込むと document.body にあがってきた全てのイベントをモニタリングできる >>> monitorEvents(document.body, 'click') と打ち込むと document.body にあがってきたクリックイベントをモニタリングできる >>> monitorEvents($('target')) もちろん document.body 以外もできる そんな機能 たしかに、現在の Firebug 1系 ではこれがバグっててまったく機能してない！ なんで今まで気がつかなかったんだ
CSS Dock Menu
May 08, 2007 331 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer supp
１つのファイルにJavaScriptとCSSをまとめて記述する方法:phpspot開発日誌
My experiments with .Net : Combine CSS with JS and make it into a single download! １つのファイルにJavaScriptとCSSをまとめて記述する方法。 まず、test.jscss というファイルを作って、次のように内容を記述します。 <!-- /* function t(){alert('test');} <!-- */ <!-- body { background-color: Aqua; } そして、次のようにJavaScriptとCSSを呼び出す際に先ほど作成したtest.jscssを指定することができます。 <html> <link type="text/css" rel="stylesheet" href="test.jscss" /> <script type="text/javascript"
JavaScript で簡単にスタックトレースを取るテクニック
Firebug を使うと console.trace(); これだけでスタックトレースを取ることが出来ます。 でも、 XUL の開発とか、人のブラウザで Firebug が入ってない時とかは出来ないので、 そういう時は、 alert(Error().stack); これだけで出来ます。まあ Firefox only ですが。
404 Blog Not Found:Digest - 今日にでも使うべきJavaScriptの7つのテクニック
2007年04月25日12:00 カテゴリLightweight LanguagesBlogosphere Digest - 今日にでも使うべきJavaScriptの7つのテクニック 良質の記事だけに全訳したかったのだけど、時間もないので紹介と抄録。 Digital Web Magazine - Seven JavaScript Techniques You Should Be Using Today サンプルコードは、適宜書き換えてあります。 1. Branch when possible - 分岐はなるはやで これは実例を見た方が早いでしょう。クロスブラウザー対応のaddListener()を考える。機能だけを考えれば、以下でOK。 function addListener(el, type, fn) { if ( window.addEventListener ) { el.addE
小粋なインターフェースを実現する25のコード （パート3） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
javascript - CSSをいじくる : 404 Blog Not Found
2007年03月12日02:00 カテゴリLightweight LanguagesiTech javascript - CSSをいじくる JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保さん趣味のWebデザインぐらいしか見かけません。 というわけで、習作を兼ねて、style属性ではなくCSSをまるごと書き換える関数を作ってみました。 CSS Manipulation via JavaScript http://www.dan.co.jp/~dankogai/css/css_handlers.html 解説 動作確認はFirefox 2, Opera 9, Safari, Mac IE5で行っています。Safariでのみ
Ajax機能をオブジェクト化してAjax機能のみ単体で使える「Ajax Object」:phpspot開発日誌
The Ultimate Ajax Object Ajax 機能をオブジェクト化してAjax機能のみ単体で使える「Ajax Object」。 prototype.jsなどを使えば、Ajaxは簡単に使えるけど、Ajaxのみの機能を使いたいのに、要らない機能までもブラウザに読み込ませるのは無駄な場合も多いことと思います。 そんな際に使える、ajaxObjectの紹介。ほんの４５行程度のライブラリですが、クラス化されていて再利用が容易です。 使い方は次のように簡単です。 myRequest = new ajaxObject('http://somedomain.com/ad.html'); // オブジェクト初期化 myRequest.callback = function(responseText) { // ajax成功時のコールバック document.getElementById('so
miya2000の日記 - これからドラッグ＆ドロップを書く人のために
2012/07/22 追記 久しぶりに確認したところ、IE9 では以下で指摘している IE (このときは IE6 でした) の問題(3, 4, 6)がすべて解消されていました。 また、Firefox での問題(5)も Firefox14 で試したらは解消されていました(ただ、All-in-One Sidebar のパネルの上では mousemove イベントが発生しないようでした)。 Chrome20 や Safari5 でも問題無く動作していますから、現在においてドラッグ＆ドロップを実装するには mousedown 時の preventDefault() だけでOKと言えそうです。すばらしいですね！ safari で動かないらしいのでどなたか情報ください！(くやしい!) というかこういうのに勝ち負けはないので実装できてる方は是非トラックバックお願いします。当方既に ipod 中毒ですし
Ajaxでデバッグしよう - ＠IT
Webアプリ開発で、動作確認メッセージが出力できない。そんなときは、Ajaxでブラウザの動作ログをサーバに出力してみよう。 現在、至るところでWebを利用したシステム開発が行われています。デバッグに使用しているテクニックの1つに、古くからの技法として変数や動作したことを示すメッセージ表示などの情報を出力するものがあります。残念ながらWebアプリケーションの開発の現場では、その技さえ使えない場合があります。 最近のWebアプリケーションの開発は、サーバ側のJSPやサーブレットの開発では統合開発環境を利用できるようになり、大幅に開発効率が向上しています。また、開発中の動作確認だけでなく、リリース後はサーバ側で動作するプログラムへメッセージを埋め込んでログとしてファイルに残すこともできます。 これらのログ機能は、IBM社のWebSphere、MS社のInternet Information Se
【コラム】そろそろきっちりJavaScript (2) 無名関数についてもう少し考える | エンタープライズ | マイコミジャーナル
無名関数のメリット 前回の記事では、無名関数を関数リテラルに割り当てるという操作を紹介した。なぜ、このような記法により関数を定義するのだろうか。 まず、無名関数を採用するメリットには、「命名する必要の無い関数をシンプルに記述できる」「(複数ファイルのJavaScriptライブラリを読み込んでいるときなどにおいて)、既存の関数/変数名との衝突を回避できる」という点が挙げられる。 前回の冒頭で述べた通り、JavaScript関連ライブラリが数多く存在し、多くのシーンでそれを活用している今日、既存のライブラリやソースコードと名前が衝突しない事がどれだけ重要であるかは想像に難くないだろう。 それでは、命名する必要の無い関数とはどのようなものだろうか。また、無名関数だと変数名の有効範囲はどのように決まっているのだろうか。ここで、前回に引き続きFirebugで以下のコマンドを実行し、動作を確認してみよ
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Ajax と XML: Ajax に共通の 5 つのデザイン・パターン - Japan
