テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル:phpspot開発日誌
A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』 – creamu
DiaryTechnology あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』 あのかっこいいサイトのAjaxを取り入れたい。 そんなあなたにおすすめなのが、『60 More AJAX- and Javascript Solutions For Professional Coding』。あのサイトのAjax、Javascriptを実装するための方法60選だ。 ↑はCoda Popup Bubbles。 クールなポップアップメッセージが表示される。 » iCarousel carouselを作るためのオープンソース（フリー）Javascript » Product Slider スライダーで商品を選択できるインターフェース » Oversize
これは便利! JavaScriptの勉強はこのコンテンツで - Eloquent JavaScript | エンタープライズ | マイコミジャーナル
Eloquent JavaScript Eloquent JavaScriptというタイトルのもとでJavaScriptに関する情報が公開されている。同コンテンツの作成はMarijn Haverbeke氏の手によるもの。プログラミングの簡単な紹介からJavaScriptを使ったプログラミングの勘どころが丁寧にまとまっている。JavaScriptの仕様を解説するスタイルではなく、実際に必要になる処理や間違いやすい部分について取り上げながら説明がおこなわれている。JavaScriptを使ったプログラミングを実施するすべてのデベロッパに一読をお薦めしたいコンテンツだ。Eloquent JavaScriptの目次は次のとおり。 Introduction Basic JavaScript: values, variables, and control flow Functions Data stru
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」:phpspot開発日誌
InnerFade with jquery InnerFade is a small plugin for the jQuery-JavaScript-Library. 要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」。 スライドショーのように、要素内がアニメーションしながら切り替わるパーツが作れます。 便利なのは、画像が切り替わった際に、画像からのリンク先も切り替わる点。 実際には、次のように、ul 要素内の li を順にアニメーションするという仕様になっているようで、その実装も簡単です。 <ul id="portfolio"> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"> <img src="images
タブ型でスライドアニメーションするパネルＵＩを作れる「Coda-Slider」:phpspot開発日誌
Coda-Slider 1.1.1#5 タブ型でスライドアニメーションするパネルＵＩを作れる「Coda-Slider」。 次のように、タブ型で、タブをクリックでページがアニメーション遷移するＵＩが作れます。 ページ左右の、＜＞ボタンでもページ遷移させることが出来ます。 ちょっとしたウェブ上のプレゼン資料なんかに使うと見やすくていいかもしれませんね。
【Adobe Spry TIPS】 アコーディオン
【Adobe Spry TIPS】 アコーディオン Spryにはウィジェットとして様々な機能が提供されています。 そのうちの１つが『アコーディオン』です。 アコーディオンとはクリックで、コンテンツを開いたり閉じたりする特徴的なUIになります。 この機能を使うには、まず、widgetsディレクトリ内のaccordionディレクトリ内のSpryAccordion.jsをhead要素などで読み込みます。 また、addLoadListenerを利用する為、SpryDOMUtils.jsも読み込んでおきます。 <script type="text/javascript" src="./widgets/accordion/SpryAccordion.js"></script> <script type="text/javascript" src="./includes/SpryDOMUtils.js"
javascript - パスワードを確認するbookmarklet : 404 Blog Not Found
2007年11月24日15:30 カテゴリLightweight LanguagesTips javascript - パスワードを確認するbookmarklet これの改良版です。 アスタリスクで隠されたパスワードを確認する方法 通常、このようなフォーム内のパスワード部分に入力した文字は盗み見防止のため、「********」のようなアスタリスクになって文字が隠されるようになっていますが、しばしば、この入力したパスワードを確認したい状況になる場合も少なくありません。 ブックマークレット: Check Password ソース: javascript:(function(){ var F=document.getElementsByTagName('input'), a=[]; for (var i=0,l=F.length;i<l;i++){ if(F[i].type.toLowerCas
圧縮ツールの逆、JavaScriptの整形ツール - JS Beautifier登場 | エンタープライズ | マイコミジャーナル
軽快なWebページを実現するにはYSlowなどの分析ツールを使って問題点を洗い出し、対策をとる方法が便利だ。軽快化にはいくつもの方法があるわけだが、なかでももっとも簡単で基本的な方法がページで使っているCSSやJavaScriptのコードを圧縮することである。すでに圧縮ツールとしてはJSMinやDojo compressor、YUI Compressorなどがある。 しかし逆はどうだろう。圧縮されたJavaScriptを逆に見やすいソースコードに展開しなおすツールがあってもいい。自身が作成したソースコードの整形や、Webページで利用されているJavaScriptソースコードの解析に利用できる。ここではそんなツールとしてEinars "elfz" Lielmanis氏の開発した「JS Beautifier」を紹介したい。 整形前のJavaScriptソースコード JS Beautifierで
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
よみがえる | ZEROFACES
概要 よみがえるはウェブサイトのフォームの内容を保存、復元するツールです。 製作の動機 お問い合わせ等のフォームに入力した内容を誤って消してしまい、また一から入力し直している時のあの残念な感じを撲滅しよう！ 仕様 保存したフォームの内容があれば復元してから保存を開始します 5秒ごとに、前回保存した内容と異なれば保存します 5分に一度は必ず保存します 保存したフォームの内容はページを離れて１０分間保存します 課題 5秒ごとの保存のため完全な保存、復元ができていない 強制的に復元するためUIで復元するか問うべきか？ ダウンロード よみがえる(yomigaeru.zip) ファイル構成 WWWサーバで公開するファイル yomigaeru.js 各種ライブラリと本体を読み込むためのブートストラップ yomigaeru_main.js よみがえる本体 prototype.js クロスブラウザ対応用
ページが崩壊していく効果を演出するJavaScript「meltdown.js」:phpspot開発日誌
HTML崩壊 meltdown.js - KAZUMiX memo まずは軽いページでお試しください。例えば Google とか。ページが崩壊していく効果を演出するJavaScript「meltdown.js」。 動かしてみるとビックリな効果が得られます。 ライブラリとしても公開されているようなので、リンククリック後に画面崩壊なんてことをしてみると訪問者への驚き効果として何か使えるシーンがあるかもしれません。 是非一度試してみましょう。
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を使えば、そんな効果を実装することが可能です。 拡大だけではなく、比率の変更や、画像の移動、画像の縮小を行うことも出来ます。 凄く軽くて使いやすいです。もう、別ページで画像を拡大させるのは古い、と言われてしまうのかもしれませんね。
[JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider 1.1
Coda-Slider 1.1は、先日紹介したCoda-Slider 1.0からバージョンアップをした、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Coda-Slider 1.1 Coda-Slider 1.1 デモ Coda-SliderはjQueryのプラグインで、1.1の主な改良点は下記のようになっています。 jQuery 1.2への対応 IE6, 7でタブを早くクリックした場合のバグ スクリプトオフへの対応(<noscript>) YouTubeなどの動画のバグ preloaderの採用 タブと矢印以外にもスライドするリンクを設置可能 参考： スムーズに切り替わるタブ型コンテンツ -Coda-Slider
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/03/form-design-2.html
[JS]にょきっと表示されるツールチップのスクリプト | コリス
ユーザーが2～3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
