Side Navigation Tooltip / Popup Bubble
I’ve had quite a few questions regarding the tooltip on my side navigation so I figured I would write a tutorial on it. The tooltip used on my blog was actually from www.jQueryForDesigners.com, but I decided to write my own with some simple jQuery. View Demo Step1 - Create Wireframe We will first start by creating the wireframe of the side navigation. HTML <ul class="sidenav"> <li> <a href="#">Hom
jQuery でサイズや位置を取得する方法を図にしてみた - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary サイズの取得 煩雑になるので height の記述しかありませんが、width に置き換えれば幅もとれます。 普通のボックス要素 height() メソッドで取得できる値には、padding や border の分の高さを含みません。 CSS の height と同じなので、css('height')メソッドで取得してもよさそうですが、こちらの場合ブラウザの種類や CSS の定義の仕方で取得される値が異なる（クロスブラウザとしての機能が完全でない）ので、純粋に px 単位の高さを取得したい場合は height() メソッドを使用した方が無難です。 スクロールバー付きボックス要素 clientHeight には
現地案内の説明ページ等で重宝しそうなインタラクティブなマップ作成用jQueryプラグイン:phpspot開発日誌
現地案内の説明ページ等で重宝しそうなインタラクティブなマップ作成用jQueryプラグインが公開されています。 地図にインタラクティブに動く情報を記述して表示させたいようなケースに便利です。 実際に現地説明図などをページに載せているサイトがありますが、地図にインタラクティブに情報を表示すると利用者が非常に便利に見れますね。 例えば、次のような地図があります。 黄色のポイントをクリックすればヒントが表示されます。 更に下のほうで、薄く白身がかかった部分をクリックすると地図を拡大することが出来ます。 上記のデモページはこちら 他にもサンプルがあります。 上記デモページはこちら jQueryの機能を使ったアニメーション機能なんかも実装できます。 サイト制作請負をされている方は覚えておいて損はなさそうですね。 以下のエントリを参照してください。 A jQuery Plugin for Zoomabl
JavaScriptを高速化する6つのテクニック | エンタープライズ | マイコミジャーナル
Thomas Fuchs, author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus. Thomas Fuchs氏が6 easy things you can do to improve your JavaScript runtime performanceにおいてJavaScriptの実行パフォーマンスを改善するための6つのテクニックを紹介している。Thomas Fuchs氏はscript.aculo.usの開発者であるとともにPrototypeコアチームのメンバーも務めている。またRuby on Railsでコアチームで開発を担当していたこともある。 JavaScriptエンジン
KAYAC Engineers' Blog
SREチームの長田です。 今回は、カヤックのメンバーが業務で使うために開発・公開しているOSSなプロダクトをまとめて紹介しようという企画です。 KAYAC organization以下にあるものだけでなく、在籍中のメンバーが作ったものもひっくるめて、実際に業務で使用しているものを中心に 紹介しています。 以下の3つのカテゴリに分けて記載しています。 各カテゴリ内はアルファベット順です。 ツール編 人間が手動で実行するもの アプリケーション編 どこかに常駐して、イベントを受け取ると動作するもの ライブラリ編 ツールやアプリケーションから参照されるもの 集めてみたらそこそこの量になったので、本記事では詳細な説明は省いています。 GitHubリポジトリのURLや関連記事のリンクを併記していますので、より詳しく知りたい場合はそちらを参照ください。 (...) 内はそのプロダクトで使用している主なプ
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」:phpspot開発日誌
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 2009年10月21日- Long Dropdowns 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 ドロップダウンメニューは限られたスペース内に沢山のナビゲーションを埋め込めるということで便利なのですが、多くなって縦に長くなってしまうと、下のほうのアイテムがクリックしづらくなります。 これを使いやすくしたのが今回のサンプル。 マウスを下に移動すると、少しのマウス移動でメニュー自体が上にニュイーンと上がってきてくれます。 結果的にカーソル移動量が少なくなって使いやすくなります。 最初は驚くかもしれませんが、なれると便利ですし、一番したまでいってもループして戻ってくるという仕様なので、見逃した、という失敗も避けられます。 これは新しい上
AJAX(Jquery)で外部XMLファイルを読み込む - .h2oのお気楽日記
ちょっとJavaScriptベースでアプリを開発していて、外部XMLファイルを読み込みたくなったけど、いい案が思いつかない。ちょっと調べてみると幾つかのサイトでJQueryを使ってXMLを読み込むデモコードが公開されていた。 早速試してみたけど、なかなかうまくいかない。 このとき、”dataType: 'xml'”を削除すると”parse_xml”まで処理が進むことがわかった、でもコレはずすと挙動が変わっちゃうよね（汗 <script type="text/javascript"> function parse_xml(xml){ alert(xml); $(xml).find("employee").find("name").each(function(){ var item_text = $(this).text(); alert(item_text) }); } $(document
スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」:phpspot開発日誌
jScrollPane スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。 ちょっと前に話題になっていたような気がしますが便利なのでご紹介。 デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。 デザイニング 次のような自由にデザインされたスクロール付きブロックを実装可能 プラットフォームに関わらずWinXPスタイルのスクロールバー実装 同様にMacOS Xみたいなスクロールバーも実装できます 拡張機能 さらに面白いのが、スクロール内でさらにスクロールさせるという機能。 スクロール要素をネストできます あと、スクローラー外部からの<A>タグをクリックで指定位置にス
ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」:phpspot開発日誌
ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」 2009年10月05日- ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」。 Flashでよくある〜％読み込みました、みたいなものをJavaScriptで実現できるみたいです。ページを完全に読み込ませてから見てもらいたい場合に使えそうです。 読込みバーが右に伸びていって進捗表示 終わったらアニメーションでカッコよく画面切り替え ページ表示したところ 必要なJavaScriptとCSSを<script>と<link>で読み込んだら、次のように初期化するだけで実装できます。 <script type='text/javascript'> QueryLoader.init(); </script> スクリプトのダウンロー
jQuery開発に便利なエディタ上でF5実行などの機能がついたjQuery専用エディタ「jQueryPad」:phpspot開発日誌
jQuery開発に便利なエディタ上でF5実行などの機能がついたjQuery専用エディタ「jQueryPad」 2009年10月10日- Paul Stovell - jQueryPad jQuery開発に便利なエディタ上でF5実行などの機能がついたjQuery専用エディタ「jQueryPad」が公開されました。 起動してコードを書いてすぐ実行というステップが取れるのでjQuery開発の他、入門用途に非常に適しているように思います。 左側にHTMLを記述するエディタが存在します 右側にはjQueryを記述するコード。 div#hello に Hello World を入れるシンプルなコードになってます。 F5キーでプログラムを実行できるので実行してみると、下のペインに実行結果が出るというもの。 IE, Firefox, Chrome上で実行させることも可能。 但し、Firefox, Chro
第1回 jQueryにふれる | gihyo.jp
はじめに ここ数年、JavaScriptライブラリを使ってサイトを製作するという機会がどんどん増えてきました。今まででであれば、JavaScriptのライブラリを使う・使わないに関わらず、その製作の多くはプログラマーの方が行っていたと思います。しかし近年、そのJavaScriptライブラリも種類が増えてきて、プログラミングの知識がなくても簡単に導入できるようなライブラリも出てきました。そのため、それらの使い手はプログラマーからWebデザイナーやマークアップエンジニア側へとシフトしつつしている部分もあります。 そんな数多くあるJavaScriptライブラリの中でも、Webデザイナーなどのプログラミング知識がない人でも比較的導入のしやすいのが『jQuery』です。このjQueryの魅力は、その使いやすさとプラグインの豊富さにあり、プラグインだけでも、すでに使ったことがあるという方も多いと思いま
Quick and Easy Filtering with jQuery - Nettuts+
In this week’s screencast, we’ll learn how to implement quick and dirty filtering without a database. By applying some classes and a touch of jQuery, we can implement a nice little system very quickly. Overview Just yesterday, I was asked how I was able to create the simple sorting feature found on the Vault page of my blog. Truthfully, it was done out of haste. Though I’ll eventually run everythi
jQueryによるJavaScript入門-Re:Creator’s Kansai （リクリ）
Re:Creator's Kansai Re:Creator’s Party Kansai [mixi] Re:Creator’s Chat 1st Re:Creator’s Kansaiについて リクリイベント ≪2008忘年会≫Re:creators年忘れ 最近のブログエントリ Re:Creator’s Kansaiのサイトをリニューアルしました。 始めまして！ Re:Creator’s Kansai の hilokiです。 初投稿、tommmmyです。 はじめまして、水曜担当 kennsuです 最近のコメント hiloki: >akiraさん うお！そんなのあるん ですね！すこしDWにこ だけ... akira: hilokiさん こんなのがありますけ ど…。 DW extension for wo... コバヤシ: >あらたさん ちょっと古い話題です が、念のためご報告を ...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flashとlightboxなどの共存 - Mashroom
初めてのjQuery：セレクターAPIを一挙解説（後編） (5/5)
JS Bin
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 記事一覧 | gihyo.jp
IBM Developer
The White Dog