slider.jsは、通常のマウスでのドラッグ操作だけでなく、マウスのクリック・ホイール操作や、キーボードの矢印キー・Home・Endキーにも対応しているスライドバーのスクリプトです。
[JS]キーボードやホイール操作にも対応したスライドバー -slider.js
slider.jsは、通常のマウスでのドラッグ操作だけでなく、マウスのクリック・ホイール操作や、キーボードの矢印キー・Home・Endキーにも対応しているスライドバーのスクリプトです。
圧縮ツールの逆、JavaScriptの整形ツール - JS Beautifier登場 | エンタープライズ | マイコミジャーナル
軽快なWebページを実現するにはYSlowなどの分析ツールを使って問題点を洗い出し、対策をとる方法が便利だ。軽快化にはいくつもの方法があるわけだが、なかでももっとも簡単で基本的な方法がページで使っているCSSやJavaScriptのコードを圧縮することである。すでに圧縮ツールとしてはJSMinやDojo compressor、YUI Compressorなどがある。 しかし逆はどうだろう。圧縮されたJavaScriptを逆に見やすいソースコードに展開しなおすツールがあってもいい。自身が作成したソースコードの整形や、Webページで利用されているJavaScriptソースコードの解析に利用できる。ここではそんなツールとしてEinars "elfz" Lielmanis氏の開発した「JS Beautifier」を紹介したい。 整形前のJavaScriptソースコード JS Beautifierで
[JS]タブ型インターフェイスに特化したライブラリ -Yetii
Yetii - Yet (E)Another Tab Interface Implementation Yetiiのスクリプトは、わずか4KBの軽量スクリプトで、CSS・JavaScriptオフ時への対応、自由なクラス名の設定、タブの順番の入れ替え、タブの自動遷移、複数タブの設置などに対応しています。 ※動作には、PrototypeやjQueryなど他のスクリプトは必要ありません。
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
JavaScriptでの画像プレビュー自由自在「PopBox」:phpspot開発日誌
PopBox! - Javascript Image Magnification PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page.JavaScriptでの画像プレビュー自由自在「PopBox」。 ページ内の画像をクリックするとページ内でそのまま、アニメーションしながら拡大。 PopBoxを使えば、そんな効果を実装することが可能です。 拡大だけではなく、比率の変更や、画像の移動、画像の縮小を行うことも出来ます。 凄く軽くて使いやすいです。もう、別ページで画像を拡大させるのは古い、と言われてしまうのかもしれませんね。
jQuery history plugin - Ajaxアプリで戻るボタンを押したときに、操作前の状態に戻すためのjQueryプラグイン: ある SE のつぶやき
jQuery history plugin - Ajaxアプリで戻るボタンを押したときに、操作前の状態に戻すためのjQueryプラグイン history plugin jQuery history pluginは、Ajaxアプリケーションで戻るボタンを押したときに、操作前の状態に戻すことができるjQueryのプラグインです。 この動作は、イベント発生時に履歴にURLを追加しておいて、戻るボタンが押されたときは、ブラウザのキャッシュを利用して操作前の状態に戻すという感じでしょうか？ 操作中にブラウザのキャッシュがクリアされたらどうなるんだろう？ そう思ってサイトを確認してみたら、キャッシュをクリアしてから戻るボタンを押してもうまく表示されていました。 うーん。URLに画面の状態を持っておくとうまくいくのだろうか。。。 ちょっと動作原理が分かりませんが、なかなかおもしろそうなライブラリですね。
JavaScript クロスブラウザに関するメモ - とみぞーノート
IEとFireFoxでのJavaScript(と言うか主にDOMまわり)の挙動の違いに関するメモ書き 1.ウィンドウ/ドキュメント関連 1.1 ドキュメントの幅,高さの取得 IE6 document.body.scrollWidth document.body.scrollHeight NN6,FireFox document.width document.height FireFox12ではdocument.width,heightはundefinedになる。 https://dev.mozilla.jp/2011/06/firefox6-backward-compatibility/ によると、このプロパティは標準化されなかったので、FireFox6以降で削除された模様。 かわりに、以下のようにしてサイズを取得できる。 parseInt(window.getComputedStyle(
JavaScriptを利用してGoogle Analyticsを賢く活用する
高性能な機能をもつGoogle Analytic Google Analyticsは、ここで説明するまでもありませんが、Googleが提供するアクセス解析サービスです。基本的には無料で、しかもかなり高機能なサービスを利用できるため、非常に注目されていて、Google Analyticsのみをあつかった書籍も発売されているほどです。このツールは、もともとは「Urchin」というツールとして有料で提供されていたものを、Googleが買収し、無料で利用できるようにしたものです。 Google Analyticsでは、単にそれぞれのページのアクセス数だけではなく、複数のページにわたる移動や、一連の作業（たとえばユーザー登録や商品の購入など）をするに当たり、どれだけの人が行動を始め、そのうちのどれだけが途中で断念し、どれだけの人が最後まで作業を完了できたか、といった特定の行動にフォーカスした解析も行
JavaScript、FLASHのイメージギャラリーまとめ15個ほど*ホームページを作る人のネタ帳
今回は過去のホームページを作る人のネタ帳にて、まとめの一部として使われていたイメージギャラリーを主役にまとめました。 JavaScript系はブログでも使う事が出来たりしますので、お時間のあるときにでもお試しください。 （Flashに一点追加しました） CSSJavaScript Photo Sliderライブラリ。 滑らかなスライドを実装できます。CSSデザインである為、デザインのカスタマイズも可能。 ダウンロードページ 商用利用の場合は29ドルだけど、非営利の場合は無料で使える。 テキストが表示されているところもポップアップするので試してみると楽しいです。 ダウンロードページ 正確にはギャラリーではないですが、虫眼鏡による画像のビューア。 FLASHではないところがまた乙。重いのが難点か・・・。 ダウンロードページ こちらも虫眼鏡。地味に2つの機能がある。 クリックしながら右にドラッグ
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌
Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi
[JS]さまざまなエフェクトを持つ角丸を実装できるスクリプト -ShadedBorder
画像を使用しないで角丸を実装するスクリプトはたくさんありますが、このShadedBorderは角丸にさまざまな効果を与えて実装することができるスクリプトです。 ShadedBorder - JavaScript Round Corners with Drop Shadow ShadedBorderの実装は、ダウンロードした「shadedborder.js」を外部ファイルとして指定し、下記のようなコードでシンプルな角丸が実装できます。 head箇所 <script type="text/javascript" src="shadedborder.js"></script> <style type="text/css" media="screen"> #simple{padding:10px;} </style> body箇所 <div id="simple"> <p>角丸のサンプル</p>
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
MOONGIFT: » JavaScriptによる多彩なグラフライブラリ「LT Diagram Builder」:オープンソースを毎日紹介
Webページ上でグラフを描くというと、各種画像生成ライブラリを利用するだろうか。画像は手軽な反面、ダイナミックな生成ができず面倒な場合がある。 ダイナミックに描画を変更できると言えば、JavaScriptが便利だろう。そのようなニーズではこれを試してみよう。 今回紹介するオープンソース・ソフトウェアはLT Diagram Builder、JavaScriptベースのグラフ生成ライブラリだ。 LT Diagram Builderが対応しているのは棒グラフ、折れ線グラフ、関数グラフ、矢印、円グラフ、ガントチャート等多彩な描画に対応している。 ダイナミックな描画にも対応しており、関数の値を変更すれば、即座にグラフに反映する事ができる。JavaScriptの強みだろう。 また、PHPやASPでのグラフ生成にも対応している。結果的に出力されるのはJavaScriptのようだが、サーバサイドのデータを
ウノウラボ Unoh Labs: Ext.js入門: Grid編
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
WEB制作者の為のベストエントリ38個まとめ-part4*ホームページを作る人のネタ帳
ライブラリ・WEBツール FancyForm - Javascript checkbox replacement チェックボックスをオシャレに変換する。 見飽きたチェックボックスを変更するだけで、少し違った印象を与える事が出来るかも？ （前に紹介した気もしますが念のため） Popular Online Generators | Tech Magazine 過去に話題になったWEB2.0系の画像を自動生成するWEBジェネレータまとめ。 アップした写真をお洒落に見せるJavaScript 写真風に自動変換してくれる便利なJavaScriptライブラリ。 Gigazinize: あなたのブログ，GIGAZINEのようにします 自動でブログ文章に見合った画像を探してくるサービス。 後継のGigazinize Tools - Image: Making up your Blog（あなたのブログに選り
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]フォームのセレクトボックスを装飾するスクリプト -jquery combobox
ウェブでかっこいいグラフを描くためのライブラリやらテクニックやらのまとめ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
Site Under Maintenance
[JS]テーブルのセルをハイライトさせる -tablecloth.js